ryotankの備考録日記

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

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

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

EWRNアプリ_データ入力画面1_CSS調整無しver
EWRNアプリ_データ入力画面2_CSS調整無しver
EWRNアプリ_データ入力画面3_CSS調整無しver

なので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;
}

出来栄えはこんな感じ

EWRNアプリ_データ入力画面1_CSS調整済ver

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


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

svgからpng変換その7

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

#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のイメージ図画面レイアウト用

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

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

svgからpng変換その6

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

#画面レイアウトに従いレイアウトを作り込む
#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ファイルのみ表示されていた

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

svgからpng変換その5

原因を探るともにサムネイルを作成する機能を廃止する

サムネを作成する機能を付ける予定だったが
調べてみると難易度が高めだったため廃止する

このsvgからpngに変換するツールで
重要なのは
1.ファイルを選択出来る事
2.svgからpngに変換出来る
3.別名で保存出来る
という3つなので、

サムネイルを作成するというのは、オプションに過ぎない

では、原因を探っていく

分からない・・・
なので、特定の拡張子のみを選択する仕方を勉強する
それからプログレスバー(進捗状況をリアルタイムで見れる)を
GUI上に表示するのは現時点では難しいので
これをポップアップで通知する形をとる

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

減量管理入力補助GUIその16

カラムを使ったGUIを試しに書いてみた

import PySimpleGUI as sg

# Column layout
# カラム1
col1 = [
	#運動回数入力欄
	
]

 #カラム2
    col_2 = [
        #グラフ領域
	[sg.Canvas(size=640,480), key='-CANVAS_1-')],
	
]

layout = [
	#上部カラム
	[
		sg.Coulm(col1,vertical_alignment='True'),
		sg.Column(col_2, vertical_alignment='True', justification='True')
	],

	#下部カラム
	[
		sg.T(size=45,5), key='-M-BOX1-', backgroud_color='black'),
		sg.Multiline(size=45,5), key='-M-BOX2-'),
		sg.Button('ファイルを開く'), sg.T(' '*20),
		sg.Button('グラフを表示'), sg.T(' '*20),
		sg.Button('PDF生成')
	]

]

これらをlayoutに格納して、要素を任意の位置で表示させる

次回は、このレイアウト通りにGUIを作ってみる

工具管理GUIその12

try-exept構文が完成した

また作っていくうちにテーブルが増えたので併せて掲載する

sqlite3-工具管理テーブル リニューアルver
SQLite3-工具内訳テーブル
工具内訳テーブルの実例

完成したものはこれ

try:
	#tool_itemテーブルの定義
	ddl = """
	CREATE TABLE tool_item
	(
	  model_number INTEGER PRIMARY KEY,
	  number_of_prossessions INTEGER NOT NULL,
	  manufacture_name TEXT NOT NULL UNIQUE,
	  remarks TEXT NOT NULL UNIQUE
	);
	"""
	# SQLの発行
    	c.execute(ddl)
	#tool_dataテーブルの定義
	ddl = """
    CREATE TABLE tool_data
    ( 
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        class_tool TEXT NOT NULL UNIQUE,
        item_code INTEGER NOT NULL,
        model_number INTEGER,
	number_of_possessions INTEGER NOT NULL
        FOREIGN KEY(model_number) REFERENCES tool_item(model_number)
    );
    """
    # itemテーブルへリファレンスデータの登録
    c.execute(ddl)
    c.execute("INSERT INTO tool_item(manufacture_name,remarks) VALUES('日本アルミット', '非塩素ヤニ入り半田');")
    c.execute("INSERT INTO tool_item(manufacture_name,remarks) VALUES('Pro'skit', 'ワイヤーストリッパー');")
    c.execute("INSERT INTO tool_item(manufacture_name,remarks) VALUES('ホーザン', '竹製のピンセット');")
  c.execute("INSERT INTO tool_item(manufacture_name,remarks) VALUES('サンハヤト', 'DIP型ICの足をそろえる道具');")
    c.execute("COMMIT;")
except:
    pass

という風に書ける

次回は、SQL文を作成したり、データベースとGUIの連結などを試す

回路草案入力フォームその25

Flask(フラスク)はAnacondaをインストールした時に自動的に
インストールされていたので、今回はpip installの操作はいらなかった

記述出来たら、コマンドプロンプトかターミナルを開いて
app.pyを保存した場所にカレントディレクトリを移動する

移動出来たら以下を実行する

実行する事で、Flaskのwebサーバーが立ち上がり、ブラウザからアクセス出来る
要になる

set FLASK_APP=board_draftinput_app.py
flask run

ウェブブラウザを立ち上げ、以下のアドレスを記述する

http://localhost:5000/

画面上に表示されれば成功

アプリを終了する場合は、コマンドプロンプトまたはターミナルで
CTRL+Cを押す

次回は、毎回アプリを実行する度にコマンドプロンプト画面に
切り替えるのも煩わしいので、pyファイルを直接実行する形で
サーバー立ち上げたい