Mit der rasanten Entwicklung der heimischen Wirtschaft stellen die Menschen immer höhere Anforderungen an die Sicherheit. Um die folgenden Situationen zu verhindern, müssen Sie über die Installation eines Sicherheitssystems nachdenken: Beweise und Hinweise liefern: In vielen Fabriken, Banken, bei Diebstählen oder Unfällen können die zuständigen Behörden den Fall anhand von Videoinformationen aufdecken, was sehr wichtig ist Hinweis. Es gibt auch einige Streitigkeiten oder Unfälle, und die Verantwortlichkeiten des zuständigen Personals können durch Videoaufzeichnungen leicht ermittelt werden. Hohe Kosten für die zivile Luftverteidigung: Heutzutage denken viele an die Einstellung von Sicherheitskräften. Jeder Sicherheitsbeamte kostet 800 Yuan pro Monat und arbeitet in drei Schichten pro Tag Die Kosten für elektronische Sicherheitsausrüstung sind nicht billig, und es besteht weniger Bedarf, elektronische Sicherheitsausrüstung innerhalb weniger Jahre auszutauschen. Daher sind die Kosten der zivilen Luftverteidigung relativ hoch. Zivile Luftverteidigungsunterstützung: In den meisten Fällen ist es sehr schwierig, sich bei der Gewährleistung der Sicherheit vollständig auf Menschen zu verlassen. Um die Sicherheit zu gewährleisten, ist die Unterstützung elektronischer Sicherheitsgeräte (z. B. Monitore und Alarme) erforderlich. Es muss zu besonderen Anlässen verwendet werden: Unter bestimmten rauen Bedingungen (hohe Hitze, Kälte, geschlossen usw.) ist es für Menschen schwierig, mit bloßem Auge klar zu sehen, oder die Umgebung ist einfach nicht für den Aufenthalt von Menschen geeignet Es müssen elektronische Sicherheitseinrichtungen verwendet werden. Verschleierung: Durch den Einsatz elektronischer Sicherheitsausrüstung haben normale Menschen nicht das Gefühl, dass sie ständig überwacht werden, und sie sind verschleiert. 24-Stunden-Sicherheitsgarantie: Um die Sicherheitsanforderungen rund um die Uhr zu gewährleisten, müssen elektronische Geräte berücksichtigt werden. Fernüberwachung: Mit der Entwicklung der Computer- und Netzwerktechnologie ist die Fernüberwachung und Anzeige von Bildern von verschiedenen Orten aus möglich geworden. Viele Unternehmensleiter können nun die Situation jeder Niederlassung auf der ganzen Welt in Echtzeit über das Internet überwachen die Situation rechtzeitig zu verstehen. Bildkonservierung: Die Entwicklung der digitalen Videotechnologie ermöglicht die Speicherung von Bildern über digitale Speichergeräte des Computers, sodass sie über längere Zeiträume und mit klareren Bildern gespeichert werden können. Produktionsmanagement: Manager können die Situation an vorderster Front der Produktion zeitnah und intuitiv verstehen, was die Führung und Verwaltung erleichtert.
Angesichts der großen Nachfrage nach Überwachungssystemen in China stellen wir Ihnen heute vor, wie Sie den Front-End-Teil eines Überwachungssystems erstellen.
http://www.hightopo.com/demo/metro/demo2.html Rufen Sie die Seite auf und klicken Sie mit der rechten Maustaste auf das Inspect-Element, um den Beispielquellcode anzuzeigen.
Der dynamische Effekt dieses Beispiels ist wie folgt:
Lassen Sie uns zunächst die Basisszene erstellen. Eine sehr gängige Methode zum Importieren externer Szenen in das Innere besteht darin, JSON-Dateien zum Erstellen von Szenen zu verwenden. Unsere heutige Szene ist Drawn mit JSON. Als Nächstes verwendet HT die Funktion ht.Default.xhrLoad, um die JSON-Szene zu laden, verwendet HT-gekapseltes DataModel.deserialize(json), um sie zu deserialisieren und das deserialisierte Objekt dem DataModel hinzuzufügen:
ht.Default.xhrLoad('demo2.json', function(text) { var json = ht.Default.parse(text); if(json.title) document.title = json.title;//Ändern Sie den Titel der JSON-Datei wird der globalen Variablen title zugewiesen dataModel.deserialize(json);//Deserialisieren graphView.fitContent(true);//Zoomen Sie die Übersetzungstopologie, um alle Grafikelemente anzuzeigen, dh alle Elemente werden angezeigt});In HT wird dem Datentypobjekt intern automatisch ein ID-Attribut zugewiesen, das über data.getId () und data.setId (id) abgerufen und festgelegt werden kann. Der ID-Wert darf nicht geändert werden Nachdem das Datenobjekt zum Datenmodell hinzugefügt wurde, können Sie mit dataModel.getDataById(id) schnell Datenobjekte finden. Es wird allgemein empfohlen, dass das ID-Attribut automatisch von HT zugewiesen wird. Die eindeutige Kennung der geschäftlichen Bedeutung des Benutzers kann im Tag-Attribut gespeichert werden. Die Funktion Data#setTag(tag) ermöglicht jede dynamische Änderung des Tag-Werts Das Objekt kann über DataModel#getDataByTag(tag) gefunden werden und unterstützt das Löschen von Datenobjekten über DataModel#removeDataByTag(tag). Hier legen wir das Tag-Attribut des Datenobjekts in JSON fest und erhalten das Datenobjekt über die Funktion dataModel.getDataByTag(tag) im 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 yellowAlarm = dataModel.getDataByTag('yellowAlarm');Ich habe die Elemente erstellt, die jedem Etikett im Bild unten entsprechen:
Dann legen wir die zu drehenden und zu blinkenden Objekte fest. HT kapselt die Funktion setRotation(rotation) für die Drehung. Indem wir den aktuellen Drehwinkel des Objekts ermitteln, fügen wir einen bestimmten Bogenmaß basierend auf diesem Winkel hinzu und rufen ihn regelmäßig über setInterval auf. so Sie können den gleichen Bogen innerhalb eines bestimmten Zeitintervalls drehen:
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 (time - stairTime > 500) { stairIndex--; (stairIndex < 0) { stairIndex = 8; } stairTime = time; } for (var i = 0; i < 8; i++) {//Da es einige ähnliche Elemente gibt, sind die von uns festgelegten Tag-Namen ähnlich, aber sie sind es durch 1, 2, 3 ersetzt, also verwenden wir die for-Schleife, um 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 kapselt auch die setStyle-Funktion zum Festlegen des Stils, der als s abgekürzt werden kann. Informationen zu bestimmten Stilen finden Sie im HT-Handbuch für Web-Stile:
for (var i = 0; i < 8; i++) {//Da es einige ähnliche Elemente gibt, sind die von uns festgelegten Tag-Namen ähnlich, werden jedoch später in 1, 2 und 3 geändert, sodass wir die for-Schleife verwenden um die Variable color = stairIndex === i ? '#F6A623' zu erhalten: '#CFCFCF'; dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color); dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);}Wir führen auch eine Zeitsteuerung für das Blinken des Warnlichts durch. Wenn es eine gerade Anzahl von Sekunden ist, wird die Hintergrundfarbe auf farblos eingestellt. Wenn es sich um einen gelben Alarm handelt, wird es auf einen roten Alarm gesetzt , es ist auf Rot gesetzt:
if (new Date().getSeconds() % 2 === 1) { yellowAlarm.s('shape.background', null); redAlarm.s('shape.background', null);}else { yellowAlarm.s ('shape.background', 'gelb'); redAlarm.s('shape.background', 'red');}Das ganze Beispiel wurde so einfach, so einfach gelöst. . .
ZusammenfassenDas Obige ist eine detaillierte Erklärung des vom Herausgeber vorgestellten Beispiels für die Überwachung von Einkaufszentren auf Basis von HTML5. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten . Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!