Web SCADAシステムの最初のステップ。 AngularJSを使用してブラウザーを活気づける

今日は、SVGやJavaScriptなどのテクノロジーを使用して、ブラウザーでテクノロジーオブジェクトのニーモニックダイアグラムを表示する方法について説明します。



取得するものについて説明します。

• 模倣物がブラウザで開きます。 グラフィック-SVG。
• 模倣の上部には、他の模倣に切り替えるためのボタンがあります。
• データは1秒に1回更新されます。
• スイッチ画像をクリックすると、ウィンドウが表示され、そこからオンまたはオフにできます。

SCADAシステム （より正確には、サーバー部分）を使用すると、カスタムhtmlページを追加できます。 手動でページコードを入力することはしませんが、 エディターで簡単な図を描画してから、何が起こったのか、どのように機能するのかを示します。



ニーモニック図は次のとおりです。







電力と電流はI_10_111



それぞれ変数P_10_111



とI_10_111



ます。 スイッチのオン状態は赤い長方形（緑の長方形の下に隠れています）に結び付けられ、緑では無効になっています。



回路を保存し、サービスを再起動し、ブラウザで127.0.0.1を開くと、次の結果が得られます。







ブラウザでCtrl + uを押し、ページのソースコードを参照します（添付されていない行は省略されます）。





順番に分析しましょう：

 <script src="./js/jquery.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jqueryを接続します。

 <script src="./js/jquery-ui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ダイアログを有効/無効にするためにjquery-uiを有効にします：

 <script src="/js/angular.min.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

angularjsを接続します：

 <script src="/js/scada.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

補助スクリプトを接続します。



次に、コントローラーを作成します。 all.jsonファイルから変数の値を取得し、ページをロードするときにサーバーから1秒に1回の頻度で要求します

  $interval(function(){ },1000);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

all.jsonファイルが正常に要求されると、次を実行します。





データの更新。 成功しなかった場合、上部に「サーバーへの接続がありません！」というメッセージが表示されます。 label_err



。





jsonファイルは次の形式である必要があります。

 { "val":{ "V_10_111": "0", "I_10_111": "55.88", "P_10_111": "9.11" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

SVGファイルをページ本文に直接埋め込みます。

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 930 504" xml:space="preserve"> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テキストボックスに、変数I_10_111の値を次のように表示します。





ここでの主なものは、エントリ{{val.I_10_111}}.



Angularjs自体がこのようなレコードを検索し、値をI_10_111に置き換えます。



オン状態は赤いボックスに表示されます。





opacityプロパティは、format_onフィルターが適用された変数V_10_111に依存します。 値が1の場合、四角形が表示されます（不透明度：1）。 値が0の場合、長方形は見えません（不透明度：0）。 状態が未定義の場合（これは、Jsonファイル "V_10_111"の疑問符で示されます： "??"）、format_onフィルターを使用すると0、つまり 長方形は見えません。



無効状態は緑色の長方形で表示されます。





opacityプロパティは、 format_off



フィルターがformat_off



れた変数V_10_111



依存します。 変数の値が0の場合、四角形が表示されます（ opacity: 1



）。 値が1の場合、長方形は見えません（ opacity: 0



）。



四角形をクリックすると、 tmcontrol('V_10_111','-10-111')



スクリプトtmcontrol('V_10_111','-10-111')



ます。 scada.jsファイルに記述されています。







ウィンドウはjquery-uiライブラリを使用します。 有効にするコマンドは、postメソッドを使用してサーバーに渡されます。

 $.post("control.php", elem+'&1');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コマンドを無効にする：

 $.post("control.php", elem+'&0');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

htmlファイルのダイアログボックスを接続します。

 <div id="dialog-confirm" title=" "> <label id="label2"> </label> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

別のブラウザで試してみます！



Firefox：







など：







SVGは、さまざまな画面解像度とさまざまなブラウザ画面に自動的にスケーリングします。



オペラ：







いつものように、インターネットエクスプローラーには驚きがありました。







なぜこれまでのところわからなかったのか。 サンプルを自分で感じるには、 SCADA-systemをダウンロードしてインストールし、コンフィギュレーターでhtml-fileを接続する必要があります。 ファイル自体はweb_mainフォルダーに配置されます。