FTUI Beispiel Mondphase

Die aktuelle Mondphase soll in FHEM Tablet UI V2 als Bild angezeigt werden.

• 
• 

Vektorgrafik

Zunächst wird das FHEM-Device Astro definiert, im nachfolgenden Beispiel unter dem Namen SonneMond:

defmod SonneMond Astro
attr SonneMond icon weather_moon_phases_8
attr SonneMond stateFormat Mondphase: MoonPhaseN

Eine im Astro-Device erzeugte SVG-Datei kann in FTUI eingebunden werden (xxx.yyy.zzz.aa an die lokalen Gegebenheiten anpassen); Farben und Größe sind frei wählbar:

<div data-type="image"
     data-url="http://xxx.yyy.zzz.aa:8083/fhem/Astro_moonwidget?name=SonneMond&mooncolor=grey&moonshadow=black&size=100x100">
</div>

Pixelgrafik

Unter Inkaufnahme größeren Datenvolumens lassen sich auch wirklichkeitsnahe Bilder einbinden. Hierzu wird zunächst eine Sammlung von 100 Phasenbildern im Verzeichnis /opt/fhem/www/images/phasenbilder gespeichert. Die Bilder holt man sich aus Phasenbilder.

Das FHEM-Device Astro wird um ein Userreading (hier Mondbild genannt) erweitert:

defmod SonneMond Astro
attr SonneMond icon weather_moon_phases_8
attr SonneMond stateFormat Mondphase: MoonPhaseN
attr SonneMond userReadings Mondbild {moon_pics("myAstro")}

In 99_myUtils.pm hinterlegt man eine Funktion, welche das Userreading füllt:

#-- Moon picture

sub myUtils_Astro_Initialize($$)
{
  my ($hash) = @_;
}

sub moon_pics($)
{
 my ($name)    = @_;
 my $picNo     = ReadingsVal("SonneMond","MoonAge",0);
 my $picOrd    = "/fhem/www/images/phasenbilder/";
 my $picPath   = "";

  if(  $picNo < 180 ){
    $picNo = int($picNo/180*49+51);
  }else{
    $picNo = int(($picNo/180-1)*49+1);
  }

$picPath =  $picOrd.$picNo.".png";

return $picPath
}

sub Moon_to_html($)
{
   my($hash) = @_;
   $hash = $defs{$hash} if( ref($hash) ne 'HASH' );
   return undef if( !$hash );

   my $name = $hash->{NAME};
   my $scale = "100";
   my $state = $hash->{STATE};
   my $pathToPictures = ReadingsVal("SonneMond", "Mondbild", "");
   my $ret;

   $ret .= "<div style='width:".$scale."px; text-align: center;'>";
   $ret .= "<img src='$pathToPictures$\' width='$scale' height='$scale'>";
   $ret .= "</div>";

   $hash->{fhem}->{cached} = $ret;

   return $ret;
}

1;

Die Einbindung in FTUI erfolgt über das Image-Widget, ergänzt um Label:

<div data-type="image" data-device="SonneMond" data-get="Mondbild"></div>
<div data-type="label" data-get="SonneMond:MoonPhaseS" data-color="#8C8C8C"></div>

Hinweise

Die beschriebenen Vorgehensweisen sind Beiträgen im Forum entnommen. Dort werden auch weitere Optionen, z.B. zur Reduzierung des Datenvolumens diskutiert.

Links

Astronomischer Hintergrund

Astro-Device

FHEM Tablet UI