Sharing Visio diagrams in social media

When you share any link on LinkedIn, Teams, Facebook, or other social platform, it extracts a "preview" picture, like image, title and description.

Any site can provide this information by incorporation "open graph" tags into the HTML head. Many social networks, such as Facebook and twitter, even have a rules for the image size and text length. Read more about the open graph links on the open graph site

Check out what it looks like with Facebook:

The SvgPublish now also supports these media tags. Means, you can publish a diagram and then just paste a link to it in Teams or LinkedIn, and the link will show a preview, with a link to the published version.

Continue reading"Sharing Visio diagrams in social media"

SvgPublish 1.3 released

SvgPublish Extension 1.3 released

The extension's page
https://unmanagedvisio.com/products/svg-publish/

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

Improvements in this release

  • New template editor with live preview
  • Support both global and per-shape templates
  • Cards (OG) support metadata for social sharing
  • GitHub authentication fixed upload changed to put all files in single commit
  • Follow cursor option for the tooltip/popover
  • Visio Zoom and target hyperlink settings shoudl be respected now
  • Layers can be sorted alphabetically in the sidebar

Please note that this is major release, make sure you backed up your diagrams files before upgrading!

Continue reading"SvgPublish 1.3 released"

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