Editing SVG code online

When you build a site or a web application, periodically there can be a need to slightly modify a code of an SVG fragment used in that site, like add an arrow to a button or something. Not visually, but directly in the SVG code. For visual editing, there are quite a number of tools, like Inkscape. The thing is it produces not that "developer-friendly" svg code.

So sitting at home at corona-virus times I have not found a good online tool for that at first, and thought that monaco-editor could be an almost ready-to-go solution, with autocomplete and tooltips. After a couple of days built a simple web-site that provides basic auto-complete, and integrates that editor. It also uses free firebase plan to store user data and host the website, so that you can save your changes. The code is inspired by this article on implementing custom monaco editor intellisense. All code is in an open GitHub repository.

file

Continue reading“Editing SVG code online”

Azure DevOps to build office (Visio) VSTO Add-ins

These notes basically summarize setting up automated build for Office extensions (such as VSTO) in the cloud (i.e. Azure DevOps). Note that Azure DevOps supports private repositories for free. For open source repositories, it does not even impose any limitations (for private repositories, max build time per month is limited, so you cannot occupy 100% of the server for your builds). Basically I’m fine with "free" layer for now.

Continue reading“Azure DevOps to build office (Visio) VSTO Add-ins”

Exporting VIsio diagram to PDF with tooltips

If you use "Save As…" in Visio to export a PDF file, then the result does not include hover tooltips. Presenting a new Visio extension that can add the functionality.

If you export to PDF using new button, then the "comments" you added using the "Insert ScreenTip" should be also available.

The technical details and implementation "manually" is discussed here on the brilliant VisioGuy Forum.

Localizing a .NET office extension (desktop)

This article summarizes my experience on translating office add-in to multiple language. It is not an official guide, but just how you could do it. It assumes you have an office extension (VSTO, desktop) in a single language, and want to provide it in some other languages for users in other countries.

GitHub demo repository:
https://github.com/nbelyh/VstoMultiLanguageDemo

For generic information on localization on application localization in .NET, please refer the official Microsoft documentation: https://docs.microsoft.com/en-us/dotnet/framework/resources/index

The steps I suggest:

  • Create localized versions of your resources
  • Move all strings to resources
  • Move ribbon strings to the resources
  • Translate the resources
  • Use the translation

Create localized versions of your resources.

The easiest is to install Visual Studio extension ResXManager, and then add the languages you want. It will create the localized version of the files for you, and you will be able to translate everything from one place. Also it supports import/export, so you can send your texts to translators. It is a free extension, highly recommended.

The ResXManager View

Move all strings to be translated to resources.

JetBrains Resharper can help with that (it has a nice function "Move to resource", along with other localization assistance).

You can do that "by hand" as well (just for each resource file create new localized verison, like for main Resources.resx create Resources.de.resx for example)

Move ribbon strings to the resources

If your extension has text labels on the ribbon, you may want to translate those. The ribbons designer does not support localization, so you can go with XML ribbon definition (if you use built-in project you could use "Export as XML" option in the designer. To translate labels you now need to move hardcoded strings from this xml to resources, and replace them with callback methods.

In pictures:

Ribbon.xml

<button
	label="Click Me"
	description="Click this button to see a message"
	onAction="Command1"...>

Ribbon.cs

class RibbonHandler
{
    public void Command1(IRibbonControl control) { ... }
}

transforms to:
Ribbon.xml

<button tag="OnCommand"
	getLabel="GetLabel"
	getDescription="GetDescription"
	action="Command1"...>

Ribbon.cs

class RibbonHandler
{
	public void OnCommand(IRibbonControl control)
	{
		if (control.Tag == "Command1") { ... }
	}

	public string GetLabel(IRibbonControl control) =>
		Resources.ResourceManager.GetString($"{control.Tag}_Label");

	public string GetDescription(IRibbonControl control) =>
		Resources.ResourceManager.GetString($"{control.Tag}_Description");
}

Resources:

Command1_Label => "Click Me"
Command1_Description => "Click this button to see a message"

I would not recommend to move the whole Ribbon.xml file to the resources though. For example, you could face a problem when switching add-in UI to match Visio language (see below), because the ribbon XML is required even before the Add-in startup is called by the runtime.

Translating the resources

You can always translate yourself, if you know the target language. if you don’t I would suggest to go with ResXManager to export the resources you know and send to the translator(s).

Using the translation

Assuming you have translated the application, you need to use the translation. Most probably you will want to pick the language that corresponds to the Visio language. You can do that on the add-in’s startup, by checking what kind of language Visio has:
Application.LanguageSettings.LanguageID will return the LCID (number) that defines the language. Then you cna use that to make your application use specific localization by setting Resources.Culture property. If you do have all localization Visio has, in this case you may want to use only supported ones (and default to English). Below is a code sample:

var lcid = Application.LanguageSettings.LanguageID[Office.MsoAppLanguageID.msoLanguageIDUI];
var culture = new CultureInfo(lcid); // selected in the Office

var languages = new[] { "de", "ru" };
if (languages.Any(language => language == culture.TwoLetterISOLanguageName))
{
    Resources.Culture = culture;
    // _ribbonHandler.Invalidate();
}

To test that the translation actually works, you can select Visio UI language (for that you need to install corresponding language packs):

SvgPublish updated 1.2.11

The SvgPublish extension has been updated to version 1.2.11

Visit the extension’s page:
https://unmanagedvisio.com/products/svg-publish/

Download the latest version:
https://unmanagedvisio.com/download/svgpublish/SvgExport-1.2.11.msi

Summary

New: Translations for German and Russian languages. Now all options and exported elements can be displayed in these languages. Japanese translation is ongoing.

Fixed relative links behavior. Please see the related article for the details.

Fixed layer behavior. Now in case when shape belongs to multiple layers, the show/hide logic corresponds one-to-one to the Visio layers logic. Also, now by default only the layers visible in Visio are toggled on; invisible layers are toggled off by default on export.

New: Non-compressed versions of scripts and templates are included to simplify customization. You can opt in to export non-compressed version by selecting a custom template without .min suffix on the developer tab.

Some stability fixes and improvements. For the full list please refer to the milestone issue list:
https://github.com/nbelyh/svgpublish-templates/milestone/1?closed=1

SvgExport updated 1.2.10

Download

Download to the latest version:
https://unmanagedvisio.com/download/svgpublish/SvgExport-1.2.10.msi

Visit the extension’s page:
https://unmanagedvisio.com/products/svg-publish/

Changes

New: add hover + click tooltip and popover behavior.

This feature is supposed to solve the problem when you want to publish tooltips or popovers, that have some hyperlinks in the text body. Now you can enable them to show up and disappear if the user moves the cursor outside of the shape. However, they will stay if the user has clicked on the shape. The new setting is shown on the screen below, select trigger as hover click, i.e. both. You can also select Hide if clicked outside if you want the fixed by click tooltips to disappear when clicked outside of the shapes.

See the result in action:

New: The tooltips can now be shown/hidden with specified delays.

You can specify hide and show delays, the tooltips and popovers will appear on mouse entering the shape or mouse leaving the shape with the specified delays.

New: Trigger and position for the tooltips and popovers now can be configured.

Added in version 1.2.8. The standard position and trigger options were added Position: – top/left/bottom/right: Will show the tip or popover on the left/top/bottom/right of the corresponding shape.

  • top/auto left/auto bottom/auto right: Will show the tip or popover as specified by default, but move it if it does not fit within the view.

Trigger: – hover: will show the tip or popover when the mouse hovers over the shape (on the desktop, click on the mobile)

  • click: will show the tip or popover when the shape is clicked
  • hover click: will show the tip when the mouse hovers the shape and fix it to stay visible if clicked (until clicked again)

Fix: Fix for IE11 layer-switching toggle display issue

Bootstrap-switch updated to v. 3.3.4, fixed in version 1.2.8. Now the toggles should also work properly in the Intern Explorer 11 (in all newer browsers they already worked properly)

Fix: Publishing using the option Export Single Page NRE when ShapeSheet window is opened

Fixed in version 1.2.9. The extension showed Null Reference Exception error if you open a ShapeSheet window in (as a separate sibling window) for some shape on the diagram being published, and Single Page option was selected. Now it should work properly.

Book: Mastering Data Visualization With Microsoft Visio Professional 2016

Recently finished reading the David Parker’s "Mastering Data Visualization With Microsoft Visio Professional 2016" book. Highly recommended if you already have some experience with Visio and want to know more about its data visualization capabilities, and how these can be used in your infrastructure.

Some unique topics covered – creating custom data graphics and Pivot Diagram Add-on.