Hi@all.
Da es ja zur Zeit so stürmt, habe ich mir eine Windrichtungsanzeige als Erweiterung fürs icon gebastelt.
Im proplanta-modul gibt es ja die Readings mit windDir. Damit hat man die visuelle °Darstellung.
Auf der Webseite von Proplanta wird die Richtung mit dem offenen Ende des Pfeiles angezeigt (also von da weht der Wind).
Das habe ich genauso gemacht mit dem bereits in FTUI3 enthaltenen location-arrow icon.
Mapping fürs color geht auch.
Falls ein icon verwendet wird wo die Ausrichtung nicht stimmt kann man noch:
rotate="0"
hinzufügen.
Definition Bsp.:
<ftui-icon-twd [value]="proplanta:windDir" [color]="proplanta:wind | step('30:gray,50:danger')" name="location-arrow" class="size-1" margin="0.2">
<ftui-label [text]="proplanta:wind" unit="km/h"></ftui-label>
</ftui-icon-twd>
name="location-arrow" muss nicht gesetzt werden, da es standard ist.
Vielleicht nützt es ja jemanden.
Das script kommt einfach ins components/icon Verzeichnis.
LG mr_petz
Edit: Anhang geändert.
Edit2: Diese Erweiterung wird nicht mehr benötigt. Man kann das jetzt ganz normal übers ftui-icon Darstellen:
<ftui-icon name="location-arrow" [rotate]="proplanta:windDir | add(-45)"><ftui-icon>
Mach das lieber mit
export class FtuiIconTDW extends FtuiIcon {
Damit spart man sich das innere Element
Ich habe es gerade ausprobiert, super!
Bis jetzt hatte dich das windDirIcon von ProPlanta benutzt, dass sah bei meiner Darstellung ziemlich pixelig aus.
LG
MDietrich
Zitat von: setstate am 22 Februar 2022, 15:55:48
Mach das lieber mit
export class FtuiIconTDW extends FtuiIcon {
Damit spart man sich das innere Element
Danke für die Info.
Ich hatte mich am butten-nice und den chart-componenten orientiert.
Da hast du auch mit FtuiElement gearbeitet.
Kannst du mir da bitte auf die Sprünge helfen? Oder du integrierst das einfach in dein Git.
Proplematisch wird es nur wenn andere Icons verwendet werden, da dann der Mittelpunkt der Rotation nicht immer 50% 50% ist.
Deswegen habe ich bei den location-arrow noch :
transform-origin: 40% 50%
hinzufügen müssen.
LG mr_petz
so ungefähr meinte ich das. Ob es jetzt in allen Lebenslagen passt, weiß ich natürlich nicht
/*
* TrueWindDirection component for FTUI version 3
*
* by mr_petz
*
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* https://github.com/knowthelist/ftui
*/
import { FtuiIcon } from '../icon/icon.component.js';
export class FtuiIconTDW extends FtuiIcon {
constructor(properties) {
super(Object.assign(FtuiIconTDW.properties, properties));
}
static get properties() {
return {
value: 0,
};
}
static get observedAttributes() {
return [...this.convertToAttributes(FtuiIconTDW.properties), ...super.observedAttributes];
}
onConnected() {
this.name = 'location-arrow';
}
onAttributeChanged(name, newValue) {
switch (name) {
case 'value':
this.elementIcon.style.setProperty('-webkit-transform','rotateZ('+ (this.value+135) +'deg)');
this.elementIcon.style.setProperty('-transform','rotateZ('+ (this.value+135) +'deg)');
this.elementIcon.style.setProperty('-moz-transform','rotateZ('+ (this.value+135) +'deg)');
break;
default:
super.onAttributeChanged(name, newValue);
break;
}
}
}
window.customElements.define('ftui-icon-twd', FtuiIconTDW);
Mein Tester
<ftui-grid-tile row="8" col="6" height="2" width="2">
<ftui-icon-twd [value]="local:deg">
</ftui-icon-twd>
<ftui-slider [(value)]="local:deg" min="0" max="360"></ftui-slider>
</ftui-grid-tile>
Ok danke dir. Der Mittelpunkt für die Rotation sieht gut aus. Braucht man nicht extra angeben.
Jetzt könnte man noch ein rotate Attribute setzen falls man ein anderes Icon verwenden will und die Ausrichtung nicht stimmt.
Der Code schrumpft deutlich :D.
Wieder was gelernt.
LG mr_petz
Edit: Habe oben diese Version Angehangen und rotate hinzugefügt.
Edit2: Musste nochmal oben updaten (was in der Bedingung vergessen :o).
Edit3: Habe nochmal den Code geändert. Du hast ins icon-modul gerade rotate eingebaut :D)
Hallo zusammen,
vielen Dank für das erstellen der Windrichtung !!!
Ich habe das ganze noch um die Windrichtung in Buchstaben erweitert.
<ftui-label [text]="DWetterWindDirD:state" size="4"></ftui-label>
<ftui-icon-twd [value]="Wetter:windDir" [color]="Wetter:wind | step('30:gray,50:danger')" name="location-arrow" class="size-1" margin="0.2">
</ftui-icon-twd>
<ftui-label [text]="Wetter:wind" size="4" unit="km/h"></ftui-label>
DWetterWindDirD ist ein dummy.
Dazu habe ich ein Doif erstellt:
([Wetter:windDir] >0 and [Wetter:windDir] <=18) (set DWetterWindDirD N) DOELSEIF
([Wetter:windDir] >18 and [Wetter:windDir] <=36) (set DWetterWindDirD NNO) DOELSEIF
([Wetter:windDir] >36 and [Wetter:windDir] <=54) (set DWetterWindDirD NO) DOELSEIF
([Wetter:windDir] >54 and [Wetter:windDir] <=72) (set DWetterWindDirD ONO) DOELSEIF
([Wetter:windDir] >72 and [Wetter:windDir] <=108) (set DWetterWindDirD O) DOELSEIF
([Wetter:windDir] >108 and [Wetter:windDir] <=126) (set DWetterWindDirD OSO) DOELSEIF
([Wetter:windDir] >126 and [Wetter:windDir] <=144) (set DWetterWindDirD SO) DOELSEIF
([Wetter:windDir] >144 and [Wetter:windDir] <=162) (set DWetterWindDirD SSO) DOELSEIF
([Wetter:windDir] >162 and [Wetter:windDir] <=198) (set DWetterWindDirD S) DOELSEIF
([Wetter:windDir] >198 and [Wetter:windDir] <=216) (set DWetterWindDirD SSW) DOELSEIF
([Wetter:windDir] >216 and [Wetter:windDir] <=234) (set DWetterWindDirD SW) DOELSEIF
([Wetter:windDir] >234 and [Wetter:windDir] <=252) (set DWetterWindDirD WSW) DOELSEIF
([Wetter:windDir] >252 and [Wetter:windDir] <=288) (set DWetterWindDirD W) DOELSEIF
([Wetter:windDir] >288 and [Wetter:windDir] <=306) (set DWetterWindDirD WNW) DOELSEIF
([Wetter:windDir] >306 and [Wetter:windDir] <=324) (set DWetterWindDirD NW) DOELSEIF
([Wetter:windDir] >324 and [Wetter:windDir] <=342) (set DWetterWindDirD NNW) DOELSEIF
([Wetter:windDir] >342 and [Wetter:windDir] <=360) (set DWetterWindDirD N) DOELSE
Vielleicht hilft das jemanden!
Gruß Aysha
@AyshaHM
Zitat von: mr_petz am 22 Februar 2022, 14:36:13
...
Edit2: Diese Erweiterung wird nicht mehr benötigt. Man kann das jetzt ganz normal übers ftui-icon Darstellen:
<ftui-icon name="location-arrow" [rotate]="proplanta:windDir"><ftui-icon>
Nichts desto trotz könnte man das auch über ein label steppen....
Bsp.:
<ftui-label [text]="Wetter:windDir | step('0:N,19:NNO,37:NO usw....')"></ftui-label>
LG mr_petz
Hallo mr_petz,
da ich gerade mit FTUI3 anfange sind mir diese Wege noch nicht bekannt.
Zur Zeit habe ich noch FTUI1.
Aber Danke für den Tipp!!
LG Aysha
Ich habe mir ein(e) Anemometer Windrose mit knob gebaut, ist vielleicht nicht ganz so schön, aber brauchbar.
Vielleicht kann's jemand gebrauchen.
<!-- Anemometer -->
<ftui-row margin="1">
<ftui-column align-items="top">
<ftui-row>
<ftui-label color="blue" text="N"></ftui-label>
</ftui-row>
<ftui-row width="35%">
<ftui-label text="W"></ftui-label>
<ftui-knob [value]="proplanta:windDir" min="0" max="360" width="110" height="80" start-angle="-90" end-angle="270" stroke-width="4" offset-y="0" has-needle has-scale readonly>
</ftui-knob>
<ftui-label text="O"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text="S"></ftui-label>
</ftui-row>
</ftui-column>
</ftui-row>
Ist das nicht eher ein Anemoskop?
Aber gut mit Boardmitteln umgesetzt. :)
LG mr_petz
ZitatIst das nicht eher ein Anemoskop?
Das wohl auch nicht, aber zumindest ist es kein Mikroskop. ;)
Hab das bei mir auch übers ftui-icon gelöst mit einer Kombination aus ftui-label (ähnlich wie bei grossmaggul):
<ftui-column>
<ftui-row>
<ftui-label text="N"></ftui-label>
</ftui-row>
<ftui-row width="70%">
<ftui-label text="W"></ftui-label>
<ftui-icon name="location-arrow" [rotate]="EG_wz_HW_Wetterstation:windDirection | add(-45)"></ftui-icon>
<ftui-label text="O"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label text="S"></ftui-label>
</ftui-row>
</ftui-column>
Mit dem location-arrow muss man dann hat nur 45° abziegen, der zeigt ja Standard nach oben rechts.
Gruß
Markus
Hi Markus,
guter Hinweis mit add(-45) bei location-arrow.
Habe es oben ergänzt.
LG