Realisieren Sie die Überwachung von U-Bahn-Stationen auf Basis von HTML5 Canvas

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. In diesem Artikel teilen wir Ihnen die Implementierung der U-Bahn-Stationsüberwachung auf Basis von HTML5 Canvas mit.

Der dynamische Effekt dieses Beispiels ist wie folgt:

Lassen Sie uns zuerst die Grundszene erstellen, das ist eine sehr verbreitete Methode zu Externe Szenen werden intern durch Parsen von JSON-Dateien importiert. Einer der Vorteile der Verwendung von JSON-Dateien zum Erstellen von Szenen besteht darin, dass sie wiederverwendet werden können. Unsere heutige Szene wurde mit JSON gezeichnet. Als nächstes verwendet HT die Funktion ht.Default.xhrLoad, um die JSON-Szene zu laden, und verwendet HT-gekapseltes DataModel.deserialize(json), um sie zu deserialisieren und das deserialisierte Objekt zum DataModel hinzuzufügen:

ht.Default.xhrLoad('demo2.json', function(text) {
    var json = ht.Default.parse(text);
    if(json.title) document.title = json.title;//将 JSON 文件中的 titile 赋给全局变量 titile 
    dataModel.deserialize(json);//反序列化
    graphView.fitContent(true);//缩放平移拓扑以展示所有图元，即让所有的元素都显示出来
});

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 sein Geändert, nachdem das Datenobjekt zum Datenmodell hinzugefügt wurde. Mit dataModel.getDataById(id) können Sie schnell Datenobjekte finden. Es wird allgemein empfohlen, dass das ID-Attribut automatisch von HT zugewiesen wird. Die eindeutige Kennung der Geschäftsbedeutung 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 entsprechenden Tags für jedes Tag im erstellt Abbildung unten Element:

Dann legen wir das Objekt fest, das gedreht werden muss, und HT kapselt die Funktion „setRotation“ für „Rotation“. Aktueller Status des Objekts Der Rotationswinkel, fügen Sie basierend auf diesem Winkel ein bestimmtes Bogenmaß hinzu und rufen Sie es regelmäßig über setInterval auf, sodass dasselbe Bogenmaß innerhalb eines bestimmten Zeitintervalls gedreht werden kann:

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);
    camera3.setRotation(camera3.getRotation() + deltaRotation/3);

    if (time - stairTime > 500) {
        stairIndex--;
        if (stairIndex < 0) {
            stairIndex = 8;
        }
        stairTime = time;
    }

    for (var i = 0; i < 8; i++) {//因为有一些相似的元素我们设置的 tag 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
        var color = stairIndex === i ? &#39;#F6A623&#39; : &#39;#CFCFCF&#39;;
        dataModel.getDataByTag(&#39;stair_1_&#39; + i).s(&#39;shape.border.color&#39;, color);
        dataModel.getDataByTag(&#39;stair_2_&#39; + i).s(&#39;shape.border.color&#39;, color);
    }

    if (new Date().getSeconds() % 2 === 1) {
        yellowAlarm.s(&#39;shape.background&#39;, null);
        redAlarm.s(&#39;shape.background&#39;, null);
    }
    else {
        yellowAlarm.s(&#39;shape.background&#39;, &#39;yellow&#39;);
        redAlarm.s(&#39;shape.background&#39;, &#39;red&#39;);
    }
}, 5);

HT auch kapselt die setStyle-Funktion. Wird zum Festlegen des Stils verwendet, 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++) {//因为有一些相似的元素我们设置的 tag 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
    var color = stairIndex === i ? &#39;#F6A623&#39; : &#39;#CFCFCF&#39;;
    dataModel.getDataByTag(&#39;stair_1_&#39; + i).s(&#39;shape.border.color&#39;, color);
    dataModel.getDataByTag(&#39;stair_2_&#39; + i).s(&#39;shape.border.color&#39;, color);
}

Wir steuern auch das Blinken der „Warnleuchte“. " regelmäßig. Wenn es sich um eine gerade Anzahl von Sekunden handelt, stellen Sie einfach die Hintergrundfarbe des Lichts auf „farblos“ ein. Wenn es sich um einen gelben Alarm handelt, stellen Sie es auf „gelb“ ein. Wenn es sich um einen roten Alarm handelt, stellen Sie es auf „rot“ ein. :

if (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');
}

Das ganze Beispiel ist so einfach. Es wurde gelöst, es war so einfach. . .

Freunde, die mehr erfahren möchten, können auf der offiziellen Website von HT for Web verschiedene Handbücher zum Lernen ansehen.

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 zu ersetzen. 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, geschlossene Räume 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 den Sicherheitsbedarf rund um die Uhr zu gewährleisten, müssen elektronische Geräte in Betracht gezogen werden. Fernüberwachung: Mit der Entwicklung der Computer- und Netzwerktechnologie ist es möglich geworden, Bilder aus der Ferne von verschiedenen Orten aus zu überwachen und anzusehen. Jetzt können viele Unternehmensleiter die Situation jeder Niederlassung auf der ganzen Welt in Echtzeit über das Internet überwachen trägt dazu bei, 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 des großen Bedarfs an Überwachungssystemen in China werden Überwachungssysteme für die großflächige Überwachung, beispielsweise von U-Bahn-Stationen, benötigt, um Unfälle zu verhindern. Heute stellen wir Ihnen vor, wie Sie eine U-Bahn-Stationsüberwachung erstellen können System. Der Front-End-Teil des Systems.

http://www.hightopo.com/demo/... Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Element prüfen“, um den Beispielquellcode anzuzeigen.

Der dynamische Effekt dieses Beispiels ist wie folgt:

Lassen Sie uns zuerst die Grundszene erstellen, das ist eine sehr verbreitete Methode zu Externe Szenen werden intern durch Parsen von JSON-Dateien importiert. Einer der Vorteile der Verwendung von JSON-Dateien zum Erstellen von Szenen besteht darin, dass sie wiederverwendet werden können. Unsere heutige Szene wurde mit JSON gezeichnet. Als nächstes verwendet HT die Funktion ht.Default.xhrLoad, um die JSON-Szene zu laden, und verwendet HT-gekapseltes DataModel.deserialize(json), um sie zu deserialisieren und das deserialisierte Objekt zum DataModel hinzuzufügen:

ht.Default.xhrLoad('demo2.json', function(text) {
    var json = ht.Default.parse(text);
    if(json.title) document.title = json.title;//将 JSON 文件中的 titile 赋给全局变量 titile 
    dataModel.deserialize(json);//反序列化
    graphView.fitContent(true);//缩放平移拓扑以展示所有图元，即让所有的元素都显示出来
});

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 sein Geändert, nachdem das Datenobjekt zum Datenmodell hinzugefügt wurde. Mit dataModel.getDataById(id) können Sie schnell Datenobjekte finden. Es wird allgemein empfohlen, dass das ID-Attribut automatisch von HT zugewiesen wird. Die eindeutige Kennung der Geschäftsbedeutung 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 entsprechenden Tags für jedes Tag im erstellt Abbildung unten Element:

Dann legen wir das Objekt fest, das gedreht werden muss, und HT kapselt die Funktion „setRotation“ für „Rotation“. Aktueller Status des Objekts Der Rotationswinkel, fügen Sie basierend auf diesem Winkel ein bestimmtes Bogenmaß hinzu und rufen Sie es regelmäßig über setInterval auf, sodass dasselbe Bogenmaß innerhalb eines bestimmten Zeitintervalls gedreht werden kann:

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);
    camera3.setRotation(camera3.getRotation() + deltaRotation/3);

    if (time - stairTime > 500) {
        stairIndex--;
        if (stairIndex < 0) {
            stairIndex = 8;
        }
        stairTime = time;
    }

    for (var i = 0; i < 8; i++) {//因为有一些相似的元素我们设置的 tag 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
        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);
    }

    if (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');
    }
}, 5);

HT auch kapselt die setStyle-Funktion. Wird zum Festlegen des Stils verwendet, 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++) {//因为有一些相似的元素我们设置的 tag 名类似，只是在后面换成了1、2、3，所以我们通过 for 循环来获取
    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);
}

Wir steuern auch das Blinken der „Warnleuchte“. " regelmäßig. Wenn es sich um eine gerade Anzahl von Sekunden handelt, stellen Sie einfach die Hintergrundfarbe des Lichts auf „farblos“ ein. Wenn es sich um einen gelben Alarm handelt, stellen Sie es auf „gelb“ ein. Wenn es sich um einen roten Alarm handelt, stellen Sie es auf „rot“ ein. :

if (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');
}

Der obige Inhalt basiert auf HTML5 Canvas. Die Methode zur Realisierung der U-Bahn-Stationsüberwachung. Ich hoffe, sie kann allen helfen.

Verwandte Empfehlungen:

MySQL-Skript für die automatische Überwachung und Synchronisierung

Empfohlene 10 Beispiel-Tutorials für Überwachungsskripte

10 empfohlene Artikel zum Thema Serverüberwachung

Das obige ist der detaillierte Inhalt vonRealisieren Sie die Überwachung von U-Bahn-Stationen auf Basis von HTML5 Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!