Is there a way to change the color of a label with Javascript??
Javascript: Change Color
(7 posts) (5 voices)-
Posted 2 years ago #
-
I assume you're asking for the background colour. If so,
"backgroundColor":"#00FFFF" (where #00FFFF is the CSS code for a colour)
Posted 2 years ago # -
note: if you use a label to color a button without being pressed, you should use "backgroundColor": "rgba(255,255,255,.5)", or something. the 255s would make it white, and the .5 is to make it half transparent, which would make it gray on a black background. i found that if you don't make the label over a button transparent then you won't see the color from feedback (default solid white when pressing a button).
for example, i use this to make a button gray when not being pressed, and then it turns reddish pink when being pressed due to the combination of the half transparent white and red color feedback when pressed:
{ "name": "pad5", "type": "Button", "bounds": [.565, .665, .125, .15], "mode": "momentary", "stroke": "#aaa", "midi": ["noteon", 1, 41], "requiresTouchDown": false, "color": "rgb(255,0,0)", }, { "name": "pad5back", "type": "Label", "bounds": [.566, .667, .125, .15], "stroke": "#aaa", "backgroundColor": "rgba(255,255,255,.5)", "value": "", },also, it doesn't seem to matter what order or where in the code you place a label for a button. the label seems to always be on top, which is the reason you have to set transparency to allow the "pressed" color to show through.
Posted 2 years ago # -
Cool Ronji, transparency is a nice way to do it I wouldn't have thought of. If you want to do it via JavaScript (so it could happen in an event handler) you could put the following code in a widget:
"ontouchstart": "yourLabelName.label.style.color = '#fff';",
"ontouchend" : "yourLabelName.label.style.color = '#999';",This isn't documented on the Control site... I guess the important thing to realize is that while there is a minimal set of methods directly giving access to this stuff, all of it is actually accessible if you know javascript / css and are willing to dig around in the source code a little bit. Or ask questions here :)
https://github.com/charlieroberts/Control/tree/master/www/js
In this case in the Label.js file you can see that each label has a HTML <h3> object named "label" and that this is where the styles are applied to. In Button.js that HTML is a <div> tag and is called "fillDiv". I should definitely think about standardizing these names... the problem is some widgets (like the Slider for example) are composed of multiple divs...
Posted 2 years ago # -
Thank you!!!
Problem is solvedPosted 2 years ago # -
I'm actually trying to change a label's color with incoming osc, how would i do this? I thought it might work to have a button positioned off-screen (so i cant touch it) that receives the osc message, and then script it to change the label's color? How would I go about that? Any help would be really appreciated.
Posted 12 months ago # -
Hi,
The documentation for the OSC Address space is here:
http://charlie-roberts.com/Control/?page_id=297
Let me know if there are questions. - Charlie
Posted 11 months ago #