HTML – Unmanaged Visio

Scripts used in svg publish extension are on github

By nbelyh 06/03/2017 06/03/2017 0

Recently published all javascript, html, and css code of scripts used in html publishing to the GitHub for the upcoming version 1.1: https://github.com/nbelyh/svgpublish-templates This repository contains the default built-in templates, that are used in the Svg Publish extension The scripts/style files are bundled and minified at the build time by the extension, and visible in the template as file “vp-script.min.js” and “vp-style.min.css” respectively. The default template, installed with the app, is also there. First, these are for reference. Second, they can be easily used your own solution. There are two ways: Way 1. Just drop the content of the file into “immediate” script …

Web Export

Layers support in html publishing

By nbelyh 10/02/2017 15/02/2017 0

With new update to Version 1.0.9 there is new “out-of-the-box” function of the HTML Export extension– layer support! Now you can publish diagrams, and add optional layer management, to allow switching layers on/off on the published diagram. This allows to control diagram’s layers on the web to show/hide it’s parts. Check out the example: Suzuki FA50 Shuttle electrical schematic. Yep, in 1990s it was all pretty simple. You can turn on/off wires of the corresponding color by clicking the layer switch, to see what is connected with what. This is out of the box. Alternatively (this part is provided by extra tiny script) – …

Development, Web Export

Pokemon office – more html popovers

By nbelyh 04/02/2017 15/02/2017 0

New sample with updated javascript code / template created with svg publishing, to show stuff in the office (click the picture open it live) https://nbelyh.github.io/svgpublishdemo/PokemonBldgPlan.html The javascript is very similar to the one described in the Dynamic popups on published diagrams, you can check it in the source diagram. Just the formatting is different, now it builds a chunk of HTML and populates it with some images/properties from the shapes. The source diagram and the excel file are here:

Development, Web Export

Dynamic popups (“popovers”) on published diagrams

By nbelyh 31/01/2017 10/02/2017 0

With HTML export, you can specify any information to show on popup (bootstrap popover) Firs, simple demo (rectangle): Live sample: https://cdn.rawgit.com/nbelyh/svgpublishdemo/fa70891f/SimplePopover.html Souce: This is just stock popover. The code just defines a standard bootstrap popover, but for a Visio shape (#shape1). The result might not look that impressive, but I hope it looks clear. Now let’s go for something more advanced. Lets take stock diagram and show in the popover info about the relevant computer models from the HP website. Click the image to open it live (again, hosted on GitHub)

Development, Web Export

Exporting html diagrams – binding to live services

By nbelyh 30/01/2017 10/02/2017 0

This post briefly explains how to bind Visio diagram, exported as HTML to some external live web-service. It’s based on the HTML/SVG export extension. If you want the exported diagram to be connected to some live data, you’ll need to connect to some live service (in this example, we consider a REST service). In the following posts, I’ll discuss binding a diagram to a SharePoint list using JSOM / REST. So, let’s take map of Europe and show temperature by coloring countries, with colder colors indicating colder temperature! You can check the result in DEMO section (click the picture to navigate): Here is …

Web Export

Exporting html diagrams – basic settings

By nbelyh 21/01/2017 03/02/2017 0

This post addresses basic output settings of the html export, i.e. what you can control right out of the box. Let’s check the options. You can open them using “Settings” button on the tab: This will show the add-in’s settings panel:

Web Export

Exporting Visio diagrams as html

By nbelyh 17/01/2017 15/02/2017 0

Do you want to build interactive diagrams which are available via web? Well, Visio SharePoint Services are there, but what if you want to go one step further than that and control/animate shapes more precisely and use standard css3 animations for example, or if you don’t have / don’t need SharePoint Enterprise? The good old HTML/SVG export is here to help you with that! And yes, you can still have your diagrams in SharePoint. Or on GitHub pages. Or on your network drive 🙂 Check out what you can do with that!

Uncategorized

HTML Export Demo

By nbelyh 14/01/2017 10/02/2017

This page contains a list of samples produced with HTML/SVG Export Addin. All samples are exported to GitHub Pages, you can find them in this GitHub repository: https://github.com/nbelyh/svgpublishdemo Stuhlek (Ski Region) interactive map Demonstrates animations and linking to live data (via ajax and html). Means, data for lifts and slopes is real (taken online from the official site). The lifts that are turned off/closed don’t move. Live: https://nbelyh.github.io/svgpublishdemo/stuhlek.html Source: Pokemon Office Plan Demonstrates html popups with pictures and hyperlinks. Live: https://nbelyh.github.io/svgpublishdemo/PokemonBldgPlan.html Source: Suzuki FA50 Motorcycle wiring schematics Demonstrates layers functionality. Allows to turn layers (containing wires) on/off to see what is connected to what. Live: https://nbelyh.github.io/svgpublishdemo/1981-91%20Suzuki%20FA50%20Shuttle.html Source: Actual …