Author Topic: HTML (SVG) Export  (Read 13992 times)

0 Members and 1 Guest are viewing this topic.

Visio.Alex

  • Newbie
  • *
  • Posts: 2
Re: HTML (SVG) Export
« Reply #15 on: September 27, 2017, 05:01:39 PM »
The issue persists on all files opened, including blank new files.

Thanks for the quick update!

Alex

Nikolay

  • Hero Member
  • *****
  • Posts: 945
    • UnmanagedVisio
Re: HTML (SVG) Export
« Reply #16 on: September 27, 2017, 06:01:55 PM »
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
« Last Edit: September 30, 2017, 04:39:11 AM by Nikolay »

Nikolay

  • Hero Member
  • *****
  • Posts: 945
    • UnmanagedVisio
Re: HTML (SVG) Export
« Reply #17 on: November 19, 2019, 05:37:56 AM »
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

  • Full Member
  • ***
  • Posts: 147
Re: HTML (SVG) Export
« Reply #18 on: June 21, 2020, 03:33:35 AM »
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!

Nikolay

  • Hero Member
  • *****
  • Posts: 945
    • UnmanagedVisio
Re: HTML (SVG) Export
« Reply #19 on: June 21, 2020, 03:17:16 PM »
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

  • Full Member
  • ***
  • Posts: 147
Re: HTML (SVG) Export
« Reply #20 on: June 22, 2020, 03:11:33 AM »
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!

Visisthebest

  • Full Member
  • ***
  • Posts: 147
Re: HTML (SVG) Export
« Reply #21 on: June 22, 2020, 03:48:40 PM »
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!
« Last Edit: June 22, 2020, 03:59:14 PM by Visisthebest »

Visisthebest

  • Full Member
  • ***
  • Posts: 147
Re: HTML (SVG) Export
« Reply #22 on: June 24, 2020, 04:02:45 AM »
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!