# Add compass mode to DB2 gauge widget

**URL:** <https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [23 February 2024 11:16 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806 "2024-02-23T11:16:19Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [23 February 2024 11:16 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/1 "2024-02-23T11:16:19Z")

</div>

What about COMPASS mode in DB2 Gauge widget? .. will it come later or maybe in another widget?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/7928a7ea0c363719a7e8051911cfe48e9957d158.png)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [23 February 2024 11:31 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/2 "2024-02-23T11:31:12Z")

</div>

Off topic on previous thread - moved to it's own topic

---

<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:** [23 February 2024 17:48 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/3 "2024-02-23T17:48:04Z")

</div>

It may take some time for real widget so something to play with mean time..

Send payload (0 - 360) with topic "direction"  
or payload with any number with topic "speed"

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

> **Hidden code. Don't use.**
>
> ```auto
> <template>
> <div class="windrose">
> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="100%" height="100%" viewBox="0 0 500 493">
> <g>
> <circle cx="250" cy="247" r="205" class="ring" />
> <g>
> <line class="stripes" x1="250" y1="21.9" x2="250" y2="61.9" />
> <line class="stripes" x1="211" y1="25.3" x2="217.9" y2="64.7" />
> <line class="stripes" x1="173.2" y1="35.4" x2="186.9" y2="73" />
> <line class="stripes" x1="137.7" y1="52" x2="157.7" y2="86.6" />
> <line class="stripes" x1="105.6" y1="74.4" x2="131.3" y2="105.1" />
> <line class="stripes" x1="77.9" y1="102.1" x2="108.6" y2="127.8" />
> <line class="stripes" x1="55.5" y1="134.2" x2="90.1" y2="154.2" />
> <line class="stripes" x1="38.9" y1="169.7" x2="76.5" y2="183.4" />
> <line class="stripes" x1="28.8" y1="207.5" x2="68.2" y2="214.4" />
> <line class="stripes" x1="25.4" y1="246.5" x2="65.4" y2="246.5" />
> <line class="stripes" x1="28.8" y1="285.5" x2="68.2" y2="278.6" />
> <line class="stripes" x1="38.9" y1="323.3" x2="76.5" y2="309.6" />
> <line class="stripes" x1="55.5" y1="358.8" x2="90.1" y2="338.8" />
> <line class="stripes" x1="77.9" y1="390.9" x2="108.6" y2="365.2" />
> <line class="stripes" x1="105.6" y1="418.6" x2="131.3" y2="387.9" />
> <line class="stripes" x1="137.7" y1="441" x2="157.7" y2="406.4" />
> <line class="stripes" x1="173.2" y1="457.6" x2="186.9" y2="420" />
> <line class="stripes" x1="211" y1="467.7" x2="217.9" y2="428.3" />
> <line class="stripes" x1="250" y1="471.1" x2="250" y2="431.1" />
> <line class="stripes" x1="289" y1="467.7" x2="282.1" y2="428.3" />
> <line class="stripes" x1="326.8" y1="457.6" x2="313.1" y2="420" />
> <line class="stripes" x1="362.3" y1="441" x2="342.3" y2="406.4" />
> <line class="stripes" x1="394.4" y1="418.6" x2="368.7" y2="387.9" />
> <line class="stripes" x1="422.1" y1="390.9" x2="391.4" y2="365.2" />
> <line class="stripes" x1="444.5" y1="358.8" x2="409.9" y2="338.8" />
> <line class="stripes" x1="461.1" y1="323.3" x2="423.5" y2="309.6" />
> <line class="stripes" x1="471.2" y1="285.5" x2="431.8" y2="278.6" />
> <line class="stripes" x1="474.6" y1="246.5" x2="434.6" y2="246.5" />
> <line class="stripes" x1="471.2" y1="207.5" x2="431.8" y2="214.4" />
> <line class="stripes" x1="461.1" y1="169.7" x2="423.5" y2="183.4" />
> <line class="stripes" x1="444.5" y1="134.2" x2="409.9" y2="154.2" />
> <line class="stripes" x1="422.1" y1="102.1" x2="391.4" y2="127.8" />
> <line class="stripes" x1="394.4" y1="74.4" x2="368.7" y2="105.1" />
> <line class="stripes" x1="362.3" y1="52" x2="342.3" y2="86.6" />
> <line class="stripes" x1="326.8" y1="35.4" x2="313.1" y2="73" />
> <line class="stripes" x1="289" y1="25.3" x2="282.1" y2="64.7" />
> </g>
> <g>
> <line class="stripes" x1="242.7" y1="37" x2="243.6" y2="62" />
> <line class="stripes" x1="235.4" y1="37.4" x2="237.1" y2="62.3" />
> <line class="stripes" x1="228.1" y1="38" x2="230.7" y2="62.9" />
> <line class="stripes" x1="220.8" y1="38.9" x2="224.3" y2="63.7" />
> <line class="stripes" x1="206.4" y1="41.5" x2="211.6" y2="65.9" />
> <line class="stripes" x1="199.3" y1="43.1" x2="205.3" y2="67.4" />
> <line class="stripes" x1="192.2" y1="45" x2="199.1" y2="69.1" />
> <line class="stripes" x1="185.2" y1="47.2" x2="193" y2="70.9" />
> <line class="stripes" x1="171.5" y1="52.2" x2="180.8" y2="75.3" />
> <line class="stripes" x1="164.7" y1="55" x2="174.9" y2="77.9" />
> <line class="stripes" x1="158.1" y1="58.1" x2="169.1" y2="80.6" />
> <line class="stripes" x1="151.6" y1="61.4" x2="163.3" y2="83.5" />
> <line class="stripes" x1="138.9" y1="68.7" x2="152.2" y2="90" />
> <line class="stripes" x1="132.8" y1="72.7" x2="146.8" y2="93.5" />
> <line class="stripes" x1="126.8" y1="76.9" x2="141.5" y2="97.2" />
> <line class="stripes" x1="121" y1="81.3" x2="136.3" y2="101" />
> <line class="stripes" x1="109.8" y1="90.7" x2="126.5" y2="109.3" />
> <line class="stripes" x1="104.4" y1="95.7" x2="121.8" y2="113.7" />
> <line class="stripes" x1="99.2" y1="100.9" x2="117.2" y2="118.3" />
> <line class="stripes" x1="94.2" y1="106.3" x2="112.8" y2="123" />
> <line class="stripes" x1="84.8" y1="117.5" x2="104.5" y2="132.8" />
> <line class="stripes" x1="80.4" y1="123.3" x2="100.7" y2="138" />
> <line class="stripes" x1="76.2" y1="129.3" x2="97" y2="143.3" />
> <line class="stripes" x1="72.2" y1="135.4" x2="93.5" y2="148.7" />
> <line class="stripes" x1="64.9" y1="148.1" x2="87" y2="159.8" />
> <line class="stripes" x1="61.6" y1="154.6" x2="84.1" y2="165.6" />
> <line class="stripes" x1="58.5" y1="161.2" x2="81.4" y2="171.4" />
> <line class="stripes" x1="55.7" y1="168" x2="78.8" y2="177.3" />
> <line class="stripes" x1="50.7" y1="181.7" x2="74.4" y2="189.5" />
> <line class="stripes" x1="48.5" y1="188.7" x2="72.6" y2="195.6" />
> <line class="stripes" x1="46.6" y1="195.8" x2="70.9" y2="201.8" />
> <line class="stripes" x1="45" y1="202.9" x2="69.4" y2="208.1" />
> <line class="stripes" x1="42.4" y1="217.3" x2="67.2" y2="220.8" />
> <line class="stripes" x1="41.5" y1="224.6" x2="66.4" y2="227.2" />
> <line class="stripes" x1="40.9" y1="231.9" x2="65.8" y2="233.6" />
> <line class="stripes" x1="40.5" y1="239.2" x2="65.5" y2="240.1" />
> <line class="stripes" x1="40.5" y1="253.8" x2="65.5" y2="252.9" />
> <line class="stripes" x1="40.9" y1="261.1" x2="65.8" y2="259.4" />
> <line class="stripes" x1="41.5" y1="268.4" x2="66.4" y2="265.8" />
> <line class="stripes" x1="42.4" y1="275.7" x2="67.2" y2="272.2" />
> <line class="stripes" x1="45" y1="290.1" x2="69.4" y2="284.9" />
> <line class="stripes" x1="46.6" y1="297.2" x2="70.9" y2="291.2" />
> <line class="stripes" x1="48.5" y1="304.3" x2="72.6" y2="297.4" />
> <line class="stripes" x1="50.7" y1="311.3" x2="74.4" y2="303.5" />
> <line class="stripes" x1="55.7" y1="325" x2="78.8" y2="315.7" />
> <line class="stripes" x1="58.5" y1="331.8" x2="81.4" y2="321.6" />
> <line class="stripes" x1="61.6" y1="338.4" x2="84.1" y2="327.4" />
> <line class="stripes" x1="64.9" y1="344.9" x2="87" y2="333.2" />
> <line class="stripes" x1="72.2" y1="357.6" x2="93.5" y2="344.3" />
> <line class="stripes" x1="76.2" y1="363.7" x2="97" y2="349.7" />
> <line class="stripes" x1="80.4" y1="369.7" x2="100.7" y2="355" />
> <line class="stripes" x1="84.8" y1="375.5" x2="104.5" y2="360.2" />
> <line class="stripes" x1="94.2" y1="386.7" x2="112.8" y2="370" />
> <line class="stripes" x1="99.2" y1="392.1" x2="117.2" y2="374.7" />
> <line class="stripes" x1="104.4" y1="397.3" x2="121.8" y2="379.3" />
> <line class="stripes" x1="109.8" y1="402.3" x2="126.5" y2="383.7" />
> <line class="stripes" x1="121" y1="411.7" x2="136.3" y2="392" />
> <line class="stripes" x1="126.8" y1="416.1" x2="141.5" y2="395.8" />
> <line class="stripes" x1="132.8" y1="420.3" x2="146.8" y2="399.5" />
> <line class="stripes" x1="138.9" y1="424.3" x2="152.2" y2="403" />
> <line class="stripes" x1="151.6" y1="431.6" x2="163.3" y2="409.5" />
> <line class="stripes" x1="158.1" y1="434.9" x2="169.1" y2="412.4" />
> <line class="stripes" x1="164.7" y1="438" x2="174.9" y2="415.1" />
> <line class="stripes" x1="171.5" y1="440.8" x2="180.8" y2="417.7" />
> <line class="stripes" x1="185.2" y1="445.8" x2="193" y2="422.1" />
> <line class="stripes" x1="192.2" y1="448" x2="199.1" y2="423.9" />
> <line class="stripes" x1="199.3" y1="449.9" x2="205.3" y2="425.6" />
> <line class="stripes" x1="206.4" y1="451.5" x2="211.6" y2="427.1" />
> <line class="stripes" x1="220.8" y1="454.1" x2="224.3" y2="429.3" />
> <line class="stripes" x1="228.1" y1="455" x2="230.7" y2="430.1" />
> <line class="stripes" x1="235.4" y1="455.6" x2="237.1" y2="430.7" />
> <line class="stripes" x1="242.7" y1="456" x2="243.6" y2="431" />
> <line class="stripes" x1="257.3" y1="456" x2="256.4" y2="431" />
> <line class="stripes" x1="264.6" y1="455.6" x2="262.9" y2="430.7" />
> <line class="stripes" x1="271.9" y1="455" x2="269.3" y2="430.1" />
> <line class="stripes" x1="279.2" y1="454.1" x2="275.7" y2="429.3" />
> <line class="stripes" x1="293.6" y1="451.5" x2="288.4" y2="427.1" />
> <line class="stripes" x1="300.7" y1="449.9" x2="294.7" y2="425.6" />
> <line class="stripes" x1="307.8" y1="448" x2="300.9" y2="423.9" />
> <line class="stripes" x1="314.8" y1="445.8" x2="307" y2="422.1" />
> <line class="stripes" x1="328.5" y1="440.8" x2="319.2" y2="417.7" />
> <line class="stripes" x1="335.3" y1="438" x2="325.1" y2="415.1" />
> <line class="stripes" x1="341.9" y1="434.9" x2="330.9" y2="412.4" />
> <line class="stripes" x1="348.4" y1="431.6" x2="336.7" y2="409.5" />
> <line class="stripes" x1="361.1" y1="424.3" x2="347.8" y2="403" />
> <line class="stripes" x1="367.2" y1="420.3" x2="353.2" y2="399.5" />
> <line class="stripes" x1="373.2" y1="416.1" x2="358.5" y2="395.8" />
> <line class="stripes" x1="379" y1="411.7" x2="363.7" y2="392" />
> <line class="stripes" x1="390.2" y1="402.3" x2="373.5" y2="383.7" />
> <line class="stripes" x1="395.6" y1="397.3" x2="378.2" y2="379.3" />
> <line class="stripes" x1="400.8" y1="392.1" x2="382.8" y2="374.7" />
> <line class="stripes" x1="405.8" y1="386.7" x2="387.2" y2="370" />
> <line class="stripes" x1="415.2" y1="375.5" x2="395.5" y2="360.2" />
> <line class="stripes" x1="419.6" y1="369.7" x2="399.3" y2="355" />
> <line class="stripes" x1="423.8" y1="363.7" x2="403" y2="349.7" />
> <line class="stripes" x1="427.8" y1="357.6" x2="406.5" y2="344.3" />
> <line class="stripes" x1="435.1" y1="344.9" x2="413" y2="333.2" />
> <line class="stripes" x1="438.4" y1="338.4" x2="415.9" y2="327.4" />
> <line class="stripes" x1="441.5" y1="331.8" x2="418.6" y2="321.6" />
> <line class="stripes" x1="444.3" y1="325" x2="421.2" y2="315.7" />
> <line class="stripes" x1="449.3" y1="311.3" x2="425.6" y2="303.5" />
> <line class="stripes" x1="451.5" y1="304.3" x2="427.4" y2="297.4" />
> <line class="stripes" x1="453.4" y1="297.2" x2="429.1" y2="291.2" />
> <line class="stripes" x1="455" y1="290.1" x2="430.6" y2="284.9" />
> <line class="stripes" x1="457.6" y1="275.7" x2="432.8" y2="272.2" />
> <line class="stripes" x1="458.5" y1="268.4" x2="433.6" y2="265.8" />
> <line class="stripes" x1="459.1" y1="261.1" x2="434.2" y2="259.4" />
> <line class="stripes" x1="459.5" y1="253.8" x2="434.5" y2="252.9" />
> <line class="stripes" x1="459.5" y1="239.2" x2="434.5" y2="240.1" />
> <line class="stripes" x1="459.1" y1="231.9" x2="434.2" y2="233.6" />
> <line class="stripes" x1="458.5" y1="224.6" x2="433.6" y2="227.2" />
> <line class="stripes" x1="457.6" y1="217.3" x2="432.8" y2="220.8" />
> <line class="stripes" x1="455" y1="202.9" x2="430.6" y2="208.1" />
> <line class="stripes" x1="453.4" y1="195.8" x2="429.1" y2="201.8" />
> <line class="stripes" x1="451.5" y1="188.7" x2="427.4" y2="195.6" />
> <line class="stripes" x1="449.3" y1="181.7" x2="425.6" y2="189.5" />
> <line class="stripes" x1="444.3" y1="168" x2="421.2" y2="177.3" />
> <line class="stripes" x1="441.5" y1="161.2" x2="418.6" y2="171.4" />
> <line class="stripes" x1="438.4" y1="154.6" x2="415.9" y2="165.6" />
> <line class="stripes" x1="435.1" y1="148.1" x2="413" y2="159.8" />
> <line class="stripes" x1="427.8" y1="135.4" x2="406.5" y2="148.7" />
> <line class="stripes" x1="423.8" y1="129.3" x2="403" y2="143.3" />
> <line class="stripes" x1="419.6" y1="123.3" x2="399.3" y2="138" />
> <line class="stripes" x1="415.2" y1="117.5" x2="395.5" y2="132.8" />
> <line class="stripes" x1="405.8" y1="106.3" x2="387.2" y2="123" />
> <line class="stripes" x1="400.8" y1="100.9" x2="382.8" y2="118.3" />
> <line class="stripes" x1="395.6" y1="95.7" x2="378.2" y2="113.7" />
> <line class="stripes" x1="390.2" y1="90.7" x2="373.5" y2="109.3" />
> <line class="stripes" x1="379" y1="81.3" x2="363.7" y2="101" />
> <line class="stripes" x1="373.2" y1="76.9" x2="358.5" y2="97.2" />
> <line class="stripes" x1="367.2" y1="72.7" x2="353.2" y2="93.5" />
> <line class="stripes" x1="361.1" y1="68.7" x2="347.8" y2="90" />
> <line class="stripes" x1="348.4" y1="61.4" x2="336.7" y2="83.5" />
> <line class="stripes" x1="341.9" y1="58.1" x2="330.9" y2="80.6" />
> <line class="stripes" x1="335.3" y1="55" x2="325.1" y2="77.9" />
> <line class="stripes" x1="328.5" y1="52.2" x2="319.2" y2="75.3" />
> <line class="stripes" x1="314.8" y1="47.2" x2="307" y2="70.9" />
> <line class="stripes" x1="307.8" y1="45" x2="300.9" y2="69.1" />
> <line class="stripes" x1="300.7" y1="43.1" x2="294.7" y2="67.4" />
> <line class="stripes" x1="293.6" y1="41.5" x2="288.4" y2="65.9" />
> <line class="stripes" x1="279.2" y1="38.9" x2="275.7" y2="63.7" />
> <line class="stripes" x1="271.9" y1="38" x2="269.3" y2="62.9" />
> <line class="stripes" x1="264.6" y1="37.4" x2="262.9" y2="62.3" />
> <line class="stripes" x1="257.3" y1="37" x2="256.4" y2="62" />
> </g>               
> </g>
> <g><text transform="matrix(1 0 0 1 385 260)" class="letters">E</text><text
> transform="matrix(1 0 0 1 235.1057 415.1405)" class="letters">S</text><text
> transform="matrix(1 0 0 1 233.7814 109.3156)" class="letters">N</text><text
> transform="matrix(1 0 0 1 82.3594 260)" 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 class="needle" :style="{'rotate': direction +'deg'}"></div>
> </div>
> 
> </template>
> 
> <script>
> export default {
> data() {           
> return {
> min: 0,
> max:360,
> direction:0,
> speed:0
> }
> },
> watch: {
> msg: function(){
> if(this.msg.payload != undefined){
> if(this.msg.topic == "direction"){
> this.direction = this.msg.payload
> }
> if(this.msg.topic == "speed"){
> this.speed = this.msg.payload
> }
> }
> }
> }
> ,
> computed: {
> formattedSpeed:function(){
> return this.speed + "m/s" 
> },
> formattedDirection:function(){
> return this.direction + "°"
> }
> 
> },
> methods: {
>           
> },
> mounted() {
> // code here when the component is first loaded
> },
> unmounted() {
> // code here when the component is removed from the Dashboard
> // i.e. when the user navigates away from the page
> }
> }
> </script>
> <style>
> .stripes {
> fill: none;
> stroke: currentColor;
> stroke-width: 2;
> stroke-linecap: round;
> }    
> .letters {
> font-size: 48px;
> fill:currentColor;
> }    
> .ring{
> fill:none;
> stroke:currentColor;        
> stroke-width:40;
> opacity:0.1;        
> }
> .windrose{
> position:relative;
> width:100%;
> height:100%;
> aspect-ratio: 1;
> container-type: inline-size;
> }
> .needle{
> position: absolute;
> inset: 0;       
> left: calc(50% - 1px);
> width: 2px;
> height: 100%;
> transform-origin: center;
> }
> .needle:after{
> content: "▼";
> color: red;
> position: absolute;
> text-align: center;
> font-size: clamp(0.5rem, 10cqi, 2rem);
> top: -2%;
> transform: translateX(calc(-50% + 1px));
> }
> .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>
> 
> ```

EDIT: Now it resizes also. But takes to have modern enough browser to support container query's and container units.  
Why it is not mose nice widget in the world - it creates way too many elements (small stripes). Such things should be avoided. But if you have one or couple of such on single page, its OK.

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [24 February 2024 00:17 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/4 "2024-02-24T00:17:31Z")

</div>

wow ... thats amazing .. you real are a magician

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [24 February 2024 15:43 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/5 "2024-02-24T15:43:22Z")

</div>

PRs Welcome 😉

With these gauge types (would be very happy to see them in core Dashboard 2.0) I want to architect the level/compass pieces to be SFC's within `ui-gauge`, and then just `v-if` on each of them depending on the gauge type.

Having to handle combined visualisation logic for all types in a single component will be a nightmare

---

<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:** [24 February 2024 15:50 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/6 "2024-02-24T15:50:06Z")

</div>

It is very reasonable to have separate widgets. Specially when widgets shape differ a lot and if types of incoming data doesn't match.

---

<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:** [25 February 2024 10:27 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/7 "2024-02-25T10:27:00Z")

</div>

Fixed couple more things, now it animates, takes short way to rotate over 0/360 like real life things do.  
Possibly I'll leave it for now as is.

Hided code from previous post. Use this, it is better.

```auto
<template>
    <div class="windrose">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="100%" height="100%" viewBox="0 0 500 493">
            <g>
                <circle cx="250" cy="247" r="205" class="ring" />
                <g>
                    <line class="stripes" x1="250" y1="21.9" x2="250" y2="61.9" />
                    <line class="stripes" x1="211" y1="25.3" x2="217.9" y2="64.7" />
                    <line class="stripes" x1="173.2" y1="35.4" x2="186.9" y2="73" />
                    <line class="stripes" x1="137.7" y1="52" x2="157.7" y2="86.6" />
                    <line class="stripes" x1="105.6" y1="74.4" x2="131.3" y2="105.1" />
                    <line class="stripes" x1="77.9" y1="102.1" x2="108.6" y2="127.8" />
                    <line class="stripes" x1="55.5" y1="134.2" x2="90.1" y2="154.2" />
                    <line class="stripes" x1="38.9" y1="169.7" x2="76.5" y2="183.4" />
                    <line class="stripes" x1="28.8" y1="207.5" x2="68.2" y2="214.4" />
                    <line class="stripes" x1="25.4" y1="246.5" x2="65.4" y2="246.5" />
                    <line class="stripes" x1="28.8" y1="285.5" x2="68.2" y2="278.6" />
                    <line class="stripes" x1="38.9" y1="323.3" x2="76.5" y2="309.6" />
                    <line class="stripes" x1="55.5" y1="358.8" x2="90.1" y2="338.8" />
                    <line class="stripes" x1="77.9" y1="390.9" x2="108.6" y2="365.2" />
                    <line class="stripes" x1="105.6" y1="418.6" x2="131.3" y2="387.9" />
                    <line class="stripes" x1="137.7" y1="441" x2="157.7" y2="406.4" />
                    <line class="stripes" x1="173.2" y1="457.6" x2="186.9" y2="420" />
                    <line class="stripes" x1="211" y1="467.7" x2="217.9" y2="428.3" />
                    <line class="stripes" x1="250" y1="471.1" x2="250" y2="431.1" />
                    <line class="stripes" x1="289" y1="467.7" x2="282.1" y2="428.3" />
                    <line class="stripes" x1="326.8" y1="457.6" x2="313.1" y2="420" />
                    <line class="stripes" x1="362.3" y1="441" x2="342.3" y2="406.4" />
                    <line class="stripes" x1="394.4" y1="418.6" x2="368.7" y2="387.9" />
                    <line class="stripes" x1="422.1" y1="390.9" x2="391.4" y2="365.2" />
                    <line class="stripes" x1="444.5" y1="358.8" x2="409.9" y2="338.8" />
                    <line class="stripes" x1="461.1" y1="323.3" x2="423.5" y2="309.6" />
                    <line class="stripes" x1="471.2" y1="285.5" x2="431.8" y2="278.6" />
                    <line class="stripes" x1="474.6" y1="246.5" x2="434.6" y2="246.5" />
                    <line class="stripes" x1="471.2" y1="207.5" x2="431.8" y2="214.4" />
                    <line class="stripes" x1="461.1" y1="169.7" x2="423.5" y2="183.4" />
                    <line class="stripes" x1="444.5" y1="134.2" x2="409.9" y2="154.2" />
                    <line class="stripes" x1="422.1" y1="102.1" x2="391.4" y2="127.8" />
                    <line class="stripes" x1="394.4" y1="74.4" x2="368.7" y2="105.1" />
                    <line class="stripes" x1="362.3" y1="52" x2="342.3" y2="86.6" />
                    <line class="stripes" x1="326.8" y1="35.4" x2="313.1" y2="73" />
                    <line class="stripes" x1="289" y1="25.3" x2="282.1" y2="64.7" />
                </g>
                <g>
                    <line class="stripes" x1="242.7" y1="37" x2="243.6" y2="62" />
                    <line class="stripes" x1="235.4" y1="37.4" x2="237.1" y2="62.3" />
                    <line class="stripes" x1="228.1" y1="38" x2="230.7" y2="62.9" />
                    <line class="stripes" x1="220.8" y1="38.9" x2="224.3" y2="63.7" />
                    <line class="stripes" x1="206.4" y1="41.5" x2="211.6" y2="65.9" />
                    <line class="stripes" x1="199.3" y1="43.1" x2="205.3" y2="67.4" />
                    <line class="stripes" x1="192.2" y1="45" x2="199.1" y2="69.1" />
                    <line class="stripes" x1="185.2" y1="47.2" x2="193" y2="70.9" />
                    <line class="stripes" x1="171.5" y1="52.2" x2="180.8" y2="75.3" />
                    <line class="stripes" x1="164.7" y1="55" x2="174.9" y2="77.9" />
                    <line class="stripes" x1="158.1" y1="58.1" x2="169.1" y2="80.6" />
                    <line class="stripes" x1="151.6" y1="61.4" x2="163.3" y2="83.5" />
                    <line class="stripes" x1="138.9" y1="68.7" x2="152.2" y2="90" />
                    <line class="stripes" x1="132.8" y1="72.7" x2="146.8" y2="93.5" />
                    <line class="stripes" x1="126.8" y1="76.9" x2="141.5" y2="97.2" />
                    <line class="stripes" x1="121" y1="81.3" x2="136.3" y2="101" />
                    <line class="stripes" x1="109.8" y1="90.7" x2="126.5" y2="109.3" />
                    <line class="stripes" x1="104.4" y1="95.7" x2="121.8" y2="113.7" />
                    <line class="stripes" x1="99.2" y1="100.9" x2="117.2" y2="118.3" />
                    <line class="stripes" x1="94.2" y1="106.3" x2="112.8" y2="123" />
                    <line class="stripes" x1="84.8" y1="117.5" x2="104.5" y2="132.8" />
                    <line class="stripes" x1="80.4" y1="123.3" x2="100.7" y2="138" />
                    <line class="stripes" x1="76.2" y1="129.3" x2="97" y2="143.3" />
                    <line class="stripes" x1="72.2" y1="135.4" x2="93.5" y2="148.7" />
                    <line class="stripes" x1="64.9" y1="148.1" x2="87" y2="159.8" />
                    <line class="stripes" x1="61.6" y1="154.6" x2="84.1" y2="165.6" />
                    <line class="stripes" x1="58.5" y1="161.2" x2="81.4" y2="171.4" />
                    <line class="stripes" x1="55.7" y1="168" x2="78.8" y2="177.3" />
                    <line class="stripes" x1="50.7" y1="181.7" x2="74.4" y2="189.5" />
                    <line class="stripes" x1="48.5" y1="188.7" x2="72.6" y2="195.6" />
                    <line class="stripes" x1="46.6" y1="195.8" x2="70.9" y2="201.8" />
                    <line class="stripes" x1="45" y1="202.9" x2="69.4" y2="208.1" />
                    <line class="stripes" x1="42.4" y1="217.3" x2="67.2" y2="220.8" />
                    <line class="stripes" x1="41.5" y1="224.6" x2="66.4" y2="227.2" />
                    <line class="stripes" x1="40.9" y1="231.9" x2="65.8" y2="233.6" />
                    <line class="stripes" x1="40.5" y1="239.2" x2="65.5" y2="240.1" />
                    <line class="stripes" x1="40.5" y1="253.8" x2="65.5" y2="252.9" />
                    <line class="stripes" x1="40.9" y1="261.1" x2="65.8" y2="259.4" />
                    <line class="stripes" x1="41.5" y1="268.4" x2="66.4" y2="265.8" />
                    <line class="stripes" x1="42.4" y1="275.7" x2="67.2" y2="272.2" />
                    <line class="stripes" x1="45" y1="290.1" x2="69.4" y2="284.9" />
                    <line class="stripes" x1="46.6" y1="297.2" x2="70.9" y2="291.2" />
                    <line class="stripes" x1="48.5" y1="304.3" x2="72.6" y2="297.4" />
                    <line class="stripes" x1="50.7" y1="311.3" x2="74.4" y2="303.5" />
                    <line class="stripes" x1="55.7" y1="325" x2="78.8" y2="315.7" />
                    <line class="stripes" x1="58.5" y1="331.8" x2="81.4" y2="321.6" />
                    <line class="stripes" x1="61.6" y1="338.4" x2="84.1" y2="327.4" />
                    <line class="stripes" x1="64.9" y1="344.9" x2="87" y2="333.2" />
                    <line class="stripes" x1="72.2" y1="357.6" x2="93.5" y2="344.3" />
                    <line class="stripes" x1="76.2" y1="363.7" x2="97" y2="349.7" />
                    <line class="stripes" x1="80.4" y1="369.7" x2="100.7" y2="355" />
                    <line class="stripes" x1="84.8" y1="375.5" x2="104.5" y2="360.2" />
                    <line class="stripes" x1="94.2" y1="386.7" x2="112.8" y2="370" />
                    <line class="stripes" x1="99.2" y1="392.1" x2="117.2" y2="374.7" />
                    <line class="stripes" x1="104.4" y1="397.3" x2="121.8" y2="379.3" />
                    <line class="stripes" x1="109.8" y1="402.3" x2="126.5" y2="383.7" />
                    <line class="stripes" x1="121" y1="411.7" x2="136.3" y2="392" />
                    <line class="stripes" x1="126.8" y1="416.1" x2="141.5" y2="395.8" />
                    <line class="stripes" x1="132.8" y1="420.3" x2="146.8" y2="399.5" />
                    <line class="stripes" x1="138.9" y1="424.3" x2="152.2" y2="403" />
                    <line class="stripes" x1="151.6" y1="431.6" x2="163.3" y2="409.5" />
                    <line class="stripes" x1="158.1" y1="434.9" x2="169.1" y2="412.4" />
                    <line class="stripes" x1="164.7" y1="438" x2="174.9" y2="415.1" />
                    <line class="stripes" x1="171.5" y1="440.8" x2="180.8" y2="417.7" />
                    <line class="stripes" x1="185.2" y1="445.8" x2="193" y2="422.1" />
                    <line class="stripes" x1="192.2" y1="448" x2="199.1" y2="423.9" />
                    <line class="stripes" x1="199.3" y1="449.9" x2="205.3" y2="425.6" />
                    <line class="stripes" x1="206.4" y1="451.5" x2="211.6" y2="427.1" />
                    <line class="stripes" x1="220.8" y1="454.1" x2="224.3" y2="429.3" />
                    <line class="stripes" x1="228.1" y1="455" x2="230.7" y2="430.1" />
                    <line class="stripes" x1="235.4" y1="455.6" x2="237.1" y2="430.7" />
                    <line class="stripes" x1="242.7" y1="456" x2="243.6" y2="431" />
                    <line class="stripes" x1="257.3" y1="456" x2="256.4" y2="431" />
                    <line class="stripes" x1="264.6" y1="455.6" x2="262.9" y2="430.7" />
                    <line class="stripes" x1="271.9" y1="455" x2="269.3" y2="430.1" />
                    <line class="stripes" x1="279.2" y1="454.1" x2="275.7" y2="429.3" />
                    <line class="stripes" x1="293.6" y1="451.5" x2="288.4" y2="427.1" />
                    <line class="stripes" x1="300.7" y1="449.9" x2="294.7" y2="425.6" />
                    <line class="stripes" x1="307.8" y1="448" x2="300.9" y2="423.9" />
                    <line class="stripes" x1="314.8" y1="445.8" x2="307" y2="422.1" />
                    <line class="stripes" x1="328.5" y1="440.8" x2="319.2" y2="417.7" />
                    <line class="stripes" x1="335.3" y1="438" x2="325.1" y2="415.1" />
                    <line class="stripes" x1="341.9" y1="434.9" x2="330.9" y2="412.4" />
                    <line class="stripes" x1="348.4" y1="431.6" x2="336.7" y2="409.5" />
                    <line class="stripes" x1="361.1" y1="424.3" x2="347.8" y2="403" />
                    <line class="stripes" x1="367.2" y1="420.3" x2="353.2" y2="399.5" />
                    <line class="stripes" x1="373.2" y1="416.1" x2="358.5" y2="395.8" />
                    <line class="stripes" x1="379" y1="411.7" x2="363.7" y2="392" />
                    <line class="stripes" x1="390.2" y1="402.3" x2="373.5" y2="383.7" />
                    <line class="stripes" x1="395.6" y1="397.3" x2="378.2" y2="379.3" />
                    <line class="stripes" x1="400.8" y1="392.1" x2="382.8" y2="374.7" />
                    <line class="stripes" x1="405.8" y1="386.7" x2="387.2" y2="370" />
                    <line class="stripes" x1="415.2" y1="375.5" x2="395.5" y2="360.2" />
                    <line class="stripes" x1="419.6" y1="369.7" x2="399.3" y2="355" />
                    <line class="stripes" x1="423.8" y1="363.7" x2="403" y2="349.7" />
                    <line class="stripes" x1="427.8" y1="357.6" x2="406.5" y2="344.3" />
                    <line class="stripes" x1="435.1" y1="344.9" x2="413" y2="333.2" />
                    <line class="stripes" x1="438.4" y1="338.4" x2="415.9" y2="327.4" />
                    <line class="stripes" x1="441.5" y1="331.8" x2="418.6" y2="321.6" />
                    <line class="stripes" x1="444.3" y1="325" x2="421.2" y2="315.7" />
                    <line class="stripes" x1="449.3" y1="311.3" x2="425.6" y2="303.5" />
                    <line class="stripes" x1="451.5" y1="304.3" x2="427.4" y2="297.4" />
                    <line class="stripes" x1="453.4" y1="297.2" x2="429.1" y2="291.2" />
                    <line class="stripes" x1="455" y1="290.1" x2="430.6" y2="284.9" />
                    <line class="stripes" x1="457.6" y1="275.7" x2="432.8" y2="272.2" />
                    <line class="stripes" x1="458.5" y1="268.4" x2="433.6" y2="265.8" />
                    <line class="stripes" x1="459.1" y1="261.1" x2="434.2" y2="259.4" />
                    <line class="stripes" x1="459.5" y1="253.8" x2="434.5" y2="252.9" />
                    <line class="stripes" x1="459.5" y1="239.2" x2="434.5" y2="240.1" />
                    <line class="stripes" x1="459.1" y1="231.9" x2="434.2" y2="233.6" />
                    <line class="stripes" x1="458.5" y1="224.6" x2="433.6" y2="227.2" />
                    <line class="stripes" x1="457.6" y1="217.3" x2="432.8" y2="220.8" />
                    <line class="stripes" x1="455" y1="202.9" x2="430.6" y2="208.1" />
                    <line class="stripes" x1="453.4" y1="195.8" x2="429.1" y2="201.8" />
                    <line class="stripes" x1="451.5" y1="188.7" x2="427.4" y2="195.6" />
                    <line class="stripes" x1="449.3" y1="181.7" x2="425.6" y2="189.5" />
                    <line class="stripes" x1="444.3" y1="168" x2="421.2" y2="177.3" />
                    <line class="stripes" x1="441.5" y1="161.2" x2="418.6" y2="171.4" />
                    <line class="stripes" x1="438.4" y1="154.6" x2="415.9" y2="165.6" />
                    <line class="stripes" x1="435.1" y1="148.1" x2="413" y2="159.8" />
                    <line class="stripes" x1="427.8" y1="135.4" x2="406.5" y2="148.7" />
                    <line class="stripes" x1="423.8" y1="129.3" x2="403" y2="143.3" />
                    <line class="stripes" x1="419.6" y1="123.3" x2="399.3" y2="138" />
                    <line class="stripes" x1="415.2" y1="117.5" x2="395.5" y2="132.8" />
                    <line class="stripes" x1="405.8" y1="106.3" x2="387.2" y2="123" />
                    <line class="stripes" x1="400.8" y1="100.9" x2="382.8" y2="118.3" />
                    <line class="stripes" x1="395.6" y1="95.7" x2="378.2" y2="113.7" />
                    <line class="stripes" x1="390.2" y1="90.7" x2="373.5" y2="109.3" />
                    <line class="stripes" x1="379" y1="81.3" x2="363.7" y2="101" />
                    <line class="stripes" x1="373.2" y1="76.9" x2="358.5" y2="97.2" />
                    <line class="stripes" x1="367.2" y1="72.7" x2="353.2" y2="93.5" />
                    <line class="stripes" x1="361.1" y1="68.7" x2="347.8" y2="90" />
                    <line class="stripes" x1="348.4" y1="61.4" x2="336.7" y2="83.5" />
                    <line class="stripes" x1="341.9" y1="58.1" x2="330.9" y2="80.6" />
                    <line class="stripes" x1="335.3" y1="55" x2="325.1" y2="77.9" />
                    <line class="stripes" x1="328.5" y1="52.2" x2="319.2" y2="75.3" />
                    <line class="stripes" x1="314.8" y1="47.2" x2="307" y2="70.9" />
                    <line class="stripes" x1="307.8" y1="45" x2="300.9" y2="69.1" />
                    <line class="stripes" x1="300.7" y1="43.1" x2="294.7" y2="67.4" />
                    <line class="stripes" x1="293.6" y1="41.5" x2="288.4" y2="65.9" />
                    <line class="stripes" x1="279.2" y1="38.9" x2="275.7" y2="63.7" />
                    <line class="stripes" x1="271.9" y1="38" x2="269.3" y2="62.9" />
                    <line class="stripes" x1="264.6" y1="37.4" x2="262.9" y2="62.3" />
                    <line class="stripes" x1="257.3" y1="37" x2="256.4" y2="62" />
                </g>               
            </g>
            <g><text transform="matrix(1 0 0 1 385 260)" class="letters">E</text><text
                transform="matrix(1 0 0 1 235.1057 415.1405)" class="letters">S</text><text
                transform="matrix(1 0 0 1 233.7814 109.3156)" class="letters">N</text><text
                transform="matrix(1 0 0 1 82.3594 260)" 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 class="needle" :style="{'rotate': direction +'deg'}"></div>
    </div>

</template>

<script>
    export default {
        data() {           
            return {
               min: 0,
               max:360,
               direction:0,
               speed:0
              
            }
        },
        watch: {
            msg: function(){
                if(this.msg.payload != undefined){
                    if(this.msg.topic == "direction"){
                        this.direction = this.shortWayRotation(this.direction, this.msg.payload)
                        
                    }
                    if(this.msg.topic == "speed"){
                        this.speed = 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: {
            shortWayRotation:function(frm, to){               
                let delta = ((((to - frm) % 360) + 540) % 360) - 180;
                return (frm + delta) % 720;
            }
        },
        mounted() {
            // code here when the component is first loaded
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>
<style>    
    div:has(>.windrose){
        align-items: center;
    }
    .windrose{
        position:relative;
        width:100%;       
        aspect-ratio: 1;
        container-type: inline-size;
    }
    .stripes {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }
    .letters {
        font-size: 48px;
        fill:currentColor;
    }
    .ring{
        fill:none;
        stroke:currentColor;
        stroke-width:40;
        opacity:0.1;
    }
    .needle{
        position: absolute;
        inset: 0;       
        top:-1%;
        left: calc(50% - 1px);
        width: 2px;
        height: 100%;
        transform-origin: center;
        transition: .5s ease-in-out;
    }
    
    .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>

```

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [25 February 2024 11:08 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/8 "2024-02-25T11:08:30Z")

</div>

Very nice @hotNipi, I can make good use of this 😃  
I don't know if this something that is fixable, but if it's viewed on a smaller browser the gauge shrinks OK, but the pointer doesn't scale to the gauge.

![windrose](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/911849b6c0977a495048f005c44fe842c922de32.gif)

---

<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:** [25 February 2024 11:32 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/9 "2024-02-25T11:32:54Z")

</div>

Smaller browser is not thing I know. But if you can give screen dimensions or something..

Edit: Now it goes smaller properly. Edited code above.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [25 February 2024 12:02 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/10 "2024-02-25T12:02:46Z")

</div>

> [@hotNipi](#):
>
> Smaller browser is not thing I know. But if you can give screen dimensions or something.

I probably should have said smaller devices, such as a tablet.

> [@hotNipi](#):
>
> Edit: Now it goes smaller properly. Edited code above.

Perfect 😁 😁 😁

![windrose](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a14ae998887056035a8fba19cf2d5de99e32a2dc.gif)

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [26 February 2024 03:50 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/11 "2024-02-26T03:50:55Z")

</div>

Thats amazing , exceeds the the original one we had in DB1 by far

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 March 2024 03:51 UTC](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806/12 "2024-03-27T03:51:27Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.