国内経済の急速な発展に伴い、人々の安全に対する要求はますます高まっています。次のような事態が起こらないようにするために、セキュリティ システムの導入を検討する必要があります。 証拠と手がかりの提供: 多くの工場、銀行、盗難、事故では、関係機関がビデオ情報に基づいて事件を検出できます。これは非常に重要です。手がかり。紛争や事故も発生しており、ビデオ録画により関係者の責任が容易に判明します。 民間防空のコストが高い：現在、多くの場所で警備員を雇うことは月に800ドルで、1日3交代で勤務するのに比べて年間4万元近くかかる。電子セキュリティ機器のコストは決して安くはなく、数年以内に電子セキュリティ機器を交換する必要性は低くなります。したがって、民間防空のコストは比較的高くなります。民間防空支援: 多くの場合、安全を確保するために完全に人に頼ることは非常に困難であり、より完璧にするためには電子セキュリティ機器 (モニターや警報器など) の支援が必要です。特別な場合に使用する必要があります。過酷な条件下（高温、低温、密閉など）、肉眼ではっきりと観察することが難しい、または単に人が滞在するのに適さない環境であるため、電子セキュリティ装置を使用する必要があります。隠蔽：電子セキュリティ機器を使用すると、一般の人は自分たちが常に監視されているとは感じなくなり、隠蔽されます。 24 時間のセキュリティ保証: 24 時間中断のないセキュリティ要件を達成するには、電子機器を考慮する必要があります。遠隔監視：コンピュータ技術とネットワーク技術の発展により、多くの企業リーダーがインターネットを介して世界中の支店の状況をリアルタイムで監視できるようになり、遠隔監視や映像の閲覧が可能になりました。タイムリーに状況を理解すること。画像の保存: デジタル ビデオ技術の発展により、画像をコンピュータのデジタル ストレージ デバイスに保存できるようになり、より鮮明な画像で長期間保存できるようになります。生産管理：管理者は生産現場の状況をタイムリーかつ直感的に把握でき、指揮・管理が容易になります。
中国では監視システムの需要が大きいことから、今回は監視システムのフロントエンド部分の作成方法を紹介します。
http://www.hightopo.com/demo/metro/demo2.html ページに入り、inspect 要素を右クリックしてサンプル ソース コードを表示します。
この例の動的効果は次のとおりです。
まず基本的なシーンを構築しましょう。HT では、外部シーンを内部にインポートする非常に一般的な方法は、JSON ファイルを使用してシーンを構築することの利点の 1 つは、今日のシーンは Drawn です。 JSONを使用して。次に、HT は ht.Default.xhrLoad 関数を使用して JSON シーンをロードし、HT でカプセル化された DataModel.deserialize(json) を使用してそれを逆シリアル化し、逆シリアル化されたオブジェクトを DataModel に追加します。
ht.Default.xhrLoad('demo2.json', function(text) { var json = ht.Default.parse(text); if(json.title) document.title = json.title;//JSON ファイルのタイトルを変更するグローバル変数タイトルに割り当てられますdataModel.deserialize(json);//graphView.fitContent(true);//変換トポロジをズームしてすべてのグラフィック要素を表示します。つまり、すべての要素を表示します。});HT では、データ型オブジェクトが構築されると、内部で id 属性が自動的に割り当てられます。この属性は、data.getId() および data.setId(id) を通じて取得および設定できます。id 値は変更できません。 Data オブジェクトが DataModel に追加された後、dataModel.getDataById(id) を使用して Data オブジェクトをすばやく検索できます。通常、ID 属性は HT によって自動的に割り当てられることが推奨されます。Data#setTag(tag) 関数を使用すると、対応するデータを動的に変更できます。オブジェクトは DataModel#getDataByTag(tag) を通じて見つけることができ、 DataModel#removeDataByTag(tag) を通じて Data オブジェクトの削除をサポートします。ここでは、JSON で Data オブジェクトのタグ属性を設定し、コード内の dataModel.getDataByTag(tag) 関数を通じて Data オブジェクトを取得します。
var fan1 = dataModel.getDataByTag('fan1');var fan2 = dataModel.getDataByTag('fan2');var Camera1 = dataModel.getDataByTag('camera1');var Camera2 = dataModel.getDataByTag('camera2');var Camera3 = dataModel.getDataByTag('camera3');var redAlarm = dataModel.getDataByTag('redAlarm');var yellowAlarm = dataModel.getDataByTag(' yellowAlarm');以下の図の各ラベルに対応する要素を作成しました。
次に、回転およびフラッシュする必要があるオブジェクトを設定します。HT は、オブジェクトの現在の回転角度を取得することで、この角度に基づいて特定のラジアンを追加し、setInterval を通じて定期的に呼び出します。したがって、特定の時間間隔内で同じ円弧を回転できます。
setInterval(function(){ var time = new Date().getTime(); var deltaTime = time - lastTime; var deltaRotation = deltaTime * Math.PI / 180 * 0.1; lastTime = time; fan1.setRotation(fan1.getRotation( ) + deltaRotation*3); fan2.setRotation(fan2.getRotation() + deltaRotation*3); カメラ1.setRotation(カメラ1.getRotation() + deltaRotation/3); カメラ2.setRotation(カメラ3.getRotation() + deltaRotation/3); if (時間 - stairTime > 500) { stairIndex--; (stairIndex < 0) { stairIndex = 8; } stairTime = time; } for (var i = 0; i < 8; i++) {//類似した要素がいくつかあるため、設定したタグ名は似ていますが、は 1、2、3 に置き換えられるので、for ループを使用して var color = stairIndex === i ? '#F6A623' : '#CFCFCF'; を取得します。 dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color); (new Date().getSeconds() % 2 === 1) { yellowAlarm.s('shape.background', null); redAlarm.s('shape.background', null); } else { yellowAlarm.s('shape.background', ' yellow'); redAlarm.s('shape.background', 'red'); );HT は、スタイルを設定するための setStyle 関数もカプセル化します。これは s と省略できます。特定のスタイルについては、HT for Web スタイルのマニュアルを参照してください。
for (var i = 0; i < 8; i++) {//似たような要素があるため、設定したタグ名も似ていますが、後で 1、2、3 に変更されるため、for ループを使用しますvar color = stairIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);}また、警告灯の点滅のタイミング制御も行います。偶数秒の場合は、ライトの背景色を無色に設定します。それ以外の場合は、赤色アラームの場合、黄色に設定します。 、赤に設定されています。
if (new Date().getSeconds() % 2 === 1) { yellowAlarm.s('shape.background', null); redAlarm.s('shape.background', null);}else { yellowAlarm.s ('shape.background', ' yellow'); redAlarm.s('shape.background', 'red');}この例全体はとても簡単に解決されました。 。 。
要約する上記は、編集者が紹介した HTML5 Canvas に基づくショッピング モールの監視例の詳細な説明です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。 。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！