[置顶] HTML5 技术在风电、光伏等新能源领域的应用
伴随着新一轮工业革命的兴起
相较于传统能源生产模式而言，在稳定性与可控性方面存在明显劣势。风能与太阳能等新能源资源本身具有显著的不可预测性特征，在实际应用中往往需要依赖于自然环境的变化情况。因此，在推动企业实现整体运营模式升级的过程中，构建一个综合性的新能源设备管理系统平台显得尤为重要。该平台需要整合物联网技术与云计算资源，并通过优化算法和数据处理流程来提高设备运行的能量转化效率和使用效率。其中不可或缺的就是前端的大数据可视化技术环节。
以下是致创能源公司在几年前通过HT for Web技术开发的Web SCADA光伏发电站智能管理解决方案系统截图：
[
]()
[
]()
基于 HT for Web 的 HTML5 技术不仅在传统电信、电力及工业控制等领域得到广泛应用（参见《基于 HT for Web 的 Web SCADA 工控移动应用》），如今已在新能源领域得到了广泛应用。基于 Web 技术的 HT for Web 现已成为物联网监控领域的主流云平台服务方案之一。其中，通过整合图扑软件 HT for Web 的前端图形界面组件中间件以及国内首批采用微软智能云上 Azure IoT 套件的企业案例，我们成功构建了一个光伏电站实时监控的数据平台。该平台已投运了超过1000座风力发电机组以及5000台光伏逆变器和汇流箱的系统前端技术
我们将详细展示的具体页面最终呈现效果如下，
-HT for Web-（官网）-examples center-（demos index）-examples center-pv index-（demo pv）的例子进行体验
[
]()
在获得设计师的设计稿之后，在设计稿中能够清晰识别整个界面分为上下两个主要区域：上半区呈现了实时汇总统计信息，并且该区域还特别支持点击筛选下方区域内的汇流箱；下半区则展示了大量具体的汇流箱信息，并且由于数据量庞大，在这一区域内需要提供灵活的操作空间以适应复杂的信息浏览需求。具体而言，在上半区之外，则提供了丰富的交互功能包括缩放工具和平移功能，并支持通过放大缩小查看细节。
有上面的分析很容易得出下半部分肯定由 HT for Web 的 GraphView 拓扑图组件来实现合适，并且客户提出每个汇流箱需要能显示出所有重要指标的详细信息，并且显示需求可能存在多变性，因此采用简单的 Node 节点，通过图片、文字、冒泡、告警染色这些基本功能来显示肯定是不够的，这种需求就非常合适采用 HT for Web 的矢量 www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html 解决方案，《HT图形组件设计之道》系列中已详细阐述了基本原理这里就不再展开了。
[
]()
为汇流箱设计一个如图所示的矢量图标并非易事。这一任务相对简单。使用 HT 矢量编辑器只需轻点鼠标就能快速完成。随后需妥善配置图形元素的颜色、字体、尺寸等属性与其对应的业务参数之间的数据绑定关系。具体数据绑定格式可在《HT for Web 数据绑定手册》一书中找到详细说明。在运行时只需将实时数据输入至相应图元的数据绑定属性中即可完成配置。
《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》已有详细说明HT for Web所采用的 MVP/MVVM 数据模型设计架构，并有不少刚开始学习Web开发的同学对HT如何与后端通讯实时采集数据的问题提出了疑问。借此实例进一步阐述，在http://www.hightopo.com/demo/pv/index.html这一实例中可以看到：从实例中可以看到以下这两个数据项——
[
]()
这两个数据点在 demo 中被预先设置了固定值，在实际运行过程中是通过后端系统实时获取数据。近年来越来越多基于HTML5实时监控需求的系统开始转向采用WebSocket协议以确保数据传输的实时性。同样地，在本案例中所考察的客户也没有例外，在他们的解决方案中使用了微软智能云提供的Azure IoT套餐，并因此选择使用 ASP.NET SignalR（GitHub上的链接）作为他们的 WebSocket 框架方案
functionfunctionvarnewfalse当系统在CreateData函数中接收basicData信息时，
首先生成数百个汇流箱图元实例，
并通过调用node setImage('symbols/enjoy/pv/pv-box.json')方法设置这些图元。
接着，
根据具体实施中的扩展布局算法，
将生成的数百个汇流箱设备实例进行矩阵式排列。
对于较为复杂的网络拓扑结构，
建议参考HT自动布局技术：
http://www.hightopo.com/guide/guide/plugin/autolayout/ht-autolayout-guide.html。
需要注意的一点是，在构建图元时我们通过 node.setTag(data.deviceCode) 设置了每个图元的Tag标签 这一做法旨在为后续快速查找并更新相关图元做好准备 该操作有助于确保数据同步高效
functionvarvarfunctionvarvarifvar系统已实现全部光伏汇流箱设备的展示功能。
然而，在当前状态下，
系统初始配置仅基于矢量图标设定基础参数，
这与实际运行中的动态数据存在差异。
因此，
为了确保数据的准确性与实时性，
在fillData函数中我们解析并接收实时数据源。
随后对每个汇流箱的数据进行遍历处理，
通过dataModel.getDataByTag(deviceCode)定位对应的图形元素，
并对其属性进行更新设置。
这样拓扑图将实时更新并准确反映当前各汇流箱的各项参数数值。
在这个示例中仅更新了一次实时数据。然而，在正常情况下，在正常运行时（即通常情况下），系统会通过 AJAX 间几秒轮询的方式或采用WebSocket机制，在后台检测到数据变化时自动向前端发送新数据。随后会连续调用fillDatas函数以持续更新数据库。该界面场景的内容则是在首次调用basicData方法获取初始数据后动态生成。如果已经获取到了带有拓扑图序列化的JSON格式的数据，则可以直接使用反序列化功能来构建拓扑图场景。有关详细的信息，请参阅http://www.hightopo.com/guide/guide/core/serialization/ht-serialization-guide.html
完成上述内容后, 我们仅仅是完成了总工作量的一半. 别忘了, 在上半部分还有一个汇总以及过滤功能区需要处理.
[
]()
当我初步浏览这份设计稿时，我自然会联想到利用HT for Web提供的pane和control组件来实现这一目标。
functionnewfunctionnullvarfunctionifvarfalsefalse汇总部分主要由 createHeader 函数完成。
需要注意的是，在此过程中我们直接加载了已经序列化好的拓扑图信息。
由于该汇总面板仅需进行点击选中分类按钮以实现过滤功能。
因此我们关闭了所有 [HT for Web] 的默认交互。
为了满足唯一交互需求 我们新增了针对 mouse 和 touch 事件的原生 HTML 事件监听。
这里只需要通过 header.getDataAt(event) 传入不管是 touch 还是 mouse 事件，
HT 自动返回当前操作点下的图元，
后续过滤相关的动画逻辑较为简单，
感兴趣的朋友不妨尝试设计出更具视觉效果的过滤动画布局方案。
我们仅展示了光伏页面效果的一个实例。风力发电机组同样可采取类似的展示手段。该网站提供了一个由数千个矢量构成的动态展示http://www.hightopo.com/demo/fan/index.html ，这个网页展示了上万个矢量风机实时转动的 HTML5 性能效果；同样可整合百度地图、OpenLayers或GoogleMap等工具展示风电机组及光伏系统的实时监控画面：
[
]() [
]()
对于已经习惯了二维矢量风力发电机的用户们来说，在三维空间中体验一种全新的旋转变换效果也是一种享受。该网站提供了一个简洁直观的三维可旋转风力发电机模型，并用HTML5简洁地实现了这一目标。由于篇幅限制暂时不做详细讲解，请大家先亲自体验一下这个演示文稿吧！
[
]()
提前向大家新年快乐！除了 HT for Web 项目外，我们还推出了一个开源免费的 HTML5 游戏引擎工具 QICI Engine： https://github.com/qiciengine/qiciengine 。对于前端图形技术和游戏开发感兴趣的朋友们，请随时前来交流：http://www.hightopo.com/joinus.html 。欢迎手机号加我微信或者给我发邮件！非常感谢！
[
]()