[SOLVED] SVG images

I know. The problem is that our tracking system is gemini http://lab.iceteagroup.com and our current version has a bug (or missing feature…) that doesn’t allow for a project to be made public in read-only mode. We have to upgrade to their latest build and it’s a big PITA.

We had a web service that could pull the issues into a neat html page in the past, but that broke when they changed their web service interface… That’s a pending task that keeps getting postponed.

Hi Luca,

thanks for the info.

Actually, a suggestion on that: wouldn’t it be useful to have a page with a list of open/closed bugs with their WJ-xxx numbers and in which release they are expected to be fixed? You guys, do a tremendous work and you fix them before they are reported, so if I had seen it is a known bug, I wouldn’t try to edit a mixin, but I would wait for a couple of days.

Thanks again,
Alex

Hi Alex,

It’s a known bug fixed in the current update probably being announced today. “WJ-7456 ThemeBuilder’s built in code editor cannot modify a mixin file, it always tried to update the main theme.”

The update is already available but not announced yet. Waiting to verify and link issues with the forum.

Best,

Luca

Hi Luca,

Another adventure with the theme builder: I wanted to add some svg images to Classic-2.mixin.theme.

1. Started the builder
2. opened Classic-2.theme from a folder I had it
3. set it as active
4. opened the classic-2.mixin.theme I had created by hand
5. switched to the Images tab
6. imported all svg’s from a folder (the last button as you suggested)
7. saved

The result was that my Classic-2.mixin.theme remained unchanged, the Classic-2.theme however, got overwritten  !

Of course, I will download again the Classic-2 from your website, but if it was a theme I had customized, then this overwriting would be a problem! 🙂

Best,
Alex

Hi,

Update: If I set the button’s TextImageRelation to “Overlay”, the button can be shrunk to 14×14 px^2 showing the SVG image correctly.

Alex

Yes, there are some minimum layouts that are imposed by the javascript widget system. Since the inner image width/height properties are set in theme to force the resize of the svg image the widget enforces the  minimum size.

Hi Luca,

I probably wasn’t very clear. I am talking about the size of the button, NOT the size of the image. If you have a 10×10 pixel button and set its ImageSource property to a theme image (svg), the button is displayed larger at run time, to accommodate, I guess, the larger image !

Alex

The size of the icon in the button is determined by the theme, except when  the image is set to overlay. It can be changed using an ImageList. Earlier we were displaying the images in their original size and most of the times they were too big, especially SVGs where they are designed in a larger canvas and need to be resized.

If you see a larger image you may be using an old Classic-2.

Hi Luca,

This is indeed a lot of info, even the recommended SVG editor. May I ask you to add all this info to the documents (even the SCG editor part)?

Thank you Luca!

Concerning the size of a button with an svg ImageSource getting larger than design, is this a known “feature”?

Alex

Forgot to add that you can update a bunch of images all at once if you have the files in a folder. In the Images tab click the last button “Import icons from a folder”. It will add all the png, svg, gif, and jpg that it finds in the folder.

Thank you for adventuring in the theme builder. 🙂

There are several “ergonomic” issues and improvements that are certainly needed. To explain better:

• You cannot create a mixin theme file with the theme builder. You can create it using the Add->New Item theme mixin template or by hand.
• The theme builder lets you open and edit the mixin the open button or double clicking on it (this one has a bug – fixed in dev.). It recognizes that it’s a mixin and will apply to the active theme (drop down at the top). If before loading the mixin you have loaded other full themes you can switch the base theme and see how the mixin works.

There are other bugs with the built in editor when editing mixins that are also fixed in dev coming up in the update.

Hi,

I wanted to add some new svg images in a mixin.theme file. So I describe my … adventures:

I created a Classic-2.mixin.theme (an empty text file) in the /Themes folder.  This cannot be opened by the theme editor.

Then I created a new theme in the editor, but it asks to inherit from a theme and when it does, it fills the new theme with a copy of the one it inherits and I had to remove all the contents apart from the name and images.

Then I imported the images I wanted, which have to be imported one by one. I first had to give a name, press OK and in the following dialog select the file, which is automatically base64-encoded and saved. If I pressed cancel in this second dialog, the image is still created with the name I gave in the first dialog and is empty. If I may make a suggestion, it would be better if one could select the image files from an open folder dialog, they get created with a name=filename and then one can change the theme image name.

Ah, if I press the + button in the left pane to add an image, this is created and its name in the right pane with the images shows like “my-new-image (256 x 256)”. If I press the + in the right pane (the one that shows the images), the displayed name is “my-new-image” without the (256 x 256).

Saved as Classic-2.mixin.theme in the /Theme folder. If I go now to select the ImageSource for a control, the newly added images do not show up in the theme images. However, if I set by hand ImageSource=”my-new-image” it is displayed correctly.

A bug here: is that if I set a button’s ImageSource to a theme image (either the ones I created or the already available ones), the button’s size cannot be smaller than some value, I suspect the minimum size of the image.

Having said all this, the theme editor is a great feature, and the fact that it produces a clean text file is awesome! After all, one can retreat to good old Notepad! 🙂

Best,
Alex

You can add theme images in a mixin, it will not be erased by a theme change. A theme mixin is added to any theme loaded by the app. Add a file “MyTheme.mixin.theme to /Themes. It can override any theme and add/replace any setting. You can edit it with the theme builder as well.

Look inside the theme files. All image strings there are embedded data base64 images.

In Visual Studio right click on the image file (better if in /Images bu can be anywhere) and select “Embedded Resource” in the Build Action property. It will build the file into the assembly as an embedded resource.

Yes, the image editor is the dialog that pops up when you select an ImageSource.

SVG good editor controls that can be embedded in VS are hard to find.  There are many open source editors and even online editors: http://svg.recitmst.qc.ca/

Wow, this is a lot of information! The basic idea is that we can use ImageSource and not Image. But:

point 2. Didn’t know about theme images! And we can add more images in a theme? Or custom theme? And what happens to our customizations when a new Wisej release comes out? I remember trying to remember all the changes I had made to a VWG theme whenever a new version came out… brrrr

point 3. What is an embedded data, base 64 image? Any example?

point 5. How can I make an svg embedded? When I insert it in Properties/resources, the Persistence is greyed out to “Linked at runtime”, cannot change it to embedded.

And last but not least… What is the image editor? Do you mean when we set the imagesource for a control, i.e. the “ImagePicker” ? Cause I don’t see any image “editor” for svg as we have for, say, jpg….

Best,

Alex

Hi Alex,

SVG images cannot be assigned to the Image property because they cannot be converted to a .NET image. You can use them in 5 ways now:

1. Put them in a folder in your app (/Images or anything else) and assign the path to ImageSource. See the design image editor options.
2. Use a theme image name in ImageSource. You can add more theme images in a custom theme, or mixin themes.
3. Use an embedded data,base64 image in ImageSource.
4. Use any URL to a svg image again in ImageSource.
5. Make the svg file an embedded resource and then in ImageSource put: “resource.wx/MyApp.Images.my-image.svg,MyApp” where the first path is the fully qualified name of the resource, and the name after the comma is the name  of the assembly.

The image editor now lets you pick and preview a local file, a theme image, and an image URL.

There is a pending enhancement to add embedded image resources to  the files list as root folders. It will allow you to pick embedded file resources in the editor instead of assign it by hand (see above option 5). This enhancement works with additional extensions that have not been published yet, they are bundled icon sets in a single assembly, like FontAwesome.

There is a bug if your image name has a space in it it won’t work.

Will add this to the docs.

Best,

Luca