Explication détaillée du développement rapide d'applications basées sur le diagramme de topologie de réseau HTML5 (images et texte)

Cet exemple montre comment créer l'effet combiné de deux nœuds, d'une connexion et d'un groupe. On peut facilement comprendre que la construction d'une interface topologique consiste essentiellement à faire fonctionner le modèle de données DataModel . Voici la partie du code du modèle qui construit l'effet d'interface dans l'image ci-dessus :

// 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);

Bien sûr, le système réel ne ressemblera pas à celui ci-dessus. Le contenu est codé en dur dans le code. Généralement, les utilisateurs interrogent les données d'arrière-plan, puis créent dynamiquement des nœuds topologiques, des connexions, des groupes, des sous-réseaux et d'autres éléments graphiques basés sur le système. données d'arrière-plan et remplissez les noms des éléments graphiques, les couleurs de connexion, le contenu des alarmes, etc.

Attribut informations, et comme la technologie HT est basée sur HTML5, la plupart des clients Web SCADA de contrôle industriel ont adopté la communication en temps réel méthode de WebSocket. Pour plus d'informations sur l'utilisation de WebSocket, veuillez vous référer à cet article : Disposition automatique de la topologie 3D Node.jsArticle

Construire un modèle est aussi simple que ci-dessus. est de définir les attributs des éléments graphiques correspondants pour obtenir un affichage d'informations et de beaux effets, concernant la personnalisation des éléments graphiques et même le style global des composants graphiques HT, vous pouvez vous référer au "Manuel de style HT pour le Web". petit détail simple, mais certaines personnes ont remarqué que le code de paramétrage du label ci-dessus est un peu particulier :

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

Ici n signifie saut de ligne comme son nom l'indique. Bien sûr, en plus des sauts de ligne, vous. peut également avoir des formes d'affichage sophistiquées telles qu'une disposition verticale. Vous pouvez vous référer à l'introduction dans l'article « Application intelligente du texte sur les cartes de topologie de réseau » :

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});

De. Bien sûr, vous pouvez également obtenir l'effet de rotation dynamique du texte. Faites glisser la boule rouge ci-dessous pour obtenir l'effet de rotation dynamique du texte :

À partir de l'exemple ci-dessus, vous pouvez vous référer à l'exemple ci-dessus. à l'exemple ci-dessus pour voir à quel point un texte peut être simple. Il existe des paramètres tels que la définition de la couleur, de l'arrière-plan, de la police, de la longueur maximale, etc. Si vous ajoutez la mise en page Position et la mise en page 3D, vous pouvez presque écrire un article indépendant basé sur le texte. . Cela ne suffit pas ici. Si vous êtes intéressé, vous pouvez jouer au Manuel de position Divers exemples :

Après avoir construit la relation de connexion des éléments graphiques et défini les attributs de style. des éléments graphiques, l'étape suivante est principalement la question du placement des éléments graphiques. Pour ceux qui travaillent dans le domaine du contrôle industriel, le placement des éléments graphiques se fait généralement manuellement, de sorte que le domaine du contrôle industriel Web SCADA construit généralement un ensemble d'IHM humaines. outils de dessin d'interface machine pour leurs propres produits :

Pour l'application de topologie de gestion de réseau de télécommunications, car la quantité de données d'éléments de graphique de topologie de réseau est souvent très énorme, bien que les performances du Le composant de graphique de topologie HT est très puissant et peut transporter plusieurs, voire des centaines de milliers d'éléments de topologie de réseau

graphique vectoriel sans aucune pression, mais comment y parvenir La disposition de plusieurs primitives de volume de données est un problème si c'est le cas. est régulier, ce sera plus facile. L'écriture de deux boucles for peut obtenir une disposition en grille. Cet exemple est généralement utilisé dans les systèmes de contrôle de l'industrie énergétique. En utilisant le format vectoriel HT, la vitesse, la couleur et d'autres paramètres du ventilateur peuvent être contrôlés dynamiquement pour exprimer intuitivement. l'état de fonctionnement du ventilateur . Cet exemple n'est pas spécialement optimisé pour les téléphones mobiles, mais j'ai spécifiquement utilisé iOS Safari pour l'exécuter. Je dois dire que Safari 10 est toujours digne de cet exemple de HT. Apple travaille toujours dur pour améliorer HTML5. dans sa gamme de produits. La norme

ECMAScript 2015

, également connue sous le nom d'ES6, est entièrement prise en charge, apportant cette évolution majeure

JavaScript

à Safari sur macOS et iOS.

Cependant, davantage d'applications de carte topologique de gestion de réseau de télécommunications utiliseront la fonction de mise en page automatique de HT. Faire bon usage de la fonction de mise en page automatique peut réduire considérablement la charge de travail de mise en œuvre du lancement du projet, et les équipements de télécommunications doivent souvent détecter automatiquement les changements dynamiques. ce qui est presque impossible à réaliser manuellement. Si l'on combine les récentes remarques du patron de Huawei, Ren Zhengfei, on peut imaginer que la topologie de gestion du réseau de télécommunications de Huawei devrait à l'avenir utiliser les données uniques de son réseau industriel et s'appuyer sur l'intelligence artificielle pour fournir un algorithme de mise en page automatique. parenthèse et revenons au sujet.

En fait, la mise en page automatique ne peut pas fournir d'algorithmes pour placer les éléments graphiques afin de répondre aux besoins d'affichage professionnel. Ces deux articles analysent en détail comment personnaliser le bus et tout autre. Exemple arbitraire de disposition de courbe :

Ce qui précède consiste à créer une primitive de réseau, à définir la relation de connexion entre les primitives, à configurer les attributs de style des primitives et à disposer les primitives. pour construire le diagramme de topologie. Avec quelques étapes de base, vous pouvez réellement développer une application de carte de topologie de réseau HTML5 décente en quelques minutes si vous êtes familier avec HT. Les utilisateurs peuvent sérialiser l'intégralité de la carte de topologie dans une chaîne de contenu au format JSON, afin que vous puissiez le faire. peut l'enregistrer dans la base de données backend ou dans le backend. Tout fichier serveur est acceptable. HT n'est qu'un composant graphique frontal et n'implique pas de communication ni de stockage en arrière-plan. Le contrôle vous appartient de toute façon, sans aucune contrainte. l'architecture de votre topologie de réseau comme vous le souhaitez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!