Use of html diagrams in matlab

Question

RODRIGO ALONSO circa 17 ore fa

0
Link

Link diretto a questa domanda

https://it.mathworks.com/matlabcentral/answers/2170448-use-of-html-diagrams-in-matlab

Modificato: RODRIGO ALONSO circa 11 ore fa

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>