今日の内容は多少長くなっていますが、個人的には割とインパクトがあるのではないかと思っています。最後までおつきあい頂けたら幸いです。
タッチパネルの作画は皆さん得意でしょうか？
ゼロから作成するのは極まれでしたが、変更等はちょくちょくする事がありした。
が、正直私は得意ではありませんでした。
はっきりとした理由は分らないのですが、きっと様々なビューを渡り歩いて設定するので、頭の中で関係がうまく整理できていないためではないかという気がします。
また、位置を合わせるのも数ドット合わないのにいらいらしたり…
irBoardはどうかというと、やはりさくさくと作って行ける感じまでには至ってないと思います。
できるだけ簡略化しようと試みてますが、機能が増えると複雑化してきて、使い易くなっているとは言いがたいと思います。
また、現在は1つの部品しか選択できず、複数部品を一括で変更ができないので繰り返し同じ設定をするには不向きです。
こういう事を踏まえて、設定がテキストで一覧できて、それが画面に反映できればというのは常々考えていました。
それが、ようやく形として仕上がり、CSVファイルで画面を構成できる様になりました。
irBoardをインストールした時のサンプルプロジェクト(下図)を
CSVファイルで表現したのが、下になります。少々見づらいですが、クロスリファレンス的な使い方もできると思います。
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 1 column, instead of 4 in line 1.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| project | |
| name,launch_page_no,style,transition | |
| 三菱電機サンプル,0,irPanel,push | |
| page | |
| page_no,class,title,background_color_name,locked,right_page_no | |
| 0,Page,,,0,1 | |
| page::items | |
| class,x,y,width,height,style,title,alternate_title,line_width,corner_radius,padding,shape,lamp_negative,interlock_negative,switch_device_name,switch_mode,switch_negative,title_for_button,device_name,alternate_text_color_name,lamp_color_name,page_no | |
| Button,348.83456,110.45094,264.46851,197.45245,irPanel,モーメンタリー,,1.0,0,0,rectangle,0,0,M0,momentary,0,0,,,, | |
| Label,8.5006714,17.991219,1000.0703,78.483154,,ページ0 - ボタン,デバイスONで反転時タイトルになります,1.0,0,0,rectangle,,,,,,,M0,"RGBA,1.0,0.0,0.0,1.0",, | |
| Button,37.481705,101.45531,264.46851,197.45245,irPanel,押してください,押されました,1.0,0,0,rectangle,0,0,M0,momentary,0,0,,,, | |
| Button,54.978043,395.31186,264.46851,197.45245,Square,スタイル四角,,1.0,0,0,rectangle,0,0,M0,momentary,0,0,M0,,"RGBA,0.0,1.0,1.0,1.0", | |
| Button,369.82431,371.32358,250,250,Circle,スタイル円,,1.0,0,0,rectangle,0,0,M0,momentary,0,0,M0,,"RGBA,1.0,0.0,0.0,1.0", | |
| Button,674.17578,116.448,264.46851,197.45245,irPanel,オルターネイト,押されました,1.0,0,0,rectangle,0,0,M0,alternate,0,0,,,, | |
| Button,678.67352,366.82574,250,250,Touch,スタイルタッチライト,,1.0,0,0,rectangle,0,0,M0,momentary,0,0,M0,,"RGBA,1.0,1.0,0.0,1.0", | |
| Label,167.42313,645.04541,691.22113,107.96194,,2本指でフリックするとページが変わります,,1.0,0,0,rectangle,,,,,,,,,, | |
| Button,897.46411,633.69543,120,120,Square,▶︎,,1.0,0,0,rectangle,0,0,,momentary,0,0,,,"RGBA,0.0,0.0,0.0,0.0",1 | |
| page | |
| page_no,class,title,background_color_name,locked,left_page_no,right_page_no | |
| 1,Page,,,0,0,2 | |
| page::items | |
| class,x,y,width,height,style,title,alternate_title,line_width,corner_radius,padding,shape,device_name,alternate_text_color_name,coefficient,decimal_place,editable,number_type,code_reader,min_value,max_value,min_value_device_name,max_value_device_name,bar_code_expression,lamp_color_name,lamp_negative,interlock_negative,switch_mode,switch_negative,title_for_button,page_no | |
| Label,12.998474,13.493416,1000.0704,78.483154,,ページ1 - 値,"",1.0,0,0,rectangle,M0,"RGBA,1.0,0.0,0.0,1.0",,,,,,,,,,,,,,,,, | |
| ValueField,588.71747,116.44803,370.37778,93.47583,,,,1.0,0,0,rectangle,D0,,1.0,0,0,1,0,,,,,,,,,,,, | |
| Label,167.42313,645.04541,691.22113,107.96194,,2本指でフリックするとページが変わります,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,, | |
| Button,12.896011,638.19324,120,120,Square,◀︎,,1.0,0,0,rectangle,,,,,,,,,,,,,"RGBA,0.0,0.0,0.0,0.0",0,0,momentary,0,0,0 | |
| ValueField,588.71747,231.89166,370.37778,93.47583,,,,1.0,0,0,rectangle,D2,,1.0,0,1,0,0,,,,,,,,,,,, | |
| Label,261.87701,136.46262,299.91217,66.488998,,編集不可,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,, | |
| Label,264.87555,241.41135,299.91217,66.488998,,編集可,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,, | |
| ValueField,488.26654,350.3338,469.32947,93.47583,,,,1.0,0,0,rectangle,D4,,1.0,0,1,11,1,,,,,\d+,,,,,,, | |
| Label,24.992767,361.35278,434.84619,90.47728,,BAR/QRコードから読み取りができます,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,, | |
| ValueField,585.71893,479.27087,373.37631,93.47583,,,,1.0,0,0,rectangle,D5562,,1.0,0,1,0,0,0.0,2.0,,,,,,,,,, | |
| Label,38.486115,494.7876,524.80231,79.982407,,指定ページに移動します,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,, | |
| Button,897.46411,633.69543,120,120,Square,▶︎,,1.0,0,0,rectangle,,,,,,,,,,,,,"RGBA,0.0,0.0,0.0,0.0",0,0,momentary,0,0,2 | |
| page | |
| page_no,class,title,background_color_name,locked,left_page_no | |
| 2,Page,,,0,1 | |
| page::items | |
| class,x,y,width,height,style,title,alternate_title,line_width,corner_radius,padding,shape,device_name,alternate_text_color_name,lamp_color_name,lamp_negative,interlock_negative,switch_mode,switch_negative,title_for_button,page_no,background_color_name,line_color_name,coefficient,decimal_place,editable,number_type,code_reader,min_value,max_value,min_value_device_name,max_value_device_name,bar_code_expression,step_value,step_value_device_name,vertical,unit | |
| Label,12.998474,13.493416,1000.0704,78.483154,,ページ2 - スライダー/プログレスバー,"",1.0,0,0,rectangle,M0,"RGBA,1.0,0.0,0.0,1.0",,,,,,,,,,,,,,,,,,,,,,, | |
| Label,167.42313,645.04541,691.22113,107.96194,,2本指でフリックするとページが変わります,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,,,,,,,, | |
| Button,12.896011,638.19324,120,120,Square,◀︎,,1.0,0,0,rectangle,,,"RGBA,0.0,0.0,0.0,0.0",0,0,momentary,0,0,1,,,,,,,,,,,,,,,, | |
| Label,38.486115,494.7876,524.80231,79.982407,,指定ページに移動します,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,,,,,,,, | |
| SteppedValueField,632.69104,474.77295,292.4158,101.97946,Slider,,,1.0,0,10,rectangle,D5562,,,,,,,,,"RGBA,0.0,1.0,1.0,1.0","RGBA,0.5,0.5,0.5,1.0",1.0,0,1,0,0,0.0,2.0,,,,1.0,,false, | |
| SteppedValueField,176.85506,231.89149,292.4158,101.97946,Slider,,,1.0,0,10,rectangle,D0,,,,,,,,,"RGBA,0.0,1.0,1.0,1.0","RGBA,0.5,0.5,0.5,1.0",1.0,0,1,1,0,-100.0,100.0,,,,10.0,,false, | |
| Label,41.48465,229.41724,120,94.468506,,-100,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,,,,,,,, | |
| Label,483.76868,220.42163,82.518295,94.468506,,100,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,,,,,,,, | |
| ValueField,209.89755,144.483,194.96338,77.976608,,,,1.0,0,0,rectangle,D0,,,,,,,,,,,1.0,0,0,1,0,,,,,,,,, | |
| SteppedValueField,794.55341,129.94128,179.9707,248.90771,Slider,,,1.0,0,10,rectangle,D0,,,,,,,,,"RGBA,0.0,1.0,1.0,1.0","RGBA,0.5,0.5,0.5,1.0",1.0,0,0,1,0,-100.0,100.0,,,,10.0,,true,"" | |
| Label,654.68524,293.88577,120,94.468506,,-100,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,,,,,,,, | |
| Label,675.67499,137.9619,85.51683,70.480225,,100,,1.0,0,0,rectangle,,,,,,,,,,,,,,,,,,,,,,,,, | |
| plc | |
| class,provider,model | |
| QPlc,MITSUBISHI,Q | |
| plc::config | |
| monitor_interval,button_default_delay,area_permission,area_to_plc_screen_no,area_to_plc_status,area_from_plc_screen_no,area_from_plc_status | |
| 0.299999952316284,0,D5550,D5560,D5561,D5562,D5563 | |
| plc::plc_channel | |
| class | |
| PlcMockChannel | |
| plc::plc_channel::config | |
| ip_or_hostname,port_no | |
| 192.168.0.10,5010 | |
CSVファイルなのでExcelでデバイスやタイトルの変更が簡単にできますね。
PLCの変更があった場合もPLC設定やデバイスを変更する事で機種変更ができます。
多言語化もCSVに書き出してタイトルを他言語で書き替えて戻すだけとすごく簡単に実現できる様になりました。他言語化はiPad上でどの様にユーザーインターフェイスを持たせるかを考えると、なかなか実現できそうにありませんでしたが、思わぬ副産物です。
エンコーディングはUTF-8になっているので、Windowsの場合はメモ帳等で変換が必要になります。
プログラミング言語(Rubyを使いました)を使用して書き出す事もできます。
7、8行目の行列の数を変更するだけで簡単に個数を変更できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # -*- coding: utf-8 -*- | |
| screen_width = 1024 | |
| screen_height = 768 | |
| page_no = 3 | |
| col = 4 | |
| row = 5 | |
| w = screen_width / col | |
| h = screen_height / row | |
| i = 0 | |
| puts <<EOB | |
| page | |
| page_no | |
| #{page_no} | |
| page::items | |
| EOB | |
| header = %w(class x y width height style device_name title) | |
| puts header.join "," | |
| col.times do |x| | |
| row.times do |y| | |
| a = ["Button"] | |
| a << x * w | |
| a << y * h | |
| a << w | |
| a << h | |
| a << "Square" | |
| a << "M#{i}" | |
| a << "ランプ#{i + 1}" | |
| puts a.join "," | |
| i += 1 | |
| end | |
| end | |
| puts "" |
これで出力された結果は下です。
上で書き出したのと少々違って見えますが、必要な箇所のみの記述で良いので、問題ありません。
We can make this file beautiful and searchable if this error is corrected: It looks like row 5 should actually have 1 column, instead of 8 in line 4.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| page | |
| page_no | |
| 3 | |
| page::items | |
| class,x,y,width,height,style,device_name,title | |
| Button,0,0,256,153,Square,M0,ランプ1 | |
| Button,0,153,256,153,Square,M1,ランプ2 | |
| Button,0,306,256,153,Square,M2,ランプ3 | |
| Button,0,459,256,153,Square,M3,ランプ4 | |
| Button,0,612,256,153,Square,M4,ランプ5 | |
| Button,256,0,256,153,Square,M5,ランプ6 | |
| Button,256,153,256,153,Square,M6,ランプ7 | |
| Button,256,306,256,153,Square,M7,ランプ8 | |
| Button,256,459,256,153,Square,M8,ランプ9 | |
| Button,256,612,256,153,Square,M9,ランプ10 | |
| Button,512,0,256,153,Square,M10,ランプ11 | |
| Button,512,153,256,153,Square,M11,ランプ12 | |
| Button,512,306,256,153,Square,M12,ランプ13 | |
| Button,512,459,256,153,Square,M13,ランプ14 | |
| Button,512,612,256,153,Square,M14,ランプ15 | |
| Button,768,0,256,153,Square,M15,ランプ16 | |
| Button,768,153,256,153,Square,M16,ランプ17 | |
| Button,768,306,256,153,Square,M17,ランプ18 | |
| Button,768,459,256,153,Square,M18,ランプ19 | |
| Button,768,612,256,153,Square,M19,ランプ20 | |
上の三菱電機サンプル.csvの最後に追加するだけで1ページ分追加でき、irBoardに読込ませるだけで済みます。
こんな画面ができました。
irBoardについて少し興味をもたられましたサポートページ(下のリンク)もご覧頂けたらと思います。
