Mate, you are the man. Meanwhile, back in the BMS world, we have to deal with this awesome gauge from a global, "leading edge" software vendor. Actually, it is comical.
Thanks. A lot of things has been changed since the photos were black and white on paper and bicycle had no gears 
2 Likes
There are some rumors that this prototype may be turned onto ui-widget.
Sharing the prototype most probably last time for people interested to learn from it and make something by hand.
hotmipi-gauge-improved.json (41.0 KB)
4 Likes
I seem to be having issues with multiple (style) templates availed in a tab (but different cards). All gauges get the details from one or other, whichever is added last.
I have tried..
Changing the style id on one style template... but can't find any corresponding id marker in the gauges.
Assigning the style template to node instead of head
And even integrating into a single template (style and gauge)
Great to hear... you will make millions... oh right, open source 
Never mind the visuals, the dynamics of the pointer are awesome
Love that widget and learning heaps on CSS/HTML since playing with it for last few days.
I'm trying to establish a 2nd needle for "Target Value" and was able to do so with your 1st version but struggle to modify your new version.
You can see the 2nd needle (RED) for "Target Value"
Any suggestions on how I can realise the 2nd needle in the new template?
What "new version/template"? As far as I can tell, all these are basically the same great template that @hotNipi designed, just with various modifications to add colours, tics, adjust fonts etc.
Sorry, yes I was referring to these various modifications @hotNipi (which I like and wanna utilize). The structure has slightly changed and I struggle with my limited CSS/HTML skill to get the 2nd needle working again 
Start by showing how you made the addition you have.
That was primarily done by replicating the "g-needle" into "g-needle2" in the "gauge-style" component
.g-needle2 {
transform: rotate(calc(270deg * calc(var(--g-angle2, 0deg) / 99) - 45deg));
transition: transform 1s;
background: #000;
position: absolute;
left: 0;
top: 49%;
width: 100%;
height: 2%;
filter:drop-shadow(0px 1px 3px #00000080);
background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle2-color) 15%,var(--needle2-color) 50%,rgba(0,0,0,0) 50%);
}
and than initiating the class "g-needle2"
<div class="g-label">Temperature</div>
<div class="g-needle"></div>
<div class="g-needle2"></div>
<div class="g-needle-ring"></div>
<div id="{{'gauge_val_'+$id}}" class="g-val"></div>
and afterwards i modified the MSG handler to update
- g-needle when msg.topic == "Current"
- g-needle2 (Target value) when other msg.topic was sent
<script>
(function(scope) {
let min = 15;
let max = 45;
scope.$watch('msg', function(msg) {
if (msg) {
if (msg.topic=="Current")
{
const v = Math.floor(((msg.payload - min) / (max - min)) * 100);
document.getElementById('gauge_'+scope.$id).style.setProperty('--g-angle', v);
} else
{
const v = Math.floor(((msg.payload - min) / (max - min)) * 100);
document.getElementById('gauge_'+scope.$id).style.setProperty('--g-angle2', v);
}
document.getElementById('gauge_val_'+scope.$id).innerText = msg.payload+"°";
}
});
})(scope);
</script>
OK, so basically the same thing... just have to look for all needle references.
In the Gauge Template...
<div id="{{'gauge_'+$id}}" class="g-container" style="--gauge-value:0; --gauge-value-second:80;--container-size:4; --gn-distance:13; --ga-tick-count:10; --ga-subtick-count:100; --g-unit:'°C'">
Also, here the order listed determines which needle is on top.
<div class="g-needle-second"></div>
<div class="g-needle"></div>
And in the Style Template
--needle-color:#001100;
--needle-second-color:#ff0000;
.g-needle {
transform: rotate(calc(270deg * calc(var(--gauge-value, 0deg) / 100) - 45deg));
transition: transform 1s;
background: #000;
position: absolute;
left: 0;
top: 49%;
width: 100%;
height: 2%;
filter:drop-shadow(0px 1px 3px #00000080);
background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle-color) 15%,var(--needle-color) 50%,rgba(0,0,0,0) 50%);
}
.g-needle-second {
transform: rotate(calc(270deg * calc(var(--gauge-value-second, 0deg) / 100) - 45deg));
transition: transform 1s;
background: #000;
position: absolute;
left: 0;
top: 49%;
width: 100%;
height: 2%;
filter:drop-shadow(0px 1px 3px #ff000080);
background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle-second-color) 15%,var(--needle-second-color) 50%,rgba(0,0,0,0) 50%);
}
I haven't made mine dynamically adjustable yet... just using the preset.
1 Like
That is correct path to make it work.
Any dynamic thing, you'll later use or change by the css needs to be defined.
2 Likes
Thanks a lot ... I guess I have a try on that over the weekend
True that this thing is not fully ready to be easily customized, but that's the beauty of handcraft 
See at my latest shared template ...
<style>
#{{'gauge_'+$id}} .g-tick:nth-child(n+9){
background: linear-gradient(90deg,
Every gauge can override or add css to be isolated. The main css should have only common or default rules.
If you'll need to modify or override some rule, add scope id to its element definition.
<div id="{{'gauge_val_'+$id}}" class="g-val"></div>
So you can reach it like shown above.
1 Like
Stupid me... I forgot to assign the color for 2nd needle ... otherwise it was working already
thx a lot .. even it works dynamically for target 
2 Likes
We should start something like weekly challenges! 
As long the winner is community
4 Likes
The winner gets to choose the next challenge or sth like that!
Edit: Or, you're a winner if you join lol
I have been struggling to make a pointy needle.
Not hard to make it asymmetric with a single tweek to g-needle background:
background: linear-gradient(30deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle-color) 15%,var(--needle-color) 50%,rgba(0,0,0,0) 50%);
Symmetry is eluding me. I do know how to spell CSS but my approach is to find someone else's work and pursue it with forks and hope.
This is the best so far and it doesn't stand up to close inspection:
.g-needle::before {
content: '';
width: 0;
height: 0;
border: 1px solid #232523;
border-top-width: 1px;
border-right-color: rgb(35, 37, 35);
border-right-width: 1px;
border-bottom-width: 1px;
border-left-color: rgb(35, 37, 35);
border-left-width: 1px;
border-top-width: 0.9em;
border-right-color: rgb(35, 36, 37);
border-right-width: 0.9em;
border-bottom-width: 0.9em;
border-left-color: rgb(35, 36, 37);
border-left-width: 0.9em;
border-width: 0 4px 19px 3px;
border-left-color: #e9151500;
border-right-color: #0000;
position: relative;
top: -116%;
left: 11%;
transform: rotate(270deg);
display: block;
}
Can anyone suggest a good way to tweek the pointer? With explanations would be perfect!
Edit: I know some of those declarations are unnecessary/erroneous but when I try removing some the point tends to vanish.
There isn't any easy solution. Mostly small triangles made with borders but as the needle is thinner for smaller gauges - the border with should be calculated but unfortunately border with can't take percentages and you cant use calc() so common solution must be something else.
Have no time right now to go deeper.
