# Gauge's for Dashboard 2.0 made with ui\_template

**URL:** <https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [27 February 2024 13:43 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955 "2024-02-27T13:43:09Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [27 February 2024 13:44 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/2 "2024-02-27T13:44:13Z")

</div>

Compass

> **Code is HERE**
>
> ```auto
> <template>
> <div class="windrose" v-resize="onResize">
> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="100%" height="100%" viewBox="0 0 500 500">
> <g>
> <circle cx="250" cy="250" r="205" class="ring" />
> <circle cx="250" cy="250" r="205" class="tick major" pathLength="720"/>
> <circle cx="250" cy="250" r="200" class="tick mid" pathLength="720"/>
> <circle cx="250" cy="250" r="195" class="tick minor" pathLength="720"/>                
> </g>
> <g>
> <text transform="matrix(1 0 0 1 385 268)" class="letters">E</text>
> <text transform="matrix(1 0 0 1 233 420)" class="letters">S</text>
> <text transform="matrix(1 0 0 1 233 112)" class="letters">N</text>
> <text transform="matrix(1 0 0 1 82 268)" class="letters">W</text>
> </g>
> </svg>
> <div class="txt">
> <div>{{formattedDirection}}</div>
> <div class="small">DIRECTION</div>
> <div class="small">SPEED</div>
> <div>{{formattedSpeed}}</div>
> </div>
> <div ref="needle" class="needle" :style="{'rotate': direction +'deg'}"></div>
> </div>
> </template>
> 
> <script>
> export default {       
> data() {           
> return {              
> direction:0,
> speed:0,
> timeout:null
> }
> },
> watch: {
> msg: function(){           
> if(this.msg?.payload != undefined){
> if(this.msg.payload.direction != undefined){
> this.direction = this.shortWayRotation(this.direction, this.msg.payload.direction)
> if(this.msg.speed == undefined){
> this.msg.speed = this.speed
> }                                            
> }
> if(this.msg.payload.speed != undefined){
> this.speed = this.msg.payload.speed 
> if(this.msg.payload.direction == undefined){
> this.msg.payload.direction = this.direction;
> }                                          
> }
> this.send({payload:this.msg.payload})
> }
> }
> }
> ,
> computed: {
> formattedSpeed:function(){
> return this.speed + "m/s" 
> },
> formattedDirection:function(){
> let r = (this.direction + 360) % 360;
> if(r<0){
> r += 360;
> }
> return r + "°"
> }
> 
> },
> methods: {
> 
> onResize(){
> console.log('this',this)
> },
>             
> shortWayRotation:function(frm, to){               
> let delta = ((((to - frm) % 360) + 540) % 360) - 180;
> return (frm + delta);
> },
> manageAnimations:function(event){
>            
> if(document.hidden){                   
> if(this.$refs.needle){                        
> this.$refs.needle.style.transition = "rotate 0s"
> }
> }
> else{                   
> if(this.$refs.needle){
> if(this.timeout){
> clearTimeout(this.timeout)
> this.timeout = null
> }
> this.timeout = setTimeout(()=>{
> this.$refs.needle.style.transition = "rotate .5s"
> },40)
> 
>                         
> } 
> }
> }
>             
>             
> },        
> mounted() {
> document.addEventListener("visibilitychange", this.manageAnimations);
> window.addEventListener("blur", this.manageAnimations);
> window.addEventListener("focus", this.manageAnimations);      
>             
> },
>         
> unmounted() {
> if(this.timeout){
> clearTimeout(this.timeout)
> this.timeout = null
> }
> document.removeEventListener("visibilitychange", this.manageAnimations);
> window.removeEventListener("blur", this.manageAnimations);
> window.removeEventListener("focus", this.manageAnimations);
> }
> }
> </script>
> <style>    
> div:has(>.windrose){
> align-items: center;
> }
> .windrose{
> position:relative;
> width:100%;       
> aspect-ratio: 1;
> container-type: inline-size;
> }
> .tick {
> fill: none;
> stroke: currentColor;       
> }
> .major{
> stroke-dasharray:1 89;
> stroke-dashoffset:0.5;
> stroke-width:40px;
> }
> .mid{
> stroke-dasharray:0 45 1 44 0 45 1 44;
> stroke-dashoffset:0.5;
> stroke-width:30px;
> }
> .minor{
> stroke-dasharray:0 5 1 4 1 4 1 4 1 4 1 4 1 4 1 4 1 4;
> stroke-dashoffset:0.5;
> stroke-width:20px;
> }
> .letters {
> font-size: 48px;
> fill:currentColor;
> }
> .ring{
> fill:none;
> stroke:currentColor;
> stroke-width:40;
> opacity:0.1;
> }
> .needle{
> position: absolute;
> inset: 0;
> left: calc(50% - 1px);
> width: 2px;
> height: 100%;
> transform-origin: center;
> transition: rotate .5s;
> }
>     
> .needle:before, .needle:after{
> content: "▼";
> color: red;
> position: absolute;
> top: 1%;
> text-align: center;
> font-size: clamp(0.5rem, 10cqi, 2rem);
> transform: translateX(calc(-50% + 1px));
> }
> .needle:before{
> color:currentColor;
> font-size: calc(clamp(0.5rem, 10cqi, 2rem) + 4px);
> }
> .txt{
> position:absolute;
> inset:0;
> display: grid;
> place-content: center;
> width: 100%;
> text-align: center;        
> font-size: clamp(0.5rem, 12cqi, 3rem);
> font-weight:700;
> line-height:1.2em;
> }
> .txt .small{
> font-size: clamp(0.2rem, 6cqi, 1.5rem);
> line-height: 1em;
> font-weight:500;
> }
> </style>
> 
> ```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/3/d3ea9dc17736f564a7fc1c6da5ec236d4509745e.png)

The payload for compass must be combined to have speed and direction properties. (previously was topic = "direction") This is changed to have porper wakeup on replayMessage.

---

_[View the full topic](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955)._