SVG control development. - Technical questions https://www.indi-an.com/en/community/technical-questions/svg-control-development/ Indi.An Germany Discussion Board en-US Sun, 18 Oct 2026 04:07:18 +0000 wpForo 60 RE: SVG control development. https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-197 Mon, 17 Feb 2025 14:03:15 +0000 First of all: I am not an employee at Indi-an, I am “only” a (heavy) user.

 

The condition element is like a case function.

(I have just read it too).

An condition element without any attribute also serves as an else case. However, as no output is defined here, the input value remains unchanged.

It should be noted that all conditions are processed from top to bottom. As soon as a condition is fulfilled, the following conditions are not even checked.

This example would therefore result in rgb(170, 170, 170) always being written, even if the input value is True:


The first fulfilled condition is always executed and the rest is ignored.

https://docs.quickhmi.com/en/dokumentation/svg-controls/adding-actions-and-properties/#element-condition

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="height: 100vh;width: 100vw;">
	<qhmi>
		<property name="Input Value" datatype="Int16" defaultvalue="1" id="1">
			<target element="Circle" selector="style" type="Attribute">
        		<condition gt="666" output="fill: red" />
        		<condition gt="333" output="fill: yellow" />
        		<condition gt="0" output="fill: orange" />
        		<condition output="fill: green" />
      		</target>
		</property>
	</qhmi>
	<circle class="Circle" style="fill: green; " cx="50" cy="50" r="49"></circle>
</svg>

 

 

Now the code is also more compact and clearer.

I have just found a small bug in the SVG editor.

When editing the conditions / defaultvalue, the color in the preview is not always updated. To see changes, you have to click once on another SVG and then back. I'll open a ticket for this right away.

 

 

 

 

 

 

 

 

]]> Technical questions MarAlz-RW https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-197 RE: SVG control development. https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-195 Sat, 15 Feb 2025 05:29:55 +0000 Thanks, The logic you gave was showing 4 circle and making radius=0 if not required. It worked.

I was looking for code in the Condition statement with AND  or something like CASE statement.

]]> Technical questions manoj.kalekar https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-195 RE: SVG control development. https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-191 Thu, 13 Feb 2025 13:19:55 +0000 Hi

the coder between the < qhmi > < /qhmi> elements is only needed if you want to manipulate the classes in the lower SVG part.

I have solved it pragmatically:



You can imagine it like a stack of plates that you look at from above:

Level 0: Green plate, which always has a diameter of 50 cm.

Level 1: Orange plate, which has a diameter of 0.0 cm at a value of 0 and a diameter of 49 cm at a value of over 0.

Level 2: Yellow plate, which has a diameter of 0.0 cm for a value of up to 333 and a diameter of 49 cm for a value of over 333.

Level 3: Red plate, which has a diameter of 0.0 cm for a value of up to 666 and a diameter of 49 cm for a value of over 666.


]]> Technical questions MarAlz-RW https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-191 RE: SVG control development. https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-190 Thu, 13 Feb 2025 09:59:00 +0000 Perfect..it works.

how did the code work when class greenCircle was not defined.  

]]> Technical questions manoj.kalekar https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-190 RE: SVG control development. https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-184 Mon, 10 Feb 2025 14:25:53 +0000 Pragmatisch:

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="height: 100vh;width: 100vw;">
	<qhmi>
		<property name="Input Value" datatype="Int16" defaultvalue="667" id="1">
			<!-- Orangener Kreis, der bei >0 eingeblendet wird. -->
			<target element="orangeCircle" selector="r" type="Attribute">
				<condition gt="0" output="49" />
				<condition output="0" />
			</target>
			<!-- Gelber Kreis, der bei >333 eingeblendet wird. -->
			<target element="yellowCircle" selector="r" type="Attribute">
				<condition gt="333" output="49" />
				<condition output="0" />
			</target>
			<!-- Roter Kreis, der bei >666 eingeblendet wird. -->
			<target element="redCircle" selector="r" type="Attribute">
				<condition gt="666" output="49" />
				<condition output="0" />
			</target>
		</property>
	</qhmi>
  
<circle class="greenCircle" style="fill: green; " cx="50" cy="50" r="49"></circle>
<circle class="orangeCircle" style="fill: orange; " cx="50" cy="50" r="49"></circle>
<circle class="yellowCircle" style="fill: yellow; " cx="50" cy="50" r="49"></circle>
<circle class="redCircle" style="fill: red; " cx="50" cy="50" r="49"></circle>
</svg>
]]> Technical questions MarAlz-RW https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-184 SVG control development. https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-181 Thu, 06 Feb 2025 05:05:26 +0000 To avoid rewriting multiple conditions for same type of control,  I would like to have SVG control which has a Circle and the fill color will depend on the value provided.

Based on the value within a range,  color to be set.  E.g.  

0 > Green Color

1-333 > Orange color

334-666 > Yellow color

667-1000 > RED color

In the SVG code, I did not see option of checking the range of value in CONDITION. Require help in this area.

]]> Technical questions manoj.kalekar https://www.indi-an.com/en/community/technical-questions/svg-control-development/#post-181