基于 HTML5 WebGL 的 3D 工控裙房系统

工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯、IT企业的布局;一方面是传统工业软件和工业网络企业自发地延伸,由产品提供商发展为方案供应商。 ... »

使用着色器在WebGL3D场景中呈现行星表面地形

实验目的:按照一定规律生成类地行星地表地形区块,并用合理的方式将地形块显示出来 涉及知识:Babylon.js引擎应用、着色器编程、正态分布、数据处理、canvas像素操作 github地址:https://github.com/ljzc002/ljzc002.github.io/tree/mast ... »

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

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

【妙味1】HTML5基础学习心得

不建议使用通配符 ,因为性能不高; 选择器的优先级: 1. 行间style id class element 2. 当混合时: 假设每一种代表一定数额的钱,相加,谁钱多谁优先。 块的特征: 1. 默认独占一行; 2. 没有宽度时,默认独占一行; 3. 支持所有的css命令。 内联元素的特征: 1. ... »

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

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

基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统

通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个地图网络拓扑图的应用,形成的效果可以用来作为地图的定位,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能够涉及的一款电信资源管理系统。 ... »

canvas学习笔记(一)

canvas是HTML5的新元素之一。使用canvas可以直接在HTML上进行图形操作,所以它具有极大的应用价值。canvas元素本身不具有绘图能力,它需要借助JavaScript来实现绘图功能。 canvas的限制: canvas绘制的图形是静态的,如果要让所画的图形动起来,则需要画出每一帧的图形 ... »

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

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

纯前端实现图片背景透明化

前言 不论是做一些2d的小游戏,或者制作小图标,或者抠图都需要用到这个功能,对图片的背景进行透明化,是我们经常需要用到的一个功能。 通常情况下我们都会去下载PS或者美图秀秀这样的软件去制作。 但是我真的不想仅仅为了做个透明图像就去下载这些软件,这些软件不仅体积大,要下载个半天,放在电脑上也占空间。 ... »

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

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

HTML5离线应用与客户端存储

支持离线 Web 应用开发是 HTML5 的另一个重点。所谓离线 Web 应用,就是在设备不能上网的情况下仍然可以运行的应用。 开发离线Web 应用需要几个步骤。首先是确保应用知道设备是否能上网,以便下一步执行正确的操作。然后,应用还必须能访问一定的资源(图像、Javascript、CSS等),只有 ... »

基于 HTML5 的 WebGL 3D 智能楼宇监控系统

智能监控的领域已经涉及到了方方面面,之前我写过一篇 2D 的智能地铁监控系统广受好评,突然觉得,既然 2D 的这么受欢迎,那么 3D 的需求量肯定也是非常大的,于是有了这个例子以及这篇文章。智能监控系统在 3D 中应用比较广泛的除了 3D 机房以外,我觉得就是楼宇监控,解放前端工程师绘制 3D 模型... ... »

电力 Web SCADA 工控组态编辑器

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

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

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

Html5视频播放video标签使用详解【转】

1,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件) <video src="hangge.mp4" controls></video> 2,通过width和height设置视频窗口大小 <video src="hangge.mp4" controls width= ... »

HTML5的常用新特性你必须知道

HTML5的常用新特性你必须知道 1 新的<!DOCTYPE 声明 HTML 有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE 的用处。<!DOCTYPE 不是 HTML 标签。它为浏览器提供一项信息(声明),即 ... »

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

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

关于html表单的disabled属性的设置问题

首先,我的看法是无论disable的值是否有值,只要设置了disabled属性的表单,无论是否有值,无论值为什么,都会被禁用。 来看下面例子: 在一个群里有人说因为直接写在表单属性上是字符串,因为字符串,所以都为真。 但是这说法我是觉得不对的,再看下面例子: 如果按照那位的说法,那就是说只要在js里 ... »

WebGL 3D 工业隧道监控实战

工业中的隧道我们可能接触的不多,但是在我看来,其中的实时监控是非常有必要的,事故的发生,事故发生地的事故内容,隧道中的排气,逃生通道等等,都是需要有外部人员监控操作的,会比真正事故发生的时候,现场操作这些会更好、更安全,这个 Demo 由此而生。 ... »