With the rise of a new round of industrial revolution, addressing climate change has increasingly become a global consensus, and energy technology is becoming the driving force behind the transformation of the energy industry and the realization of innovation-driven development. From the world to China, the new energy industry represented by wind energy and photovoltaic power generation has developed rapidly. The integration of renewable energy power generation and modern power grids has become the core of sustainable energy transformation in the world. The cost direction has continued to improve, and China's cumulative installed capacity and newly installed capacity in the field of wind energy and photovoltaic power generation have jumped to the first place in the world.
Compared with the traditional production methods of stable and controllable energy, wind energy and solar energy are inherently unpredictable and largely depend on the weather. The energy equipment management platform, improving the "energy availability" and "time availability" of equipment, has become the key to the upgrading and transformation of the operation management method of the enterprise itself and even the entire new energy industry, of which the front-end big data visualization is indispensable. important part.
The following is a screenshot of the Web SCADA photovoltaic power station intelligent management solution system implemented by Zhichuang Energy based on HT for Web technology many years ago:
HTML5 technology based on HT for Web is not only used in traditional telecommunications, electric power and industrial control fields (see " Mobile Application of Web SCADA Industrial Control Based on HT for Web "), it has also been widely used in new energy fields such as wind power and photovoltaics. HT for Web based on Web technology is naturally the preferred solution for PaaS and SaaS cloud platform services for IoT monitoring. Here we will integrate the front-end graphical interface of HT for Web based on the first batch of Azure IoT suites on Microsoft's intelligent cloud in China. Component middleware, an example of a photovoltaic monitoring interface of the Power+ IoT monitoring cloud big data platform, which has been successively applied to more than 1,000 wind turbines and more than 5,000 photovoltaic inverters and combiner boxes across the country system front-end technology.
The final rendering effect of the pages we will introduce in detail is as follows, and experience the example at http://www.hightopo.com/demo/pv/index.html in the HT for Web official website example center .
After initially getting the designer's design draft, it is easy to see that the overall interface consists of two parts, the summary statistics in the upper part, and the detailed information display of the specific combiner box in the lower part. In addition to displaying real-time summary information, the upper part also has the function of clicking to filter the lower part of the combiner box, while the lower part has hundreds or even thousands of combiner boxes due to the large amount of data, so zooming, panning and eagle eyes are required. and other operating functions.
Based on the above analysis, it is easy to conclude that the second half must be appropriately implemented by the GraphView topology diagram component of HT for Web , and the customer proposed that each combiner box needs to be able to display the detailed information of all important indicators, and the display requirements may be variable. , so it is not enough to use a simple Node node to display basic functions such as pictures, text, bubbling, and alarm coloring. This kind of demand is very suitable for using the vector of HT for Web www.hightopo.com/guide/guide/ The core/vector/ht-vector-guide.html solution, the basic principles have been elaborated in the series " The Way of Designing HT Graphic Components ", so I won't expand it here.
For the combiner box, we need to design a vector icon as shown in the figure above. This is not difficult. It can be done by using the HT vector editor, and then set the color, text, size and other graphic parameters and business parameters in the graphic. For the specific data binding format, please refer to the JSON format introduced in the " HT for Web Data Binding Manual ", and then you only need to set the real-time data obtained in the background to the relevant binding properties of the graphic element at runtime.
Although the MVP/MVVM data model design architecture adopted by HT for Web has been explained in " Hundreds of HTML5 Examples to Learn HT Graphic Components - Topology Map " , there are still many students who have just started Web application development asking how HT works with the backend The communication collects data in real time, just use this example to expand the explanation. In the example of http://www.hightopo.com/demo/pv/index.html , you will notice the following two data: basicData and realTimeData:
These two data values are written as dead values in the demo, but in actual operation, data is transmitted through the background. In recent years, more and more HTML5-based real-time monitoring systems have adopted the WebSocket solution, which has achieved real-time data acquisition. The customer in this case is no exception. As mentioned earlier, they adopted the Azure IoT Suite of Microsoft Intelligent Cloud, so it is natural for them to adopt .NET-based ASP.NET SignalR ( https://github.com/SignalR/SignalR ) The adopted WebSocket framework scheme.
function createDatas() { json = JSON.parse(basicData); json.result.forEach(function(data) { var node = new ht.Node(); node.setImage('symbols/enjoy/pv/pv-box.json'); node.s({ 'select.color': 'white', '2d.selectable': false }); node.a({ deviceName: data.deviceName, capacity: data.capacity + 'KW', raw_capacity: data.capacity }); node.setTag(data.deviceCode); graphView.getDataModel().add(node); }); }
When the page is opened, the system first builds hundreds of combiner box primitives in the CreateData function according to the basicData information, and converts the primitives through node.setImage('symbols/enjoy/pv/pv-box.json'); Set up the combiner box vector we built, and then use the simple extended layout algorithm in the example to make a matrix layout of hundreds of combiner box devices. Of course, you can use HT's automatic layout to arrange complex network topology diagrams: http://www.hightopo.com/guide/guide/plugin/autolayout/ht-autolayout-guide.html .
Another point to note here is that we set the Tag tag of each primitive through node.setTag(data.deviceCode) when building the primitive. This is very important. This is used to quickly find the corresponding primitive for data in the future. Prepare for the update.
function fillDatas() { var hlx_state_0 = hlx_state_1 = hlx_state_2 = hlx_state_3 = 0; var zc_state_1 = zc_state_2 = zc_state_3 = 0; json = JSON.parse(realTimeData); json.result.wtrtDatas.forEach(function(data) { var comboxRTDto = data.comboxRTDto; var node = graphView.getDataModel().getDataByTag(comboxRTDto.deviceCode); if (node) { var hlxState = comboxRTDto.pvDeviceStCode; node.a({ hlxState: hlxStateMap[hlxState], discreteRate: comboxRTDto.discreteRate + '%', outputPower: comboxRTDto.outputPower + 'KW', percentage: comboxRTDto.outputPower / node.a('raw_capacity') }); } }); }
After the above work is completed, the interface can already display all photovoltaic combiner box devices, but the parameter information displayed by each device is the initialization set when we built the vector icon, not the real real-time running value, so we need to push it in real time according to the background In the above fillData function, we parse the realTimeData data, then traverse the data of each combiner box, find the corresponding primitive through dataModel.getDataByTag(deviceCode), and set the corresponding attr attribute, and these attributes Since the corresponding graphic parameters have been bound during the vector design, after all the data are set, the corresponding combiner boxes on the topology map can automatically display real real-time data.
In this example, we only update the real-time data once, but the normal system will poll for a few seconds through AJAX, or use WebSocket from the background to push the real-time data to the front-end in case of changes, and then call the fillDatas function multiple times to update the data. The content of this interface scene is dynamically constructed after the first basicData query data. If you already have the JSON data serialized by the topology map, you only need to deserialize to construct the topology map scene. Serialization and deserialization can Reference: http://www.hightopo.com/guide/guide/core/serialization/ht-serialization-guide.html
After doing the above, we are only half of the work, remember that we still have a summary and filter panel for the first half:
刚开始看这个设计稿，很自然想到面板和操作按钮的东西采用 HT for Web 的面板组件即可搞定：http://www.hightopo.com/guide/guide/plugin/form/ht-form-guide.html ，不过后来想想通用组件的风格比较固定，哪怕定制出效果也很难应对多变的需求，突发奇想其实我们照样可以采用 HT for Web 的 GraphView 拓扑图组件来干这事，上面的文字无非就是 ht.Text 图元，进度条也就是 shape 类型为 rect 的 Node 节点，而过滤控制按钮其实也只一堆 Node 图元，只不过我们设置了不同背景色，将 label 标签居中显示，同时将图元选中效果由边框改为 shadow 的阴影选中效果即可大功告成，而且由于是拓扑图的布局，因此不管布局位置或者界面风格的需求变化，用户都可以很容易妥妥拽拽，设置下新风格参数即可搞定多变的业务展示需求
function createHeader() { header = new ht.graph.GraphView(); ht.Default.xhrLoad('displays/enjoy/pv/pv-header.json', function(json) { header.getDataModel().deserialize(json); header.getDataModel().setBackground(undefined); createDatas(); fillDatas(); layoutDatas(); }); header.setInteractors(null); var handleClick = function(e) { if (!graphView.getView().contains(e.target)) { var data = header.getDataAt(e); header.sm().ss(data); } }; document.body.addEventListener('mousedown', handleClick, false); document.body.addEventListener('touchstart', handleClick, false); }
汇总部分就是有以上 createHeader 函数搞定，注意这里我们通过 ht.Default.xhrLoad('displays/enjoy/pv/pv-header.json 直接加载已经序列化好的拓扑图信息，然后由于该汇总面板唯一需要的交互就是点击选中分类按钮进行过滤，于是我们通过 header.setInteractors(null); 直接关闭了所有 HT for Web 的默认交互，然后通过添加 mousedown 和 touchstart 的原生 HTML 监听事件自定义交互逻辑，这里只需要通过 header.getDataAt(event) 传入不管是 touch 还是 mouse 事件，HT 自动回返回当前操作点下的图元，后续过滤已经动画的逻辑比较简单，这里就不展开说明了，有兴趣的可以改造成更带感的过滤动画布局效果，可参考《透过WebGL 3D看动画Easing函数本质》一文了解 HT for Web 的各种预制的动画功能。
这里我们仅演示了光伏的一个页面效果，风电的风机也可以采用类似的方式呈现，例如 http://www.hightopo.com/demo/fan/index.html 这个上万个矢量风机实时转动的 HTML5 性能效果，也可以结合例如百度地图、OpenLayers 或 GoogleMap 等地图方案呈现风机或光伏监控画面：
For those who are tired of watching 2D vector fans, you can also use a 3D fan to experience the effect: http://www.hightopo.com/demo/windTurbines/index.html , this 3D rotatable fan implemented by HT for Web There are only a few dozen lines of HTML5 code. Today, I will not introduce it because of the limited space. Let’s play demo first.
At this moment, it is the Lantern Festival in 2017. The Tupu software team wishes all readers a happy new year. In addition to HT for Web , we have also developed an open-source free HTML5 game engine tool QICI Engine: https://github.com/ qiciengine/qiciengine , students who are interested in front-end graphics and game technology, don't bother to get to know them: http://www.hightopo.com/joinus.html Welcome to add my mobile number to WeChat, or send me an email, thank you very much!
