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>
