基于 HTML5 WebGL 的 3D 棉花加工监控系统

远程监控系统主要是通过分布于棉花加工生产线各种设备的传感器、开关信号、视频监控设备、 PLC 控制器等装置,通过智能联网设备集成到互联网和局域网上面,实现对生产、运营情况的随时掌握,建立网络范围内的监控数据和网上知识资源库,根据现场采集的设备运行数据进行远程诊断和在线维修。 ... »

基于 HTML5 的 WebGL 3D 版俄罗斯方块

2D 的俄罗斯方块已经被人玩烂了,突发奇想就做了个 3D 的游戏机,用来玩俄罗斯方块。。。实现的基本想法是先在 2D 上实现俄罗斯方块小游戏,然后使用 3D 建模功能创建一个 3D 街机模型,最后将 2D 小游戏贴到 3D 模型上。 ... »

基于 HTML5 WebGL 的低碳工业园区监控系统

低碳工业园区的建设与推广是我国推进工业低碳转型的重要举措,低碳工业园区能源与碳排放管控平台是低碳工业园区建设的关键环节。如何对园区内的企业的能源量进行采集、计量、碳排放核算,如何对能源消耗和碳排放进行实时动态监测等问题,涉及多个技术领域,专业性强。其数据不仅要求准确,更要求真实可靠(即可核查、可溯源... ... »

开源纯C#工控网关+组态软件(十)移植到.NET Core

一、 引子 一、 引子 写这个开源系列已经十来篇了。自从十年前注册博客园以来,关注了张善友、老赵、xiaotie、深蓝色右手等一众大牛,也围观了逗比的吉日嘎啦、精密顽石等形形色色的园友。然而整整十年一篇文章都没有写过,属于非常努力的在社区汲取营养的菜青虫一只,现在也算破茧而出了,虽然远没有得道化蝶的 ... »

基于 HTML5 Canvas 的工控机柜 U 位动态管理

工控上运用到机柜 U 位的非常普遍,但是经常在创建 2D/3D 模型的时候,我们向内添加设备,每个设备占的 U 位不同,如果只是单纯地向机柜内部添加节点,在节点还未添加的时候我们没法直观地看到具体的效果,所以我就想能不能在添加的过程中就让大家直接看到设备的 U 位占位以及效果,这个 Demo 因此而... ... »

电力 Web SCADA 工控组态编辑器

SVG并非仅仅是一种图像格式, 由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台性和可扩展性,从而在图形可重用性上迈出了一大步。如SVG可以内嵌于其他的XML文档中,而SVG文档中也可以嵌入其他的XML内容,各个不同的SVG图形可以方便地组合, 构成新的SVG图形。但是这篇文章并不是要... ... »

开源纯C#工控网关+组态软件(九)定制Visual Studio

一、 引子 一、 引子 因为最近很忙(lan),很久没发博了。不少朋友对那个右键弹出菜单和连线的功能很感兴趣,因为VS本身是不包含这种功能的。 大家想这是什么鬼,怎么我的设计器没有,其实这是一个微软黑科技,如果用好,VS可以打造为你专用的神兵利器。 为什么我要扩展Visual Studio的界面设计 ... »

Web SCADA 电力接线图工控组态编辑器

SVG并非仅仅是一种图像格式, 由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台性和可扩展性,从而在图形可重用性上迈出了一大步。如SVG可以内嵌于其他的XML文档中,而SVG文档中也可以嵌入其他的XML内容,各个不同的SVG图形可以方便地组合, 构成新的SVG图形。但是这篇文章并不是要... ... »

基于 HTML5 Canvas 实现的文字动画特效

文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读。 ... »

WebGL 3D 电信机架实战之数据绑定

在前端中,视图层和数据层需要进行单向或者双向数据绑定,大家都已经不陌生了,有时候 2D 做的比较顺了之后,就会想要挑战一下 3D,不然总觉得痒痒的。这个 3D 机架的 Demo 我觉得非常有代表性,首先,3D 机架用途非常广,尤其是在电信行业,就算不是机架,在比如工业方面 3D 模型以及数据绑定的应... ... »

快速创建 HTML5 Canvas 电信网络拓扑图

电信网络图的应用还是相当广泛的,因为这种网络结构相对简单,而且线路也少,基本建设和维护费用少;中心通信点增加了汇接交换功能,集中了业务量,提高了电路利用率;而且只经一次转接。所以现在电信行业人员广泛都采用这种网络结构。学会了这种绘制方法,以后绘制电信网络拓扑图都是分分钟的事~ ... »

基于 HTML5 WebGL 的 3D 机房

WebGL 渲染的 3D 机房?漂亮的 3D 机房配上流畅的切换,最喜欢镜头缓缓移动的感觉了!而且移动一定要自然!这个 Demo 就是为了纪念一下第一次搭配 eye 和 center 做出的“镜头感”! ... »

快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型

如何在一个斜面上创建 3D 模型?如何通过拖拽创建 3D 模型?这些我们在实际项目中用到的概率也着实不低。我们知道,空间中存在无数个面,一个点和一条法线就能创建一个面,如何利用好这两个部分? ... »

快速开发 HTML5 交互式地铁线路图

感觉目前地铁上的地铁线路图也不是很人性化,很多交互方面没有考虑到用户的需求?感觉总是有各种容易看串的信息,利用 html5 canvas 完成的这个交互式地铁线路图 Demo,如果地铁上的展示信息稍微有点交互会怎么样?不用忙着上车下车,轻轻一点,就能省去很多时间。 ... »

基于 HTML5 Canvas 的交互式地铁线路图

感觉目前地铁上的地铁线路图也不是很人性化,很多交互方面没有考虑到用户的需求?感觉总是有各种容易看串的信息,利用 html5 canvas 完成的这个交互式地铁线路图 Demo,如果地铁上的展示信息稍微有点交互会怎么样?不用忙着上车下车,轻轻一点,就能省去很多时间。 ... »

基于 HTML5 Canvas 绘制的电信网络拓扑图

电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式。组合逻辑描述网路功能的体系结构,配置形式描述网路单元的邻接关系,即以交换中心(或节点)和传输链路所组成的拓扑结构。常见的网络拓扑结构有星型结... ... »

基于 HTML5 WebGL 的 3D SCADA 主站系统

服务端与客户端的通信可以说是经典的例子了,但是如何快速搭建 3D 的 SCADA 系统,还要加上鹰眼的部分,如果是纯手工 HTML5 来做的话,能完成,但是时间也消耗了许多,而这个例子的鹰眼部分只要 1 行代码。。。整个例子只有两百多行代码! ... »

基于 HTML5 的 3D 工控隧道案例

HTML5 WebGL 技术能够在浏览器里更流畅地展示 3D 场景和模型,还能创建复杂的导航和数据视觉化,所以在 3D 项目上被广泛采用,HTML5 采用插件型和原生型,很多插件的添加还是比较让人头疼的,所以我用原生的写了这个项目,也不复杂,大家可以参考一下~ ... »

开源纯C#工控网关+组态软件(八)表达式编译器

一、 引子 一、 引子 监控画面的主要功能之一就是跟踪下位机变量变化,并将这些变化展现为动画。大部分时候,界面上一个图元组件的某个状态,与单一变量Tag绑定,比如电机的运行态,绑定一个MotorRunning信号;但有些时候不会这么简单,比如温度计在温度高于50℃显示红色;某设备报警,可能是多个条件 ... »