Use of html diagrams in matlab

Question

RODRIGO 2024-12-3

0
链接

此问题的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/2170448-use-of-html-diagrams-in-matlab

编辑： Abhaya 2024-12-5

Hello,

I have an html file that represents a diagram figure based on a JSON input containing the information of the figure nodes.

My goal is to use the uihtml functionality to pass the JSON (generated in matlab) to the html as an input and open it on a matlab figure

Im doing first tests with an html where the json is defined inside, its not an input, to start simple. Even in that case I cannot see the diagram on the figure that matlab generates, but the html is fine and I can see it all good if I open it in the browser.

I've tried a lot of things. The html had some links to the .js libraries used to build the figures, I downloaded those just in case on the same folder.

Maybe someone has experience with uihtml

thanks a lot!

----

I can share the html:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html, body {
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #myDiagramDiv {
            border: solid 1px black;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<script src="go.js"></script>
<script src="Figures.js"></script>
    <script id="code">
        function init() {
            const myDiagram = new go.Diagram('myDiagramDiv', {
                allowCopy: true,
                allowDelete: true,
                'draggingTool.dragsTree': true,
                layout: new go.TreeLayout({
                    angle: 90,
                    layerSpacing: 30,
                    arrangement: go.TreeArrangement.FixedRoots,
                }),
                'undoManager.isEnabled': true,
            });
            function nodeFillConverter(figure) {
                switch (figure) {
                    case 'AndGate':
                        return new go.Brush('Linear', { 0: '#EA8100', 1: '#C66D00', start: go.Spot.Right, end: go.Spot.Left });
                    case 'OrGate':
                        return new go.Brush('Linear', { 0: '#0058D3', 1: '#004FB7', start: go.Spot.Right, end: go.Spot.Left });
                    case 'Circle':
                        return new go.Brush('Linear', { 0: '#009620', 1: '#007717' });
                    case 'Triangle':
                        return new go.Brush('Linear', { 0: '#7A0099', 1: '#63007F' });
                    default:
                        return 'whitesmoke';
                }
            }
            myDiagram.nodeTemplate = new go.Node('Spot', {
                selectionObjectName: 'BODY',
                locationSpot: go.Spot.Center,
                locationObjectName: 'BODY',
            })
            .add(
                new go.Panel('Auto', { name: 'BODY', portId: '' })
                .add(
                    new go.Shape({
                        fill: new go.Brush('Linear', { 0: '#770000', 1: '#600000' }),
                        stroke: null,
                    }),
                    new go.TextBlock({
                        margin: new go.Margin(2, 10, 1, 10),
                        maxSize: new go.Size(100, NaN),
                        stroke: 'whitesmoke',
                        font: '10pt Segoe UI, sans-serif',
                    }).bind('text')
                )
            );
            myDiagram.linkTemplate = new go.Link({
                routing: go.Routing.Orthogonal,
                layerName: 'Background',
                curviness: 20,
                corner: 5,
            }).add(new go.Shape({ strokeWidth: 1.5 }));
            // Cargar un modelo JSON de prueba
            const testJson = {
                class: "go.TreeModel",
                nodeDataArray: [
                    { key: 1, text: "Root", figure: "Circle" },
                    { key: 2, parent: 1, text: "Child 1", figure: "AndGate" },
                    { key: 3, parent: 1, text: "Child 2", figure: "OrGate" }
                ]
            };
            console.log('Modelo JSON:', testJson);
            myDiagram.model = go.Model.fromJson(testJson);
        }
        window.onload = init;
    </script>
    <div id="myDiagramDiv"></div>
</body>
</html>

1 个评论
显示 -1更早的评论隐藏 -1更早的评论

Abhaya 2024-12-5

编辑：Abhaya 2024-12-5

在 MATLAB Online 中打开

Hi Rodrigo,

I tried rendering the HTML file using ‘uihtml’. Since MATLAB ‘uihtml’ function cannot access third-party JavaScript libraries using a Content Delivery Network (CDN), I placed both ‘go.js’ and ‘Figures.js’ in the same folder as the HTML file. After executing the following code, the HTML file successfully displayed the diagram.

uihtml("HTMLSource","index.html")