Realization of shopping mall monitoring based on HTML5 Canvas

With the rapid development of the domestic economy, people have higher and higher requirements for security. In order to prevent the occurrence of the following situations, you need to consider installing a security system: Provide evidence and clues: In many factories, banks, or accident-related authorities can detect cases based on video information, which is a very important clue. There are also disputes or accidents, and the responsibility of the relevant personnel can also be easily found out through the video. High cost of air defense: Nowadays, many places think of hiring security guards when they think of safety. Each security guard is 800 yuan per month, 3 shifts a day, and one team of personnel needs nearly 40,000 yuan a year, which is not cheap compared to the cost of electronic security equipment. , and the use of electronic security equipment does not require replacement within a few years. Therefore, the cost of air defense is relatively high. Civil air defense assistance: In most cases, it is very difficult to rely entirely 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 on 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 not suitable for people to stay at all, and electronic security equipment must be used. Concealment: Using electronic security equipment, ordinary people will not feel that they are constantly being monitored, and it is concealed. 24-Hour Security Guarantee: To meet the need for 24-hour uninterrupted security, 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 in different places. Now there are many company leaders who can view the situation of any branch around the world in time through the Internet, which is conducive to timely understanding of the situation. Image preservation: With the development of digital video technology, images can be stored through computer digital storage devices, which can be stored for a longer time and have clearer images. Production management: managers can timely and intuitively understand the situation of the first line of production, which is convenient for 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 front-end part of a subway station monitoring system. .

http://www.hightopo.com/demo/metro/demo2.html  Enter the page and right-click "Inspect Element" to view the example source code.

The dynamic effect of this example is as follows:

 Let's build the basic scene first. In HT, a very common way to import external scenes into the interior is to parse JSON files. One of the advantages of using JSON files to build scenes is that they can be recycled. Our scene today is Drawn using JSON. Next, HT will use the ht.Default.xhrLoad function to load the JSON scene, and use the DataModel.deserialize(json) packaged by HT to deserialize , 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;//The JSON file Titile is assigned to the global variable title
    dataModel.deserialize(json);//Deserialize
    graphView.fitContent( true );//Zoom and pan topology to display all primitives, that is, let all elements be displayed
});

In HT, a Data type object is automatically assigned an id attribute 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, it is not allowed to modify the id value. dataModel.getDataById(id) Quickly find Data objects. It is generally recommended that the id attribute be automatically assigned by HT, and the unique mark of the user's business meaning can be stored in the tag attribute. The Data#setTag(tag) function allows any dynamic change of the tag value, and 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 property of the Data object in JSON, and get the Data object in the code through the dataModel.getDataByTag(tag) function:

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 label in the following figure:

Then we set the object that needs to be rotated and flashed. The setRotation(rotation) function is encapsulated for "rotation" in HT. By obtaining the current rotation angle of the object, add a certain radian on the basis of this angle, and call it regularly through setInterval , which rotates the same radian at a certain 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++ ) {//Because there are some similar elements, the tag names we set are similar, but they are replaced by 1, 2, and 3 later, so we get the var color through the for loop
         = 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, which 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);
}

我们还对“警告灯”的闪烁进行了定时控制，如果是偶数秒的时候，就将灯的背景颜色设置为“无色”，否则，如果是 yellowAlarm 则设置为“黄色”，如果是 redAlarm 则设置为“红色”：

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

整个例子就这么轻松地解决了，简直太轻松了。。。

有兴趣继续了解的小伙伴可以进入 HT for Web 官网查看各个手册进行学习。