LED調光を、WEBからの調光と外付けのボリューム)からの調光を切り替えできる様にする。
概要:
WEB の画面に REMOTE/LOCAL のラジオコントロールを付け、REMOTE 時は WEB からのスライダーで調光し、LOCAL時は 外付けボリュームで調光する。
LOCAL 時は WEB画面の設定 ボタン等はグレーアウトさせる。
また、LOCAL 時の ボリューム設定値を WEB 画面に表示させる。
ボリューム設定値の表示は javascript で LOCAL時に定期的に XHR で 設定値を GETする。
REMOTE から LOCAL に遷移した時、ボリュームの値を '0' に戻すまでは ボリュームからの値を取得しない様にする。
以下に、例を示す。(長くなってきたので、別ウィンドウで開く)
例(スケッチ、
HTML、レスポンス用HTML )( 2019/01/22 :
IE で brightness value が期待通り更新されなかったため、行#68,88 修正。
修正点は、下記覚書参照。)
WEBからの調光は LED調光_スライダーで明るさを調整 2
ボリュームでの調光は LED調光_外付けのボリュームで調整
を参照。
以下、変更部分の覚書等:
--- < スケッチ > ---
( 行# 26-29 )
remote/local 切り替え用の変数定義。
local_val , remote_val : ラジオボタンの チェック指定用。
チェックする方に "checked" を設定。
local : 'true' の時 local, 'false' の時 remote
localen : 'true' の時 ボリュームの値を取得
( 行# 116-133 )
ラジオボタンを押された時の処理。
local の時は、local を true にし、Ticker で割り込み処理を開始し、local_val に "checked" をセットする。
remote の時は local,localen を false にし、Ticker の割り込み処理を停止(detache) し、remote_val に "checked" をセットする。
( 行# 134-136 )
ボリューム設定値の更新処理。XHR のレスポンスを行うように設定。
( 行# 168-173 )
本体HTML送信の変数部分の置換処理。local, remote の "checked" の文字列を設定。
( 行# 220,223-224 )
割り込みでの処理時 (local の時のみ発生) 、ボリュームが 0 になったら、localen を true にして 以降、ボリュームの値を 反映させる様にする。
--- < HTML本体 > ---
全体的に 構成 (STYLE) を見直し、各要素の配置を修正。
( 行# 21-28 )
ラジオボタンを配置。
local と remote のどちらにチェックを付けるかは 変数にしてスケッチで設定。
ラジオボタンが押された場合は disp_ctrl (行# 98-115) が呼ばれ、グレーアウトの処理を行う。
( 行# 29-33 )
LEDの明るさを表示する為の output を 設置。ボリューム設定値はここに反映。
( 行# 56 )
ボリューム値のポーリング用オブジェクトを定義。
( 行# 68 )
スライダー操作時の XHR 応答で 行#29-33 の output にも 値を反映。
* 2019/01/22: IEで反映できなかったため、修正。 ...value → ...innerHTML
( 行# 79-96)
ボリューム値ポーリング用 XHR 設定。
スライダー操作時の XHR と同様に行う。
応答の値は 行#29-33 の output に 反映。
* 2019/01/22: IEで反映できなかったため、行#88 修正。 ...value → ...innerHTML
( 行# 98-115)
ラジオボタンがクリックされたときに、グレーアウトの処理 (リモート用の要素の disable/enable) を行う。
また、local 時は ポーリング処理を開始し、remote 時は ポーリング処理を停止する。ポーリング処理は setIntervalを使用してで 100ms間隔で行う。
( 行# 117-133)
HTML読み込み完了時に local か remote かを 判別して グレーアウト処理、ポーリング処理の開始/停止を行う。
0 件のコメント:
コメントを投稿