Facility Control

Hi all, I'm trying to create a button mask so I can make some toggle-able bases for baseball. It's silly to make them diamond-shaped instead of just square, but it's a fun learning opportunity too! I couldn't find any info here on the forum or through the Dashboard U videos search.

I tried a white diamond on black, and a black diamond on white, transparent white and black diamonds, and a black square with a transparent diamond in the center, but none of them seem to work the way I expect.

Thanks!

Hi Dan

To change the shape of a button, you will need to use the "Mask (URL)" style attribute and point it at a file with transparency defined for the invisible parts of the new button.  The opaque parts of the button will then be filled with whatever background colour you choose (and any background image you choose will be clipped to your mask shape).

In this example, I have created a style to define my diamond-shaped buttons and I have 2 images: a diamond-shaped image with a fill and a diamond-shaped image with a  transparent middle (so it can be filled with whatever color I want inside of the panel). Once I have created the style, I can apply it anywhere in my panel - this makes it easier if you're doing this for multiple buttons.

<abs contexttype="opengear" id="_top" keepalive="false" style="">
<meta>
<params>
<param access="1" constrainttype="INT_CHOICE" name="Diamond Toggle" oid="Diamond_Toggle" precision="0" type="INT32" value="0" widget="toggle">
<constraint key="0">Off</constraint>
<constraint key="1">On</constraint>
</param>
</params>
</meta>
<meta>
<style id="diamond-mask" value="mask-u:diamond-mask.png;bg-u:diamond-fill.png;bg#00E313;size:Big;font:bold;o#000000;fg#FFFFFF;t:bg#FF0B0B;f:bg#07ED00;"/>
</meta>
<param expand="true" height="122" left="103" oid="Diamond_Toggle" style="style:diamond-mask;" top="97" width="131"/>
</abs>

diamond-mask.png

diamond-fill.png

In use: off

In use: on

Cheers

James

Thanks!