HTML (SVG) Export

Started by Nikolay, January 16, 2017, 01:51:54 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Visio.Alex

The issue persists on all files opened, including blank new files.

Thanks for the quick update!

Alex

Nikolay

#16
Dear Alex,

Could you please check if new build (1.2.3.2) works for you:
http://unmanagedvisio.com/download/svgpublish/SvgExport-1.2.3.2.msi

--- update ---

seems to be fixed in that build

Nikolay

Updated SvgPublish (the add-in for improved export Web/Svg) to version 1.2.11. Fixed multiple-layer and relative links issues in particular.
More details: http://unmanagedvisio.com/svgpublish-updated-1-2-11/

Added localization (full UI translation) for German and Russian languages. Now the add-in can change it's UI language to adopt to Visio's UI language. Well, this is the first time I'm adding multi-language support to a Visio extension.  The proof-reading is done (by a native speaker), but still, beware of odd sentences - any feedback is highly appreciated :D



Visisthebest

Really cool add-in Nikolay how did you make the layer toggle on/off on the shapes in this html Visio diagram:
https://nbelyh.github.io/svgpublishdemo/1981-91%20Suzuki%20FA50%20Shuttle.html

The yellow highlight of the last clicked shape also a really cool touch!
Visio 2021 Professional

Nikolay

Thanks.

The yellow "highlight" may actually be resource-consuming, now there is a way to opt-out and do a simple "rectangle selection" instead.

Regarding the diagram - it's basically just the default checkbox. All source code files are available (download the .zipped vsd file)
https://unmanagedvisio.com/products/svg-publish/html-export-demo/

I don't remember exactly but I think this was done simply by placing each connection on its layer, i.e. no-code solution.

Hiding in general is done by exporting layer information. I.e. each shape has information associated with it, including its layer(s).

Visisthebest

In the Suzuki Visio diagram I see the shapes have a shape data field called 'nets' that has one or more names of the layers ;-separated in a string, like:

black-yellow;black-red;black-white;red-black

If I add a 'nets' shape data field to shapes in my diagrams that has a list of layers ;-separated, do I get the same layer-toggling behavior on the shapes when exporting with your html export add-in? That would be awesome!
Visio 2021 Professional

Visisthebest

#21
Nikolay I got it working by adding the Layer name to the 'nets' shape data field of a shape, then in the html export diagram when I click the shape with this shape data it toggles the layer on and off. Super!

(I copied over the Javascript in the example Suzuki diagram, and I guess the Show Layers needs to be turned on in the sidebar options?)

When I have the layer off when exporting unfortunately the toggling doesn't work properly. Is it possible to have some layers off by default (I don't mind adding some javascript for a default turn off but let me know what to add).

Many thanks much appreciated hopefully will get it working then we will get a business license for the non-profit project we're currently working on for sure!
Visio 2021 Professional

Visisthebest

Hi Nikolay,

This is the Javascript that is in the Suzuki example with the layer toggling on clicking shapes:

$.each(diagram.shapes, function (shapeId, shape) {

    var $shape = $("#" + shapeId);
   
    $shape.css("cursor", 'pointer');

    if (!shape.Props || !shape.Props.nets)
        return;
   
    $shape.on('click', function (evt) {
        evt.stopPropagation();
        var nets       = shape.Props.nets;
        var allVisible = true;
       
        $.each(nets.split(";"), function(k,v) {
            var name    = v.trim();
            if (!diagram.isLayerVisible(name))
                allVisible = false;
        });
       
        $.each(nets.split(";"), function(k,v) {
            var name = v.trim();
            diagram.setLayerVisible(name, !allVisible);
        });
    });
});

This works well in other diagrams (I add the layers to be toggled on specific shapes to the 'nets' shape data string field on that shape).

What I need is a way to turn off specific layers when the diagram is initially loaded in the browser (most layers I use are turned off by default), how can I achieve that?

I assume this can be achieved by adding some Javascript, if you can send me an example and where to add it please (my VBA/VB.NET is getting better but my Javascript knowledge is minimal).

Thank you!
Visio 2021 Professional