HTML5ネットワークトポロジ図をベースにした迅速なアプリケーション開発を詳しく解説（写真とテキスト）

この例は、2 つのノード、接続、およびグループを組み合わせた効果を構築する方法を示しています。トポロジカル インターフェイスの構築は、基本的に DataModel データモデル を操作することであることが簡単に理解できます。以下は、上の図のインターフェイス効果を構築するモデル コード部分です:

// init data modelhello = new ht.Node();
hello.setPosition(60, 140);             
hello.setName('Hello');
hello.setStyle('note', 'I love HT');
hello.setStyle('note.background', '#FFA000');
dataModel.add(hello);

world = new ht.Node();
world.setPosition(260, 80);
world.setName('World');
world.setStyle('note', 'HT for your imagination');
world.setStyle('note.expanded', false);  
world.setStyle('border.color', 'red');                
dataModel.add(world);

edge = new ht.Edge(hello, world);
edge.setName('Hello World\nwww.hightopo.com');
edge.setStyle('label.color', 'white');
edge.setStyle('label.background', '#3498DB');                
dataModel.add(edge);  

group = new ht.Group();
group.setName('HT for Web ' + ht.Default.getVersion());
group.addChild(hello);
group.addChild(world);
group.addChild(edge);
dataModel.add(group);

もちろん、実際のシステムは難しくありません。 -上記のコードのようにコンテンツをコーディングします。一般に、ユーザーはデータ クエリを通じて背景を使用し、背景データに基づいてトポロジ ノード、接続、グループ、サブネット、その他の要素のコンテンツを動的に作成し、要素名、接続の色を入力します。 、アラームの内容、その他の 属性 情報、および HT テクノロジーは HTML5 に基づいているため、ほとんどの産業用制御 Web SCADA の顧客は WebSocket のリアルタイム通信方式を採用しています。WebSocket の使用方法については、この記事を参照してください。 : 3D トポロジー自動レイアウト部分 Node.js

モデルの構築は上記と同じくらい簡単で、残りの仕事は、情報の表示と美しい効果を実現するために、対応するグラフィック要素の属性を設定することです。 HT グラフィック コンポーネントのスタイル全体についても、「HT for Web スタイル マニュアル」を参照してください。ここで、上記のラベルを設定するためのコードが少し特殊であることに気づいた人がいます。

edge.setName('Hello World\nwww.hightopo.com');

ここでの n は、名前が示すように改行を意味します。もちろん、改行以外にも、縦方向のレイアウトやその他の派手な表示形式も可能です。「ネットワーク トポロジ マップ上のテキストの賢い応用」を参照してください。記事の紹介:

var list = [], node;for (var i = 0; i < 4; i++) {
    node = new ht.Node();
    node.setImage(&#39;station&#39;);
    node.p(100 + i * 100, 100);
    dm.add(node);

    list.push(node);
}
node = list[0];
node.s({    
&#39;label&#39;: &#39;厦门&#39;,    
&#39;label.font&#39;: &#39;22px arial, sans-serif&#39;,    
&#39;label2&#39;: &#39;Xiamen&#39;,    
&#39;label2.position&#39;: 31,    
&#39;label2.offset.y&#39;: 23});

node = list[1];
node.s({    
&#39;label&#39;: &#39;图\n扑&#39;,    
&#39;label.position&#39;: 14,    
&#39;label.font&#39;: &#39;22px arial, sans-serif&#39;,    
&#39;label2&#39;: &#39;Hightopo&#39;,    
&#39;label2.position&#39;: 14,    
&#39;label2.offset.x&#39;: -7,    
&#39;label2.rotation&#39;: -Math.PI / 2});

node = list[2];
node.s({    
&#39;label&#39;: &#39;上\n海&#39;,   
&#39;label.position&#39;: 20,    
&#39;label.font&#39;: &#39;22px arial, sans-serif&#39;,    
&#39;label2&#39;: &#39;Shanghai&#39;,    
&#39;label2.position&#39;: 20,    
&#39;label2.offset.x&#39;: 6,    
&#39;label2.rotation&#39;: -Math.PI / 2});

node = list[3];
node.s({    
&#39;label&#39;: &#39;北京&#39;,    
&#39;label.position&#39;: 3,    
&#39;label.font&#39;: &#39;22px arial, sans-serif&#39;,    
&#39;label2&#39;: &#39;Beijing&#39;,    
&#39;label2.position&#39;: 3,    
&#39;label2.offset.y&#39;: -23});

もちろん、下の赤いボールをドラッグしてテキストを動的に回転する効果を実現することもできます:

上記の例から、次のようになります。テキストだけを参照することもできます。色、背景、フォント、最大長などのパラメータがあります。位置レイアウトと 3D レイアウトを追加すると、テキストをベースにした独立した記事をほぼ作成できます。興味がある場合は、位置マニュアルを再生してください:

プリミティブの接続関係を構築し、プリミティブのスタイル属性を設定した後、次の主な問題はプリミティブの配置です。産業用制御の分野でのプリミティブの配置は通常手動で行われるため、Web SCADA 産業用制御の分野では通常、自社製品用の HMI ヒューマン マシン インターフェイス描画ツールのセットを構築します。

通信ネットワーク管理トポロジ アプリケーションの場合、 HT トポロジ ダイアグラム コンポーネントのパフォーマンスは非常に強力であり、数千、さらには数十万のネットワーク トポロジ

ベクトル グラフィックス 要素を何の負担もなく運ぶことができますが、ネットワーク トポロジのメタデータの量は多くの場合非常に膨大になるためです。このような大量のデータのレイアウトが問題であることを認識します。これが規則的であれば、この例はベクトルを使用することで簡単に実現できます。 HTのフォーマットに合わせて、ファンの速度や色などを動的に制御し、ファンの動作状態を直感的に表現できます。 この例は特に携帯電話用に最適化されていませんが、特に iOS Safari を使用して実行しました。Apple は HTML5 のパフォーマンスを向上させるために、この例に値すると言わざるを得ません。その製品ラインは、ES6 標準を 100% サポートしていると主張しており、ES6 としても知られる ECMAScript 2015

標準が完全にサポートされており、macOS と iOS 上の Safari にこの大きな

JavaScript

の進化をもたらします。

ただし、HT の自動レイアウト機能を使用する通信ネットワーク管理トポロジ マップ アプリケーションが増えます。自動レイアウト機能を活用すると、プロジェクト立ち上げの実装作業負荷が大幅に軽減され、通信機器は動的な変更を自動的に検出する必要があることが多くなります。これらを手動で完了することはほとんど不可能です。ファーウェイのボス、任正非氏の最近の発言と組み合わせると、将来のファーウェイの通信ネットワーク管理トポロジは、独自の業界ネットワークデータを利用し、自動レイアウトアルゴリズムのレイアウトを提供する人工知能に依存する必要があることが想像できます。脱線して本題に戻ります。

実際、自動レイアウトでは、ビジネス表示のニーズを満たすためにグラフィック要素を配置するアルゴリズムを提供できません。これらの 2 つの記事では、バスをカスタマイズして任意の曲線に沿ってレイアウトする場合を詳細に分析しています。

上記のネットワーク プリミティブの作成、プリミティブの接続関係の設定、プリミティブ スタイル属性の構成、およびプリミティブのレイアウトは、トポロジ図を構築するための基本的な手順です。実際、HT に精通していれば、適切な HTML5 を開発できます。ネットワーク トポロジ マップ アプリケーションでは、ユーザーはトポロジ マップ全体を JSON 形式のコンテンツの文字列にシリアル化して、バックエンド データベースまたはバックエンド サーバー ファイルに保存できます。HT は単なるフロントエンド グラフィック コンポーネントです。バックエンドの通信とストレージが関与します。とにかく、制御はあなた次第で、何の制約もありません。ネットワーク トポロジ全体のシステム アーキテクチャを自由に設計できます。

以上がHTML5ネットワークトポロジ図をベースにした迅速なアプリケーション開発を詳しく解説（写真とテキスト）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。