Avec le développement rapide de l’économie nationale, les gens ont des exigences de plus en plus élevées en matière de sécurité. Afin d'éviter que les situations suivantes ne se produisent, vous devez envisager d'installer un système de sécurité : Fournir des preuves et des indices : Dans de nombreuses usines, banques, vols ou accidents, les agences compétentes peuvent détecter le cas sur la base d'informations vidéo, ce qui est un élément très important. indice. Il y a également quelques litiges ou accidents, et les responsabilités du personnel concerné peuvent être facilement trouvées grâce à l'enregistrement vidéo. Coût élevé de la défense aérienne civile : De nos jours, lorsque de nombreux endroits pensent à la sécurité, ils pensent à embaucher des agents de sécurité. Chaque agent de sécurité coûte 800 par mois et travaille trois équipes par jour. Une équipe nécessite près de 40 000 yuans par an. le coût des équipements de sécurité électroniques n'est pas bon marché et il est moins nécessaire de remplacer les équipements de sécurité électroniques d'ici quelques années. Le coût de la défense aérienne civile est donc relativement élevé. Assistance à la défense aérienne civile : dans la plupart des cas, il est très difficile de compter entièrement sur les humains pour assurer la sécurité. De nombreuses choses nécessitent l'assistance d'équipements de sécurité électroniques (tels que des moniteurs et des alarmes) pour être plus parfaites. Il doit être utilisé dans des occasions spéciales : dans certaines conditions difficiles (chaleur élevée, froid, fermé, etc.), il est difficile pour les gens d'observer clairement à l'œil nu, ou l'environnement n'est tout simplement pas adapté pour que les gens restent, donc un équipement de sécurité électronique doit être utilisé. Dissimulation : grâce à l'équipement de sécurité électronique, les gens ordinaires n'auront pas l'impression d'être surveillés en permanence, et cela est dissimulé. Garantie de sécurité 24 heures sur 24 : pour répondre aux exigences de sécurité ininterrompues 24 heures sur 24, les équipements électroniques doivent être pris en compte. Surveillance à distance : Avec le développement de la technologie informatique et de la technologie des réseaux, la surveillance et la visualisation d'images à distance depuis différents endroits sont devenues possibles. Désormais, de nombreux dirigeants d'entreprise peuvent surveiller la situation de n'importe quelle succursale dans le monde en temps réel via INTERNET, ce qui est propice à la surveillance à distance. comprendre la situation en temps opportun. Préservation des images : le développement de la technologie vidéo numérique permet de sauvegarder les images via des dispositifs de stockage numérique informatiques, ce qui leur permet d'être sauvegardées pendant des périodes plus longues et avec des images plus claires. Gestion de la production : les gestionnaires peuvent comprendre la situation en première ligne de production de manière rapide et intuitive, ce qui facilite le commandement et la gestion.
Compte tenu de la forte demande de systèmes de surveillance en Chine, nous allons vous présenter aujourd'hui comment créer la partie frontale d'un système de surveillance.
http://www.hightopo.com/demo/metro/demo2.html Entrez dans la page et cliquez avec le bouton droit sur l'élément inspect pour afficher l'exemple de code source.
L'effet dynamique de cet exemple est le suivant :
Construisons d'abord la scène de base. Dans HT, une manière très courante d'importer des scènes externes dans l'intérieur consiste à analyser les fichiers JSON. L'un des avantages de l'utilisation de fichiers JSON pour créer des scènes est qu'ils peuvent être recyclés. en utilisant JSON. Ensuite, HT utilisera la fonction ht.Default.xhrLoad pour charger la scène JSON, utilisera DataModel.deserialize(json) encapsulé HT pour la désérialiser et ajoutera l'objet désérialisé au DataModel :
ht.Default.xhrLoad('demo2.json', function(text) { var json = ht.Default.parse(text); if(json.title) document.title = json.title;//Modifier le titre du fichier JSON est affecté à la variable globale titre dataModel.deserialize(json);//Deserialize graphView.fitContent(true);//Zoomez la topologie de traduction pour afficher tous les éléments graphiques, c'est-à-dire laisser tous les éléments être affichés});Dans HT, lorsque l'objet de type Data est construit, un attribut id lui sera automatiquement attribué en interne, qui peut être obtenu et défini via data.getId() et data.setId(id). La valeur id ne peut pas être modifiée. une fois l'objet Data ajouté au DataModel, vous pouvez utiliser dataModel.getDataById(id) pour trouver rapidement les objets Data. Il est généralement recommandé que l'attribut id soit automatiquement attribué par HT. L'identifiant unique de l'importance commerciale de l'utilisateur peut être stocké dans l'attribut tag. La fonction Data#setTag(tag) permet toute modification dynamique de la valeur de la balise. L'objet peut être trouvé via DataModel#getDataByTag(tag) et prend en charge la suppression d'objets Data via DataModel#removeDataByTag(tag). Ici, nous définissons l'attribut tag de l'objet Data en JSON et obtenons l'objet Data via la fonction dataModel.getDataByTag(tag) dans le code :
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 jauneAlarm = dataModel.getDataByTag('jauneAlarm');J'ai réalisé les éléments correspondant à chaque étiquette dans l'image ci-dessous :
Ensuite, nous définissons les objets qui doivent être pivotés et flashés. HT encapsule la fonction setRotation(rotation) pour la rotation. En obtenant l'angle de rotation actuel de l'objet, nous ajoutons un certain radian basé sur cet angle et l'appelons régulièrement via setInterval, Vous pouvez donc faire pivoter le même arc dans un certain intervalle de temps :
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); camera1.setRotation(camera1.getRotation() + deltaRotation/3); camera2.setRotation(camera2.getRotation() + deltaRotation/3); if (heure - stairTime > 500) { stairIndex--; (stairIndex < 0) { stairIndex = 8; } stairTime = time; } for (var i = 0; i < 8; i++) {//Comme il existe des éléments similaires, les noms de balises que nous définissons sont similaires, mais ils le sont remplacé par 1, 2, 3, nous utilisons donc la boucle for pour obtenir var color = stairIndex === i ? '#F6A623' : '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', couleur); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', couleur } if); (new Date().getSeconds() % 2 === 1) { yellowAlarm.s('shape.background', null); redAlarm.s('shape.background', null); } else { yellowAlarm.s('shape.background', 'jaune'); redAlarm.s('shape.background', 'red' }}); );HT encapsule également la fonction setStyle pour définir le style, qui peut être abrégé en s. Pour des styles spécifiques, veuillez vous référer au manuel de style HT pour Web :
for (var i = 0; i < 8; i++) {//Comme il existe des éléments similaires, les noms de balises que nous définissons sont similaires, mais ils sont remplacés par 1, 2 et 3 plus tard, nous utilisons donc la boucle for pour obtenir le 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);}Nous effectuons également un contrôle de synchronisation sur le clignotement du voyant d'avertissement. S'il s'agit d'un nombre pair de secondes, la couleur de fond de la lumière est réglée sur incolore. Sinon, si elle est jauneAlarme, elle est réglée sur jaune. , il est mis en rouge :
if (new Date().getSeconds() % 2 === 1) { yellowAlarm.s('shape.background', null); redAlarm.s('shape.background', null);}else { yellowAlarm.s ('forme.background', 'jaune'); redAlarm.s('forme.background', 'rouge');}L’exemple entier a été résolu si facilement, si facilement. . .
RésumerCe qui précède est une explication détaillée de l'exemple de surveillance d'un centre commercial basé sur HTML5 Canvas présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. . Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !