Réaliser la surveillance des stations de métro basée sur HTML5 Canvas

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. Dans cet article, nous partagerons avec vous la mise en œuvre de la surveillance des stations de métro basée sur HTML5 Canvas.

L'effet dynamique de cet exemple est le suivant :

Construisons d'abord la scène de base En HT, c'est une méthode très courante. Les scènes externes sont importées en interne en analysant 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. Notre scène d'aujourd'hui a été dessinée 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;//将 JSON 文件中的 titile 赋给全局变量 titile 
    dataModel.deserialize(json);//反序列化
    graphView.fitContent(true);//缩放平移拓扑以展示所有图元，即让所有的元素都显示出来
});

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 n'est pas autorisée. modifié après l'ajout de l'objet Data 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 yellowAlarm = dataModel.getDataByTag('yellowAlarm');

J'ai créé les balises correspondantes pour chaque balise dans le figure ci-dessous Élément :

Ensuite, nous définissons l'objet qui doit pivoter et flasher HT encapsule la fonction setRotation(rotation) pour "rotation". état actuel de l'objet L'angle de rotation, ajoutez un certain radian en fonction de cet angle et appelez-le régulièrement via setInterval, afin que le même radian puisse pivoter 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);
    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 également encapsule la fonction setStyle Utilisé 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 for Web :

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

Nous contrôlons également le clignotement du "voyant d'avertissement". " régulièrement. Si c'est un nombre pair de secondes, réglez simplement la couleur de fond de la lumière sur "incolore", sinon, si elle est jauneAlarm, réglez-la sur "jaune", si elle est rougeAlarm, réglez-la sur "rouge". :

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

L'exemple entier est si simple Il a été résolu, c'était si facile. . .

Les amis qui souhaitent en savoir plus peuvent se rendre sur le site officiel de HT for Web pour consulter divers manuels à apprendre.

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 parfaits. 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 besoins de sécurité ininterrompus 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, il est devenu possible de surveiller et de regarder des images à distance depuis différents endroits. 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 pratique. propice à une compréhension rapide de la situation. 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, des systèmes de surveillance sont nécessaires pour la surveillance à grande échelle, comme les stations de métro, afin de prévenir les accidents. Aujourd'hui, nous allons vous présenter comment créer une surveillance des stations de métro. système. La partie frontale du système.

http://www.hightopo.com/demo/... Faites un clic droit sur la page et « Inspecter l'élément » pour afficher l'exemple de code source.

L'effet dynamique de cet exemple est le suivant :

Construisons d'abord la scène de base En HT, c'est une méthode très courante. Les scènes externes sont importées en interne en analysant 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. Notre scène d'aujourd'hui a été dessinée 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;//将 JSON 文件中的 titile 赋给全局变量 titile 
    dataModel.deserialize(json);//反序列化
    graphView.fitContent(true);//缩放平移拓扑以展示所有图元，即让所有的元素都显示出来
});

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 n'est pas autorisée. modifié après l'ajout de l'objet Data 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 yellowAlarm = dataModel.getDataByTag('yellowAlarm');

J'ai créé les balises correspondantes pour chaque balise dans le figure ci-dessous Élément :

Ensuite, nous définissons l'objet qui doit pivoter et flasher HT encapsule la fonction setRotation(rotation) pour "rotation". état actuel de l'objet L'angle de rotation, ajoutez un certain radian en fonction de cet angle et appelez-le régulièrement via setInterval, afin que le même radian puisse pivoter 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);
    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 également encapsule la fonction setStyle Utilisé 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 for Web :

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

Nous contrôlons également le clignotement du "voyant d'avertissement". " régulièrement. Si c'est un nombre pair de secondes, réglez simplement la couleur de fond de la lumière sur "incolore", sinon, si elle est jauneAlarm, réglez-la sur "jaune", si elle est rougeAlarm, réglez-la sur "rouge". :

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

Le contenu ci-dessus est basé sur HTML5 Canvas. La méthode de réalisation de la surveillance des stations de métro, j'espère qu'elle pourra aider tout le monde.

Recommandations associées :

Script mysql pour la surveillance et la synchronisation automatiques

10 exemples de didacticiels recommandés pour la surveillance des scripts

10 articles recommandés sur la surveillance des serveurs

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!