Home > Article > Web Front-end > Realize subway station monitoring based on HTML5 Canvas

Realize subway station monitoring based on HTML5 Canvas

小云云Original: 2017-12-06 16:23:412472browse

With the rapid development of the domestic economy, people have higher and higher requirements for safety. In order to prevent the following situations from happening, you need to consider installing a security system: Provide evidence and clues: In many factories, banks, thefts or accidents, relevant agencies can detect the case based on video information, which is a very important clue. In this article, we will share with you the implementation of subway station monitoring based on HTML5 Canvas.

The dynamic effect of this example is as follows:
Realize subway station monitoring based on HTML5 Canvas

# Let’s build the basic scene first. In HT, it is a very common method to External scenes are imported into the interior by parsing JSON files. One of the benefits of using JSON files to build scenes is that they can be recycled. Our scene today was drawn using JSON. Next, HT will use the ht.Default.xhrLoad function to load the JSON scene, and use HT-encapsulated DataModel.deserialize(json) to deserialize it, and add the deserialized object to the 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);//缩放平移拓扑以展示所有图元，即让所有的元素都显示出来
});

In HT , the Data type object will be automatically assigned an id attribute internally when it is constructed, which can be obtained and set through data.getId() and data.setId(id). After the Data object is added to the DataModel, the id value is not allowed to be modified, which can be obtained through dataModel. getDataById(id) quickly finds Data objects. It is generally recommended that the id attribute is automatically assigned by HT. The unique identifier of the user's business significance can be stored in the tag attribute. The Data#setTag(tag) function allows any dynamic change of the tag value. The corresponding Data object can be found through DataModel#getDataByTag(tag). , and supports deleting Data objects through DataModel#removeDataByTag(tag). Here we set the tag attribute of the Data object in JSON, and obtain the Data object through the dataModel.getDataByTag(tag) function in the 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');

I made the elements corresponding to each tag in the figure below:
Realize subway station monitoring based on HTML5 Canvas

Then we set the object that needs to rotate and flash. HT encapsulates the setRotation(rotation) function for "rotation", by obtaining the current rotation of the object Angle, add a certain radian based on this angle, and call it regularly through setInterval, so that the same radian can be rotated within a certain time interval:

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 also encapsulates the setStyle function to set the style , can be abbreviated as s. For specific styles, please refer to the HT for Web style manual:

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

We also control the flashing of the "warning light" regularly. If it is an even number of seconds, the background color of the light will be changed. Set to "colorless", otherwise, if it is yellowAlarm, set it to "yellow", if it is redAlarm, set it to "red":

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

The whole example is solved so easily, almost too easily. . .

Friends who are interested in learning more can go to the HT for Web official website to view various manuals to learn.

#With the rapid development of the domestic economy, people have higher and higher requirements for safety. In order to prevent the following situations from happening, you need to consider installing a security system: Provide evidence and clues: In many factories, banks, thefts or accidents, relevant agencies can detect the case based on video information, which is a very important clue. There are also some disputes or accidents, and the responsibilities of the relevant personnel can be easily found through video recording. High cost of civil air defense: Nowadays, when many places think of safety, they think of hiring security guards. Each security guard costs 800 per month and works three shifts a day. One shift of personnel requires nearly 40,000 yuan a year. Compared with the cost of electronic security equipment, it is not cheap. , and there is less need to replace electronic security equipment within a few years. Therefore, the cost of civil air defense is relatively high. Civil air defense assistance: In most cases, it is very difficult to rely solely on people to ensure safety. Many things require the assistance of electronic security equipment (such as monitors and alarms) to be more perfect. It must be used in special occasions: under some harsh conditions (high heat, cold, closed, etc.), it is difficult for people to observe clearly with the naked eye, or the environment is simply not suitable for people to stay, so electronic security equipment must be used. Concealment: Using electronic security equipment, ordinary people will not feel that they are being monitored all the time, and it is concealed. 24-hour security guarantee: To achieve 24-hour uninterrupted security needs, electronic equipment must be considered. Remote monitoring: With the development of computer technology and network technology, it has become possible to remotely monitor and watch images from different places. Now many company leaders can watch the situation of any branch around the world in real time via the Internet, which is conducive to understanding the situation in a timely manner. Image preservation: The development of digital video technology allows images to be saved through computer digital storage devices, allowing them to be saved for longer periods of time and with clearer images. Production management: Managers can understand the situation on the front line of production in a timely and intuitive manner, which facilitates command and management.

In view of the large demand for monitoring systems in China, for large-scale monitoring, such as subway stations, monitoring systems are needed to prevent accidents. Today we will introduce to you how to create a subway station monitoring system. The front-end part of the system.

http://www.hightopo.com/demo/... Right-click on the page and "Inspect Element" to view the example source code.

The dynamic effect of this example is as follows:
Realize subway station monitoring based on HTML5 Canvas

# Let’s build the basic scene first. In HT, it is a very common method to External scenes are imported internally by parsing JSON files. One of the benefits of using JSON files to build scenes is that they can be recycled. Our scene today was drawn using JSON. Next, HT will use the ht.Default.xhrLoad function to load the JSON scene, and use HT-encapsulated DataModel.deserialize(json) to deserialize it, and add the deserialized object to the DataModel:

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

var fan1 = dataModel.getDataByTag(&#39;fan1&#39;);
var fan2 = dataModel.getDataByTag(&#39;fan2&#39;);
var camera1 = dataModel.getDataByTag(&#39;camera1&#39;);
var camera2 = dataModel.getDataByTag(&#39;camera2&#39;);
var camera3 = dataModel.getDataByTag(&#39;camera3&#39;);
var redAlarm = dataModel.getDataByTag(&#39;redAlarm&#39;);
var yellowAlarm = dataModel.getDataByTag(&#39;yellowAlarm&#39;);

I made the elements corresponding to each tag in the figure below:
Realize subway station monitoring based on HTML5 Canvas

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 also encapsulates the setStyle function to set the style , can be abbreviated as s. For specific styles, please refer to the HT for Web style manual:

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

The above content is a method to implement subway station monitoring based on HTML5 Canvas. I hope Can help everyone.

Related recommendations:

mysql script for automatic monitoring and synchronization

The above is the detailed content of Realize subway station monitoring based on HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：html5 cross-domain communication method through postMessageNext article：html5 cross-domain communication method through postMessage

See more

Realize subway station monitoring based on HTML5 Canvas

Related articles