How do I add my own SVG shapes?

[jcxjcx123]

Hi, How do I add my own SVG shapes? What are the requirements for shapes? I drew some shapes in Adobe Illustrator, exported and copied the path of the shapes, and then added my shapes to the front end, but it didn't work, the shapes didn't display correctly,thaks alot

[unocelli]

Hi, send me please one of your exported svg images.

[jcxjcx123]

[jcxjcx123]

These are the two SVG shapes that I exported

[unocelli]

It is currently not supported to add images of this complexity to the library. the solution is to take the image directly from the files. I'm waiting for more pictures so that I can add the feature #181.

[MatthewReed303]

Hi @unocelli I have Symbol Factory V3 and export the HMI symbols as SVG and edit them via Inkscape to change the IDs to readable and useful names to animate the elements etc I can provide some useful most popular SVGs to begin a library for users.

In the past on other HMI/SCADA platforms I used CSS to do the animations of the SVG, Change fill colour, blink, fade, rotate etc I have read through the docs for the shapes but Is not very clear how this can be achieved. I have been looking through the code to see how this is done but it's not very clear.

I have created symbols in the past that use a simple INT to change the states, but just having the properties available and the user selects what they want to use. For example, I have a pump SVG symbol, If I have SVG Elements IDs PumpColour, RotateIndicator. I set the Element IDs via an SVG editor like Inkscape etc

I use an INT to set the states:

0 = Off ( Standard Colour Grey etc ) 1 = Running ( Green or what user selects in properties and Rotate Indicator rotating ) 2 = Warning ( Yellow or what user selects in properties ) 3 = Fault ( Red or what user selects in properties and blinking if enabled ) 4 = Unknown State or Comms fault etc ( Black/Dark Grey or what user selects in properties )

Basically, there will have Properties for the user to select in the editor 4x colour options 1x Rotate Indicator Enable 1x Rotate Speed 1x Blink Enable 1x Blink Rate

The logic can be handled via Javascript including some of the properties and the INT value/User Tag. Can we use CSS to handle changing the colours, rotating, and blinking? I see there are CSS and HTML files but they are blank?

If you could provide a detailed write-up or video showing how this can be done, I can start making dynamic shape symbol libraries. I can provide some example SVGs if that helps.

[unocelli]

Hi, sorry for the delay. it is also not clear because it is a bit complicated, I can try to guide you. for example, I think it would be better to define your type by adding it in the attributes of the svg image.

[MatthewReed303]

Hi @unocelli How would I access these attributes for the editor and adjust the effects of the SVG image? I would take it that the SVG can't be imported using the image function as it would need to be embedded to access the attributes? Is there a way to add something like an iframe but with custom HTML5 code with the SVG embedded and uses CSS styling and script tags to use javascript functionality?

For example, I have been using this https://github.com/silexlabs/Silex to build some web interfaces for an ESP32 Microcontroller. They have a container element where you can enter pure HTML5 code, I have used this way to embed dynamic SVGs https://github.com/silexlabs/Silex/wiki/Editor-UI#html so maybe something like this would be a quick way to create dynamic elements?

[superkalt]

hi!

it would not be the right time to define it correctly.

how do you think about a kind of building data point that is not as heavy as bacnet? How to create a Visu quickly and easily with the type of data point alone? just drag the data point into the editor and a simple prefabricated visu is built in with all basic things.

{ "Building": { "Identifier": "1", "Name": "abc, Hallbergmoos", "ISP": "k7-g2-abc", "Object": { "Identifier": 60011, "Groupaddress": "29/2/107", "Name": null, "Present_Value": 1.2, "Tag": [ "knx" ], "Properties": { "Type": "9.001", "Status_Flags": "normal", "Event_State": "normal", "Out_Of_Service": false, "Visualization": { "Type": null, "Description": null, "Units": null, "Min_Pres_Value": null, "Max_Pres_Value": null }, "Surveillance": { "Enable": false, "High": null, "Low": null }, "KNX": { "Datatype": "16-bit float, e.g. temperature", "Size": ".001" } } } } }

"Visualization": { "Type": null, "Description": null, "Units": null, "Min_Pres_Value": null, "Max_Pres_Value": null },

"Type" => like "plain text" or "led" and so on

[MatthewReed303]

Hi @superkalt How can this style be used with an SVG? If a frame had an HTML5 Editor you can embed the JS/CSS/SVG in the single HTML5 container, you can then use standard CSS animations etc and link tags via JS?

[unocelli]

I’m closing this issue since there is nothing feasible and due to inactivity.