Add compass mode to DB2 gauge widget

[xx_Nexus_xx]

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

[Paul-Reed]

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

[hotNipi]

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"

Hidden code. Don't use.

<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.

[xx_Nexus_xx]

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

[joepavitt]

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

[hotNipi]

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

[hotNipi]

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.

<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>

[Paul-Reed]

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.

[hotNipi]

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.

[Paul-Reed]

@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

[xx_Nexus_xx]

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