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 
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…
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
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
- but how to sibling the good element ?
- can we use font-awesome icon ?
An idea ?
edit : yes an idea
next step
Finally it works with svg too
Now the idea would be to get the base64 value for the font awesome volume-up icon…
So
- i have downloaded the icon svg on my computer https://fontawesome.com/icons/volume-up?style=solid
- use this website https://base64.guru/converter/encode/image/svg
Get this
data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJ2b2x1bWUtdXAiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS12b2x1bWUtdXAgZmEtdy0xOCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yMTUuMDMgNzEuMDVMMTI2LjA2IDE2MEgyNGMtMTMuMjYgMC0yNCAxMC43NC0yNCAyNHYxNDRjMCAxMy4yNSAxMC43NCAyNCAyNCAyNGgxMDIuMDZsODguOTcgODguOTVjMTUuMDMgMTUuMDMgNDAuOTcgNC40NyA0MC45Ny0xNi45N1Y4OC4wMmMwLTIxLjQ2LTI1Ljk2LTMxLjk4LTQwLjk3LTE2Ljk3em0yMzMuMzItNTEuMDhjLTExLjE3LTcuMzMtMjYuMTgtNC4yNC0zMy41MSA2Ljk1LTcuMzQgMTEuMTctNC4yMiAyNi4xOCA2Ljk1IDMzLjUxIDY2LjI3IDQzLjQ5IDEwNS44MiAxMTYuNiAxMDUuODIgMTk1LjU4IDAgNzguOTgtMzkuNTUgMTUyLjA5LTEwNS44MiAxOTUuNTgtMTEuMTcgNy4zMi0xNC4yOSAyMi4zNC02Ljk1IDMzLjUgNy4wNCAxMC43MSAyMS45MyAxNC41NiAzMy41MSA2Ljk1QzUyOC4yNyA0MzkuNTggNTc2IDM1MS4zMyA1NzYgMjU2UzUyOC4yNyA3Mi40MyA0NDguMzUgMTkuOTd6TTQ4MCAyNTZjMC02My41My0zMi4wNi0xMjEuOTQtODUuNzctMTU2LjI0LTExLjE5LTcuMTQtMjYuMDMtMy44Mi0zMy4xMiA3LjQ2cy0zLjc4IDI2LjIxIDcuNDEgMzMuMzZDNDA4LjI3IDE2NS45NyA0MzIgMjA5LjExIDQzMiAyNTZzLTIzLjczIDkwLjAzLTYzLjQ4IDExNS40MmMtMTEuMTkgNy4xNC0xNC41IDIyLjA3LTcuNDEgMzMuMzYgNi41MSAxMC4zNiAyMS4xMiAxNS4xNCAzMy4xMiA3LjQ2QzQ0Ny45NCAzNzcuOTQgNDgwIDMxOS41NCA0ODAgMjU2em0tMTQxLjc3LTc2Ljg3Yy0xMS41OC02LjMzLTI2LjE5LTIuMTYtMzIuNjEgOS40NS02LjM5IDExLjYxLTIuMTYgMjYuMiA5LjQ1IDMyLjYxQzMyNy45OCAyMjguMjggMzM2IDI0MS42MyAzMzYgMjU2YzAgMTQuMzgtOC4wMiAyNy43Mi0yMC45MiAzNC44MS0xMS42MSA2LjQxLTE1Ljg0IDIxLTkuNDUgMzIuNjEgNi40MyAxMS42NiAyMS4wNSAxNS44IDMyLjYxIDkuNDUgMjguMjMtMTUuNTUgNDUuNzctNDUgNDUuNzctNzYuODhzLTE3LjU0LTYxLjMyLTQ1Ljc4LTc2Ljg2eiI+PC9wYXRoPjwvc3ZnPg==
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
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
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.