widget_weatherdetail.js

[ulobo60]

@Thorsten Pferdekaemper:
...nix mit "in den nächsten 2 Wochen"...
Habe mich heute Abend mal rangesetzt und mich am Thema "FTUI-only" versucht.
Erstes Ergebnis: Donnerwetter, sieht schon richtig gut aus + funktioniert von der Technik her !!!
- siehe Anhang: screenshot1.jpg -

Was ich gemacht habe:
(FHEM und FTUI laufen auf raspberry3)

1) Download der Datei 'widget_weatherdetail.js' von Deinem GitHub und Kopieren der Datei nach /opt/fhem/www/tablet_prod/js
(der FTUI-Ordner heißt bei mir nicht 'tablet' sondern 'tablet_prod')
Anschließend Rechte und Besitzer/Gruppe der Datei angepaßt.

2) Die hier im Forumsbeitrag aufgeführten CSS-Facts ans Ende meiner persönlichen CSS-Datei 'lobo60.css' eingefügt.

3) HTML-Datei erstellt gemäß Vorgaben hier im Thread.

Das Ergebnis finde ich schon mal richtig klasse! Ein Klick auf die obigen Tage wechselt auch sauber die Detail-Infos zum jeweiligen Tag.
Es sind also nur noch CSS-Optimierungen zu erledigen.
Für meine anderen 7 FHEM-Seiten hatte ich schon ordentlich die Standard-CSSs geändert.
Habe aber für die bereits existierenden CSS-Tags neue Namen gebildet und diese in den HTMLs verwendet.

Folgende Darstellungs-Änderungen fände ich noch gut:
a) Die 4 Tagesfelder oben dunkel unterlegt
b) Den angeklickten Tages-Tab umranden wie von Dir vorgesehen
c) Die unteren Zahlenwerte (und die Wettersybole unten links, senkrecht) ca. doppelt so groß.

Ich habe keinen blassen Schimmer, wo ich da bzgl. der Optimierung ansetzen kann.
Es wäre toll, wenn Du nen Tipp zu meinen obigen CSS-Optimierungswünschen für mich hättest.

Auf jeden Fall: ich ziehe den Hut vor Deiner Arbeit.
Gruß Ulf

[curt]

OT

Erstes Ergebnis: Donnerwetter, sieht schon richtig gut aus

Finde ich ganz und gar nicht. Das sieht recht übel aus.
.
.
... also das Wetter bei Dir.

[ulobo60]

@curt:

[Thorsten Pferdekaemper]

Ich habe keinen blassen Schimmer, wo ich da bzgl. der Optimierung ansetzen kann.
Es wäre toll, wenn Du nen Tipp zu meinen obigen CSS-Optimierungswünschen für mich hättest.

Ja, wie ich schon in meiner ersten Antwort zu Deiner Frage geschrieben habe: Es gibt noch eine widget_weatherdetail.css.
Gruß,
   Thorsten

[ulobo60]

@Thorsten:
Äheeeem, Yepp... - Du hast ja so Recht 
Das alte Spiel: Wer lesen kann, ist echt im Vorteil !
Habe nun Deine 'widget_weatherdetail.css' eingearbeitet und mit den CSS-Tags etwas rumgespielt (siehe screenshot1.jpg).
Ergebnis: Boooaaahhh eeeyyyy ...

Thorsten, nochmal thx a lot für Deine professionelle Arbeit.
curt: es sieht leider immer noch übel aus - das Wetter.
Bruchbude: danke vielmals für Deinen kreativen Ansatz und den Einstieg in dieses Thema

Grüße
Ulf

[Octopus180]

Hallo ulobo60,

Sieht echt gut aus was du dort hinbekommen hast. Wäre es möglich es ein wenig genauer zu erklären wie du es hinbekommen hast?
Als Anfänger verstehe ich leider nicht genau, was du wie und wo gemacht hast.

Gruß Peter

[Thorsten Pferdekaemper]

Sieht echt gut aus was du dort hinbekommen hast. Wäre es möglich es ein wenig genauer zu erklären wie du es hinbekommen hast?
Als Anfänger verstehe ich leider nicht genau, was du wie und wo gemacht hast.

Hast Du schonmal FUIP ausprobiert? Da geht das mit ein paar Mausklicks.
Gruß,
   Thorsten

[Octopus180]

Hallo Thorsten,

Ja habe ich, doch dort gibt es noch ein paar Sachen die mir nicht so gefallen. Ich bin nur noch nicht dazu gekommen sie mal aufzugliedern und dich zu fragen ob man es ändern kann. Ich glaube es wären auch zu viele Änderungen die ich mir wünschen würde. Wobei ich sagen muss das du damit wirklich eine tolle Leistung rüber bringst und es , so glaube ich , es eine Unverschämtheit von mir wäre so viele Änderungswünsche anzubringen.

Gruß Peter

[ulobo60]

@Octopus180:
Mir ist hier in den FHEM-Foren schon so viel geholfen worden - es ist mal an der Zeit, dass ich etwas zurück gebe.
Ich werde also versuchen, Dir hier eine schrittweise Anleitung mit Datei-Beispielen (.html, .css) zu geben, die Dir meine Erstellung der Proplanta-Wettervorhersage fürs FTUI erklären soll.
Ich brauche dafür allerdings so 1 - 2 Stunden um die einzelnen Steps nachzuvollziehen. Ich versuche mal, die Anleitung heute Abend/Nacht noch fertig zu stellen.
Bis später,
Ulf

[ulobo60]

@Octopus180:

ANLEITUNG PROPLANTA-WETTERVORHERSAGE

Du benötigst folgende Dateien in den aufgeführten Dateipfaden:

a) /opt/fhem/FHEM/59_PROPLANTA.pm
Wenn Dein FHEM auf dem aktuellen Update-Stand ist, brauchst Du hier nichts zu machen.

b) /opt/fhem/www/tablet/wetter.html
Meine 'wetter.html' fürs FTUI:

Code Auswählen Erweitern


<html>
<title>FHEM</title>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * Proplanta-Wettervorhersage
     * -->

</head>
<body>
<div class="page" id="content_proplaview">
<div class="gridster">
<ul>
<!-- ======================================================================================== -->
<!-- Wettervorschau -->
<!-- ======================================================================================== -->
<li data-col="1" data-row="1" data-sizex="13" data-sizey="10">
<div class="cell" data-type="weatherdetail" data-device="proplanta60" data-detail='["clock","chOfRain","rain","temp","weather","wind"]'></div>
</li>

</ul>
</div>
</div>
</body>
</html>


Anmerkung:
Ich nutze im FTUI ein Menüsystem mit derzeit 8 Darstellungsseiten. Diese 'wetter.html' wird bei mir von der 'index.html' aus durch Klick auf den 2. Menübutton aufgerufen (siehe auch die hier angehängte Datei 'proplanta_wettervorhersage_ftui.jpg')
Wenn Du nur testen möchtest (= FTUI mit nur 1 Seite), dann kopiere alles aus der 'wetter.html', das zwischen <body> und </body> steht in Deine 'index.html' an dieselbe Stelle.
Hinweis: Du hast sicher schon ein Proplanta-Device im FHEM eingerichtet. Bei mir heißt der Proplanta-Device 'proplanta60'. Setzte also Deinen Device-Namen für proplanta60 ein.

c) /opt/fhem/www/tablet/js/widget_weatherdetail.js
Diese Datei bekommst Du über das Github von Thorsten Pferdekaemper.
Der Link darauf steht in diesem Forenthread auf Seite-3, 2. Beitrag von oben:
https://github.com/ThorstenPferdekaemper/FHEM-FUIP/blob/master/FHEM/lib/FUIP/js/widget_weatherdetail.js
Lade diese Datei in den obigen 'js'-Ordner hoch (Achtung: auf korrekte Rechte-Zuordnung und Besitzer/Gruppe achten)
Ich selbst habe in Thorstens GitHub den Dateiinhalt mit STRG+C kopiert und in eine leere Textdatei eingefügt. Die Textdatei wurde mit dem Namen 'widget_weatherdetail.js' auf meinem Windows-PC gespeichert. Dann hochgeladen in mein (raspberry-) Verzeichnis 'backup'. Dann von dort mit dem Programm 'Putty' und mit sudo... nach /opt/fhem/www/tablet/js/ kopiert. Zuletzt noch mit Putty und den entsprechenden Befehlen die korrekten Rechte sowie Besitzer/Gruppe gesetzt.

d) widget_weatherdetail.css
Diese Datei bekommst Du ebenfalls über das Github von Thorsten Pferdekaemper:
https://github.com/ThorstenPferdekaemper/FHEM-FUIP/blob/master/FHEM/lib/FUIP/css/widget_weatherdetail.css
Da ich eine spezielle CSS-Datei verwende mit meinen persönlichen CSS-Tags, habe ich die Inhalte von Thorstens CSS-Datei einfach kopiert und am Ende meiner CSS eingefügt. Letztlich habe ich noch einpaar kleine Änderungen hinsichtlich Schriftgrößen und Padding gemacht.
Die CSS-Dateien fürs FTUI liegen im Ordner '/opt/fhem/www/tablet/css/'.
Wenn Du nur testest mit nur 1 FTUI-Seite, stelle Dir eine Datei (wie unter c) beschrieben) her, gib ihr den Namen 'widget_weatherdetail.css' und kopiere diese Datei in den css-Ordner. Anschließend füge im Kopfbereich zwischen <head> und </head> Deiner index.html - Seite folgendes ein:
<link rel="stylesheet" href="widget_weatherdetail.css" />

So, das müsste es gewesen sein! Hoffe ich! Viel Erfolg.
Wenn Du Fragen hast, melde Dich bitte hier im Forum.
Gut's Nächtle,
Ulf

[Thorsten Pferdekaemper]

Ja habe ich, doch dort gibt es noch ein paar Sachen die mir nicht so gefallen. Ich bin nur noch nicht dazu gekommen sie mal aufzugliedern und dich zu fragen ob man es ändern kann. Ich glaube es wären auch zu viele Änderungen die ich mir wünschen würde. Wobei ich sagen muss das du damit wirklich eine tolle Leistung rüber bringst und es , so glaube ich , es eine Unverschämtheit von mir wäre so viele Änderungswünsche anzubringen.

Vielleicht sind ja ein paar gute Ideen dabei, die vielleicht gar nicht so schwierig umzusetzen sind. Möglicherweise geht auch einiges davon jetzt schon. ...und solange Du nicht erwartest, dass ich auch wirklich alles mache, kannst Du Deine Unverschämtheiten ruhig aufschreiben. (Das sollte man jetzt besser nicht aus dem Kontext reißen.) Also ruhig her damit, aber bitte in einem eigenen Thread.
Gruß,
   Thorsten

[no_Legend]

Hi,

mal ne frage ist das widget nun offizieller Bestandteil von FTUI?

Im Wiki steht es unter integrierte Widgets aber im JS order ist bei mir auf den ersten blick nicht drin


Gruß Robert

[Thorsten Pferdekaemper]

mal ne frage ist das widget nun offizieller Bestandteil von FTUI?

Meiner Meinung nach nicht. Ich habe es daher in FUIP übernommen und ein bisschen "hochgepäppelt". 
Wenn Du kein FUIP verwendest, dann siehe den Beitrag von ulobo60 vom 25 Januar 2019.
...oder Du versuchst es mal mit FUIP, dann sind es nur ein paar Klicks.
Gruß,
   Thorsten

[no_Legend]

Meiner Meinung nach nicht. Ich habe es daher in FUIP übernommen und ein bisschen "hochgepäppelt". 
Wenn Du kein FUIP verwendest, dann siehe den Beitrag von ulobo60 vom 25 Januar 2019.
...oder Du versuchst es mal mit FUIP, dann sind es nur ein paar Klicks.
Gruß,
   Thorsten

Hallo Thorsten,

ich hab es nun auch auf diese weise eingebunden.

Nur wie gesagt es steht so im wiki unter:
Integrierte Widgets
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.
Im wiki steht dann ACHTUNG: gebt mir ein paar tage um die seite zu erstellen. habe die übliche ausrede: real life job


Gruß Robert

[Thorsten Pferdekaemper]

Hi,
ich weiß, aber da sehe ich mich nicht in der Pflicht. Wenn es Dich stört, dann kannst Du es ja ändern. Es ist ein Wiki...
Gruß,
   Thorsten