[FTUI3] icon addon TrueWindDirection

Begonnen von mr_petz, 22 Februar 2022, 14:36:13

Vorheriges Thema - Nächstes Thema

mr_petz

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>

setstate

Mach das lieber mit

export class FtuiIconTDW extends FtuiIcon {

Damit spart man sich das innere Element

MDietrich

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
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

mr_petz

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

setstate

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

mr_petz

#5
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)

AyshaHM

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

Hardware: Raspberry  4

mr_petz

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

AyshaHM

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
Hardware: Raspberry  4

grossmaggul

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


FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mr_petz

Ist das nicht eher ein Anemoskop?

Aber gut mit Boardmitteln umgesetzt. :)

LG mr_petz

grossmaggul

ZitatIst das nicht eher ein Anemoskop?
Das wohl auch nicht, aber zumindest ist es kein Mikroskop. ;)
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

meier81

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
QNAP NAS mit Debian VM, darauf FHEM, debmatic, influxdb2 und Grafana || HB-RF-ETH || SIGNALduino 433MHz mit Maple mini || WS980 Wetterstation || Xiaomi Mi Robot mit valetudo-FW || Buderus web KM100 || div. Tasmota-Devices

mr_petz

Hi Markus,
guter Hinweis mit add(-45) bei location-arrow.
Habe es oben ergänzt.

LG