node.jsのサーバーとmongoDBでサーバーサイドまで繋がったので、その先のクライアントサイドの実現方法を考えていきます。
UIをHTMLでベタに書いていくのはありえないのでUI定義ファイルを設計します。
まず最初にどんなUIにするのか仮決めします。一度パスが通るところまで作ってしまってから気に入らなければ修正する方針で行きます。
初めてなので色々と想定できていない事があると思うので、とりあえず一度作ってみるのが手っ取り早いですよね。
ざっと要件を考えます。
・全体のステータスを表示するメインページ
・部屋ごとにまとめて表示
・制御できるものに関しては選択すると制御用のボタンが出てくる
・TVはon/off/volume+/volume-/選局のボタン
・エアコンはモード切り替え/温度選択/offのボタン
・温湿度のグラフページ
・3日分くらい表示
・ログの確認ページ
・状態の変化、コマンドの記録
・デバイスの動作状況の確認ページ
・各コントロールモジュールの電源電圧と動作状況
といったところを表示します。
最終的に作ったUIのメインページはこのような感じです。
UI定義ファイルは最終的にjavascriptで扱うのでJSONで記述します。
最初は部屋を定義します。
この後のItemの定義で使用するroomと表示用のlabelを定義しています。
Itemとは上のUIの1行ごとの部分を指しています。
この定義は上のUIのグレーになっている部分のタイトルなどに使用されます。
"RoomList": [
{ "room": "all", "label": "全体"},
{ "room": "living", "label": "リビング"},
{ "room": "kitchen", "label": "キッチン"},
{ "room": "bathroom", "label": "浴室"},
{ "room": "bedroom", "label": "寝室"},
{ "room": "studyroom", "label": "書斎"}
],
"ItemList": [
{
"room": "all",
"label": "玄関",
"status": [
{"label": "玄関錠", "sensor": "entrance_key_stat"}
],
"buttons": [
{"label": "open", "command": "entrance_key_open"},
{"label": "close", "command": "entrance_key_close"}
]
},
最初にroom:でallを指定しているのでUI上は全体の項目の中に配置されています。
次のlabelはこのItemの項目名として表示されているものです。
status arrayの中はCloseと表示されている状態表示の定義です。
この中のlabelはsensorのための表示用ラベルですがここのUIでは使用していません。
後にGraph等の中で必要になるかもしれないので定義しています。未定義の場合はroom.label+item.labelとみなされます。
button arrayの中はこのItemを選択した時に出てくるボタンを定義しています。下が玄関Itemを押すと出てくる制御用のボタンです。
次のItemは制御部分が無くstatusが2つあるものの定義です。
{
"room": "all",
"label": "室内1F/2F",
"status": [
{"label": "室内1F温度", "type": "temp", "sensor": "internal_1f_temp"},
{"label": "室内2F温度", "type": "temp", "sensor": "internal_2f_temp"}
]
},
今のところtemp,humidity,pir,rainと設定なしの5種類があります。
次はエアコン用のitemです。
{
"room": "study room",
"type": "aircon",
"label": "エアコン",
"status": [
{"type": "temp", "sensor": "studyroom_aircon_temp"},
{"sensor": "studyroom_aircon_stat"}
],
"commandPrefix": "studyroom_aircon_",
"buttons": [
{"label": "off", "command": "off"}
]
},
typeでairconであることを指定しています。これはモード切り替え、温度切り替えのために特殊処理があるためairconであることを指定します。 statusは温度とエアコンの状態を表示しています。commandPrefixは送信コマンドの前に追加する文字列を指定していて、この後出てくるAirconListで指定しているコマンドと合わせることで送信するコマンドを決定します。これはエアコン自体のコマンドは同じものだけどコントロールモジュールが違うのでエアコン毎にprefixを付けたい場合に付加します。
buttonsでモード切り替え、温度切り替え、送信ボタン以外のボタンを定義します。ここではOffボタンだけです。
エアコンを選択すると下の状態になります。
ここでcoolerの所を上下にスライドするとモードが切り替わります。
さらに温度の所を上下にスライドすることで温度設定を変更できます。
このカルーセルの動作の度にリモコンコードが出てしまうと煩わしいので決めた後にsendボタンで送信するようにしています。
カルーセル自体のUI設定はItemListの中ではなく別途AirconListの中で定義しています。
"AirconList": [
{ "label": "auto", "color": "#404040",
"command": [
{ "label": "auto", "commandSuffix": "auto" }
]},
{ "label": "cooler", "color": "#2586d9",
"command": [
{ "label": "18℃", "commandSuffix": "cooler_18" },
： 途中省略
{ "label": "29℃", "commandSuffix": "cooler_29" },
{ "label": "30℃", "commandSuffix": "cooler_30" }
]},
{ "label": "heater", "color": "#d93625",
"command": [
{ "label": "18℃", "commandSuffix": "heater_18" },
： 途中省略
{ "label": "28℃", "commandSuffix": "heater_28" },
{ "label": "29℃", "commandSuffix": "heater_29" }
]}
],
{
"room": "living",
"type": "tv",
"label": "ＴＶ",
"commandPrefix": "",
"buttons": [
{"label": "on", "command": "tv_on"},
{"label": "off", "command": "tv_off"},
{"label": "vol+", "command": "tv_vup"},
{"label": "vol-", "command": "tv_vdn"}
]
},
commandPrefixはエアコンの時と同じです。
buttonsにon, off, vol+, vol-を指定しています。
TVの場合はこれらのボタンと選局のカルーセルが現れます。
TV局名の所を上下にスライドすることで選局できます。
TVの選局リストは下記のように定義しています。
"TVChCommandList": [
{ "label": "ＮＨＫ−Ｇ", "commandSuffix": "tv_1" },
{ "label": "ＮＨＫ−Ｅ", "commandSuffix": "tv_2" },
{ "label": "日テレ", "commandSuffix": "tv_4" },
{ "label": "テレビ朝日", "commandSuffix": "tv_5" },
{ "label": "ＴＢＳ", "commandSuffix": "tv_6" },
{ "label": "テレビ東京", "commandSuffix": "tv_7" },
{ "label": "フジテレビ", "commandSuffix": "tv_8" },
{ "label": "TOKYO MX", "commandSuffix": "tv_9" },
{ "label": "放送大学", "commandSuffix": "tv_12" }
]
今回はここまで。
0 件のコメント:
コメントを投稿