With the rapid development of domestic economy, people have higher and higher requirements for safety. In order to prevent the occurrence of the following situations, you need to consider the installation of security system: Provide evidence and clues: in many factories and banks, the theft or accident related authorities can detect the case according to the video information, which is a very important clue. There are also some disputes or accidents, it is easy to find out the responsibility of the people involved through video. The cost of civil air defense is high: now many places think of security to hire security guards, each security guard 800 per month, 3 shifts a day, a staff needs nearly 40,000 yuan a year, compared with the cost of electronic security equipment is not cheap, and the use of electronic security equipment in a few years does not need to be replaced. So the cost of air defense is relatively high. Air defense auxiliary: in most cases, it is very difficult to ensure safety completely by people. Many things need electronic security equipment (such as monitors and alarms) to be more perfect. Special occasions must be used: in some harsh conditions (high heat, cold, closed, etc.), it is difficult for people to see clearly with the naked eye, or the environment is not suitable for people to stay, must use electronic security equipment. Concealment: the use of electronic security equipment, the average person will not feel constantly monitored, with concealment. 24 hour security: Electronic equipment must be considered to meet the need for 24 hour security. Remote monitoring: with the development of computer technology and network technology, remote monitoring to watch different images has become possible, the person in charge of a lot of companies can now watch the INTERNET in time any branch situation around the world, be helpful for understanding the situation in time. Image preservation: with the development of digital video technology, images can be saved by computer digital storage devices, which can be saved for longer and clearer images. Production management: managers can timely and intuitively understand the situation of the first line of production, easy to command and management.

In view of the large demand for monitoring system in China, we will introduce to you today how to create a monitoring system front-end part.

www.hightopo.com/demo/metro/… Right-click “Review Elements” to view the sample source code.

The dynamic effect of this example is as follows:

In HT, one of the most common ways to import external scenes into the interior is to parse JSON files. One of the advantages of constructing scenes with JSON files is that they can be recycled. The scene we drew today was drawn using JSON. Then HT will use the hT.default. xhrLoad function to load the JSON scene and use the HT-wrapped datamodel. deserialize(JSON) 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; // Assign the titile from the JSON file to the global titile datamodel.deserialize (JSON); // Deserialize GraphView.fitContent (true); // Scale and pan the topology to show all primions, i.e., make all elements visible});Copy the code

In HT, an id attribute is automatically assigned to a Data object when it is constructed, which can be obtained and set through data.getid () and data.setid (id). The ID value cannot be changed after the Data object is added to the DataModel. Datamodel.getdatabyid (ID) is a quick way to find Data objects. It is generally recommended that the id attribute be automatically assigned by HT, and the unique identifier of the user’s business significance can be stored in the tag attribute. The Data#setTag(tag) function allows arbitrary dynamic change of the tag value. The corresponding Data object can be found by DataModel#getDataByTag(tag) and can be deleted by DataModel#removeDataByTag(tag). Datamodel.getdatabytag (tag) = datamodel.getDatabyTag (tag);

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');Copy the code

I have made the corresponding elements of each label in the figure below:

Then we set the objects that need to rotate and blink. In HT, the setRotation(rotation) function is wrapped into the setRotation(rotation) function. By getting the current rotation Angle of the object, an additional radian is added to this Angle. This will rotate the same radians in a certain amount of time:

setInterval(function(){ var time = new Date().getTime(); var deltaTime = time - lastTime; Var deltaRotation = deltaTime * math.pi / 120 * 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 we set tag names like 1, 2, 3, so we go through 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);Copy the code

HT also encapsulates the setStyle function to set the style, which can be abbreviated as S. Please refer to the HT for Web style manual for details.

for (var i = 0; i < 8; I ++) {// Because there are some similar elements we set tag names like 1, 2, 3, so we go through 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); }Copy the code

We also timed the flashing of the “warning light” to set the background color to “colorless” for even seconds, “yellow” for yellowAlarm, and “red” for 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');
}Copy the code

The whole example was solved so easily, so easily…

If you are interested in learning more about HT for Web, you can go to the official website of HT for Web and check out the manuals.