svgからpng変換その4
フレームの境界線を分かりやすくするver3.0を作成する
また追加機能としてファイルを選択を行うsg.FileBrowseという
エレメントを使ってファイルを選択出来る様にした
またSVGファイルは「circuit_svg」というフォルダに保存し、
そこからファイルを選んでこれるようにした。
#画面レイアウトに従いレイアウトを作り込む #2022-7-20作成 #Frameの位置はpadで調整する #leftにも50mm移動させるとうまくいった #4.0では、svgだけの名前を取得し、選択できる様にする #デスクトップにある「circuit_svg」というフォルダにkicadで作成した回路図やパターン図のsvgを保存している #選択できる用にするにはリストボックス from contextlib import closing import PySimpleGUI as sg left=10 right=00 top=10 bottom=10 left2=120 right2=120 top2=20 bottom2=20 sg.theme('LightGreen3') frame1_layout =[ [sg.Text('変換したい回路図.svg')] ] frame2_layout =[ [sg.Text('pngになった回路図.png')] ] layout = [ [sg.T()], [sg.Text('circuit_svgフォルダから変換したいSVGファイルを選択して下さい', font=20)], [sg.T()], [sg.Text('ファイル名'), sg.InputText(key="-INPUT1-", font=18)], [sg.T('')], [sg.T(' '*30), sg.FileBrowse(button_text="ファイルを選択", key="-FILE-", target="-INPUT1-", font=26)], [sg.T('')], [sg.Frame(title='変換したいsvgのサムネ', layout=frame1_layout, pad=((left, right),(top, bottom)), border_width=6, relief=sg.RELIEF_SOLID), sg.T(' '*10), sg.Button('停止', key="-STOP-", button_color='black', font=16), sg.T(' '*10), sg.Button('変換を実行', key="-START-", font=16)], [sg.Text('変換処理のステータス表示', font=18)], [sg.ProgressBar(key="-PROCESSING-", size=(30, 30), max_value=100)], [sg.Text('実行後にファイルがpngに変換されます', font=20)], [sg.Frame(title='pngファイルのサムネイル', relief=sg.RELIEF_SOLID, layout=frame2_layout, pad=((left2, right2),(top2, bottom2)), element_justification='center', border_width=6, tooltip='生成に成功すればサムネが表示されます')], [sg.T('')], [sg.FileBrowse('別名で保存', enable_events="-BET-", button_color='red', file_types=("PNGファイル","*.png"), size=(14,1), font=24)], [sg.T('')] ]
実際の感じはこう
だが、SVGファイルを選べないという不具合が発生
次回は、原因を探るともにサムネイルを作成する機能を廃止する
SVGからPNG変換GUIその3
フレーム要素を中央に配置したver2.0を作っていく
「変換を実行」や「停止」ボタンも必要になる
フレーム要素の位置を調整するには
padを使う
pad =((left, right),(top, bottom))
で
簡単に調整出来るみたい
#sg.Frameの位置を移動させる left=10 right=20 top=30 bottom=40 sg.Frame(title="Frame1", layout=frame_layout, pad=((left, right), (top, bottom)))
右に移動させたいのでrightの位置を50mmとか
110mm移動させればよい
ちなみにtopだと上方向
bottomだと下方向という風になる
それを踏まえて今回は右に50mm移動させる
実際のコードは
#ver2.0ではFrameの位置を中央に寄せる #Frameの位置はpadで調整する #右側に50mm移動させるはずだったがうまくいかない #leftにも50mm移動させるとうまくいった from contextlib import closing import PySimpleGUI as sg left=10 right=00 top=10 bottom=10 left2=50 right2=50 top2=20 bottom2=20 sg.theme('LightGreen3') frame1_layout =[ [sg.Text('変換したい回路図.svg')] ] frame2_layout =[ [sg.Text('pngになった回路図.png')] ] layout = [ [sg.T()], [sg.Text('変換したいSVGファイルを選択して下さい')], [sg.Button('ファイルを選択', font=16, key="-FILE-CHO-")], [sg.Frame(title='変換したいsvgのサムネ', layout=frame1_layout, pad=((left, right),(top, bottom))), sg.T(' '*10), sg.Button('停止', key="-STOP-", button_color='black', font=16), sg.T(' '*10), sg.Button('変換を実行', key="-START-", font=16)], [sg.Text('変換処理のステータス表示', font=18)], [sg.ProgressBar(key="-PROCESSING-", size=(30, 30), max_value=100)], [sg.Text('実行後にファイルがpngに変換されます', font=20)], [sg.Frame(title='pngファイル', layout=frame2_layout, pad=((left2, right2),(top2, bottom2)))], [sg.T('')], [sg.Button('別名で保存', key="-BET-", button_color='red')], [sg.T('')] ]
実行するとこんな感じに
次回は、フレームの境界線を分かりやすくするver3.0を作る
SVGからPNG変換GUIその2
作り込む為に画面レイアウトを見やすくした
これに沿ってツールを作成していく
出来たのがこれ
あとフレーム要素は画面の中央に寄せたい
#画面レイアウトに従いレイアウトを作り込む #2022-7-19作成 #ver2.0ではFrameの位置を中央に寄せる from contextlib import closing import PySimpleGUI as sg sg.theme('LightGreen3') frame1_layout =[ [sg.Text('回路図.svg')] ] frame2_layout =[ [sg.Text('pngになった回路図.png')] ] layout = [ [sg.T()], [sg.Text('変換したいSVGファイルを選択して下さい')], [sg.Button('ファイルを選択', font=16, key="-FILE-CHO-")], [sg.Frame(title='変換したいsvgのサムネ', layout=frame1_layout)], [sg.Text('変換処理のステータス表示', font=18)], [sg.ProgressBar(key="-PROCESSING-", size=(30, 30), max_value=100)], [sg.Text('実行後にファイルがpngに変換されます', font=20)], [sg.Frame(title='pngファイル',layout=frame2_layout)], [sg.T('')], [sg.Button('別名で保存', key="-BET-", button_color='red')], [sg.T('')] ] def gen_bytes_count(filepath): import os # Total Bytes filesize = os.stat(filepath).st_size count = 0 # NOTE: バイト数カウントのためバイナリで開いてます # テキストで開いた場合、文字数 != バイト数(ファイルサイズ) と一致しません with open(filepath, "rb") as infile: for line in infile: count += len(line) yield (int(100*count/filesize), count) task = None options = {} timeout_options = {"timeout":100, "timeout_key":"-timeout-"} def task_cancel(): global task task = None options.clear() def task_start(filepath): global task task = gen_bytes_count(filepath) options.update(timeout_options) with closing(sg.Window('svgをpngに変換ツールver1.0', layout)) as window: while True: event, values = window.read(**options) # print(event) if not event: break elif event == "-STOP-": task_cancel() elif event == "-START-": task_start(values["-INPUT-FILE-"]) elif event == "-timeout-": if not task: # 処理するファイルが無い時 continue info = next(task, None) if not info: # ファイル処理が終わった時 task_cancel() continue status, count = info window["-PROCESSING-"].update_bar(status) sg.Print(status, count) ret = sg.OneLineProgressMeter( 'Byte カウンター', status, 100, "", '{}'.format(count)) if not ret: # 進捗ダイアログの Cancel が押された時 task_cancel() continue
まずは、フレーム要素を中央に配置したver2.0を作っていく
SVGからPNG変換GUIその1
経緯としては、自前のWEBアプリで
基板設計記録をしていく上で
回路図やパターン図、3D完成イメージをpngで投稿出来る
ものを鋭意作成中であるが、
KICADという基板設計CADだと画像出力がPDF、SVG、DXF形式でしか
出力されないという問題があったので、
SVGで画像を出力して、そのSVGをPNGに変換するツールを作る事にした
まずは、変換前のイメージ図
次に変換中のイメージ図
最後に変換終了後のイメージ図
これらに沿ってGUIを作成する
外見を作り込んだ後にそれぞれの機能を作り込んでいく
基板設計記録WEBアプリその35
views.pyの続き
削除画面を作成する
削除画面はDeleteViewを使って作成する
ポイントはtemplate_nameフィールドに対応するテンプレートを
設定し、削除するデータに対応するモデルを
modelフィールドに与える事
削除確定ボタンを押した後は、一覧画面(PDR_list)に
遷移する(移動する)ように設定する。
削除した後のリダイレクト先(新しいURLに転送する仕組み)を
リスト画面(一覧画面)へ遷移する為、
success_ful = "リスト画面へ遷移するような関数"となり
クラスベースビューのクラス変数として書くので
reverse_lazyを使う為
コードはこのような形になる
またテンプレートファイルを"PDR_data_delete.html"にする
#削除画面 class PDRDelete(DeleteView): #pdr_dataテーブルと連携 model= models.pdr_data #テンプレートファイル連携 template_name = "PDR_data_delete.html" #削除した後のリダイレクト先 success_full = reverse_lazy("app:list")
ちなみにDjangoでは、"モデルを実装する事"で自動でテーブルを作成する
なので、変更があった場合には
models.pyにコードを記述する
次回は、詳細画面を作る
基板設計記録WEBアプリその34
views.pyのフォーム2から3までを作成する
まずフォーム2から
部品候補名の情報が詰まった「spec1(最大25まで連番)_data」テーブルを使いたい
基板を設計する時に使うであろう
部品候補名をまとめた「parts_data」テーブルを使いたい
フォーム2の入力項目は、
部品候補名1から5までの仕様、メーカー名、通販コード、
価格、購入先を入力する
これらをコード化すると
#入力フォーム2画面 class PDRCreateView2(CreateView): #parts_dataとspec1_dataとspec2_data、spec3_data、spec4_data #spec5_dataテーブルと連携 model = models.parts_data, model = models.spec1_data, model = models.spec2_data, model = models.spec3_data, model = models.spec4_data, model = models.spec5_data #入力項目を定義する #部品候補名1 fields = ("candidate_part_name_1", "part_candidate_name_1_specification", "manufacturers_name_of_candidate_part_name_1", "mail_order_code_of_candidate_part_name_1", "price_of_candidate_part_name_1", "where_to_by_candidate_part_name_1", #部品候補名2 "candidate_part_name_2", "part_candidate_name_2_specification", "manufacturers_name_of_candidate_part_name_2", "mail_order_code_of_candidate_part_name_2", "price_of_candidate_part_name_2", "where_to_by_candidate_part_name_2", #部品候補名3 "candidate_part_name_3", "part_candidate_name_3_specification", "manufacturers_name_of_candidate_part_name_3", "mail_order_code_of_candidate_part_name_3", "price_of_candidate_part_name_3", "where_to_by_candidate_part_name_3", #部品候補名4 "candidate_part_name_4", "part_candidate_name_4_specification", "manufacturers_name_of_candidate_part_name_4", "mail_order_code_of_candidate_part_name_4", "price_of_candidate_part_name_4", "where_to_by_candidate_part_name_4", #部品候補名5 "candidate_part_name_5", "part_candidate_name_5_specification", "manufacturers_name_of_candidate_part_name_5", "mail_order_code_of_candidate_part_name_5", "price_of_candidate_part_name_5", "where_to_by_candidate_part_name_5") #テンプレートファイル"PDR_data_form2.html"と連携する template_name = "PDR_data_form2.html"
という感じ
同じようにフォーム3にもチャレンジする
pdr_dataテーブルと連携する
フォーム3の入力項目は、基板修正点、回路図画像データ、
パターン図画像データ、3D完成イメージ画像データの4つにする
#入力フォーム3画面 class PDRCreateView3(CreateView): #pdr_dataテーブルと連携する model = models.pdr_data #入力項目を定義する fields = ("board_modification_points", "schematic_thumb", "pattern_thumb", "graphic_thumb") #テンプレートファイル"PDR_data_form3.html"と連携する template_name = "PDR_data_form3.html"
部品候補名を入力する所はシンドイな・・・
次回は、削除画面と詳細画面を作る
