[gelöst] Sonnenaufgang, Sonnenuntergang und Mondphasen

[Kuehnhackel]

Ich wollte auf meiner "Wetterseite" den Sonnenaufgang und untergang mit einpflegen.

Ich nutze Proplanta, aber da wird mir nur Mondauf- und untergang geboten.

In dem Zusammenhang wäre es natürlich super, wenn man noch den Stand des Mondes mit reinbringen könnte.

Wie habt ihr das realisiert.

[namor]

Sonnenuntergang/Aufgang berechnet das Modul SUNRISE_EL.
Im Fhem, nicht im FTUI.

Gruß

[amenomade]

Oder Twilight:

Code Auswählen Erweitern

define TL Twilight <latitude> <longitude> [<indoor_horizon> [<Weather_Position>]]
Und schon kannst Du in FTUI:

Code Auswählen Erweitern


<div data-type="label"
data-device="TL"
data-get="sr_civil"
data-part="([0-2][0-9]:[0-6][0-9]).*">
</div>
<div data-type="label"
data-device="TL"
data-get="ss_civil"
data-part="([0-2][0-9]:[0-6][0-9]).*">
</div>



[Kuehnhackel]

Deine Lösung habe ich nicht zum Laufen bekommen.  Aber virlrn Dank für deine Mühe

Oder Twilight:

Code Auswählen Erweitern

define TL Twilight <latitude> <longitude> [<indoor_horizon> [<Weather_Position>]]
Und schon kannst Du in FTUI:

Code Auswählen Erweitern


<div data-type="label"
data-device="TL"
data-get="sr_civil"
data-part="([0-2][0-9]:[0-6][0-9]).*">
</div>
<div data-type="label"
data-device="TL"
data-get="ss_civil"
data-part="([0-2][0-9]:[0-6][0-9]).*">
</div>



Dann habe ich das gefunden.
in die cfg habe ich das eingetragen

Code Auswählen Erweitern

define Sonnenaufgang dummy
define Sonnenuntergang dummy
define sun_riseSet_timer at *00:05:00 { my $s = sunrise();; fhem("set Sonnenaufgang $s");; $s = sunset();; fhem("set Sonnenuntergang $s");; }
attr Sonnenaufgang room Wetter
attr Sonnenuntergang room Wetterv

Um 0:05 wird dann regelmäßig Sonnenauf- und untergang refresht.
Die attr habe ich erstellt um sie eventuell mal im Floorplan zu verwenden.


in der HTML steht:

Code Auswählen Erweitern

<td><div data-type="label" class="darker normal">Sonnenaufgang</div>
        <span style="color:#aa6900"><div data-type="label"
data-device="Sonnenaufgang"
data-colors="black"></div></span>
       <div data-type="label" class="darker normal">Sonnenuntergang</div>
       <span style="color:#aa6900"><div data-type="label"
data-device="Sonnenuntergang"
               data-colors="black"></div></span>
</td>

[amenomade]

Ja, die Lösung von namor mit sunset() und sunrise() vom SUNRISE_EL Modul geht natürlich auch.
Ich nutze Twilight, da er auch "azimuth" und "elevation" anbietet, was ich für meine Beschattung-logik nutze.

[Kuehnhackel]

Ja, die Lösung von namor mit sunset() und sunrise() vom SUNRISE_EL Modul geht natürlich auch.
Ich nutze Twilight, da er auch "azimuth" und "elevation" anbietet, was ich für meine Beschattung-logik nutze.

Sunset habe ich auch schon für Rolladen und Beleuchtung "laufen", deshalb bot es sich auch an.

Mondphasen habe ich hiermit realisiert:
https://wiki.fhem.de/wiki/FTUI_Beispiel_Mondphase

somit sieht ein Teil meiner Index jetzt so aus:

[Helmi55]

Hallo würdest du von deinem Screenshot die .html zur Verfügung stellen.  Würde mitzumachen Lernen sehr helfen.
Danke und guten Rutsch 2019
Lg Helmut

[Kuehnhackel]

Hallo würdest du von deinem Screenshot die .html zur Verfügung stellen.  Würde mitzumachen Lernen sehr helfen.
Danke und guten Rutsch 2019
Lg Helmut

Moin, danke ich wünsche dir auch ein frohes neues Jahr. Ich habe den Code mal aufgeteilt.

Menue, dort wo man sich befindet ist der Hintergrund rot. In dem Falle hier befindet man sich "im Wohnzimmer":

Code Auswählen Erweitern

<div id="steuerung">
<ul>
  <li><a href="index.html">Startseite</a></li>
  <li><a href="kueche.html">K&uuml;che</a></li>
  <li><strong>Wohnzimmer</strong></li>
  <li><a href="diele.html">Diele/HWR/G-WC</a></li>
</ul>
</div>

<style>
body {background-color: #ffffff;}

* {
    padding: 0;
    margin: 2;
}

#steuerung {
    position:absolute;
    top:175px;
    left:10px
    background-color: #dddddd;
    width: 150px;
    float: left;
    margin:  10px;
}

#steuerung strong,
#steuerung a {
    color: black;
    text-decoration: none;
    border-top: 1px solid black;
    display: block;
    padding: 6px 6px 6px 20px;
}

#steuerung strong {
    background: yellow no-repeat left 50%;
}


#steuerung ul {
    border-bottom: 1px solid black;
}

#steuerung a:hover {
    background-color: red;

}
</style>

Hier die Analoguhr:

Code Auswählen Erweitern


<div style="position:absolute;top:5px;left:10px">
<div data-type="analogclock"
     data-size="150"
     data-body="round"
     data-dial="full"
     data-hour="bar">
</div>


Hier die "Wetter-Tabelle":

Code Auswählen Erweitern

<div style="position:absolute;top:5px;left:175px">
<table border="3" width=250>

<colgroup width="125" span="2"></colgroup>
<tr>
    <th colspan="2">
      <div data-type="clock" data-format="l," class="top-align darker normal inline"></div>
      <div data-type="label" class="top-align normal darker inline">den</div>
      <div data-type="clock" data-format="j. F Y" class="top-align darker normal inline"></div>
      <br><br><div data-type="clock" data-format="H:i:s" class="bigger darker"></div>
   </th>
</tr>

<tr>
    <td valign=top>
     <div data-type="label" class="top-align darker">Min/Max Temp</div><br>
     <div data-type="label" data-device="WetterProplanta" data-get="fc0_tempMin" data-unit="%B0C%0A" class="big inline" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div><div data-type="label" class="big inline darker">/</div>
     <div data-type="label" data-device="WetterProplanta" data-get="fc0_tempMax" data-unit="%B0C%0A" class="big inline" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div></td>
    <td valign=top><div data-type="label" class="top-align darker">Wind</div><div data-type="wind_direction" data-device="WetterProplanta" data-get="windDir" data-speed="wind" data-part="2" class="darker dim-back mini readonly top-space"></div></td>
</tr>
<tr>
    <td>
        <div data-type="label" class="top-space darker">morgens</div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="darker tiny">/div>
   </td>
   <td>
    <div data-type="symbol" data-icon="oa-weather_wind"></div>
    <div data-type="label" data-device="WetterProplanta" data-get="wind" data-unit=" km/h" class="darker" data-limits="[0, 19, 28, 38, 49, 74, 102, 117]"
data-colors='["Black","#b0b0b0","#aa6900","#7f4448","#ff9999","#ff6666","#ff3333","#ff0000"]' style="display:inline">
   </td>
</tr>
<tr>
   <td>
    <div data-type="label" class="cell top-space darker">mittags</div>
    <div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="darker tiny"></div></td>
    <td valign=top>
    <div data-type="symbol" data-icon="oa-weather_sunrise"></div>
    <span style="color:#aa6900"><div data-type="label" data-device="Sonnenaufgang" data-colors="black"></div></span>
    <div data-type="symbol" data-icon="oa-weather_sunset"></div>
    <span style="color:#aa6900"><div data-type="label" data-device="Sonnenuntergang" data-colors="black"></div></span></td>
  </tr>
<tr>
  <td>
    <div data-type="label" class="cell top-space darker">abends</div>
    <div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="darker tiny"></div></td>
  <td>
    <div data-type="image" data-device="SonneMond" data-get="Mondbild" class="darker tiny top-space"></div>
    <div data-type="label" data-get="SonneMond:MoonPhaseS" data-color="#8C8C8C"></div></td>
  <tr>
    <th colspan="2">
<a href="http://192.168.178.59:8083/fhem/www/tablet/wetter.html"><div data-type="label" class="cell top-space big darker">Mehr Wetter</div></a>
    </th>
  </tr>
</tr>
</table>

Damit die "ganze <seite" weiß ist habe ich im Bereich Body noch folgende Zeile stehen:
<style> body  {background-color: #ffffff;}</style>
Hiermit wird die ganze Seite gesteuert. Oben in der Tabelle Menu, gibt es diese Formatierung auch. Hier könntest du dem Menu separat eine andere Hintergrungfarbe geben.

Wenn du weitere Fragen, dann kannst du sie gerne stellen

[Dune71]

Guten Morgen Kuehnhackel,
ich fange gerade an mich mit dem Tablet UI zu beschäftigen.
Die Analoguhr gefällt mir und ich habe den Code der Analoguhr in das Tablet UI eingefügt, aber es kommt nur "File not found:./www/tablet//niceclocks.svg
Was muss ich noch machen, damit die Uhr angezeigt wird?

Gruß vom Anfänger

[Helmi55]

Hallo Kuehnhackel
herzlichen Dank und sorry für die späte Rückmeldung. Bei Bedarf melde ich mich gerne.

@Dune71
hast du in www/tablet/lib die Datei analogclock.js ?
Gruß
helmut

[Dune71]

@Kuehnhackel. Nein, diese Datei habe ich nicht.

[Dune71]

Was muss ich den installieren, damit ich die Datei dorthin bekomme?

[Helmi55]

Servus
du benötigst die Datei widget_analogclock.js und analogclock.js.
In die entsprechenden Verzeichnisse kopieren:
www/tablet/lib.   —>. analogclock.js
www/tablet/js    —> widget_analogclock.js

Ich hab sie zur Sicherheit angehängt
Ich habs in der Index.html so eingefügt

Code Auswählen Erweitern

<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="8">
                <header>Nav</header>
                <div class="sheet">
                    <div class="row">
                    <div class="cell">
                   
                    <div data-type="analogclock">
                   
</div>

                       
<div style="color:#f7a816"
<div data-type="clock"
data-format="D d.m"
data-interval="100"
class="darker big">
</div>
                            <div data-type="pagebutton" data-url="#1_start.html" data-load="#1_start-content" data-active-pattern="(.*/||.*index.html||.*#1_start.html)" data-icon="fa-home" class="default top-space"></div>
                            <div data-type="pagebutton" data-url="#1_beleuchtung.html" data-load="#1_beleuchtung-content" data-active-pattern=".*#1_beleuchtung.html" data-icon="fa-lightbulb" class="top-space"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="2" data-sizex="9" data-sizey="10">
                <div class="page" id="1_start-content"></div>
                <div class="page" id="1_beleuchtung-content"></div>
            </li>
        </ul>
    </div>
</body>
</html>

und sieht so aus:

Viel Spaß Helmut

[Dune71]

Moin,
wenn ich die Dateien mit Filezilla übertragen möchte kommt immer diese Fehlermeldung.

Befehl:         cd "/opt/fhem/www/tablet/js"
Antwort:       New directory is: "/opt/fhem/www/tablet/js"
Befehl:         put "/Users/dirkuschkamp/Downloads/widget_analogclock.js" "widget_analogclock.js"
Fehler:         /opt/fhem/www/tablet/js/widget_analogclock.js: open for write: permission denied
Fehler:         Dateiübertragung fehlgeschlagen
Status:         Starte Upload von /Users/dirkuschkamp/Downloads/widget_analogclock.js
Status:         Empfange Verzeichnisinhalt für "/opt/fhem/www/tablet/js"...
Status:         Listing directory /opt/fhem/www/tablet/js
Befehl:         put "/Users/dirkuschkamp/Downloads/widget_analogclock.js" "widget_analogclock.js"
Fehler:         /opt/fhem/www/tablet/js/widget_analogclock.js: open for write: permission denied
Fehler:         Dateiübertragung fehlgeschlagen
Status:         Starte Upload von /Users/dirkuschkamp/Downloads/widget_analogclock.js
Status:         Empfange Verzeichnisinhalt für "/opt/fhem/www/tablet/js"...
Status:         Listing directory /opt/fhem/www/tablet/js
Befehl:         put "/Users/dirkuschkamp/Downloads/widget_analogclock.js" "widget_analogclock.js"
Fehler:         /opt/fhem/www/tablet/js/widget_analogclock.js: open for write: permission denied
Fehler:         Dateiübertragung fehlgeschlagen
Status:         Empfange Verzeichnisinhalt für "/opt/fhem/www/tablet/js"...
Status:         Listing directory /opt/fhem/www/tablet/js
Status:         Anzeigen des Verzeichnisinhalts für "/opt/fhem/www/tablet/js" abgeschlossen

Die Rechte für den Ordner stehen auf 755.

Will ich die Rechte auf 777 ändern kommt diese Meldung.

Status:         Berechtigungen für '/opt/fhem/www/tablet/js' werden auf '755' gesetzt
Status:         Empfange Verzeichnisinhalt für "/opt/fhem/www/tablet"...
Status:         Listing directory /opt/fhem/www/tablet
Status:         Anzeigen des Verzeichnisinhalts für "/opt/fhem/www/tablet" abgeschlossen
Status:         Empfange Verzeichnisinhalt für "/opt/fhem/www"...
Status:         Anzeigen des Verzeichnisinhalts für "/opt/fhem/www" abgeschlossen
Status:         Berechtigungen für '/opt/fhem/www/tablet' werden auf '777' gesetzt
Status:         Empfange Verzeichnisinhalt für "/opt/fhem/www"...
Status:         Listing directory /opt/fhem/www
Status:         Anzeigen des Verzeichnisinhalts für "/opt/fhem/www" abgeschlossen
Status:         Berechtigungen für '/opt/fhem/www/tablet/js' werden auf '777' gesetzt
Befehl:         cd "/opt/fhem/www/tablet"
Antwort:       New directory is: "/opt/fhem/www/tablet"
Befehl:         chmod 777 "js"
Fehler:         set attrs for /opt/fhem/www/tablet/js: permission denied
Status:         Empfange Verzeichnisinhalt für "/opt/fhem/www/tablet"...
Status:         Listing directory /opt/fhem/www/tablet
Status:         Anzeigen des Verzeichnisinhalts für "/opt/fhem/www/tablet" abgeschlossen

Wenn ich die .html-Dateien für das Tablet-UI verschiebe funktioniert das.
Habt ihr einen Löungsansatz?
Danke und Gruß

[amenomade]

Das steht geschrieben: der user, mit wem Filezilla sich verbindet, hat weder die Rechte zu schreiben, noch die Rechte um die Rechte zu ändern.