preface

As an important part of smart city, smart light pole management system adopts information and digital means to integrate the monitoring and data collection and processing of various objects such as street lamps and urban landscape lighting, providing a powerful means for city managers to conduct city management and make scientific decisions.

Wisdom light pole management system is a comprehensive system for street lamp intelligent management, for all street lamps within the scope of centralized control, real-time data monitoring, abnormal intelligence analysis and fault alarm, in order to prevent the equipment in the process of aging and loss, but also can realize street light network configuration information management and other facilities, to meet the demands of a subsequent users to upgrade. In view of this situation, we have implemented a smart lamp pole management system based on HT for Web, displaying data through a friendly 3D visual human-computer interaction interface.

As a model of integrating information and communication technology with traditional urban public infrastructure, smart tower is regarded as the most promising new public infrastructure with four characteristics of “comprehensive, sharing, wisdom and harmony”. It has attracted wide attention in many countries around the world and has begun to be built.

At present, the construction of smart towers in China is still in its infancy. However, driven by the construction of new smart cities and the commercialization of 5G, relevant encouragement policies have been issued one after another, accelerating the development trend, and it is expected that a breakthrough growth will be achieved in China in the next two or three years.

(Service application Example)

(Multiple shots in one)

System analysis

1. Communication services

Smart tower operation communication connection points can be extended in wireless or wired ways to provide a variety of business services, including wireless base station, Internet of things, edge computing, public WIFI and optical transmission, etc. In addition, the smart tower covers a wide area and is close to the connected object, which is suitable for carrying the Internet system. It connects and manages ubiquitous intelligent terminals through various connection methods, including optical fiber transmission network, 2G/3G/4G/5G, NB-iot, Wi-Fi, PLC, ZigBee, etc. Receive, integrate and transfer information from all areas of the city at any time and anywhere to improve the intelligent level and management efficiency of the city.

2. Public safety

Smart towers are widely distributed in urban roads, streets and parks and have good penetration into densely populated areas. By deploying cameras and emergency help buttons on the poles and networking with remote monitoring systems, smart towers have become an indispensable part of urban security scenes. Through the deployment of cameras to achieve black and white list monitoring of cars and people, through face recognition/license plate recognition/behavior recognition and other technologies to identify risk factors; Through the deployment of one-button alarm, people can quickly get in touch with the management personnel in an emergency, provide specific location information to the management personnel, and use the camera to judge the scene situation remotely, saving time for all kinds of emergency processing.

3. Smart lighting

With the booming development of Internet of Things technology and LED technology, the combination of Internet of Things + LED makes the intelligent transformation of municipal lighting enter the fast lane. Intelligent lighting connects each lamp to the Internet through information sensing equipment to realize on-demand lighting and fine management of batch lamps, so as to achieve energy conservation, emission reduction, efficient operation and maintenance. Through single lamp control, centralized controller, illuminance sensor, multi-functional electricity meter and intelligent tower pole platform, real-time/group operation of turning on, turning off and dimming can be realized. Loop opening and closing operation; Remotely monitor the running status, running parameters, and running exceptions.

4. Environmental monitoring

Based on the meteorological environment monitoring pole wisdom, has the characteristics of the concentrated distribution of a wide range of coverage, and collected data through the cloud platform for big data analysis, data can be combined with environment, local and remote recommendation provides air quality, temperature and humidity, wind speed and direction, noise, electromagnetic radiation, light intensity and other environmental information; Combined with video surveillance system, it can also provide convenient comprehensive environmental services; Information can also be released in real time with the LED screen deployed by the smart tower. Realize the intelligent monitoring of urban environment and meteorology, alarm in advance, and provide data reference for environmental protection departments to improve the urban environment.

5. Smart transportation

Intelligent tower is more conducive to the collection and management of road and vehicle information due to the advantages of multiple points and short distance. The identification of speeding, illegal parking and other illegal behaviors can be satisfied by mounting high level cameras. In addition, the construction of intelligent road parking scenes can be completed by combining license plate recognition. Through the traffic flow detector, traffic state information can be collected and transmitted in real time, such as traffic flow, lane average speed, lane congestion, etc. Intelligent tower can also improve the level of road intelligence, such as road water, fault information can be monitored, to achieve better vehicle-road coordination.

6. Information dissemination

Smart tower has the characteristics of being close to the stream of people, the film and the line. When information is released by mounted equipment, it has the effects of wide dissemination, high effect and large impact force. In case of emergency events such as fire and earthquake, emergency broadcast and alarm light prompt can be carried out through multimedia information release system to inform people to evacuate safely. At the same time, government information, traffic information and commercial advertising can be released with LED screen. Intelligent tower pole equipped with multimedia interactive terminal can also realize man-machine interaction communication through sensors.

7. Energy business

Based on intelligent multi-function pole pole of energy in addition to the diverse device itself outside the normal work, also it can provide a wide range of supply for electrical services, can provide business including but not limited to: charging pile, USB charging, lights, cameras for electrical charging, unmanned aerial vehicles, such as user through the phone APP, also can realize all kinds of business appointment and look at it. If conditions permit, the smart tower pole can be equipped with solar panels or wind power generation equipment to achieve green energy in the city.

Code implementation

HT for Web has a complete GRAPHICAL component library based on HTML5, which makes it easy to build a modern, smart light pole management system across desktops and mobile terminals. The unique WebGL layer abstraction extends the model-View-Presenter (MVP) design Model to the field of 3D graphics. The following is the interface processing combining 2D and 3D:

/ / 2 d part
// Hide the selected border
gv.getSelectWidth = function() { return 0 };
// Forbid primitives to move
gv.setMovableFunc(function() { return false });
// Disable mouse zooming
gv.handleScroll = function() {}; 
// Disable double finger zooming under touch
gv.handlePinch = function() {}; 
// Forbid panning
gv.setPannable(false);
// Disable box selection
gv.setRectSelectable(false); 
// Hide the scroll bar
gv.setScrollBarVisible(false); 
// Global Settings right click menu disable
window.document.oncontextmenu = function() { return false }; Copy the code

/ / 3 d part
// Forbid dragging
g3d.setMovableFunc(function() { return false }); 
// Hide the selected border
g3d.getWireframe = function(d) { d.s('wf.visible'.false)};// Set the eye
g3d.setEye([- 8812..17520.14341]); 
// Set the center point
g3d.setCenter([- 6217..0.28341]); 
// Set the remote location
g3d.setFar(5000000); 
// Set the proximal position
g3d.setNear(1); 
// Set interaction limits
g3d.setInteractors([ new ht.graph3d.MapInteractor(g3d) ]); Copy the code

For the data display of smart light poles, WE applied 3D modeling to make the display of street lights and smart cities more three-dimensional and vivid. The data board adopted 2D kanban form to make the data more intuitive. Note also that we avoid click penetration when working with the 2D interface:

const div2d = gv.getView();
div2d.addEventListener(this.getWheelEventName(div2d), handler);

// On an HTMLElement, one or two of the following three events may be supported, but only one event will be called back. Standard events will be called back first, and compatibility events will not be triggered after standard events are triggered
getWheelEventName (element) {
    if ('onwheel' in element) {
        // Standard event
        return 'wheel';
    } else if (document.onmousewheel ! = =undefined) {
        // Generic old version events
        return 'mousewheel';
    } else {
        // Old Firefox events
        return 'DOMMouseScroll'; }};Copy the code

var handler = function(e) {
    if (gv.getDataAt(e)) {
        // Block the default event
        e.preventDefault(); 
        // Prevent events from bubblinge.stopPropagation(); }}; gv.getView().addEventListener('mousedown', handler);
gv.getView().addEventListener('touchstart', handler);Copy the code

Next, the first animation effect is the motion effect of the opening shot. We use moveCamera() method to achieve this through the target values of eye and Center and animation parameters:

g3d.moveCamera([- 12402..12910.52250], [- 6822..0.35987] and {duration : 3000});Copy the code

After adjusting the camera, further add all interaction effects in the 3D scene through event listener:

g3d.mi(function(e) {
    var data = e.data,
        kind = e.kind;
    // Double-click the background
    if (kind === 'doubleClickBackground') { 
        // Restore the perspective
        g3d.moveCamera([- 12402..12910.52250], [- 6822..0.35987] and {duration : 1000}); 
    }
    // Double-click the model
    else if (kind === 'doubleClickData') {
        / / switch 2 d
        eventbus.emit('switch2D'); 
    }
    // Move into the model
    else if (kind === 'onEnter') {
        g3d.getView().style.cursor = 'pointer';
    }
    // Remove the model
    else if (kind === 'onLeave') {
        g3d.getView().style.cursor = 'default';
    }
    // Click the model
    else if (kind === 'clickData') {
        // The selected state does not change color
        data.s('select.brightness'.1); 
        // Zoom in
        g3d.flyTo(data, {animation : {duration : 1000}, distance : 3500}); }});Copy the code

Among them, we have added double clicking background to restore perspective, hover when mouse moves in and out, zoom in perspective when clicking light pole, and switch to 2D interface after double clicking light pole. The flyTo() method is also a way to move the camera, similar to moveCamera() mentioned above.

As an example of the variation in data, we use an energy panel. It exists as a Billboard type in the 3D scene, where the changed text is the property we pre-bound in the 2D editor. Here we only provide binding random numbers as a reference. In practical applications, we can obtain data by establishing network links, data can be obtained through databases, data can be obtained through hardware serial ports, etc., which will not be mentioned here. Here is the code implementation:

Var dataPanel = dm.getDatabyTag ('dataPanel'); 
setInterval(function() {
    dataPanel.a('electricity', getRandomNum(1000, 8000));
    dataPanel.a('illumination', getRandomNum(2000, 6000));
    dataPanel.a('time', getRandomNum(3000, 4000));
},  1000);Copy the code

After switching to the 2D interface, there is also a small 3D scene in it. In order to view the local and macro view of the device, the interaction mode is the same as the big one, including effects such as zoom and restore, and it will switch when clicking the menu. As for the switching of these 2D panels, we have carefully encapsulated each of them in icon making, ensuring that when clicking a specific element in the panel through mouse events, the information contained in the module can be switched. Control the hiding of 2D part by returning button:

/ / switch 2 d
eventbus.on('switch2D'.function() {// Background display
    background.s('2d.visible'.true);// Title bar display
    title.s('2d.visible'.true);// small scene display
    scene.s('2d.visible'.true);// Other panels are hidden
    for (var i = 1; i < 8; i++) {
        dm.getDataByTag('panel' + i).s('2d.visible'.false);
    };
    dm.getDataByTag('panel' + title.a('state')).s('2d.visible'.true);
});
/ / switch 3 d
eventbus.on('switch3D'.function() {// Background is hidden
    background.s('2d.visible'.false);// Title bar hidden
    title.s('2d.visible'.false);// Hide small scenes
    scene.s('2d.visible'.false);// Other irrelevant panels are hidden
    for (var i = 1; i < 8; i++) {
        dm.getDataByTag('panel' + i).s('2d.visible'.false);
    };
});Copy the code

conclusion

At this point, our intelligent lamp pole management system is completed. The establishment of smart cities is the only way for the development of science and technology in the future. China is currently a developing country and at the critical moment of becoming a scientific and technological power. Facing such problems as rising labor costs, fluctuating prices of raw materials and increasingly fierce trade competition, it is urgent to improve efficiency and reduce production costs. Only by unswervingly promoting the landing of industrial Internet and accelerating the digital transformation and intelligent transformation of more enterprises can we remain invincible in the global competition. As the last step of intelligent digitalization, visualization makes complex and abstract data truly knowable and tangible, helps decision makers discover rules, insight into the future, and improves speed and efficiency for enterprises.

The system can not be completed without the support of HT for Web platform, rich and perfect icon library resources, making configuration design more simple and convenient. It is widely used in telecom network topology and equipment management, as well as power, gas and other industrial automation (HMI/SCADA) fields. At the same time, the success and perfection of HT is inseparable from the support of the majority of users. The professional needs provided by various industries make it more and more perfect. Welcome more big names to join in, this will make data visualization infinite possibilities.

In 2019, we have also updated hundreds of 2D/3D visualization case sets of industrial Internet, where you can find many novel examples and discover different industrial Internet: “Share hundreds of 2D 3D Visualization Cases of HT Industrial Internet 2019”.

Welcome to browse more technical demo, learn to create cool effects and advanced ideas, I will constantly update ~~