Quelltext der Seite FTUI Beispiel Mondphase

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

<gallery>
File:Mondphase_Vektor.png
File:Mondphase_Pixel.png
</gallery>

==Vektorgrafik==
Zunächst wird das FHEM-Device ''Astro'' definiert, im nachfolgenden Beispiel unter dem Namen ''SonneMond'':
<syntaxhighlight lang="html">
defmod SonneMond Astro
attr SonneMond icon weather_moon_phases_8
attr SonneMond stateFormat Mondphase: MoonPhaseN
</syntaxhighlight>

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

==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 [http://www.starpage.de/ccount/click.php?id=18 Phasenbilder].

Das FHEM-Device ''Astro'' wird um ein Userreading (hier ''Mondbild'' genannt) erweitert:
<syntaxhighlight lang="html">
defmod SonneMond Astro
attr SonneMond icon weather_moon_phases_8
attr SonneMond stateFormat Mondphase: MoonPhaseN
attr SonneMond userReadings Mondbild {moon_pics("myAstro")}
</syntaxhighlight>

In 99_myUtils.pm hinterlegt man eine Funktion, welche das Userreading füllt:
<syntaxhighlight lang="html">
#-- 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;
</syntaxhighlight>

Die Einbindung in FTUI erfolgt über das [[FTUI_Widget_Image|Image-Widget]], ergänzt um [[FTUI_Widget_Label|Label]]:
<syntaxhighlight lang="html">
<div data-type="image" data-device="SonneMond" data-get="Mondbild"></div>
<div data-type="label" data-get="SonneMond:MoonPhaseS" data-color="#8C8C8C"></div>	
</syntaxhighlight>

==Hinweise==
Die beschriebenen Vorgehensweisen sind [https://forum.fhem.de/index.php/topic,73951.0.html Beiträgen im Forum] entnommen. Dort werden auch weitere Optionen, z.B. zur Reduzierung des Datenvolumens diskutiert.

==Links==
[http://lexikon.astronomie.info/java/sunmoon/ Astronomischer Hintergrund]

[https://fhem.de/commandref.html#Astro Astro-Device]

[[FHEM Tablet UI]]

[[Kategorie:FHEM Tablet UI|Mondphase]]