代码操作组态界面图元对象；组态展示代码创建的对象；ht示例代码图元对象视图与组态图纸界面融合；代码对象以html dom元素添加到组态以及CSS控制；以ht.Grid为例派生类用渲染元素暴露属性可配置

最新推荐文章于 2024-04-06 08:43:56 发布
最新推荐文章于 2024-04-06 08:43:56 发布
阅读量397 收藏 1
点赞数
文章标签： ht.js ht for web 组态编辑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IOTOS/article/details/127081846
版权

1. 代码界面 VS 组态界面

1.1 代码API创建界面

数据可视化前端开发应用体验

1.2 组态拖拽生成界面

2. 代码界面显示到组态

以应用平台代码为例，步骤如下

2.1 原始示例js代码

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>Grid</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
            .formpane {
                top: 10px;
                right: 10px;   
                background: rgba(230, 230, 230, 0.4);
            }             
        </style>     
        <script src="../../../../lib/core/ht.js"></script>   
        <script src="../../../../lib/plugin/ht-form.js"></script>
        <script>      
            
            for(var i=0; i<3; i++){
                ht.Default.setImage('book' + i, 'res/book' + i + '.jpg');
            }            
            
            function init(){                 
                dataModel = new ht.DataModel();
                graphView = new ht.graph.GraphView(dataModel);
                view = graphView.getView();            

                view.className = 'main';                
                document.body.appendChild(view);    
                window.addEventListener('resize', function (e) {
                    graphView.invalidate();
                }, false);  
                
                grid = new ht.Grid();
                grid.setSize(500, 240);
                grid.setStyle('grid.row.count', 2);
                grid.setStyle('grid.column.count', 5);
                grid.setStyle('grid.border', 8);
                grid.setStyle('grid.gap', 8);
                grid.setStyle('grid.depth', -5),
                grid.setStyle('grid.cell.depth', -1),  
                grid.setStyle('grid.cell.border.color', null);  
                grid.setStyle('grid.background', '#E5BB77');
                grid.setStyle('select.width', 0);
                dataModel.add(grid);
                
                for(var i=0; i<8; i++){
                    var node = new ht.Node();
                    node.setImage('book' + i);
                    node.setStyle('attach.row.index', Math.floor(i / 4));
                    node.setStyle('attach.column.index', i % 4);
                    node.setStyle('attach.padding', -2);
                    node.setStyle('select.width', 0);
                    node.setHost(grid);
                    dataModel.add(node);
                }
                
                graphView.translate(280, 150);
                                                                                
                formPane = new ht.widget.FormPane();
                view = formPane.getView();
                view.className = 'formpane';
                document.body.appendChild(view);
                formPane.setWidth(230);
                formPane.setHeight(200);             
                formPane.addRow(['grid.border',
                    {
                        slider: {                    
                            min: 0,
                            max: 30,
                            step: 1,
                            value: 8,
                            onValueChanged: function(){     
                                grid.s('grid.border', this.getValue());                                 
                            }
                        }
                    }
                ], [90, 0.1]);  
                formPane.addRow(['grid.gap',
                    {
                        slider: {                    
                            min: 0,
                            max: 30,
                            step: 1,
                            value: 8,
                            onValueChanged: function(){     
                                grid.s('grid.gap', this.getValue());                                 
                            }
                        }
                    }
                ], [90, 0.1]);
                formPane.addRow(['grid.depth',
                    {
                        slider: {                    
                            min: -10,
                            max: 10,
                            step: 1,
                            value: -5,
                            onValueChanged: function(){     
                                grid.s('grid.depth', this.getValue());                                 
                            }
                        }
                    }
                ], [90, 0.1]);    
                formPane.addRow(['grid.cell.depth',
                    {
                        slider: {                    
                            min: -10,
                            max: 10,
                            step: 1,
                            value: -1,
                            onValueChanged: function(){     
                                grid.s('grid.cell.depth', this.getValue());                                 
                            }
                        }
                    }
                ], [90, 0.1]);                 
            }
                        
            
        </script>
    </head>
    <body οnlοad="init();">
    </body>
</html>

2.2 复制到平台应用并微调

  • 修改相对路径的资源文件为了便于观察关键效果
  • 将实例化的new ht.DataModel()换成this.dm2d()
  • 将实例化的new ht.graph.GraphView()换成this.g2d()
  • 屏蔽掉document.body.appendChild、window.addEventListener相关代码
  • init()启动加到合适位置主动调用

JavaScript
    init2d() {
        let that = this;

        //1）修改相对路径的资源文件为了便于观察关键效果
        ht.Default.setImage('book0', 'symbols/demo/AiotOS/icons/system/platform-manage.json');
        ht.Default.setImage('book1', 'symbols/demo/AiotOS/icons/system/organize-main-data.json');
        ht.Default.setImage('book2', 'symbols/demo/AiotOS/icons/system/organization-tree.json');
        ht.Default.setImage('book3', 'symbols/demo/AiotOS/icons/system/organize.json');
        ht.Default.setImage('book4', 'symbols/demo/AiotOS/icons/system/price.json');
        ht.Default.setImage('book5', 'symbols/demo/AiotOS/icons/system/role-permissions.json');
        ht.Default.setImage('book6', 'symbols/demo/AiotOS/icons/system/project-manage.json');
        ht.Default.setImage('book7', 'symbols/demo/AiotOS/icons/system/structure-manage.json');
        ht.Default.setImage('book8', 'symbols/demo/AiotOS/icons/system/template-manage.json');
        ht.Default.setImage('book9', 'symbols/demo/AiotOS/icons/system/structure-manage.json');
        ht.Default.setImage('book10', 'symbols/demo/AiotOS/icons/system/image-gallery.json');

        function init() {
            //2）将实例化的new ht.DataModel()换成this.dm2d()
            // var dataModel = that.dm2d()
            var dataModel = new ht.DataModel();
            
            //3）将实例化的new ht.graph.GraphView()换成this.g2d()
            // var graphView = that.g2d()
            var graphView = new ht.graph.GraphView(dataModel);
           
            var view = graphView.getView();

            //4）屏蔽掉document.body.appendChild、window.addEventListener相关代码
            // view.className = 'main';
            // document.body.appendChild(view);
            // window.addEventListener('resize', function(e) {
            //     graphView.invalidate();
            // }, false);

            var grid = new ht.Grid();
            grid.setSize(500, 240);
            grid.setStyle('grid.row.count', 2);
            grid.setStyle('grid.column.count', 5);
            grid.setStyle('grid.border', 8);
            grid.setStyle('grid.gap', 8);
            grid.setStyle('grid.depth', -5),
                grid.setStyle('grid.cell.depth', -1),
                grid.setStyle('grid.cell.border.color', null);
            grid.setStyle('grid.background', '#E5BB77');
            grid.setStyle('select.width', 0);
            dataModel.add(grid);

            for (var i = 0; i < 8; i++) {
                var node = new ht.Node();
                node.setImage('book' + i);
                node.setStyle('attach.row.index', Math.floor(i / 4));
                node.setStyle('attach.column.index', i % 4);
                node.setStyle('attach.padding', -2);
                node.setStyle('select.width', 0);
                node.setHost(grid);
                dataModel.add(node);
            }

            graphView.translate(280, 150);
            var formPane = new ht.widget.FormPane();
            var view = formPane.getView();
            
            //需要加到浏览器全局的地方可换成组态指定视图GraphView的实例的getView()
            //document.body.appendChild(view);
            that.g2d().getView().appendChild(view);
            
            formPane.setWidth(230);
            formPane.setHeight(200);
            formPane.addRow(['grid.border',
                {
                    slider: {
                        min: 0,
                        max: 30,
                        step: 1,
                        value: 8,
                        onValueChanged: function() {
                            grid.s('grid.border', this.getValue());
                        }
                    }
                }
            ], [90, 0.1]);
            formPane.addRow(['grid.gap',
                {
                    slider: {
                        min: 0,
                        max: 30,
                        step: 1,
                        value: 8,
                        onValueChanged: function() {
                            grid.s('grid.gap', this.getValue());
                        }
                    }
                }
            ], [90, 0.1]);
            formPane.addRow(['grid.depth',
                {
                    slider: {
                        min: -10,
                        max: 10,
                        step: 1,
                        value: -5,
                        onValueChanged: function() {
                            grid.s('grid.depth', this.getValue());
                        }
                    }
                }
            ], [90, 0.1]);
            formPane.addRow(['grid.cell.depth',
                {
                    slider: {
                        min: -10,
                        max: 10,
                        step: 1,
                        value: -1,
                        onValueChanged: function() {
                            grid.s('grid.cell.depth', this.getValue());
                        }
                    }
                }
            ], [90, 0.1]);
        }

        //5）init()启动加到合适位置主动调用
        init()

    }

运行效果

3. 组态图纸与代码界面混合

3.1 组态图纸上最好勾选“事件处理”，保证鼠标交互事件传递到代码创建的组件中

 

3.2 拖放图标到组态图纸中

 

3.3 微调代码错开拖放的界面和代码创建的界面位置避免重叠

JavaScript
init2d() {
    let that = this;

    ht.Default.setImage('book0', 'symbols/demo/AiotOS/icons/system/platform-manage.json');
    ht.Default.setImage('book1', 'symbols/demo/AiotOS/icons/system/organize-main-data.json');
    ht.Default.setImage('book2', 'symbols/demo/AiotOS/icons/system/organization-tree.json');
    ht.Default.setImage('book3', 'symbols/demo/AiotOS/icons/system/organize.json');
    ht.Default.setImage('book4', 'symbols/demo/AiotOS/icons/system/price.json');
    ht.Default.setImage('book5', 'symbols/demo/AiotOS/icons/system/role-permissions.json');
    ht.Default.setImage('book6', 'symbols/demo/AiotOS/icons/system/project-manage.json');
    ht.Default.setImage('book7', 'symbols/demo/AiotOS/icons/system/structure-manage.json');
    ht.Default.setImage('book8', 'symbols/demo/AiotOS/icons/system/template-manage.json');
    ht.Default.setImage('book9', 'symbols/demo/AiotOS/icons/system/structure-manage.json');
    ht.Default.setImage('book10', 'symbols/demo/AiotOS/icons/system/image-gallery.json');

    function init() {
        var dataModel = that.dm2d()
        var graphView = that.g2d()
        var view = graphView.getView();

        // view.className = 'main';
        // document.body.appendChild(view);
        // window.addEventListener('resize', function(e) {
        //     graphView.invalidate();
        // }, false);

        var grid = new ht.Grid();
        grid.setSize(500, 240);
        grid.setStyle('grid.row.count', 2);
        grid.setStyle('grid.column.count', 5);
        grid.setStyle('grid.border', 8);
        grid.setStyle('grid.gap', 8);
        grid.setStyle('grid.depth', -5),
            grid.setStyle('grid.cell.depth', -1),
            grid.setStyle('grid.cell.border.color', null);
        grid.setStyle('grid.background', '#E5BB77');
        grid.setStyle('select.width', 0);
        dataModel.add(grid);

        for (var i = 0; i < 8; i++) {
            var node = new ht.Node();
            node.setImage('book' + i);
            node.setStyle('attach.row.index', Math.floor(i / 4));
            node.setStyle('attach.column.index', i % 4);
            node.setStyle('attach.padding', -2);
            node.setStyle('select.width', 0);
            node.setHost(grid);
            dataModel.add(node);
        }

        graphView.translate(500, 350);    //
        var formPane = new ht.widget.FormPane();
        var view = formPane.getView();

        that.g2d().getView().appendChild(view);
        view.style.cursor = 'pointer';    //css样式

        formPane.setWidth(230);
        formPane.setHeight(200);
        formPane.addRow(['grid.border',
            {
                slider: {
                    min: 0,
                    max: 30,
                    step: 1,
                    value: 8,
                    onValueChanged: function() {
                        grid.s('grid.border', this.getValue());
                    }
                }
            }
        ], [90, 0.1]);
        formPane.addRow(['grid.gap',
            {
                slider: {
                    min: 0,
                    max: 30,
                    step: 1,
                    value: 8,
                    onValueChanged: function() {
                        grid.s('grid.gap', this.getValue());
                    }
                }
            }
        ], [90, 0.1]);
        formPane.addRow(['grid.depth',
            {
                slider: {
                    min: -10,
                    max: 10,
                    step: 1,
                    value: -5,
                    onValueChanged: function() {
                        grid.s('grid.depth', this.getValue());
                    }
                }
            }
        ], [90, 0.1]);
        formPane.addRow(['grid.cell.depth',
            {
                slider: {
                    min: -10,
                    max: 10,
                    step: 1,
                    value: -1,
                    onValueChanged: function() {
                        grid.s('grid.cell.depth', this.getValue());
                    }
                }
            }
        ], [90, 0.1]);
    }

    init()

}

运行效果

 

4. * 图纸拖放的图元对象传给并替换代码中实例化new的对象

从前面1~3我们知道，代码创建的界面，是完全可以给到组态图纸拖拽框架去展示的，无非就是dataModel、graphView本身是代码中new实例化对象，改成应用平台中获取组态图纸的dm2d和g2d对象替换过去即可（当然对于dm3d和g3d也一样）。同时去掉代码中document.body.appendChild()、window.addEventListener等对浏览器dom的全局操作，因为组态框架已经做了这些。

还有个问题，那就是代码中创建的图元比如ht.Node、ht.Data、ht.Grid等这些视图及其数据模型对应的数据元，如果在代码中实例化，一方面带有外观、位置等属性API代码操作更适合改成在组态中可视化拖拽配置、所见即所得；另一方面对数据模型图元的操作，非界面的比如图元之间层级逻辑关系、点击事件交互处理等，更适合代码来处理。

如果让图元对象在组态界面拖拽实例化，而不要通过代码new，这样界面相关的代码可以省掉直接拖拽编辑即可，同时也能在代码中访问图纸上的图标作为图元对象实例，通过API来做数据逻辑代码处理，这个结果就完美融合了代码逻辑和可视化配置两种方式各自的优势点！

现在具体讲实现方式：

4.1 组态界面拖放的图标类型都是ht.Data及其子类型

图纸上拖放的图元，基本都是ht.Node类型 + 图片image配置（对应API为setImage()），当前示例中ht.Grid就是从ht.Node派生的。图片配置就对应图标symbol，填充数据给ht.Node在数据模型中将界面展示到对应的View中。

4.2 数据模型ht.DataModel有getDataByTag()方法

该方法就是用来根据组态图纸中对图元可视化设置的tag属性，来获取实例化的对象！简言之，拖放一个图标到组态上，就是new了一个图元对象，通过tag就能在代码中获取到这个图元文件实例化的对象用于代码API操作！

4.3 本示例中更进一步，将Grid网格实例化放到组态上

首先要解决的问题就是ht.Grid类型如何能作为图标拖放到组态图纸上，因为目前拖放的绝大部分都是ht.Node类型，即时设置了tag，让代码获取到其对象实例，也没法代替代码中的new ht.Grid()，所以首先要解决组态工具条中扩展ht.Grid类型的内置组件图标

4.3.1 组态图标工具栏扩展内置指定类型的图标

如下图所示，要实现内置图标，并且是指定的ht.Grid类型，用于拖放一个或多个图标进来，结合不同的tag标签，实现在代码中需要多个new ht.Grid对象的地方，都可以通过dm.getDataByTag()用组态可视化拖拽生成的实例。

如下图所示，在client/config.js中，相应位置按照示例规则可以实现追加工具条中的内置图标组件。其中icon配置图标、type就是用来配置类型，这里就用我们需要的ht.Grid，然后iniData中可以配置初始化属性。

比如默认内置的image图片，可以默认为空，因为我们只需要ht.Grid类型对象给到代码，那么内容包括setImage()这个API的操作，都可以在代码中来设置这些属性了！

4.3.2 代码中根据标签tag获取到组态中拖放生成的实例对象

代码如下：

JavaScript
init2d() {

    let that = this;

    ht.Default.setImage('book0', 'symbols/demo/AiotOS/icons/system/platform-manage.json');
    ht.Default.setImage('book1', 'symbols/demo/AiotOS/icons/system/organize-main-data.json');
    ht.Default.setImage('book2', 'symbols/demo/AiotOS/icons/system/organization-tree.json');
    ht.Default.setImage('book3', 'symbols/demo/AiotOS/icons/system/organize.json');
    ht.Default.setImage('book4', 'symbols/demo/AiotOS/icons/system/price.json');
    ht.Default.setImage('book5', 'symbols/demo/AiotOS/icons/system/role-permissions.json');
    ht.Default.setImage('book6', 'symbols/demo/AiotOS/icons/system/project-manage.json');
    ht.Default.setImage('book7', 'symbols/demo/AiotOS/icons/system/structure-manage.json');
    ht.Default.setImage('book8', 'symbols/demo/AiotOS/icons/system/template-manage.json');
    ht.Default.setImage('book9', 'symbols/demo/AiotOS/icons/system/structure-manage.json');
    ht.Default.setImage('book10', 'symbols/demo/AiotOS/icons/system/image-gallery.json');

    function init() {
        //1. 数据模型DataModel用平台应用的
        var dataModel = that.dm2d()     
        //2. 拓扑视图graphView用平台应用的   
        var graphView = that.g2d()
        var view = graphView.getView();
        
        //3. 网格图元grid也用平台应用组态界面拖拽生成的对象！
        // var grid = new ht.Grid();
        var grid = that.dm2d().getDataByTag('grid')

        //4. 去掉对网格图元的尺寸、位置等外观的API调用，由组态配置来决定
        // grid.setSize(600, 300);
        
        grid.setStyle('grid.row.count', 2);
        grid.setStyle('grid.column.count', 6);
        grid.setStyle('grid.border', 8);
        grid.setStyle('grid.gap', 8);
        grid.setStyle('grid.depth', -5);
        grid.setStyle('grid.cell.depth', -1);
        grid.setStyle('grid.cell.border.color', null);
        grid.setStyle('grid.background', '#E5BB77');
        grid.setStyle('select.width', 0);
        
        //5. 数据模型中去掉对该图元的add，因为组态拖放生成对象那一刻就是在数据模型的操作，自动add了！
        // dataModel.add(grid);

        for (var i = 0; i < 8; i++) {
            var node = new ht.Node();
            node.setImage('book' + i);
            node.setStyle('attach.row.index', Math.floor(i / 4));
            node.setStyle('attach.column.index', i % 4);
            node.setStyle('attach.padding', -2);
            node.setStyle('select.width', 0);
            node.setHost(grid);
            dataModel.add(node);
        }

        //6. 拓扑视图也去掉对位置等界面的操作，交给组态
        // graphView.translate(500, 500);
        
        var formPane = new ht.widget.FormPane();
        var view = formPane.getView();

        that.g2d().getView().appendChild(view);
        view.style.cursor = 'pointer';

        formPane.setWidth(230);
        formPane.setHeight(200);
        formPane.addRow(['grid.border',
            {
                slider: {
                    min: 0,
                    max: 30,
                    step: 1,
                    value: 8,
                    onValueChanged: function() {
                        grid.s('grid.border', this.getValue());
                    }
                }
            }
        ], [90, 0.1]);
        formPane.addRow(['grid.gap',
            {
                slider: {
                    min: 0,
                    max: 30,
                    step: 1,
                    value: 8,
                    onValueChanged: function() {
                        grid.s('grid.gap', this.getValue());
                    }
                }
            }
        ], [90, 0.1]);
        formPane.addRow(['grid.depth',
            {
                slider: {
                    min: -10,
                    max: 10,
                    step: 1,
                    value: -5,
                    onValueChanged: function() {
                        grid.s('grid.depth', this.getValue());
                    }
                }
            }
        ], [90, 0.1]);
        formPane.addRow(['grid.cell.depth',
            {
                slider: {
                    min: -10,
                    max: 10,
                    step: 1,
                    value: -1,
                    onValueChanged: function() {
                        grid.s('grid.cell.depth', this.getValue());
                    }
                }
            }
        ], [90, 0.1]);
    }

    init()
}

运行效果

对比4.3.1的编辑状态，结合代码API调用和图纸拖拽编辑，运行效果如下：

注意，为了保障通过that.g2d().getView().appendChild(view)添加的左上角滑动条事件拖放正常，需要对应用图纸勾选可选中和事件处理，如下图所示：

 

5. * 拖放到组态的（派生类）图元，内置API属性如何开放到图纸配置

到了第4步我们知道可以添加ht.Node的派生类ht.Grid到工具栏，拖放到图纸中能实例化Grid对象根据getDataByTag获取到data数据图元对象后就能用其API了，那么如何这些API能在图纸上配置而不是一定要代码编写调用呢？

首先想到的是渲染元素方案，可以任意将对象的属性暴露出来给图纸配置，但是这里我们并不需要渲染元素提供dom或ht ui组件的实例呈现界面并return对象，只需要用图元对象本身调用api，动态用属性并暴露，其实很简单，渲染元素不一定都得要return和实例化，可以直接用data即可，截图及代码分别如下：

 

JavaScript
data.setStyle('grid.gap',data.ca('grid.gap'))
data.setStyle('grid.row.count', data.ca('grid.row.count'));
data.setStyle('grid.column.count', data.ca('grid.column.count'));
data.setStyle('grid.border', data.ca('grid.border'));
data.setStyle('grid.gap', data.ca('grid.gap'));
data.setStyle('grid.depth', data.ca('grid.depth'));
data.setStyle('grid.cell.depth', data.ca('grid.cell.depth'));
data.setStyle('grid.cell.border.color', data.ca('grid.cell.border.color'));
data.setStyle('grid.background', data.ca('grid.background'));
data.setStyle('select.width', data.ca('grid.select.width'));

let i = 0
data.eachChild((node) => {
    node.setHost(data)
    node.setStyle('attach.row.index', Math.floor(i / data.ca('grid.column.count')));
    node.setStyle('attach.column.index', i % data.ca('grid.column.count'));
    node.setStyle('attach.padding', data.ca('node.attach.padding'));
    node.setStyle('select.width', data.ca('node.select.width'));
    i += 1;
})

可以看到，跟常规渲染元素模板差别很大，渲染元素可以是html dom对象，也可以是ht对象！渲染元素模板，以及设置渲染元素是否编辑状态随着图纸也矢量缩放；内置拖放矢量基本组件类型 ，完全可以只利用传入的data，也就是当前拖放到图纸上实例化的图元对象，直接调用API，用暴露的动态变量即可，无需实例化、以及return，也不需要用cache等其他传入参数！

此外，注意此渲染元素图标放到特定标记的目录分组，给config.js配置工具栏图标用的，用户直接拖放到图纸上，类型会是默认的ht.Node而并非ht.Grid，导致属性暴露后对应API调用传参不起作用甚至可能报错（可能存在派生类有但是基类没有的API接口）：

 

IOTOS
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
iscada组态软件源代码，完全开源，包括组态开发程序和组态运行程序，vs2005c#完整工程
03-08
APMC为本人采用C#独立设计和开发的C#源码工业控制与组态软件。设计的初衷是采用符合IEC FBD61499标准开发先进的FBD控制算法块，采用图形化编程方式，通过简单的连线即可完成复杂控制，同时结合组态软件技术，达到...
ht组态图纸获取背景颜色：dm().getBackground()，鼠标滚动事件3D场景如何禁止或打开响应；如何判断图纸透明不传递给3D，点击、滚轮等
IOTOS的博客
09-28 246
另一方面，在2D、3D叠加的场景，又需要2D中鼠标滚动能够缩放，甚至点击选中2D半透明组件后要让3D不能响应鼠标滚动，没点击选中时需要能直接响应3D场景鼠标缩放！因此，判断图纸背景颜色是否有定义（最好是判断是否设置或者设置为透明），来决定是否阻挡2D应用中鼠标滚轮事件到3D场景！比如平台的2D应用打开，背景是桌面默认的3D场景，2D中对表格、树进行滚动，结果3D也跟做缩放响应感觉很不好！注意，这个时候，如果设置背景透明度为0，效果也是透明，但是不返回undefined，同样会阻挡事件响应的！
使用Javascript来实现的超炫组织结构图(Organization Chart)
GBin1.com
06-29 2333
最近有个内部项目需要使用组织结构图(organization chart)， 寻找了一些开源的项目及其类库，发现竟然没有现成的JS类库可以使用，找到一些简单的JS实现，不过界面及其操作及其简单，不过功夫不负有心人，经过几天国内国外的搜索，找到了一个非常好的解决方案，这里分享给大家。Javascript InfoVis tools 这个开源的javascript类库可以生成非常炫
告别传统工业互联网：三维组态分布式能源站
二三维数据可视化/数字孪生
09-27 477
前言 在网络迅速发展的今天，人们的交流已经不再仅限于面对面，一个视频通话就能拉近彼此之间的距离，而在工业管控上却不仅仅局限于实时视频流的监控，HTML 本身拥有强大的 web 组件可供我们去实施一些好玩的例子，甚至加上一些简单有趣的动画和实时数据的对接，效果上可不止提高了一个水平。加上现如今已经启动许久的工业4.0衍生出的新一代工业互联网和不久才面世于众的5G新时代，数据可视化与网络带宽发展的碰撞，激发出了一代3D 数据可视化监管的发展。 而Hightopo（以下简称 HT ）的HT ...
从零开始搭建web组态
BY组态
03-03 2366
konva 是一个对 canvas API 做了封装增强的 JavaScript 库。HTML 原生的 canva 提供的 API 比较底层，用法上像是操纵一支画笔进行各种操作，画完就结束了。canvas 本身不维护图形树，你也无法操作修改已被绘制的图形。而 konva 能够像我们操作 DOM 树一样去绘制和维护元素，它会额外维护图形构成的树，并能在绘制后，对特定图形进行样式的修改。你还可以在上面添加事件，比如鼠标滑入某图形时，图形变大一点。此外还支持方便的变形、动画、拖拽等高级能力。
vue pixi 组态图
weixin_44995829的博客
10-13 279
https://zhuanlan.zhihu.com/p/601858700
面向对象的设备建模方法及其应用-论文
07-08
各种煤矿监控类系统的通信协议对应不同数据结构,导致煤矿监控多系统融合运行时设备信息配置和...将面向对象的设备建模方法应用于图形组态中,使设备模型与图元绑定、设备实例与图形实例绑定,可快速配置数据可视化图形。
VC电力界面矢量图绘制源代码
09-21
3. **事件处理和交互**：源代码会展示如何实现用户与界面元素的交互，如开关的点击事件，以及如何根据用户的操作更新图形状态。 4. **电力系统模型**：理解源码中如何抽象和表示电力系统的基本元素，如开关的闭合和...
水电站_电站_组态王电站示例_组态王_组态_
10-03
在【组态王电站示例】中，这些功能被充分利用，通过图形化界面展示水电站的关键信息，如水位、流量、发电功率等，便于操作人员实时掌握电站状态。 在实际应用中，【组态王】支持多种通信协议，能够与各种PLC、SCADA...
计算机图形学课程实验代码及报告.docx
01-31
【计算机图形学课程实验代码及报告】 在计算机图形学中，基本图元绘制、图形变换和裁剪是三个核心概念，对于理解和应用图形学至关重要。本实验报告详细介绍了如何在Visual Studio 2010环境下使用MFC进行相关操作。 ...
开源、易集成的Web可视化工具（流程图、组态、SCADA、大屏）
le5le_iot的博客
09-11 3378
Meta2d.js 是一个实时数据响应和交互的 2d 引擎，可用于 Web 组态，物联网，数字孪生等场景。
一文读懂组态图和组态软件，最浅显的解读。
2401_82616673的博客
02-20 1779
一、什么是组态图组态图是指在工业自动化领域中，用来描述和展示控制系统中各个组件之间关系和工作流程的图形化表示方法。它是一个系统的框架图，通过图形符号和连接线，将各个组件（如传感器、执行器、控制器等）以及它们之间的关系进行可视化展示。通过组态图，可以直观地了解控制系统的结构和运行方式，便于工程师们进行系统设计、调试和维护工作。组态图也常用于编写控制系统的软件程序，辅助系统的开发和调试。
一文读懂组态图和组态图软件_组件和组态的区别(1)
最新发布
2301_82242251的博客
04-06 1062
你的支持，我的动力；祝各位前程似锦，offer不断，步步高升！！！你的支持，我的动力；祝各位前程似锦，offer不断，步步高升！！！更多资料点击此处获qu！！
html5开源组态,HT for Web基于HTML5的图像操作（一）
weixin_29969209的博客
06-09 2394
HT for Web独创的矢量图片设计架构，使其具有强大丰富的动态图形呈现能力，但从最近知乎热议的“Adobe Photoshop 是否已经过时？”的话题，大家能体会到很多情况下实际项目不可能完全采用矢量，项目中还是有大量的传统非矢量的静态图片，毕竟工具强大且现有资源丰富，但为了使静态图片呈现出更多的动态效果，HT for Web提供了较多渲染方式，例如对HT for Web的图元设置‘body....
VUE组态图功能关键点开发
热门推荐
每天一点点
10-24 1万+
要实现可以实时监控设备状态功能的图形 需要解决问题 1.组态图如何绘制？ 2.vue如何实现定时刷新请求后台？ 3.该功能一定要基于配置的？ 利用画图网站把改图画出来，导出SVG格式图形   数据表结构设计 前端SVG节点代码： 关键JS代码:实现了定时刷新数据事件显示 methods: { setTimer: function () ...
28,表单FormPanel控件的使用
g710710的专栏
03-18 506
28,表单FormPanel控件的使用.avi
基于 HTML5 Canvas 的 3D 碰撞检测
weixin_33895016的博客
12-10 214
这是公司大神写的一个放官网上给用户学习的例子，我一开始真的不知道这是在干嘛，就只是将三个形状图元组合在一起，然后可以同时旋转、放大缩小这个三个图形，点击“Animate”就能让中间的那一个图元单独绕着某一个点旋转，表单最上方的“Axis”真的完全不知道拿来干嘛用的，觉得好累赘，而且是官网的 Demo，也没有解释。。。所以我今天得任务就是完全剖析这个例子！ 本文例子：http://www.hight...
在线组态工具 html,组态工具-界面组件
weixin_39718083的博客
06-04 644
组态工具-界面组件更新时间：2018-11-26 17:18:11准备事项由于很多组件都可以完成与云端的数据源和边缘端的设备进行数据联动，从而获得十分重要的相关数据展示，所以在使用组件前，请务必保证项目内有可用的数据源、脚本和正常运行的设备。关于数据源的创建配置、脚本的编写和设备的归属，请参见相关的章节介绍。图片这个组件主要用于在页面中展示图片资源，比如某些元素的背景、一些代表性的标志等，核心使用...
C#GDI+图元组态和IronPython脚本应用之LED影像系统
叶帆工作室
05-28 1万+
        这段时间一直进行LED影像系统紧张的开发工作，目前成绩还是非常“斐然”的，终于有了一点透气的机会：）        该系统从技术角度来说包括三点：一是图元组态（这点和普通的组态软件没有什么区别，由于面对的用户技术层次相对较低，所以把原来嵌入式组态修改属性的属性列表，修改为属性面板，以直观的方式修改组件属性）；二是图片特效制作，图片特效主要是淡入淡出、旋转、晶格、移动、放缩等等；
QTouch跨平台组态软件详尽教程：工程设计与图形界面详解
图形界面设计是教程的核心部分，涵盖了图形设计的基本流程，如文件操作、编辑功能、图形元素绘制（基础图元和控件）、Z序管理和字体设置。此外，还教授了脚本函数事件，如画面的打开与关闭、变量处理（赋值、输入、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IOTOS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值