[amaury10]

Hello devs,

I wonder if it could be possible to get a circular gauge like ControlProgress.
I think I can be possible to make it by rotating ControlImage, but it's also unavailable...

Is there other ways I can explore?

Regards,

Amaury.

[amaury10]

Hello again,

I'm trying to mix ImageControl and LabelControl to create my gauge:

Code:

        <control type="group">
            <description>Gauge</description>
            <posx>200</posx>
            <posy>200</posy>
            <width>300</width>
            <height>300</height>
            <visible>true</visible>
        
            <control type="image">
                <description>gauge_back</description>
                <posx>0</posx>
                <posy>0</posy>
                <width>300</width>
                <height>300</height>
                <visible>true</visible>
                <colordiffuse>FFFFFFFF</colordiffuse>
                <texture>gauge_back.png</texture>
            </control>
            
            <control type="label" id="50000">
                <description>gauge value indicator</description>
                <posx>0</posx>
                <posy>150</posy>
                <align>center</align>
                <aligny>center</aligny>
                <width>300</width>
                <height>100</height>
                <label>0</label>
            </control>
            
            <control type="label" id="50001">
                <description>angle position</description>
                <posx>0</posx>
                <posy>150</posy>
                <align>center</align>
                <aligny>center</aligny>
                <width>300</width>
                <height>100</height>
                <label>0</label>
                <visible>false</visible>
            </control>
            
            <control type="image">
                <description>gauge_pointer</description>
                <animation effect="rotate" center="auto" end="-270" time="2000" tween="sine" >WindowOpen</animation>
                <posx>0</posx>
                <posy>0</posy>
                <width>300</width>
                <height>300</height>
                <visible>true</visible>
                <colordiffuse>FFFFFFFF</colordiffuse>
                <texture>gauge_aiguille.png</texture>
            </control>
        </control>

To move the pointer, I would like to trigger the animation on every changes of the 50001 label wich represent the angle position of the pointer. And I want to move the pointer in the right position, so changing the end paramteter to be the content of the 50001 label .

Is that possible? I can't find relevant infos on the wiki...

[da-anda]

check out the skin Xperience1080 for reference - it has round/circular progress and volume indicators if this is what you're after.

[amaury10]

indeed: this skin is amazing ! But its author uses hundreds of different pictures for one gauge. I think this is not really optimized... I'll try such a solution, but I'm still looking at a combination of pictures/labels/rotate animation that could be much more efficient (and more accessible for skinners)

Thank you for the clue !

[amaury10]

Finally it appears that the solution using a hundred of pictures (one for each percent) is really versatile. So here is a piece of code inspired by Xperience1080:

Code:

        <control type="group">
            <description>Gauge</description>
            <posx>200</posx>
            <posy>200</posy>
            <width>300</width>
            <height>300</height>
            <visible>true</visible>
            
            <control type="image">
                <description>gauge_background</description>
                <posx>0</posx>
                <posy>0</posy>
                <width>300</width>
                <height>300</height>
                <visible>true</visible>
                <colordiffuse>FFFFFFFF</colordiffuse>
                <texture>Gauge/back.png</texture>
            </control>
            
            <control type="label" id="500">
                <description>displayed value</description>
                <posx>0</posx>
                <posy>150</posy>
                <align>center</align>
                <aligny>center</aligny>
                <width>300</width>
                <height>100</height>
                <label>0</label>
            </control>
            
            <control type="label" id="501">
                <description>percent position</description>
                <posx>0</posx>
                <posy>150</posy>
                <align>center</align>
                <aligny>center</aligny>
                <width>300</width>
                <height>100</height>
                <label>0</label>
                <visible>false</visible>
            </control>
            
            <control type="image">
                <description>gauge_pointer</description>
                <posx>0</posx>
                <posy>0</posy>
                <width>300</width>
                <height>300</height>
                <visible>true</visible>
                <colordiffuse>FFFFFFFF</colordiffuse>
                <texture>$INFO[Control.GetLabel(501),Gauge/aiguille_,.png]</texture>
            </control>
        </control>

I abandon the using of a single pointer which should be rotated to the right position: it gives less control to the programmer.

Just a tip to generate pictures: I use Adobe After Effect with png sequence as output; at 25FPS, an animation of 4 seconds between the to extreme positions of the gauge is just perfect !