ht for web深度开发实践
文章平均质量分 60
国产图形引擎图扑HT的深度开发实践,可以实现精通ht.j、ht.widget、ht.ui以及编辑器学习和开发,实践开发的具体积累和问题总结。
IOTOS
这个作者很懒,什么都没留下…
展开
-
吸附节点嵌套,子节点吸附父节点布局,保持相对位置固定不变,可以形成一个整体类似代码布局的效果,并且被作为组合内部图元后,组合缩放也不会导致变形或间隙/空隙/间隔变化
吸附节点嵌套,子节点吸附父节点布局,保持相对位置固定不变,可以形成一个整体类似代码布局的效果,并且被作为组合内部图元后,组合缩放也不会导致变形或间隙/空隙/间隔变化原创 2022-09-29 11:09:42 · 307 阅读 · 1 评论 -
组态icon图标,iconfont、SVG图片可以在组态中转换成图纸或者图标,并且自动化保存到图标目录下同样命名的文件夹内的步骤;data.a()、data.ca(),带前缀和不带前缀的属性获取及设置
图标嵌套中,可以拖放进来同一个图标的多个实例,前缀是用来在数据绑定中这多个实例的,比如拖放两个相同的仪表嵌套进来,显然两个仪表是要绑定不同的数据作为变量暴露出去关联各自的物联中台数据点,那么一定要有区分,这就体现在前缀上。注意,选中图标实例时在各自的属性不论是attr还是func里,可以都是一样的比如变量名为xxx,在全局dataBindings数据绑定中,命名就需要时a.xxx、b.xxx,这样通过a、b各自的前缀设置来区分。原创 2022-09-28 07:57:57 · 678 阅读 · 0 评论 -
导出部署与集成 —— 常规代码开发的页面和UIOTOS前端无代码(嵌套/连线)页面,通过收发器无缝衔接与集成,代替iframe的postMessage通信
这是一款拥有独创技术的前端零代码工具,专注于解决前端界面开发定制难题,原型即应用!具有页面嵌套、属性继承、节点连线等全新特性,学习门槛低,功能极为灵活。用户无需懂任何前端开发技术,简单了解使用规则,就能够按照业务需求,定制开发复杂的WEB应用。主要面向后端/算法工程师、硬件/电气工程师,以及产品经理、UI、美术、实施工程师等。适用于搭建基于物联网平台等的上层业务应用。实现前端开发不求人,项目交付快好省!原创 2024-06-03 14:25:54 · 698 阅读 · 0 评论 -
新技术:WEB组态能页面嵌套、属性继承吗?
有没有可以支持图纸嵌套、属性暴露的?或者说页面任意嵌套、属性多继承暴露到上层?这样逐层嵌套,就可以实现复杂页面功能的封装!否则一般的WEB组态编辑都只能做可视化大屏,没法做复杂点的应用页面。原创 2023-10-20 12:16:46 · 333 阅读 · 0 评论 -
table.drawData函数重写,如何在新的重写函数中调用被重写前的默认实现
table.drawData函数重写,如何在新的重写函数中调用被重写前的默认实现原创 2022-09-30 09:39:59 · 505 阅读 · 1 评论 -
基础操作:拓扑连线以及矩形文字位置
基础操作:拓扑连线以及矩形文字位置原创 2022-09-30 09:37:32 · 894 阅读 · 0 评论 -
全局初始注册图片图标十分有意义且有必要,如ht.Default.setImage(aa,‘xxx.json‘),特别是注册有数据绑定变量暴露的symbol图标(包括渲染元素),在代码使用node.se
全局初始注册图片图标十分有意义且有必要,如ht.Default.setImage(aa,'xxx.json'),特别是注册有数据绑定变量暴露的symbol图标(包括渲染元素),在代码使用node.setImage设置拓扑图元的图片时,可以成为同步函数!原创 2022-09-29 16:53:09 · 342 阅读 · 0 评论 -
嵌套图纸被容器组件加载看不到?比如长页图纸,没有关“适配内容”,被滚动组件加载时不显示,那么在反序列化中需要加上初始化处理
嵌套图纸被容器组件加载看不到?比如长页图纸,没有关“适配内容”,被滚动组件加载时不显示,那么在反序列化中需要加上初始化处理原创 2022-09-29 16:49:45 · 155 阅读 · 0 评论 -
缩放平移整个拓扑以展示所有的图元;加载图纸后,布局适应的过程动画怎么去掉,禁用加载后自适应的动画
缩放平移整个拓扑以展示所有的图元;加载图纸后,布局适应的过程动画怎么去掉,禁用加载后自适应的动画原创 2022-09-29 16:47:29 · 226 阅读 · 0 评论 -
数据绑定回调函数;图标数据绑定暴露变量如果是函数,注意名称要避开“事件处理”中的函数名,比如onClick(),会发生冲突,导致回写到事件处理中导致意想不到的异常;
数据绑定回调函数;图标数据绑定暴露变量如果是函数,注意名称要避开“事件处理”中的函数名,比如onClick(),会发生冲突,导致回写到事件处理中导致意想不到的异常;原创 2022-09-29 16:39:50 · 177 阅读 · 0 评论 -
数据绑定中函数类型,如何调用
数据绑定中函数类型,如何调用原创 2022-09-29 16:24:46 · 203 阅读 · 0 评论 -
编辑“事件处理”中设置鼠标指针样式
编辑“事件处理”中设置鼠标指针样式原创 2022-09-29 16:07:28 · 197 阅读 · 0 评论 -
数据模型dataModel遍历图元时并且要移除指定时,不能在遍历循环中dm.remove(),需要做好标记在新的循环中移除,否则会影响前面循环遍历本身!
数据模型dataModel遍历图元时并且要移除指定时,不能在遍历循环中dm.remove(),需要做好标记在新的循环中移除,否则会影响前面循环遍历本身!原创 2022-09-29 16:05:05 · 341 阅读 · 0 评论 -
矢量图标和渲染元素图标在运行状态graphView缩放时如何保持矢量图标的原始字体大小
(注意,新版升级后,嵌套图纸的按下事件是否停止冒泡,已经不交给initGVLoadedRunning的传参来控制了,默认自动识别根据图元的可选中属性来确定是否停止冒泡,不可选中就继续冒泡,可选中就停止冒泡,这样也兼容了滑动组件的事件响应不会被截获。注意,在嵌套graphView中加载图纸,且图纸中用的是吸附节点布局,没有勾选“适配内容”,这种情况下,直接运行该图纸(在IOTOS应用平台框架内),显示的矢量图标字体大小也是正常大小,不会被缩放,即使随着浏览器窗口的动态调整也是如此,打印gv的缩放比例显示1。原创 2022-09-29 15:59:04 · 545 阅读 · 0 评论 -
图标、图片、矢量图注册,通过名称来配置icon可以提高性能
图标、图片、矢量图注册,通过名称来配置icon可以提高性能原创 2022-09-29 11:59:51 · 444 阅读 · 0 评论 -
拖放图标组件图元到组态中默认属性config中配置,比如读写属性、可移动、事件处理等,如何自动勾选设置默认值;p属性的设置:setter、getter属性赋值及取值
拖放图标组件图元到组态中默认属性config中配置,比如读写属性、可移动、事件处理等,如何自动勾选设置默认值;p属性的设置:setter、getter属性赋值及取值原创 2022-09-29 11:54:56 · 162 阅读 · 0 评论 -
通过组态数据绑定赋值操作demo实例
通过组态数据绑定赋值操作demo实例原创 2022-09-29 11:33:37 · 280 阅读 · 0 评论 -
图片没法在编辑器外面复制,粘贴到图纸中,但是可以拖放进来,特别是粘贴到QQ的聊天窗口,再拖放到图纸中即可
图片没法在编辑器外面复制,粘贴到图纸中,但是可以拖放进来,特别是粘贴到QQ的聊天窗口,再拖放到图纸中即可原创 2022-09-29 11:22:45 · 188 阅读 · 0 评论 -
拓扑视图graphView监听鼠标点击按下等事件:html原生事件监听addEventListener,以及拓扑视图的监听gv.mi();嵌套图纸反序列化加载后,都默认调用initGVLoadedRu
拓扑视图graphView监听鼠标点击按下等事件:html原生事件监听addEventListener,以及拓扑视图的监听gv.mi();嵌套图纸反序列化加载后,都默认调用initGVLoadedRu原创 2022-09-29 11:18:23 · 275 阅读 · 0 评论 -
图纸GraphView中属性的操作比如背景色、网格颜色等,看生成的json文件会发现也有p、a、s,但是不属于任何data图元节点,其实是对数据模型DataModel的操作!
看图纸的json数据,发现背景色"background"在"p"标签字段之下,还有在"a"标签之下的其他比如反序列化onPostDeserialize,网格颜色gridThickColor、gridLightColor。在图纸中,如下图所示以背景background为例,并没有看到graphView、dataModel有setBackground之类的API可以操作!对于a标签下面的,直接dm.a(),跟data/node图元节点一样操作即可!原创 2022-09-29 11:16:28 · 269 阅读 · 0 评论 -
图纸反序列化有两种方式,数据模型dm或拓扑视图view:dataModel.deserialize(json)、graphView.deserialize(json)
graphView.deserialize加载图纸反序列化后的回调函数,与图纸的onPostDeserialize反序列化函数,图纸优先调用,然后是代码的回调函数调用。注意:如果用数据模型来反序列化:dataModel.deserialize(json),如果在图纸的反序列化后的属性中有代码并且调用到传入的gv参数,那么会报错!let url = 'displays/admin/AiotOS/adApps/MQTT客户端.json';//或者传入加载完成后反序列化后回调函数。原创 2022-09-29 11:11:36 · 254 阅读 · 0 评论 -
渲染元素数据绑定中函数传参,可以指定格式定义附加信息
JavaScript{]}原创 2022-09-29 11:03:45 · 174 阅读 · 0 评论 -
渲染元素中动态创建div来渲染html dom组件,是需要将element元素对象return返回的(也支持直接返回ht的widget、ui等视图view组件),刷新重新加载图纸
刷新重新加载图纸时,dom元素对象被重新创建,此前的也自动被移除释放了,而动态加载的js可通过importCssJs的第二个参数传入true来重新加载,或者传入false不再重新加载、利用上次加载的而且留在内存的js执行结果(比如对象、函数等),不管是哪种方式,都可以通过加载完成回调函数继续执行接下来的步骤。如下面所示,动态创建的div,设置了id后,浏览器也能看到,但是刷新(并非刷新浏览器页面)重新加载图纸,div会被自动移除及重新创建,合情合理,因为是随着渲染元素机制走的。原创 2022-09-29 11:00:44 · 586 阅读 · 0 评论 -
渲染元素中用data.getImage(),注意在图纸中执行时,返回的是字符串即渲染元素图标的路径url;将图标直接运行不经过图纸的话,返回的是加载后的对象不再是url字符串!
渲染元素中用data.getImage(),注意在图纸中执行时,返回的是字符串即渲染元素图标的路径url;将图标直接运行不经过图纸的话,返回的是加载后的对象不再是url字符串!原创 2022-09-29 10:58:01 · 116 阅读 · 0 评论 -
渲染元素中执行一遍代码逻辑,通过前缀predix来区分不同的嵌入图标的同一个暴露属性,实现动态赋值
渲染元素中执行一遍代码逻辑,通过前缀predix来区分不同的嵌入图标的同一个暴露属性,实现动态赋值原创 2022-09-29 10:54:09 · 164 阅读 · 0 评论 -
应用平台桌面菜单由常规拖放,换成ht.Grid布局操作步骤
应用平台桌面菜单由常规拖放,换成ht.Grid布局操作步骤原创 2022-09-29 10:50:42 · 218 阅读 · 0 评论 -
组件component二次开发属性暴露,跟渲染元素属性暴露类似,但主要是canvas画笔来绘制组件图形
组件component二次开发属性暴露,跟渲染元素属性暴露类似,但主要是canvas画笔来绘制组件图形原创 2022-09-29 10:40:45 · 253 阅读 · 0 评论 -
组件component矢量组件,通过canvas代码绘制图形,字体设置固定的直接拖放到图标内,尺寸缩放字体保持固定不会自动缩放
如果要编辑组件改变尺寸大小,图元(文字)自动缩放,可通过再多嵌套一层图标或者直接拖放到图纸中国使用即可,直接拖放到图标中改变自身尺寸,不会自动(文字)缩放的!原创 2022-09-29 10:37:32 · 283 阅读 · 0 评论 -
组态nodejs的后台server.js,新增post接口,接受前端input file模式上传文件,并接收保存到服务器
在node开发过程中,我们经常需要对文件进行读取,写入,以及文件的引入等相关操作和需求,那么我们就需要去读取我们的目录文件,并对其加以过滤,得到我们的目标文件,但是我们要怎么样高效率的进行文件的过滤呢,下面我们介绍了一种方法:首先我们需要导入fs模块,然后用readdirSync列出文件const fs = require('fs');//这里是一个目录,并非浏览器前端对应本地机器的绝对目录,而是需要将这个带路径的文件名,重新另存为服务器的某个目录以及新的文件名,实现上传到服务器成功!原创 2022-09-29 10:30:05 · 683 阅读 · 0 评论 -
组态布局加载会出现动画过程(字体分辨率也非常细),如何不要动画?打组合,然后用组合被布局就好!
组态布局加载会出现动画过程(字体分辨率也非常细),如何不要动画?打组合,然后用组合被布局就好!原创 2022-09-29 10:26:41 · 83 阅读 · 0 评论 -
组态编辑器BUG,事件处理对话框中有时输入、回车、粘贴都没效果,其实是敲到前面打开的那个tab里了
组态编辑器BUG,事件处理对话框中有时输入、回车、粘贴都没效果,其实是敲到前面打开的那个tab里了原创 2022-09-29 10:19:32 · 95 阅读 · 0 评论 -
组态编辑器如何定制点击等脚步交互操作,比如把目前矩形点击操作无法输入文字等觉得不方便的地方定制修改成类似PPT的交互操作
节点开启交互后,就会阻止图纸/场景上默认的交互行为,比如在交互节点上无法触发平移,可以使用。console.log('开始编辑多边形Shape或多点Edge的具体点');console.log('正在编辑多边形Shape或多点Edge的具体点');console.log('结束编辑多边形Shape或多点Edge的具体点');您如要进行特殊的编辑交互,可自定义交互器,重写交互器,工作量比较大难度比较高。的过程,图元模型的数据并未改变, 也就是逻辑坐标值不变,仅仅是视图组件的呈现效果变化,原创 2022-09-29 10:17:06 · 162 阅读 · 0 评论 -
组态编辑状态入口html是client/index.html;组态运行状态入口html是previews/display.html;typeof xxx === “undefined“来判断某变量是否
组态编辑状态入口html是client/index.html;组态运行状态入口html是previews/display.html;typeof xxx === "undefined"来判断某变量是否原创 2022-09-29 10:08:19 · 144 阅读 · 0 评论 -
组态数据绑定入门,变量如何暴露给组态编辑
组态数据绑定入门,变量如何暴露给组态编辑原创 2022-09-29 10:06:00 · 199 阅读 · 0 评论 -
组态图标数据绑定中,有属性attr和函数func两个选项,其中函数参数data、view,可以实现一个属性分身为多个变量暴露出去并做逻辑处理给到原来的属性变量!HT矢量数据绑定原理!
函数绑定中是可以定义多个变量的,这个变量直接使用,然后在数据绑定中创建声明下就可以了,并且多个变量可以在函数func中做逻辑,于是实现人在组态中想动态配置多个参数给到图标的一个固定属性,那就能实现了!如下图所示,通常情况下,图标的属性跟放在图纸上属性绑定一样,是绑定一个变量。在选中图标内嵌套的组件或其他图标时的属性func,data是选中节点图标的data数据模型,view对应其视图,注意,此时界面也不会显示“数据绑定”,只有在未选中任何嵌套图标组件点击图标背景时才会出现数据绑定!//dom及事件监听。原创 2022-09-29 09:59:58 · 248 阅读 · 0 评论 -
关于图纸的吸附布局、全屏填充、适配内容来做图元根据图纸页面在不同窗口显示尺寸下自适应
关于图纸的吸附布局、全屏填充、适配内容来做图元根据图纸页面在不同窗口显示尺寸下自适应原创 2022-09-28 15:25:55 · 286 阅读 · 0 评论 -
关于矩形的边框,以及边框线偶尔不显示的问题
组件设置边框,是基于四个顶点/四条边,同步向内和向外延展的矩形环形区域!并且很可能会被布局给遮挡,当布局之间不留间隙时!这就会导致出现四边某一边突然没有边框线,或者比其他边的边框线要窄的情况!所以,当有布局存在时,最好就不要用设置边框线的方式来做区分隔开,用背景颜色块更好!原创 2022-09-28 14:37:57 · 365 阅读 · 0 评论 -
关于额外的ht.ui插件如Carouse轮播组件,源码、js库文件、API接口文档、DEMO地址
关于额外的ht.ui插件如Carouse轮播组件,源码、js库文件、API接口文档、DEMO地址原创 2022-09-28 14:31:47 · 475 阅读 · 0 评论 -
对于可以设置背景background属性的,一般都对应可以设置backgroundDrawable,并且传入ImageDrawable对象,此时就可以很好地利用图元节点设置任何矢量图标并动态变量属性设
首先,所有可以setBackground()的方法,基本都可以设置背景自绘:setBackgroundDrawable,这时就可以用到图标结合绑定动态变量传参了,而且图标除了是svg常规的icon图标,还完全可以是一个手动创建的圆角矩形,并且把圆角radius做数据绑定暴露出来可配置。如果直接用setBorderRadius()设置圆角,通常出现圆形边框线画在背景矩形之上的效果,且一旦背景矩形设置透明,圆角边框成为镂空的“轨道”了,显然不是我们想要的圆角效果。灰色矩形与背景、阴影并无关系。原创 2022-09-28 14:13:22 · 299 阅读 · 0 评论 -
对于块ht.block元素(组合),编辑、运行状态下,选中、事件等;ht 2d/3d事件传递;节点父子关系与事件传递的关系
对于块ht.block元素(组合),编辑、运行状态下,选中、事件等;ht 2d/3d事件传递;节点父子关系与事件传递的关系原创 2022-09-28 14:09:09 · 237 阅读 · 1 评论