Detailed explanation of shopping mall monitoring examples based on HTML5 Canvas

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 security, 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 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 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 requirements, electronic equipment must be considered. Remote monitoring: With the development of computer technology and network technology, remote monitoring and viewing of images from different places has become possible. Now many company leaders can watch the situation of any branch around the world in real time via 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, today we will introduce to you how to create the front-end part of a monitoring system.

http://www.hightopo.com/demo/metro/demo2.html Enter the page and right-click the 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 benefits 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 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;//Change the JSON file titile is assigned to the global variable titile dataModel.deserialize(json);//Deserialize graphView.fitContent(true);//Zoom the translation topology to display all graphics elements, that is, let all elements be displayed});

In HT, when the Data type object is constructed, it will be automatically assigned an id attribute internally, which can be obtained and set through data.getId() and data.setId(id). The id value is not allowed to be modified after the Data object is added to the DataModel. You can use 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 label in the picture below:

Then we set the objects that need to be rotated and flashed. HT encapsulates the setRotation(rotation) function for rotation. By obtaining the current rotation angle of the object, we add a certain radian based on this angle and call it regularly through setInterval, so You can rotate the same arc 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++) {//Because there are some similar elements, the tag names we set are similar, but they are replaced with 1, 2, 3, so we use the for loop to get 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, 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++) {//Because there are some similar elements, the tag names we set are similar, but they are changed to 1, 2, and 3 later, so we use the for loop to get the 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);}

We also perform timing control on the flashing of the warning light. If it is an even number of seconds, the background color of the light is set to colorless. Otherwise, if it is yellowAlarm, it is set to yellow. If it is redAlarm, it is set to red:

 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 whole example was solved so easily, so easily. . .

The above is a detailed explanation of the shopping mall monitoring example based on HTML5 Canvas introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!