2022-09-09

電子工作作業報告書その56

電子工作作業報告書管理　EWRN

登録内容確認ページで
1から10までの項目を本来の入力したデータを表示させる様に
コードを変えていく予定だったが、

モデルの作成が必要だと判明したので

データベースの正規化をEWRN2用に書き換えて

そこからモデル定義書を作成し、それをもとにモデル作成をする

モデルの項目としては以下のような内容に
・作業名
・分類
・気付いた事
・作業内容
・備考
・作業日
・登録日
・状況写真
・使用した工具
・使用したソフト
・使用した部品

次回は、実際に上記のテーブルの書き出しから正規化までを作成する

2022-09-08

電子工作ヒヤリハットのWEBアプリ作成その1

電子工作ヒヤリハット

作成経緯として昨今のヒヤリハットが
原因で死亡事故や事故になったケースが多いので、
電子工作でもこれが原因で回路が動かないや
プログラムが動作しないなど起きそうな事が起こりそうなので作成しようと思った

しかし、現在開発途中のEWRN(電子工作作業報告書WEBアプリ)に
新しく組み込むか単独でWEBアプリにするか迷う

組み込むならばデータベースから組み直す必要が
出てくる

悩みどころではあるが。。どうするかな

2022-09-04

電子工作作業報告書その55

CSS 電子工作作業報告書管理　EWRN

登録内容確認ページについて紹介する

これは、データ入力1から3までに入力した各データに
間違いが無いかを確認したがために作成したページ

見た目として表形式で表示させる

CSS無しverだとこんな感じに

CSSで調整するとこんな感じになる

/* EWRN登録内容確認画面のCSS 2022-9-2作成
ボタンは作業日のinputより左下に配置 */


/* "登録しますか"のテキスト位置調整 */
.data_text {
    position: absolute;
    left: 250px;
    top: 20px;
    transform: translateX(-25%);
}


/* 詳細表の位置調整 */
.details_table {
    width: 20%;  /* 横幅 */
    margin: 115px auto; /* 上下115px 左右auto */
}


/* "報告する"ボタンの位置調整 */
.btn {
    position: relative;
    left: 1300px;
    top: 130px;
}

/* "新規登録へ戻る"ボタンの位置調整 */
.form1_backbtn {
    position: relative;
    left: 430px;
    top: 130px;
}


/* カーソルを乗せた時の見た目*/
button:hover {
    background-color: #7706da;
}

次回は、1から10までの項目を本来の入力したデータを表示させる
ようにコードを変えていく

2022-09-03

電子工作作業報告書その54

CSS 電子工作作業報告書管理　EWRN

今回は、フォーム2と3のCSSが完成したので、
適用後の見た目とCSSのコードを載せる

/* EWRN入力画面2のCSS 2022-8-19作成
ボタンは作業日のinputより左下に配置

*/

/* プログレスバー */
.js-progress-bar2 {
    position: absolute;
    width: 100%;  /* 横幅 */
    z-index: 1;
    left:50px;
    
}

/* 気付いた事のテキスト */
.ton_t {
    position: absolute;
    left: 15%;
    transform: translateX(-25%);
}

/* 気付いた事の複数行フォーム */
.textarea_b5 {
    position: relative;
    left: 50%;
    transform: translateX(-25%);
    border-color: #da0622;
    outline: none;
}

/* 状況写真のテキスト */
.sp_t {
    position: relative;
    left: 10%;
    top: 20px;

}

/* 作業日のテキスト */
.wk_t {
    position: relative;
    left: 270px;
    top: 70px;
}

.workday {
    position: relative;
    left:150px;
}

/* "入力欄クリア"ボタンの位置調整*/
.clearbtn {
    position: relative;
    left: 130px;
    top: 130px;
}

/* "入力3へ"ボタンの位置調整*/
.form3_nextbtn {
    position: relative;
    left: 430px;
    top: 130px;
    
}

/* "一覧へ戻る"ボタンの位置調整*/
.listbtn {
    position: relative;
    left: 280px;
    top: 130px;
}


/* カーソルを乗せた時の見た目*/
button:hover {
    background-color: #7706da;
}

フォーム3の画面CSS

/* EWRN入力画面3のCSS 2022-9-1作成
ボタンは作業日のinputより左下に配置
*/

/* プログレスバー */
.js-progress-bar3 {
    position: absolute;
    width: 100%;  /* 横幅 */
    z-index: 1;
    left:50px;
    
}

/* 使用した工具のテキスト */
.used_tools {
    width: 1400px;
    text-align: center;
}

/* 使用した工具の複数行フォーム */
.textarea_b6 {
    text-align: center;
}

/* 工具入力欄にカーソルがある時だけ色を変える */
.textarea_b6:focus { 
    background-color: #da0622;
    border: 2px solid #26af11;
}

/* */
.used_software{
    width: 1400px;
    text-align: center;
}

/* 使用したソフトの複数行入力フォーム */
.textarea_b7 {
    text-align: center;
}

/* */
.used_parts{
    width: 1400px;
    text-align: center;
}

/* 使用した部品の複数行入力フォーム */
.textarea_b8 {
    text-align: center;
}

/* "入力欄クリア"ボタンの位置調整*/
.clearbtn3{
    position: relative;
    left: 40px;
    
}

/* "内容確認"ボタンの位置調整*/
.reg_detail_nextbtn {
    position: relative;
    left: 1070px;
    
}

/* "一覧へ戻る"ボタンの位置調整 */
.listbtn {
    position: relative;
    left: 380px;
    
}

/* カーソルを乗せた時の見た目*/
button:hover {
    background-color: #7706da; /* 紫色 */
}

以前よりだいぶ見栄えが良くなった

次回は、登録内容確認ページについて紹介する

余談だが、回路CADのライブラリパーツを確認するのに
わざわざ、回路CADを開いてライブラリパーツを確認してというのが
面倒なので専用データベースを作りたい　GUIを検討している

2022-08-19

電子工作作業報告書その53

CSS 電子工作作業報告書管理　EWRN

今現在のフォーム1,2,3の画面はこのようになっている

なのでCSSを使って画面のデザインを修正した

現時点ではフォーム1を修正した

/* data_form用のcss
flexアイテムは縮小しないので追加する
firefoxで要素がつぶれる場合はflex-shrinkを追加する事で解決出来る
*/

text {
    margin: center;
    flex-shrink: 0;
}

textarea {
    width: 300px;
    text-align: center;
    flex-shrink: 0;
}

button {
    margin: 35px;
    flex-shrink: 0;
}


/* カーソルを乗せた時の見た目*/
button:hover {
    background-color: #7706da;
}

出来栄えはこんな感じ

フォーム2と3は後日直す

次回はフォーム2と3のCSSを作成しデザインを整える

2022-08-06

svgからpng変換その7

SVGからPNG変換GUI

ポップアップで通知するメッセージリストを作成する

#svgからpng変換用ポップアップで通知test.py
#4種類用意する ポップアップで通知する際にはタイトルを付ける　フォントサイズを17くらいにする
#フォントは「小塚ゴシック」にするのを共通とする


#1.変換中　背景色は青で、「'選択されたファイル名'を変換処理中です」とメッセージ

#2.変換終了　背景色は緑

#3.変換エラー　背景色は薄い赤色

#4.ファイルが選択されていない警告メッセージ 背景色は黄色

import PySimpleGUI as sg

sg.popup_error('何らかが原因でエラーが発生しました', background_color='pink', text_color='black',
                font='小塚ゴシック 17', title='変換エラー')

sg.popup_ok('変換が終了しました \n確認して下さい', background_color='green', text_color='black',
                font='小塚ゴシック 17', title='変換終了')

sg.popup_ok('ファイルが選択されていません', background_color='black', font='小塚ゴシック 17', 
                title='警告')

sg.popup_ok('ファイルを変換中です。\nしばらくお待ち下さい', background_color='blue', 
                font='小塚ゴシック 17', title='変換中')

ついでにプログレスバー無し、サムネ生成機能を廃止した
ver6.0のイメージ図が出来上がったので掲載する

イメージ図に沿ってレイアウトを形成していく

次回は、ver6.0をイメージ図通りに作っていく

2022-08-05

svgからpng変換その6

SVGからPNG変換GUI

今回は、実際に特定の拡張子のみを選択する仕方を作成する

#画面レイアウトに従いレイアウトを作り込む
#2022-7-20作成

#4.0では、svgだけの名前を取得し、選択できる様にする
#デスクトップにある「circuit_svg」というフォルダにkicadで作成した回路図やパターン図のsvgを保存している

#ファイル選択時にsvgのみ表示させる

import PySimpleGUI as sg

sg.theme('LightGreen3')

layout = [
    [sg.T()],
    [sg.Text('circuit_svgフォルダから変換したいSVGファイルを選択して下さい',
        font=20)],
    [sg.T()],
    [sg.Text('ファイル名', font=17), sg.InputText(key="-INPUT1-", font=18)],
    [sg.T('')],
    [sg.T(' '*30), sg.FileBrowse(button_text="ファイルを選択", key="-FILE-", 
    target="-INPUT1-", font=26, file_types=(("Svg ファイル", "*.svg"),))],
    [sg.T('')],
    [sg.Button('停止', key="-STOP-", button_color='black', font=16),
                sg.T(' '*10), sg.Button('変換を実行', key="-START-", font=16)],
    [sg.Text('実行後にファイルがpngに変換されます', font=20)],
    [sg.T('')],
    [sg.FileBrowse('別名で保存', enable_events="-BET-", button_color='red', 
    file_types=("","*.png"), size=(14,1), font=24)],
    [sg.T('')]
]

window =sg.Window('svgをpngに変換ver4.0(ファイル選択時にsvgだけを取得する)', layout)

while True:
    
        event, values = window.read()
        # print(event)
        if not event:
            break

window.close()

フォルダには、SVGファイルとDXFファイルが
保存されていたが、選択ボタンをクリックすると
SVGファイルのみ表示されていた

次回はポップアップで通知するメッセージリストを作成する

ryotankの備考録日記

趣味の電子工作についての備考録などなど

電子工作作業報告書その56

電子工作ヒヤリハットのWEBアプリ作成その1

電子工作作業報告書その55

電子工作作業報告書その54

電子工作作業報告書その53

svgからpng変換その7

svgからpng変換その6