Changing a switch's colors according to its own value

A little question : let’s say we want to set colorFill to a value when click on. How can we do have access to the propriety colorFill, colorStroke etc. ?

In the css property’s help, the css variables associated to colorFill and similar properties are listed.
https://openstagecontrol.ammd.net/docs/customization/css-tips/#css-variables

Hi,
ok so i go further on button and syntax :slight_smile: https://openstagecontrol.ammd.net/docs/widgets/properties-reference/#button

I manage to set an image as a background but 2 questions:

  • is it possible to use the font awesome volume up button as a background-image ? What syntax ?
  • is it possible to insert this icon before the text.

the idea would be to increase the icon size for each button to illustrate the volume up normal, loud etc. by increasing the size of this icon. A bit challeging for now…

image
As someone has an idea ?
Cheers

I don't think so.

is it possible to insert this icon before the text.

Yes with the same syntax you used in the button. Maybe I'm missing the issue here though.

the idea would be to increase the icon size for each button to illustrate the volume up normal, loud etc. by increasing the size of this icon. A bit challeging for now…

There's an example for this use case here Feature demo : property inheritance, scripting, clones

ah ! i catch it
image
but no space between the icon and the text.
a way via html to do that ?

css: white-space: pre;
It should be the default though, will fix

i think about using the css ::before

image

  • but how to sibling the good element ?
  • can we use font-awesome icon ?
    An idea ?

edit : yes an idea
image

next step :slight_smile:
image

Finally it works with svg too :slight_smile:

Now the idea would be to get the base64 value for the font awesome volume-up icon…
So

Get this

data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJ2b2x1bWUtdXAiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS12b2x1bWUtdXAgZmEtdy0xOCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yMTUuMDMgNzEuMDVMMTI2LjA2IDE2MEgyNGMtMTMuMjYgMC0yNCAxMC43NC0yNCAyNHYxNDRjMCAxMy4yNSAxMC43NCAyNCAyNCAyNGgxMDIuMDZsODguOTcgODguOTVjMTUuMDMgMTUuMDMgNDAuOTcgNC40NyA0MC45Ny0xNi45N1Y4OC4wMmMwLTIxLjQ2LTI1Ljk2LTMxLjk4LTQwLjk3LTE2Ljk3em0yMzMuMzItNTEuMDhjLTExLjE3LTcuMzMtMjYuMTgtNC4yNC0zMy41MSA2Ljk1LTcuMzQgMTEuMTctNC4yMiAyNi4xOCA2Ljk1IDMzLjUxIDY2LjI3IDQzLjQ5IDEwNS44MiAxMTYuNiAxMDUuODIgMTk1LjU4IDAgNzguOTgtMzkuNTUgMTUyLjA5LTEwNS44MiAxOTUuNTgtMTEuMTcgNy4zMi0xNC4yOSAyMi4zNC02Ljk1IDMzLjUgNy4wNCAxMC43MSAyMS45MyAxNC41NiAzMy41MSA2Ljk1QzUyOC4yNyA0MzkuNTggNTc2IDM1MS4zMyA1NzYgMjU2UzUyOC4yNyA3Mi40MyA0NDguMzUgMTkuOTd6TTQ4MCAyNTZjMC02My41My0zMi4wNi0xMjEuOTQtODUuNzctMTU2LjI0LTExLjE5LTcuMTQtMjYuMDMtMy44Mi0zMy4xMiA3LjQ2cy0zLjc4IDI2LjIxIDcuNDEgMzMuMzZDNDA4LjI3IDE2NS45NyA0MzIgMjA5LjExIDQzMiAyNTZzLTIzLjczIDkwLjAzLTYzLjQ4IDExNS40MmMtMTEuMTkgNy4xNC0xNC41IDIyLjA3LTcuNDEgMzMuMzYgNi41MSAxMC4zNiAyMS4xMiAxNS4xNCAzMy4xMiA3LjQ2QzQ0Ny45NCAzNzcuOTQgNDgwIDMxOS41NCA0ODAgMjU2em0tMTQxLjc3LTc2Ljg3Yy0xMS41OC02LjMzLTI2LjE5LTIuMTYtMzIuNjEgOS40NS02LjM5IDExLjYxLTIuMTYgMjYuMiA5LjQ1IDMyLjYxQzMyNy45OCAyMjguMjggMzM2IDI0MS42MyAzMzYgMjU2YzAgMTQuMzgtOC4wMiAyNy43Mi0yMC45MiAzNC44MS0xMS42MSA2LjQxLTE1Ljg0IDIxLTkuNDUgMzIuNjEgNi40MyAxMS42NiAyMS4wNSAxNS44IDMyLjYxIDkuNDUgMjguMjMtMTUuNTUgNDUuNzctNDUgNDUuNzctNzYuODhzLTE3LjU0LTYxLjMyLTQ1Ljc4LTc2Ljg2eiI+PC9wYXRoPjwvc3ZnPg==

image

Now have to find a way to change the size. But i fear that the color is coded into the base64 string. No ?

edit : probably a way to go further. http://jsfiddle.net/k0cx2b04/2/

If you stick to using the ^icon syntax, you could change the icon’s size with

i {
  font-size: /*etc*/;
}

well the i “system”, no chance to let appear the icon only when value.on ? How to change the value of the text dynamically if the button is on ? a test on the class value.on. Stop here for today :slight_smile:

value.on i {/* etc */}

Yep you were right as usual to advice to tick to the i solution.

So it works as wished with different sizes on icons
image

image

In the css field:


JS{{
  var myFontColors = ["white", "rgb(0,0,0)","#ddd", "white" ] 
  var myBgColors = ["green", "hsl(45, 95%, 50%)", "hsl(2, 90%, 40%)", "hsl(2, 95%, 50%)"]
  var sizes = ["1", "1.75", "2", "2.2"]
  var c = @{this.value}

/* locals to store variables to be reused into the css part */
  locals.fontColor = myFontColors[c]
  locals.bgColor = myBgColors[c]
  locals.iconSize = sizes[c]

  locals.couleur = "hsl(5, 50%, 90%)"
// fin de javascript
}}
/* Start of css */

value.on {
padding: 40;
margin: 20;
color: #{locals.fontColor};  
/*  color: #{locals.couleur}; */
background: #{locals.bgColor}; 

/* use the syntax --color-fill for the propriety colorFill */
--color-fill : white;
--alpha-fill-on: 0.25;
/* font-size: 1.25em; */

/* font-size icons + text */
  font-size: #{locals.iconSize}em;

}

/* icon not displayed */
i { display:none; }

value.on i {
  display: block;
  padding-right:0.5em;
  margin-right: 0.5em;
  font-size: #{locals.iconSize}em;

}

So it’s cool no ?
By the way, talking about button, let say we want a single button with 3 states :

  • off > first state, a text is displayed with a background color green
  • first tap > second state another text is displayed with a background color orange
  • second tap > third state another text is displayed with a background color red
  • then one more tap, back to the state off, green color.

a kind of circular button. Is it possible ? une piste ?
Cheers

1 Like

thanks for sharing!

1 Like

There's a little example for incrementing a variable widget with a button in Feature demo : property inheritance, scripting, clones (scripting.json), seems like a good starting point.