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