Use of html diagrams in matlab

Question

RODRIGO ALONSO el 3 de Dic. de 2024 a las 16:01

0
Enlazar

Enlace directo a esta pregunta

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

Editada: Abhaya el 5 de Dic. de 2024 a las 6:39

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 comentario
Mostrar -1 comentarios más antiguosOcultar -1 comentarios más antiguos

Abhaya el 5 de Dic. de 2024 a las 6:35

Editada: Abhaya el 5 de Dic. de 2024 a las 6:39

Abrir en 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")

For more information, please refer to the MATLAB documentation for ‘uihtml’ function.

https://www.mathworks.com/help/matlab/ref/uihtml.html

Iniciar sesión para comentar.

Iniciar sesión para responder a esta pregunta.

Use of html diagrams in matlab

1 comentario
Mostrar -1 comentarios más antiguosOcultar -1 comentarios más antiguos

Respuestas (0)

Ver también

Categorías

Etiquetas

Community Treasure Hunt

Use of html diagrams in matlab

1 comentario Mostrar -1 comentarios más antiguosOcultar -1 comentarios más antiguos

Respuestas (0)

Ver también

Categorías

Etiquetas

Community Treasure Hunt

1 comentario
Mostrar -1 comentarios más antiguosOcultar -1 comentarios más antiguos