Видео

Thank you for your feedback. Could you please write to support@svghmi.pro and describe the problem?

@@industrial_control I sent a message on your svghmi pro site.

Hello! Thank you for your kind word. First of all you should add something like this code to <defs/> section. <hmi:localDef name="MouseHover" type="number" value="0"/> <hmi:action id="onMouseHover"> <hmi:setProperty name="LocalProps.MouseHover" type="number" value="1"/> </hmi:action> <hmi:action id="onMouseLeave"> <hmi:setProperty name="LocalProps.MouseHover" type="number" value="0"/> </hmi:action> Next add next attribute to <g/> tag or <SomeAnotherElement> tag a couple of hover events. <g hmi-event:mouseLeave="url(#onMouseLeave)" hmi-event:mouseHover="url(#onMouseHover)"> And now you can use "LocalProps.MouseHover" in any play to trigger color changing. Also, I can't not mention. That you can simply use the converter svghmi.pro where it is already implemented. You don't even need to open the code editor.

@@industrial_control, hey, thanks! I thought it would end up being easier than this. I've also tried the website you are talking about, but it doesn't work properly with the icons from Google (fonts.google.com/icons). The properties are not being bound to the interface when I tried to upload an icon.

@industrial_control , hey, thanks! I thought it would end up being easier than this. I've also tried the website you are talking about, but it doesn't work properly with the icons from Google (fonts.google.com/icons ). The properties are not being bound to the interface when I tried to upload an icon.

​@@industrial_control, may I contact you in private?

Very strange, just now specifically went to check some google icons and everything works marvellously. You just need to add an ID to the <path/> elements. Then add "fill connection" and specify the same id. Regarding the hover effect. I would also like to add that I usually add a rectangle as big as the whole viewBox. In order for the hover effect to work correctly and not flicker when you move the cursor from line to line.

Good afternoon. It depends on where the problem appears. In the Runtime or in the development environment. Often what does not display well in the TIA Portal development environment displays well in the browser in runtime. You can also add an attribute to the svg. shape-rendering="geometricPrecision" its work can be clearly seen on curved shapes with stroke. Also you can use our converter svghmi.pro it by default solves a lot of problems and we try to improve it constantly.

Thanks for the feedback. This flip is optional. With Letters it's of course problem, but you can manualy exclude letter elements from "flip" group. I haven't encountered it, so it didn't occur to me😊. As for me I don't place text in widgets. I usually place it with WinCC opportunities. Another question about minified code. This is a sensible decision, because it reduces the size of the final file and ultimately has a positive effect on WinCC performance in the browser. Also many code editors have a built-in code formatter. And with a couple of seconds you can easily get formatted svghmi file. But I absolutely believe that it is necessary to develop this tool. And I think I can add an option as a checkbox "minify" file or not. So that a person could decide in what form he wants to get the output file.

Once it is updated though, the preview doesnt update as long as it is svghmi! therefor the preview is useless. The workflow is working as svg with preview, and before implementing to TIA copying the file and editing the file format to svghmi.

That's a good question. And solved it in the following way. Go to settings and search for "files associations" -> click "Add item". Then type in item: *.svghmi and in value: svg. Now VSCode considers all files with an svghmi extension as equal to svg. And then preview and code formatting works. This greatly speeds up development.

@@industrial_control Thanks a lot. Works like a charm.