0

Trying to create circles that will work on all devices using an eval tag. Sometimes it works and sometimes it doesnt. wire below.

Lcdrgreg 7 years ago updated by icahill (Administrator) 7 years ago 1
<code>

<main>
<panel name="rectangle" width="40%" height="15%" background="#ff0000" align="center" valign="center">
<panel name="circle" alias="CIRCLE" height="100%" width="[var:height]" background="#0000ff" align="center" tofront="yes"
cornerradius="[eval: [var:height] / 2"></panel>
</panel>
</main>
<actions>

<action name="setvars" oninit="yes">
<assign property="var:height" value="[object:CIRCLE.height]"/>
</action>
</actions>

</code>
The main issue here is timing. The way you have it written the variable is not created fast enough since your panels are also created oninit. To combat this, you can create the circle in your action using a class like this: 

<wire>
<classes>    
	<class name="circle">
    	<panel name="circle" alias="CIRCLE" height="100%" width="[param:width]" background="#0000ff" align="center" tofront="yes"
        cornerradius="[eval: [param:width] / 2]"></panel>
    </class>    
</classes>
<main>
   <panel name="main" alias="MAIN" width="100%" height="100%">
       <panel name="rectangle" alias="REC" width="40%" height="15%" background="#ff0000" align="center" valign="center">
       </panel>
   </panel>
</main>
<actions>
    <action name="setvars" oninit="yes">
        <assign property="var:width" value="[object:REC.height]"/>
	<create class="circle" width="[var:width]" target="REC"/>   
    </action>
</actions>
</wire>