NP-HD2IP マトリックススイッチャ Webアプリ
- iPad で NP-HD2IP を制御する Web アプリです
- Onsen UI をUI部品ライブラリとして使用 しています
- 10 x 10 マトリックスと、8個のプリセットコマンドボタンを 1ページに配置しています
- ApplicationCache として実装。Safari で表示後に「ホーム画面に 保存」することにより、ネイティブアプリと同様な動作が可能です
- サーバーサイドロジックは一切なし。全てクライアントサイドで動作 します
- PC の Web ブラウザでファイルとして読み込んでも動作します。 Chrome ブラウザ等のデベロッパーツールを利用すると変更時の デバッグに有効です
- アプリケーションキャッシュの削除を考慮してゲストウインドウ で実行することをお勧めします
- Chrome ブラウザの右上3点メニューの「その他のツール」 「デベロッパーツール」を選択
- デベロッパーツール画面左上の左から2個めのアイコンを クリックすると Web ページ表示の一番上でiPadの表示 エミュレーションができます(device toolbar)
- デベロッパーツールのコンソール画面にプログラムの動作状況が 表示されます
プログラムの登録・実行
- 送受信機のいずれかの一台にプログラムを登録する必要があります
- 本 README.html を含む zip ファイルをすべて展開します
- mk-tarball.sh を実行してアーカイブ
hd2ip-matrix.tgz
を作成し ます。実行方法はこの文書の後半を参照してください
- 対象機器の http://IPアドレス/usr/up.html に Web ブラウザで アクセスしてアーカイブを指定してアップロードします
- 対象機器の http://IPアドレス/ のSystem Tab,Utilities,Console API Command にて、
save_wwwusr
と入力して Apply ボタンを 押します
- 制御用 iPad の Safari で対象機器の http://IPアドレス/usr/index.html または、 http://IPアドレス/usr/dark.html にアクセスします
- Safari のオプション機能で「ホーム画面に保存」します
以後は、ホーム画面のアイコンでアプリとして起動可能となります。
index.html
Webアプリ本体です。
ローカルファイルとしてWebブラウザで読み込んでも動作します。
Chrome ブラウザのデベロッパーツールの「device toolbar」で、iPad を選べば実際のレイアウトでデバッグ可能です。
dark.html
暗いテーマカラーです。
index.html
との差分は、一部のcssファイルのみです。
top.html
index.html
とdark.html
をオプション付きでリンクしています。 iOS 風と Android 風の UIに変更する方法を例示しています。
config.js
設定ファイルです。
カスタマイズをする場合はこのファイルを notepad.exe 等のテキスト エディタで編集してください。
- 送受信機のIPアドレス。送信機のチャンネル番号
- 送受信機のIPアドレスのホスト部分の数字は連続していること を前提とします
- IPアドレスとチャンネルの指定は、送信機1と受信機1の物を 指定してください
- 送信機の数の変更。上限は10個
- 入力ボタンの名前の変更
- 出力グループの数の変更。上限は10個
- 同じ入力切り替えを指示できる複数の受信機を「グループ」として扱い、 複数の受信機の入力切り替えを同時におこなうことが可能です。
- 通常の場合はグループ内にひとつの受信機のみなので、 「出力グループ」は、「出力」のことになります
- 出力グループボタンの名前の変更
- プリセットコマンドボタンの名前の変更
- プリセットコマンドボタンの名前文字列を空にするとボタン そのものを消すことができます。
- プリセットコマンドボタンの動作定義
送受信機に対して発行可能なコマンドの詳細は、下記製品ページの コマンドガイドを参照してください。
https://arvanics.com/m-01-napa-hw/np-hd2ip-tr/
配布物では config-base.js
と同じ内容となっています。
config-base.js
何もカスタマイズしていない状態の設定ファイルです。
- 入出力それぞれ 10個としています
- プリセットボタンでは、番号に応じた OSD を全ての受信機に表示 させています
- プリセットの1と2では、同期・非同期それぞれの呼び出しかたの 違いを例示しています。詳細はソースコードのコメントを参照ください
Chrome ブラウザのデベロッパツール等でコンソールログを見ながら 動作を確認してください。
config-example.js
種々のカスタマイズを実施した設定ファイルの例です。
- 送信器6台、受信器7台の構成としました
- 各種ボタンのラベルを変更しています
- プリセットボタンから様々なコマンドを発行しています
- 入力切替のパターン3種類
- ウォール構成・解除
- 全送信器からHPD (ソース機器に対してケーブル抜き差し相当)
- 全送受信機再起動
- 受信器1からシリアルデータ出力
- リレー機器制御
hd2ip-matrix.png
「ホーム画面に保存」した場合のアイコンとなります。
hd2ip-matrix.js
ロジック本体です。
変更する場合はご自身の責任でおこなってください。
hd2ip-matrix.appcache
アプリケーションキャッシュのマニフェストファイルです。
html や js を更新した際にあわせてこのファイルの中身を更新しないと 端末にキャッシュされたhtml/css/JavaScript が更新されないので、 注意が必要です。
後述の mk-tarball.sh
を実行するとファイルの最後のコメント部分が 更新されます。
mk-tarball.sh
ファイル群をアーカイブする(一つのファイルにまとめる)シェル スクリプトです。
アーカイブとして、hd2ip-matrix.tgz
が生成されます。
送受信機に登録(アップロード)する際には事前にアーカイブする 必要があります。
macOS(OS X) や Linux であればコマンドラインコンソールで そのまま実行できます。
Windows の場合は cmd.exe コンソールで、
> busybox.exe sh mk-taball.sh
とすれば実行できます。
Windows用のbusyboxは、https://frippery.org/busybox/
から入手可能です。
ダウンロードのリンクは、 ページ中盤の "The latest version is always busybox.exe" という文中にあります。
zip ファイルの全てを展開したフォルダーに busybox.exe を置けば、 ファイルエクスプローラーで mk-taball.bat をダブルクリックしても 実行できます。
busybox.exe の置き場所は、PATH に含まれていれば他の場所でも かまいません。
Windows 10から利用可能な WSL (Windows Subsystem for Linux) でも ご利用いただけます。
LICENCE.txt
ライセンス情報を記述しています。
発行元
株式会社アルバニクス
info@arvanics.com
046-259-6920
Ver.1.0.0 (c) 2019 Arvanics Corporation