SVG control development.

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>

Perfect..it works.

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

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.

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.

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.