How to make a style variable in css ui-tample node

General
,
1

Dear all,

I'm making a dashboard and i have a line that can visualize when energy is flowing,

ui-template code:

<div style="position: relative; width: 190px; height: 40px;">
  <div class="energy-line" style="position: absolute; width: 190px; height: 5px; background-color: #888;">
    <div class="glow-dot" style="animation-delay: 0s;"></div>
    <div class="glow-dot" style="animation-delay: 0.2s;"></div>
    <div class="glow-dot" style="animation-delay: 0.4s;"></div>
    <div class="glow-dot" style="animation-delay: 0.6s;"></div>
    <div class="glow-dot" style="animation-delay: 0.8s;"></div>
    <div class="glow-dot" style="animation-delay: 1s;"></div>
    <div class="glow-dot" style="animation-delay: 1.2s;"></div>
    <div class="glow-dot" style="animation-delay: 1.4s;"></div>
    <div class="glow-dot" style="animation-delay: 1.6s;"></div>
    <div class="glow-dot" style="animation-delay: 1.8s;"></div>
  </div>
</div>

<style>
  .energy-line {
    position: relative;
    overflow: hidden;
  }

  .glow-dot {
    position: absolute;
    top: -3px;
    left: -10px;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 5px 3px rgba(0, 148, 206, 0.8);
    border-radius: 50%;
    animation: energy-flow 2s linear infinite;
    display: block; //how to change this parameter with un injection node??\\
  }

  @keyframes energy-flow {
    from {
      left: -10px;
    }

    to {
      left: 190px;
    }
  }
</style>

problem is i want to switch the line on en off on demand.

the style parameter i want to use for that would be .glow-dot display.
block means on and none means off,

I would love to do that with un injection node, using msg.payload.

but what ever i try it is not working.

who could help me? i'm using dashboard 2.0

2

You can bind the element style to a data variable in your data area, so that it changes dynamically per the data you set in the variable, by using :style instead of style.

// HTML
<v-btn :style="{ backgroundColor: buttonColor }">Click Me</v-btn>

// JS
data() {
  return {
    buttonColor: xxx //set this dynamically
  }
}
3

Dear Omrid,

could you give me an example with my code instead of a generic one?

I'm still not able to make it switch off en on

kind regards Kelvin_S

4

The better way to do this is design your classes to target elements and ADD/REMOVE the parent class (v1)

Alternatively, you can use msg props and apply the class per element (harder to maintain) (v2)

chrome_WRty8t2mbo

Example Flow (use CTRL-I to import)

[{"id":"0dd806ee26fa4c52","type":"ui-template","z":"a95e9b94b8531275","group":"e1c6e6cb771c2108","page":"","ui":"","name":"","order":2,"width":0,"height":0,"head":"","format":"<div style=\"position: relative; width: 190px; height: 40px;\">\n    <div class=\"energy-line\" style=\"position: absolute; width: 190px; height: 5px; background-color: #888;\">\n        <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 0s;\"></div>\n        <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 0.2s;\"></div>\n        <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 0.4s;\"></div>\n        <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 0.6s;\"></div>\n        <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 0.8s;\"></div>\n        <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 1s;\"></div>\n        <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 1.2s;\"></div>\n        <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 1.4s;\"></div>\n        <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 1.6s;\"></div>\n        <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 1.8s;\"></div>\n    </div>\n</div>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2280,"y":1440,"wires":[[]]},{"id":"aba8e40397501c8c","type":"inject","z":"a95e9b94b8531275","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":2110,"y":1420,"wires":[["0dd806ee26fa4c52"]]},{"id":"d2f691ed89666e26","type":"inject","z":"a95e9b94b8531275","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":2110,"y":1460,"wires":[["0dd806ee26fa4c52"]]},{"id":"65f8825abfc91437","type":"comment","z":"a95e9b94b8531275","name":"V2 - use payload to condition application of styles","info":"","x":2220,"y":1380,"wires":[]},{"id":"fbbb671ac878f4b1","type":"ui-template","z":"a95e9b94b8531275","group":"e1c6e6cb771c2108","page":"","ui":"","name":"","order":1,"width":0,"height":0,"head":"","format":"<div style=\"position: relative; width: 190px; height: 40px;\">\n    <div class=\"energy-line\" style=\"position: absolute; width: 190px; height: 5px; background-color: #888;\">\n        <div style=\"animation-delay: 0s;\"></div>\n        <div style=\"animation-delay: 0.2s;\"></div>\n        <div style=\"animation-delay: 0.4s;\"></div>\n        <div style=\"animation-delay: 0.6s;\"></div>\n        <div style=\"animation-delay: 0.8s;\"></div>\n        <div style=\"animation-delay: 1s;\"></div>\n        <div style=\"animation-delay: 1.2s;\"></div>\n        <div style=\"animation-delay: 1.4s;\"></div>\n        <div style=\"animation-delay: 1.6s;\"></div>\n        <div style=\"animation-delay: 1.8s;\"></div>\n    </div>\n</div>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2280,"y":1280,"wires":[[]]},{"id":"f5b0d6b0d66d09ae","type":"inject","z":"a95e9b94b8531275","name":"power-on","props":[{"p":"ui_update.class","v":"power-on","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":2120,"y":1260,"wires":[["fbbb671ac878f4b1"]]},{"id":"43842466d5f67121","type":"ui-template","z":"a95e9b94b8531275","group":"","page":"","ui":"03482f22997a66ac","name":"Styles","order":0,"width":0,"height":0,"head":"","format":"\n.energy-line {\n    position: relative;\n    overflow: hidden;\n}\n\n/* target via power-on class and selectors - v1 */\n.power-on .energy-line > div {\n    position: absolute;\n    top: -3px;\n    left: -10px;\n    width: 10px;\n    height: 10px;\n    background-color: rgba(255, 255, 255, 0.5);\n    box-shadow: 0 0 5px 3px rgba(0, 148, 206, 0.8);\n    border-radius: 50%;\n    animation: energy-flow 2s linear infinite;\n    display: block;\n}\n\n/* applied manually v2 */\n.glow-dot {\n    position: absolute;\n    top: -3px;\n    left: -10px;\n    width: 10px;\n    height: 10px;\n    background-color: rgba(255, 255, 255, 0.5);\n    box-shadow: 0 0 5px 3px rgba(0, 148, 206, 0.8);\n    border-radius: 50%;\n    animation: energy-flow 2s linear infinite;\n    display: block;\n}\n\n@keyframes energy-flow {\n    from {\n        left: -10px;\n    }\n\n    to {\n        left: 190px;\n    }\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":2090,"y":1160,"wires":[[]]},{"id":"482d604a41e78e76","type":"comment","z":"a95e9b94b8531275","name":"V1 - add/remove class","info":"","x":2140,"y":1220,"wires":[]},{"id":"56a508ad831ffd27","type":"inject","z":"a95e9b94b8531275","name":"power-off","props":[{"p":"ui_update.class","v":"power-off","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":2120,"y":1300,"wires":[["fbbb671ac878f4b1"]]},{"id":"5287694cbe1d19a3","type":"comment","z":"a95e9b94b8531275","name":"Define CSS separatly so it \\n can be used in other templates","info":"","x":2170,"y":1100,"wires":[]},{"id":"e1c6e6cb771c2108","type":"ui-group","name":"test","page":"cf478244c05a3ad7","width":"12","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"03482f22997a66ac","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":false},{"id":"cf478244c05a3ad7","type":"ui-page","name":"Tasks","ui":"03482f22997a66ac","path":"/pagex","icon":"home","layout":"grid","theme":"6cf98fc8cedde7c6","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"6cf98fc8cedde7c6","type":"ui-theme","name":"Green","colors":{"surface":"#ffffff","primary":"#01bb0c","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#b1dd8c"},"sizes":{"density":"comfortable","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"9px","widgetGap":"18px"}},{"id":"be814b4cb5622085","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.28.0"}}]
1 Like