Hello,
Is it possible to use a general variable of HMI, that by means of an action when clicking on a widget modifies the value in HTML5 colour code and in the Stylesheets the value is modified and the colour is applied?
For example click on an image and write value in a string variable #F22, which is a colour in Hexadecimal and this variable read in a stylesheet and change the colour of the object.
Thanks.
If I understand the question correctly, CSS variables are a possible solution for your question. Whether this makes sense for your application, you must decide on the basis of webiq-sk's remark. We use this mechanism in the template for cartesian handling system to make the colours of the widgets editable at runtime. (Light, dark & customer specific design)
Below some basic infos. For more info see: Using_CSS_custom_properties
Css variables
- can be used in CSS
- be read and written via JS
- Names must start with "--" e.g. "--my-var"
CSS example with variable
.one {
background-color: var(--my-var);
}
// get variable
let sVal = getComputedStyle(document.documentElement).getPropertyValue("--my-var")
// set variable
document.documentElement.style.setProperty("--my-var", "#FFAA00");