Hi guys,
Recently finished my new long-standing extension for exporting HTML from Visio.
I've tried first time with vispublish here: http://visguy.com/vgforum/index.php?topic=61, but it didn't quite fly :)
Now it's much easier, it's a local HTML export, just as "save as", but one that works in modern browsers, and supports extensibility (e.g. animations/javascript)
Means, it can export HTML file directly to the local drive.
Demo pages
http://unmanagedvisio.com/html-export-demo/
I like "stuhlek" the most, since it connects to LVIE DATA on the target website, and I visit it quite often :)
(http://unmanagedvisio.com/wp-content/uploads/stuhlek-150x76.gif) (https://nbelyh.github.io/svgpublishdemo/stuhlek.html)
Simple org chart.
(http://unmanagedvisio.com/wp-content/uploads/14-01-2017-16-27-17.png) (https://nbelyh.github.io/svgpublishdemo/OrgChart__0.html)
In standard functionality, it can export to (any) SharePoint AND to GitHub pages (to share diagrams for free!).
Check out the above diagrams - they are all hosted on GitHub!
In short, HTML export done in 2016 :)
The standard features (pages, properties, hyperlinks, tooltips) are out-of-the box.
Viewing works with browsers: Chrome, Firefox, IE9+, Edge, mobile browsers (ipad, android/chrome)
Awesome! I missed such a feature from the beginning of Visio.
Thank you so much for this work.
By the way the msi does require admin rights.
Thanks!
About the MSI - you can click "Advanced", then select "Install only for me", then no admin rights are required.
Installation worked fine.
Did a first test. Will report later.
This is very impressive and cool! 8)
Thanks Paul!
Hi Nikolay,
Here are my first test results:
- on a rather small drawing (less than 2000 shapes) I get the error "The publishing finished with error(s): An item with the same key has already been added.". (I cannot upload the file, but can send it to you by email or PM)
- Miss the possibility to make only shapes at top level clickable (Removing manually the unwanted shapes in the "window.svgpublish" area helps, but this shouldn't be the solution of choice)
- Cannot overwrite Java class in Visio (field is editable, but does not store the value)
- Miss the possibility to not overwrite customized css and js files (or to chose my custom ones from the interface in Visio)
Rgds,
Y.
Hi Yacine!
Thank you for the feedback!
1. Could you please send that drawing with 2000 shapes as PM, or by email, i'll try to fix that.
2. What do you thing, how would it be to do that? Maybe explicit flag like "exclude" from selection could be helpful?
3. There seems to be a bug with that field. To kee pthe text, you click that field, then another field (not the drawing). Could you please try the updated version?
4. Now there should be 2 windows - for custom CSS as well! (next to the javascript). Please check out the updated build.
1. Done
2. a check box for individual shapes would be fine. (information to be stored in the shape as prop or user field for better editing of large works).
I could also imagine one global flag "export only data at top level" (parent = page)
3. The update did it.
4. The windows are not identifiable as such at first glance. Either add labels or fill them with an explanation which disappears on gotFocus.
Contents were however inserted just fine in the export file. (Still need to figure out how to use them. Looking forward to read your tutorial)
1. Fixed.
2. A global checkbox added.
3. Fixed.
4. I'll try to write an article/tutorial this weekend for using custom stuff there.
What would you think, would option to edit HTML/JS templates "globally" be useful, or "minor" amendments are good enough?
Anyways, this is probably to be discussed after writing some introduction/tutorial...
1-4 *****
Thank you.
Editing CSS and JS:
That's a very big task.
Consider only CSS and JS Pros, or also common Visio users?
Inkscapes dropdown lists allowing to chose an action for an event for a certain shape are quite fine. You may have a look at it.
Different solutions as templates would be fine. (Beside the left display bar, one could imagine having floating data windows?)
New feature: now it support switching layers on/off. Demo:
http://unmanagedvisio.com/layers-support-in-html-publishing/
Very good idea and very useful. Thank you.
Has anyone had any issue with the current beta version of this add-in (v1.2.3.0). Visio 2013 throws an error:
"The given key is not present in the dictionary."
Any help would be appreciated.
Alex
Hi Alex,
Could you please share the file. Looks like some upgrade issue.
Either to support@unmanagedvisio.com or nbelyh@gmail.com if you don't want to share it publicly here.
There are losts of new stuff in 1.2.3, looks like compatibility has been broken somewhere.
The release is actually "almost ready", currently I'm just testing it to make sure nothing is broken.
So it would be very helpful, will follow up as soon as possible.
Or does it happen on a blank new file as well?
The issue persists on all files opened, including blank new files.
Thanks for the quick update!
Alex
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
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
(http://unmanagedvisio.com/wp-content/uploads/Annotation-2019-11-18-004919.png)
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!
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).
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!
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!
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!