[FHEM-Tablet-UI] User-Demos

[h3llsp4wn]

Hi,

mein Kalender sieht aktuell so aus - ist noch in Arbeit. Ich habe dazu aber ein bisschen umgebaut und nutze im Hintergrund Baikal als Kalender. Da Baikal in der 1er Version noch kein JSON Export hat, und ich die 2er auf dem Raspberry nicht ans laufen bekommen habe, habe ich denk Baikal Kalender in FHEM eingebunden. Für die Darstellung nutze ich fullcalendar.io (Website). Dem habe ich in meinem Tempalate einen DIV gegönnt und ihn dann eingebaut. Damit das funktioniert, habe die das Kalender-Modul von FHEM um eine rudimentäre JSON Ausgabefunktion ergänzt - damit wird dann der Kalender gefüttert.

Wer z.B. Google Calendar benutzt, kann natürlich direkt mit dem fullcalendar darauf zugreifen.

Ich finde die Kalenderdarstellung irgendwie besser als eine Liste. Ich habe auch noch CalDavZAP installiert und per iframe eingebunden, war mir dann aber für die "einfache" Darstellung etwas überdimensioniert.

Das Buttonlayout und die Darstellung werde ich noch etwas anhübschen - und dann auch hier noch den Abfallkalender, etc. einbauen,
wenn ich Zeit finde.

Ist ja nur 'ne Anregung ...


Cheers,

h3ll

[setstate]

Sieht gut aus! Mir gefällt auch deine Farbgestalltung sehr gut.
Kann man das als ftui_widget bauen, also dein Kalender innerhalb eines Widgets laden, initialisieren und updaten? Oder hast du das gar schon so gebaut?

[skuggy]

@Sam05
Welche Heizung hast du? Und wie kommst du an den Ölverbrauch ran?


@Baldure
Hi ich habe eine Ölheizung und habe mir eine Brenner-Überwachung mit einem HM-IO-Sender eingebaut. Damit kann ich die Brenner Laufzeiten mitschreiben und anhand meinem Durchsatz an der Brennerdüse den Verbrauch errechnen. Außerdem überwache ich meinen Öltank mit Ultraschall und kann so den Füllstand (etwas ungenau) mit loggen.
Habe das aber nicht selber erfunden,. Hier ein Link dazu. http://www.fhemwiki.de/wiki/%C3%96lverbrauchsanzeige_/_Betriebsstundenz%C3%A4hler
Der Aufwand für den Trigger um die Heizung im Chartfrontend sauber anzuzeigen ist aber schon etwas groß. Gibt es denn da keine andere Möglichkeit ?. Wird an dem Chart noch weiter verbessert/optimiert ?
Ich habe da ja auch noch das Thema das meine Achsenbeschriftungen nicht angezeigt werden.
Ansonsten ist das Teil ja voll super gut und es wäre Cool wenn es weiter gepflegt werden würde.

Hallo @Sam50 ,

was für eine HM- Komponete hast du dafür genommen und wie hast  du es an den Brenner angeschlossen?

[kvo1]

Hallo,

ich bin gerade dabei, unsere Kalender in FTUI zu visualisieren.
Irgendwie bin ich mit meiner Lösung (siehe Anhang) überhaupt nicht zufrieden, aber mir kommen auch keine besseren Ideen.

Wie habt ihr eure Kalender-Anzeige gelöst?
Könnt ihr Beispiele posten?

Vielen Dank für eure Anregungen...!

Grüße
Jens

ich habe 3 Kalender (Kal1 / Kal2 / Kal 3) mit CALVIEW zusammen gefaßt und rauf setzt diese FTUI auf......


<li data-row="1" data-col="2" data-sizex="6" data-sizey="7" class="semitransparent">
   <header style="color:red">T E R M I N L I S T E   -   B E I S P I E L 2</header>
   <div class="cell left-align" style="color:#AA6900">
      <div style="font-weight: bold; text-decoration: underline;" class="darker">Erstellt:
      <div data-type="clock" data-format="j. F" interval="60000" style="font-weight: bold; text-decoration: underline;" class="inline darker"></div>
      </div>
   <table border="0px" width="100%">
      <tr>
             <td><div data-type="label" data-device="vocalview2" data-get="t_001_bdate" style="color:white" class="left"></div> </td>
             <td><div data-type="label" data-device="vocalview2" data-get="t_001_btime" style="color:white" class="left"></div> </td>
          <td><div data-type="label" data-device="vocalview2" data-get="t_001_edate" style="color:white" class="left"></div> </td>
             <td><div data-type="label" data-device="vocalview2" data-get="t_001_etime" style="color:white" class="left"></div> </td>
          <td><div data-type="label" data-device="vocalview2" data-get="t_001_summary" style="color:white" class="left"></div> </td>
             <td><div data-type="symbol" data-device="vocalview2"
            data-get="t_001_source"
            data-icons='["fa-female","fa-male","fa-users"]'
            data-get-on='["Kal1","Kal2","Kal3"]'
            data-on-colors='["red","blue","green"]' class="left"></div> </td>
        </tr>
        <tr>
             <td><div data-type="label" data-device="vocalview2" data-get="t_002_bdate" style="color:white" class="left"></div> </td>
             <td><div data-type="label" data-device="vocalview2" data-get="t_002_btime" style="color:white" class="left"></div> </td>
          <td><div data-type="label" data-device="vocalview2" data-get="t_002_edate" style="color:white" class="left"></div> </td>
             <td><div data-type="label" data-device="vocalview2" data-get="t_002_etime" style="color:white" class="left"></div> </td>
          <td><div data-type="label" data-device="vocalview2" data-get="t_002_summary" style="color:white" class="left"></div> </td>
             <td><div data-type="symbol" data-device="vocalview2"
            data-get="t_002_source"
            data-icons='["fa-female","fa-male","fa-users"]'
            data-get-on='["Kal1","Kal2","Kal3"]'
            data-on-colors='["red","blue","green"]' class="left"></div> </td>
        </tr>
      <tr>
             <td><div data-type="label" data-device="vocalview2" data-get="t_003_bdate" style="color:white" class="left"></div> </td>
             <td><div data-type="label" data-device="vocalview2" data-get="t_003_btime" style="color:white" class="left"></div> </td>
          <td><div data-type="label" data-device="vocalview2" data-get="t_003_edate" style="color:white" class="left"></div> </td>
             <td><div data-type="label" data-device="vocalview2" data-get="t_003_etime" style="color:white" class="left"></div> </td>
          <td><div data-type="label" data-device="vocalview2" data-get="t_003_summary" style="color:white" class="left"></div> </td>
             <td><div data-type="symbol" data-device="vocalview2"
            data-get="t_003_source"
            data-icons='["fa-female","fa-male","fa-users"]'
            data-get-on='["Kal1","Kal2","Kal3"]'
            data-on-colors='["red","blue","green"]' class="left"></div> </td>
        </tr>
      <tr>
             <td><div data-type="label" data-device="vocalview2" data-get="t_004_bdate" style="color:white" class="left"></div> </td>
             <td><div data-type="label" data-device="vocalview2" data-get="t_004_btime" style="color:white" class="left"></div> </td>
          <td><div data-type="label" data-device="vocalview2" data-get="t_004_edate" style="color:white" class="left"></div> </td>
             <td><div data-type="label" data-device="vocalview2" data-get="t_004_etime" style="color:white" class="left"></div> </td>
          <td><div data-type="label" data-device="vocalview2" data-get="t_004_summary" style="color:white" class="left"></div> </td>
             <td><div data-type="symbol" data-device="vocalview2"
            data-get="t_004_source"
            data-icons='["fa-female","fa-male","fa-users"]'
            data-get-on='["Kal1","Kal2","Kal3"]'
            data-on-colors='["red","blue","green"]' class="left"></div> </td>
        </tr>
   </table>
      
   </div>
</li>

[CoolTux]

Hi,

mein Kalender sieht aktuell so aus - ist noch in Arbeit. Ich habe dazu aber ein bisschen umgebaut und nutze im Hintergrund Baikal als Kalender. Da Baikal in der 1er Version noch kein JSON Export hat, und ich die 2er auf dem Raspberry nicht ans laufen bekommen habe, habe ich denk Baikal Kalender in FHEM eingebunden. Für die Darstellung nutze ich fullcalendar.io (Website). Dem habe ich in meinem Tempalate einen DIV gegönnt und ihn dann eingebaut. Damit das funktioniert, habe die das Kalender-Modul von FHEM um eine rudimentäre JSON Ausgabefunktion ergänzt - damit wird dann der Kalender gefüttert.

Wer z.B. Google Calendar benutzt, kann natürlich direkt mit dem fullcalendar darauf zugreifen.

Ich finde die Kalenderdarstellung irgendwie besser als eine Liste. Ich habe auch noch CalDavZAP installiert und per iframe eingebunden, war mir dann aber für die "einfache" Darstellung etwas überdimensioniert.

Das Buttonlayout und die Darstellung werde ich noch etwas anhübschen - und dann auch hier noch den Abfallkalender, etc. einbauen,
wenn ich Zeit finde.

Ist ja nur 'ne Anregung ...


Cheers,

h3ll

Hallo,

Wie hast Du Deine Ecken vom Gridster so schön rund bekommen?



Grüße

[josburg]

ich habe 3 Kalender (Kal1 / Kal2 / Kal 3) mit CALVIEW zusammen gefaßt und rauf setzt diese FTUI auf......

Hast Du davon zufällig ein Screenshot?

Viele Grüße
Jens

[kvo1]

Hast Du davon zufällig ein Screenshot?

Viele Grüße
Jens

bitte sehr ..

[h3llsp4wn]

Hallo,

Wie hast Du Deine Ecken vom Gridster so schön rund bekommen?

Grüße

@CoolTux: Habe dem gridster einen Radius verpasst 

.gridster ul li {
    ...
    border-radius:8px;
    ...
}

Sieht gut aus! Mir gefällt auch deine Farbgestalltung sehr gut.
Kann man das als ftui_widget bauen, also dein Kalender innerhalb eines Widgets laden, initialisieren und updaten? Oder hast du das gar schon so gebaut?

Danke - Ich habe das auch überlegt, dann aber aus Zeitgründen verworfen - auch wollte ich da nicht was reinfummeln, was Du ggf. ganz anders gelöst hättest
oder hättest haben wollen - zumal ich schon lange nicht mehr in den tiefen des JS unterwegs gewesen bin. Wie ich verstanden habe, müsste die widget_widget Klasse
um ein eigenes Kalender-Widget erweitert werden und mindestens mit init und update Methoden versehen werden, richtig? Fraglich wäre dann auch, was alles von der
Parametrierung aus dem fullcalender über das Widget realisiert werden soll (das ist 'ne ganze Menge, wenn man einfach alles durchreicht).

Dann wäre auch noch zu prüfen/klären, ob die Schnittstelle nach außen einfach eine URL ist (die JSON liefert) - das würde dann aktuell wohl nicht für FHEM Kalender ausreichen.
Man könnten natürlich auch per JS aus dem FHEM Result ein JSON für den fullcalender bauen. Ich bin da aber eher ein Freud davon die Daten direkt bei der Entstehung richtig zu
schicken. Letztlich aber auch machbar.

Wenn Du mir zu einem guten "Widget"-Beispiel raten kannst, würde ich mich evtl. durchbeißen und schauen was geht. Will aber nicht zu viel versprechen, ggf. scheitert es an meinen Fähigkeiten
und/oder auch an der Zeit. Schick' wäre es schon, hab ja auch damit angefangen, weil ich nichts Schönes hatte  ... aber wenn da ggf. dann auch noch Pflege von Terminen über die Oberfläche
dazu kommen sollte, dann müsste man sich ggf. noch was einfallen lassen oder einen anderen Weg gehen.

Cheers,

h3ll

[CoolTux]

Cool. Danke

[Conti]

Hallo zusammen
lese schon eine Zeitlang mit und bin mich am einarbeiten.
Kann mir jemand den Tip geben, welches Widget ich nehmen kann wenn ich aus einem modbusRegister meiner Solaranlage die momentane Produktion auf einer Analoganzeige (Uhr) darstellen möchte?

Grüsse
Conti

[HoTi]

Hi,

mein Kalender sieht aktuell so aus - ist noch in Arbeit. Ich habe dazu aber ein bisschen umgebaut und nutze im Hintergrund Baikal als Kalender. Da Baikal in der 1er Version noch kein JSON Export hat, und ich die 2er auf dem Raspberry nicht ans laufen bekommen habe, habe ich denk Baikal Kalender in FHEM eingebunden. Für die Darstellung nutze ich fullcalendar.io (Website). Dem habe ich in meinem Tempalate einen DIV gegönnt und ihn dann eingebaut. Damit das funktioniert, habe die das Kalender-Modul von FHEM um eine rudimentäre JSON Ausgabefunktion ergänzt - damit wird dann der Kalender gefüttert.

Wer z.B. Google Calendar benutzt, kann natürlich direkt mit dem fullcalendar darauf zugreifen.

Ich finde die Kalenderdarstellung irgendwie besser als eine Liste. Ich habe auch noch CalDavZAP installiert und per iframe eingebunden, war mir dann aber für die "einfache" Darstellung etwas überdimensioniert.

Das Buttonlayout und die Darstellung werde ich noch etwas anhübschen - und dann auch hier noch den Abfallkalender, etc. einbauen,
wenn ich Zeit finde.

Ist ja nur 'ne Anregung ...


Cheers,

h3ll

Boa, wie geil. Würdest du deine HTML zur verfügung stellen. Deine Aufteilung, Farbgestalltung usw. sind ja total geil...

[h3llsp4wn]

Boa, wie geil. Würdest du deine HTML zur verfügung stellen. Deine Aufteilung, Farbgestalltung usw. sind ja total geil...

Ich räume noch ein bisschen auf und hänge die Tage ein Zip hier rein.

Sieht gut aus! Mir gefällt auch deine Farbgestalltung sehr gut.
Kann man das als ftui_widget bauen, also dein Kalender innerhalb eines Widgets laden, initialisieren und updaten? Oder hast du das gar schon so gebaut?

@setstate:
Nachtrag - habe mich da heute mal dran gemacht, also:

Laden/Init geht - werde hier noch die Parametrierung für den Kalender aus der Definition durchreichen und mit Defaultwerten belegen (zumindest die wichtigsten Funktionen), dies kann dann ggf. nach und nach erweitert/ergänzt werden.

Update geht auch - ist allerdings noch nicht sauber - da muss ich wohl noch am/im Umgang mit dem Device was anpassen. Damit wäre dann aber auch klar, dass das Device ein FHEM-Kalender sein soll, womit dann auch noch das Formatproblem geklärt werden müsste. Aktuell wird bei jedem Aufruf der Update Routine ein Update durchgeführt - ist das TabletUI Standard - die Debug-Ausgabe am Ende gibt ja immer nur ein Device aus, aber der Kalender wird immer mit aktualisiert (in der tablet ui
Update Routine beim Durchlauf der Devices).

Die sonstigen JS/CSS Dateien für den Kalender werden nur geladen, wenn er benutzt wird.

Falls ich nerve - einfach Bescheid geben, dann bastel ich erst mal im Kämmerlein weiter.


Cheers,

h3ll

[HoTi]

Falls ich nerve - einfach Bescheid geben, dann bastel ich erst mal im Kämmerlein weiter.

Ich kann mir nicht vorstellen das du jemanden damit nervst!! Sinnvoll dafür wäre aber ein eigenes Thema, damit sowas wichtiges nicht unter geht 

[h3llsp4wn]

Wenn ich eine lauffähige Version hab', die ich würdig erachte, mach ich zum Kalender einen neuen Thread auf (für Testing/Feedback) 

[HoTi]

Wenn ich eine lauffähige Version hab', die ich würdig erachte, mach ich zum Kalender einen neuen Thread auf (für Testing/Feedback) 

Die HTML nicht vergessen beim Programmieren.  Will gerade an meinem nicht weiter machen, weil ich glaube mit deinem Code nochmal komplett umzubauen