手把手教你搭建web组态编辑器1-共5篇

已于 2024-03-30 00:17:08 修改
阅读量243 收藏
点赞数 1
分类专栏： 组态编辑器 web组态 文章标签： json html5 javascript css css3
于 2024-03-29 16:40:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/byzt001/article/details/137150037
版权

成果展示icon-default.png?t=N7T8http://www.byzt.net

第一篇 组态的技术选择和开发工具

一、技术选择

目前只有两种选择，
       canvas和svg  

       Canvas: 是一个基于像素的渲染引擎，使用JavaScript API在画布上绘制图像，它的优点包括：  Canvas渲染速度快，适合处理大量图像和高度动态的图像。 可以直接操作像素，能够创建高质量、流畅的动画效果。 Canvas可用于实现复杂的游戏、3D效果等。

       SVG: 是一种基于矢量的图形格式，可以使用XML和JavaScript API在浏览器中绘制图像，它的优点包括：  SVG是基于矢量的图形格式，图像可以无限放大而不失真。 可以为SVG图像添加事件处理器，实现交互效果。 可以通过CSS进行样式控制，使得SVG图像更加灵活。 SVG图像可以直接嵌入到HTML文档中，不需要另外下载。 但它也存在一些缺点：  SVG渲染速度较慢，适合处理少量图像和少量动态的图像。 SVG图像在处理复杂图形时可能会导致性能问题。 由于SVG是基于矢量的图形格式，它的复杂度比较高，可能会导致文件大小较大。 根据个人喜好选择，一般来说canvas的性能要不svg好的多，对于组态画面，实时性要求要高，我们选择canvas。对canvas的开发，都需要选择一款框架，选择框架一定要选择文档全面，例子多的，konva.js是非常不错的。  ui框架自行选择，

二、框架选择

目前流行的框架有3种 一、Angular 二、React  三、Vue 

       我们开发一个工具类的东西出来，我们希望在任意框架下都能使用，还要考虑到老项目没有用到框架的情况。所以我们使用原生js+html+css来开发。这样在任何情况下都能使用（因为不管使用任何框架最终编译后都是原生js）

三、编辑器布局

布局如下

四、开发工具

我们使用 idea ，这个这个工具对于html，他可以自动发布，方便预览

点击这个按钮就可以轻松访问房钱的html页面

下一篇：完成组态编辑器的初步布局

BY组态-
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
最火前端Web组态软件(可视化)
前端-尔嵘
11-14 5万+
随着物联网、大数据等技术高速发展，我们逐步向数字化、可视化的人工智能（AI）时代的方向不断迈进。智能时代是工业 4.0 时代，我国工业领域正努力从“制造”迈向“智造”的新跨越。
组态 web 插件 编辑器
weixin_51733156的博客
10-23 1053
组态 web组态 插件 编辑器 插件介绍 1可任意对现场的实际场景进行模拟组态。 2组态场景保存后是json格式的数据，可落地到数据库或磁盘文件。 3保存后的场景可进行再次编辑。 4（组件不断添加中，详见演示案例）静态组件支持svg ,png可自己进行添加，现有的动态组件基本满足所有情况（如：旋转，流动，单机事件，闪烁，隐藏，状态（灯，文字）） 5客户端场景查看 6添加新场景 7编辑新场景 图片展示 一、界面预览 在这里插入图片描述 2、预览界面：测试组态后的结果界面进行测试，文本框可输入测试数据，点击发送
Web组态编辑器赋能智慧石油生产储运2D可视化
码为人生的博客
06-22 1852
石油是工业的“血液”，是重要的工业能源。数维图Sovit2D组态软件采用标准HTML5技术，基于B/S架构进行开发，多元素丰富的可视化组件，为石油生产储运场景提供直观的2D、3D可视化展示效果。
Canvas拓展
Raccon_的博客
10-27 394
笔记
Web组态可视化编辑器 快速绘制组态图
最新发布
BY组态
05-25 792
组态软件，又称组态监控系统软件，是指用于数据采集和过程控制的专用软件，是自动控制系统监控级的软件平台和开发环境。实际上，这些软件也是一种通用级的软件工具，可以通过灵活的配置快速建立工业自动控制系统的监控功能。组态软件广泛应用于机械、汽车、石油、化工、造纸、水处理、过程控制等领域。Web组态编辑器是指通过浏览器操作组态工具、浏览组态画面，实现工程管理、组态编辑以及组态运行三大功能。通过实现图元组态、可视化图表组态、数据库组态的配置与关联，完成基于Web服务的实时数据监控与服务端的多用户访问等。
Web-Editor:Web可视化组态编辑器(Angular8)
05-02
Tempo 基于angular版本开发， 项目截图 ! DEMO数据存储在IndexedDB，不要清除本地缓存:cookie及其他网站数据 ! 商业开发请开发对应后台服务 下载 前端 git clone https://github.com/bojue/Web-Editor.git cd Web-Editor npm install 运行 默认运行命令，需要服务端支持，也就是所以tag v0.1.0之后的版本，请先下载 并完成服务端启动。 npm run dev //or npm run start 使用说明 功能列表 拖拽创建组件 页面管理 元素列表 样式绑定 快捷键 预览 项目管理 服务器支持 (仅v0.1.0支持) IndexDB 快捷键 名称 快捷键 拷贝 control+ c 复制 control+ v 删除 delete 位置 上，下，左，右键 开发文档 编辑器代码组织 .
BY组态（WEB组态）编辑器插件介绍
bxds123的专栏
01-17 8658
项目作用 解决工业数据图形化展示，远程控制，故障报警。 项目优点 无需安装任何软件，无需安装任何插件，电脑端只需通过浏览器即可访问系统。 以组织机构的方式管理全国所有需要监控的点，一个账号可灵活授权，控制不同点。 故障报警灵活配置。 可添加无限点，无限用户。 根据实际业务场景灵活组态。 同时支持android手机端。 软件功能定制，根据客户的实际要求，量身定制。 客户端界面...
低代码，配置式web组态软件by组态
Y15117544759的博客
12-01 1793
具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等特点，最大程度减少研发和运维的成本，并致力于普通业务人员 0 代码开发实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。随着行业的发展、智能制造，智能控制、工业控制，对网页版软件的需求越来越复杂，要求原来越高。7 getXm 获取项目 byzt/config/InitConfig.js 画面组件点击绑定设备的时候的下拉列表，根据下拉列表配置的情况，选择实现某些接口 所有版本 5。
基于vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加svg组件.zip
02-19
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
手把手教你构建Web应用程序-视频教程网盘链接提取码下载 .txt
03-31
pring Boot 在传统 Spring 框架的基础上做了创新和优化，具有快速开发、快速部署、方便配置等特性，提高了...本课程共 8 个模块，介绍 Spring Boot 框架所提供的系统开发解决方案以及对应的工程实践。 视频大小：1.7G
WebAccess 组态软件
11-01
监控组态软件日益成为自动化硬件厂商争夺的重点，然而国外组态软件贵，国内组态软件功能等方面还待有提高。但都是传统的c/s架构，现物联网IOT兴起时，网络，云形式的分布式架构下，以补丁形式推出所谓网络版,毕竞还是有所失。现介绍一款原是美国Boradwin公司的，后给研华并购的组态软件，它是以B/S架构开发的，实际对比后，很不错，从脚本种类及其通用性，tag点数与国内购点的差异，值得推荐！
15个基于Web的HTML编辑器
04-26
15个基于Web的HTML编辑器，各式各样的编译器，源码地址提供下载
基于AJAX和SVG的组态软件Web发布模型
04-18
针对当前组态软件Web发布时安全性差，运行速度慢以及图形文件格式多样等问题，提出了基于AJAX(asynchronousJavaScriptandxML)SVG(scalablevectorgraphics)的组态软件Web发布模型
web编辑器 控件
07-24
一个很强大的web编辑器，文件里包括使用帮助，基本实现了word的所有功能 ，还附加了其特色
手把手教你搭建小程序音视频
03-29
(此图片来源于网络，如有侵权，请联系删除! )(此图片来源于网络，如有侵权，请联系删除! ) 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯视频云终端团队 发表于云+社区专栏 ...
手把手教你设计CPU-RISC-V处理器篇
09-23
第 1章 一文读懂CPU之三生三世 2 1.1　眼看他起高楼，眼看他宴宾客，眼看他楼塌了——CPU众生相 3 1.3　人生已是如此艰难，你又何必拆穿——CPU从业者的无奈 17 1.4　无敌是多么寂寞——ARM统治着的世界 18 1.4.1 独...
最好用的大屏可视化BY插件
weixin_51733156的博客
07-29 1224
BY组态（WEB组态）编辑器插件介绍 （请使用谷歌浏览器或非ie浏览器 360 浏览器要切换到极速模式） 最新版本 演示地址： http://94.191.39.192:8080/gzq/jyzt-1.0/example.html 一、应用案例 可以广泛应用于化工、石化、制药、冶金、建材、市政、环保、电力等几十个行业。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/22112c576c594b9296d62bf4397f0bdf.png?x-oss-process=i
web组态可视化编辑器
u014507573的博客
05-23 501
BY组态是一款功能强大的基于Web的可视化组态编辑器，采用标准HTML5技术，基于B/S架构进行开发，支持WEB端呈现，支持在浏览器端完成便捷的人机交互，简单的拖拽即可完成可视化页面的设计。可快速构建和部署可扩展的SCADA、HMI、仪表板或IIoT系统。使用BY组态编辑器，可以创建现代化、可视化、形象化的流程，来反映机器设备和实时数据的状态，为自动化工业工厂的控制仪表进行个性化设计。
手把手教你搭建属于自己的pyqt5-yolov5目标检测平台(保姆级教程)
05-31
感谢您的提问！以下是手把手教您搭建属于自己的PyQt5-YOLOv5目标检测平台的保姆级教程： 1. 安装Anaconda 首先，您需要下载并安装Anaconda，Anaconda是一个 Python 数据科学平台，包含了许多常用的数据科学包，如Numpy、Pandas等。 2. 创建一个虚拟环境 在安装了Anaconda之后，您需要创建一个虚拟环境，以便隔离开发环境和系统环境。您可以在命令行中输入以下命令来创建一个名为yolov5的虚拟环境： ``` conda create -n yolov5 python=3.8 ``` 其中，“yolov5”是您的虚拟环境的名称，您可以根据自己的需要进行更改。 3. 激活虚拟环境 创建完虚拟环境之后，您需要激活它，以便在环境中进行开发。在命令行中输入以下命令来激活yolov5环境： ``` conda activate yolov5 ``` 4. 安装PyQt5和YOLOv5 在激活了虚拟环境之后，您需要安装PyQt5和YOLOv5。您可以在命令行中输入以下命令来安装它们： ``` pip install PyQt5 pip install yolov5 ``` 5. 创建PyQt5界面 在安装了PyQt5之后，您可以使用Qt Designer创建一个PyQt5界面。Qt Designer是一个可视化的界面设计工具，可以让您轻松地创建PyQt5界面。 6. 使用YOLOv5进行目标检测 在安装了YOLOv5之后，您可以使用它进行目标检测。您可以在Python脚本中使用以下代码： ```python import torch from yolov5.models.experimental import attempt_load from yolov5.utils.torch_utils import select_device device = select_device('cpu') model = attempt_load('yolov5s.pt', map_location=device) img = torch.zeros((1, 3, 640, 640), device=device) pred = model(img) print(pred) ``` 其中，“yolov5s.pt”是YOLOv5的预训练模型，您可以在YOLOv5的GitHub页面上下载它。 7. 将PyQt5界面与YOLOv5集成 最后，您需要将PyQt5界面与YOLOv5集成起来，以便您可以在界面上使用YOLOv5进行目标检测。您可以在Python脚本中使用以下代码： ```python import sys from PyQt5.QtWidgets import QApplication, QMainWindow from PyQt5.QtGui import QPixmap from yolov5.models.experimental import attempt_load from yolov5.utils.torch_utils import select_device class MainWindow(QMainWindow): def __init__(self): super().__init__() self.setWindowTitle('PyQt5-YOLOv5目标检测平台') self.setGeometry(100, 100, 800, 600) self.label = QLabel(self) self.label.setGeometry(50, 50, 640, 480) self.show() if __name__ == '__main__': app = QApplication(sys.argv) window = MainWindow() sys.exit(app.exec_()) ``` 这段代码创建了一个名为“PyQt5-YOLOv5目标检测平台”的窗口，并在窗口上添加了一个标签。您可以使用这个标签来显示检测到的目标。 以上就是手把手教您搭建属于自己的PyQt5-YOLOv5目标检测平台的保姆级教程。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值