FTUI Beispiel Mondphase - Versionsgeschichte

Pahenning am 2. August 2024 um 14:05 Uhr

2024-08-02T14:05:32Z

← Nächstältere Version		Version vom 2. August 2024, 16:05 Uhr
Zeile 1:		Zeile 1:
	Die aktuelle Mondphase soll in [[FHEM Tablet UI]] als Bild angezeigt werden.		Die aktuelle Mondphase soll in [[FHEM Tablet UI V2]] als Bild angezeigt werden.

	<gallery>		<gallery>
Zeile 99:		Zeile 99:
	[[FHEM Tablet UI]]		[[FHEM Tablet UI]]

	[[Kategorie:FHEM Tablet UI\|Mondphase]]		[[Kategorie:FHEM Tablet UI V2\|Mondphase]]

Ulm32b: Feinschliff

2018-07-20T21:21:48Z

Feinschliff

← Nächstältere Version		Version vom 20. Juli 2018, 23:21 Uhr
Zeile 14:		Zeile 14:
	</syntaxhighlight>		</syntaxhighlight>

	Eine im ''Astro-Device'' erzeugte SVG-Datei kann in FTUI eingebunden werden; Farben und Größe sind ~~hierbei~~ frei wählbar:		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">		<syntaxhighlight lang="html">
	<div data-type="image"		<div data-type="image"
Zeile 86:		Zeile 86:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<div data-type="image" data-device="SonneMond" data-get="Mondbild"></div>		<div data-type="image" data-device="SonneMond" data-get="Mondbild"></div>
	<div data-type="label" data-get="SonneMond:MoonPhaseS" data-color="#8C8C8C~~" style="height:25px" class="cell~~"></div>		<div data-type="label" data-get="SonneMond:MoonPhaseS" data-color="#8C8C8C"></div>
	</syntaxhighlight>		</syntaxhighlight>

	==Hinweise==		==Hinweise==
	Die beschriebenen Vorgehensweisen sind ~~aus einem~~ [https://forum.fhem.de/index.php/topic,73951.0.html ~~Beitrag~~ im Forum] entnommen. Dort werden auch weitere Optionen, z.B. zur Reduzierung des Datenvolumens diskutiert.		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==		==Links==
			[http://lexikon.astronomie.info/java/sunmoon/ Astronomischer Hintergrund]

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

	[[FHEM Tablet UI]]		[[FHEM Tablet UI]]

	~~[http://lexikon.astronomie.info/java/sunmoon/ Fachlicher Hintergrund]~~

	[[Kategorie:FHEM Tablet UI\|Mondphase]]		[[Kategorie:FHEM Tablet UI\|Mondphase]]

Ulm32b: Link auf den relevanteren Thread korrigiert.

2018-07-20T07:11:17Z

Link auf den relevanteren Thread korrigiert.

← Nächstältere Version		Version vom 20. Juli 2018, 09:11 Uhr
Zeile 90:		Zeile 90:

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

	==Links==		==Links==

Ulm32b: Erste Version

2018-07-20T01:14:42Z

Erste Version

Neue Seite

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; Farben und Größe sind hierbei 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" style="height:25px" class="cell"></div>
</syntaxhighlight>

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

==Links==
[[FHEM Tablet UI]]

[http://lexikon.astronomie.info/java/sunmoon/ Fachlicher Hintergrund]

[[Kategorie:FHEM Tablet UI|Mondphase]]