To create a new SVG control, click on “SVG controls” in the Project Explorer.
Click on the AI icon to create a new empty SVG, which you can now fill with the help of the SVG chatbot.
The SVG chatbot opens automatically.
By entering continuous text, you can instruct the SVG chatbot what kind of SVG should be created.
It is important to note: “A house is not just a house”. The more precisely and explicitly the desired SVG is described to the chatbot, the better the results.
If you want to add properties or actions to the SVG, use the keywords “property” and “action”.
“Create a rectangular house with a triangular roof. The house should have 1 door in the middle and 2 windows slightly offset above the door. I would like to be able to set the color of the roof over a property.”
The instruction is sent to the chatbot by pressing the Enter key or clicking on the Arrow button. This may take a moment.
You also have the option of repeating the instruction to the SVG chatbot or deleting the entire history for this SVG.
After QuickHMI has received the response, the SVG is written directly in the SVG code block.
In addition, you can see in the SVG chatbot window that the SVG chatbot also provides an explanation of the SVG. A history is created.
Now you can either make further changes to the SVG yourself or continue to give instructions to the SVG chatbot until you are satisfied with the result.
Existing SVGs can also be converted into an SVG with chatbot function. To do this, double-click on the icon in the SVG list to the left of the name.
The created SVG control element appears with the other control elements under “SVG“. You can interact with them in the same way as with all other controls.
You can find out how to use SVG controls and standard controls in the article “Controls“.
