FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Vaddi am 14 September 2017, 15:05:27

Titel: Widget für PostMe
Beitrag von: Vaddi am 14 September 2017, 15:05:27
Hallo zusammen.

Ich war lange auf der Suche nach einer Möglichkeit, mir die Liste aus dem PostMe Device vernünftig auf dem
FTUI anzeigen zu lassen, allerdings habe ich nichts brauchbares gefunden.
Aus diesem Grund habe ich mich selbst dran getraut und möchte dies nun gerne mit euch teilen.

Jeder Eintrag in der Liste kann seperat über einen Button (siehe Bild unten) gelöscht werden.
Über ein entsprechndes Input-widget können neue Einträge leicht über das Tablet-UI hinzugefügt werden.
Wenn man dann das ganze noch mit Buttons verfeinert, kann man sich vom Tablet-UI die Liste direkt
aufs Handy schicken, bevor man einkaufen geht.

Folgende data- Erweiterungen gibt es (bisher)

type                    Natürlich der Name vom Widget
deviceDer Name vom Device
listDer Name der entsprechenden Liste (z.B. Einkaufsliste, Baumarktliste)
heightDie Höhe der Anzeige. Sollte die Liste länger sein, als die definierte Höhe, erscheint eine scrollbar

Anbei noch 2 Beispiele

<div data-type="postme" data-list="Einkaufsliste" data-device="PostIt" data-height="200px"></div>

<div data-type="input" data-device="PostIt" data-set="add Einkaufsliste" data-get="" data-value="" class="w3x inline"></div>

<div data-type="link" class="round inline" data-color="#1D1F20" onclick="ftui.setFhemStatus('get PostIt message Einkaufsliste')" data-border-color="grey" data-background-color="grey" data-icon="fa-paper-plane-o">Liste senden</div>


<div data-type="postme" data-list="Baumarktliste" data-device="PostIt" data-height="200px"></div>
<div data-type="link" class="round inline" data-color="#1D1F20" onclick="ftui.setFhemStatus('set PostIt clear Baumarktliste')" data-border-color="grey" data-background-color="grey" data-icon="fa-times">Liste löschen</div>
<div data-type="input" data-device="PostIt" data-set="add Baumarktliste" data-get="" data-value="" class="w3x inline"></div>

<div data-type="link" class="round inline" data-color="#1D1F20" onclick="ftui.setFhemStatus('get PostIt message Baumarktliste')" data-border-color="grey" data-background-color="grey" data-icon="fa-paper-plane-o">Liste senden</div>    

EDIT
Bei der widget_postme_2.js wird kein Text ausgegeben, wenn keine Elemente vorhanden sind.
Solltet ihr diese Version nehmen, bitte nach dem Download umbenennen in widget_postme.js
Titel: Antw:Widget für PostMe
Beitrag von: ToM_ToM am 25 November 2017, 21:01:09
Hey, finde ich ziemlich cool :)

Könntest du das noch ins Wiki mit aufnehmen?
Im Prinzip sagt ja deine Beschreibung unten schon alles.

https://wiki.fhem.de/wiki/FHEM_Tablet_UI

VG, Thomas
Titel: Antw:Widget für PostMe
Beitrag von: Fixel2012 am 25 November 2017, 21:10:23
Ist das nicht besser hier  (https://wiki.fhem.de/wiki/Modul_PostMe)aufbewahrt?

Zumindest sollte darauf hingewiesen werden.
Titel: Antw:Widget für PostMe
Beitrag von: ToM_ToM am 25 November 2017, 21:25:41
Naja dort könnte man auf jeden Fall auch darauf hinweisen.

Ich weiß nicht wie es anderen geht, aber wenn ich was zur FTUI nachlesen will, gehe ich immer auf den von mir genannten Link zur Hauptseite.
Dort hast du ja alle Widgets von setstate mit ausführlicher Funktionsbeschreibung aufgelistet, sowie auch alle 3rd Party Widgets inkl. Link zur Beschreibung (sofern eingetragen/vorhanden).
Es gibt mittlerweile viele neue Widgets und man verliert schnell den Überblick und entwickelt dann womöglich etwas was es schon gibt. :)
Daher wäre cool wenn du es dort mit unterbringst.

VG, Thomas
Titel: Antw:Widget für PostMe
Beitrag von: ToM_ToM am 29 November 2017, 21:37:41
Hey Vaddi,

ich habe das Widget jetzt ein wenig im Einsatz getestet und mir ist noch etwas aufgefallen.
Das Widget mit der Einkaufsliste ist bei mir auf einer Unterseite "Küche". Wenn ich die Seite das erste Mal öffen, sagt er mir immer dass keine Einträge vorhanden sind.
Erst wenn ich dann die Seite wechsel und nochmal drauf gehe, bekomme ich die Einträge angezeigt.

Könntest du dir das mal anschauen? Evtl. passt da die Reihenfolge des Auslesens und Aktualisieren nicht.

VG, Thomas
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 16 Dezember 2017, 21:51:00
Hallo ToM_ToM.
Tut mir leid, dass ich mich jetzt erst melde, war längere Zeit nicht hier im Forum unterwegs.
Ich schaue mir das gerne mal an, ich wäre dir allerdings dankbar, wenn du mir deine
html Dateien zukommen lassen würdest. Hauptseite, Unterseite Küche und eine Unterseite zum wechseln
sollten reichen. Somit kann ich dem Problem besser auf den Grund gehen, bin immerhin ein absoluter
Anfänger was die Widgetprogrammierung angeht :)
Titel: Antw:Widget für PostMe
Beitrag von: ToM_ToM am 07 Januar 2018, 17:22:59
Hallo Vaddi,

ich hatte mich bisher noch nicht gemeldet, da das Problem irgendwie verschwunden ist. :)
Ist auch in den letzten Wochen nicht mehr aufgetaucht.

VG, Thomas
Titel: Antw:Widget für PostMe
Beitrag von: Fixel2012 am 11 Januar 2018, 12:14:40
Hi,

habe mich auch mal dem Modul zu gewandt und auch mit dem widget schön alles eingerichtet.

Mir ist dabei aufgefallen, dass sobald man das geschriebene in die Liste übernimmt, anschließend leider immer noch in der Textbox steht.

Das ist ziemlich nervig, wenn man mal schnell mehrere Artikel in seine Einkaufsliste übernehmen will.

Gibt es eine Möglichkeit diese Box zu clearen, sobald der Inhalt in die Liste übernommen wurde? Blicke bei dem JS Code nicht so ganz durch  ::) :-\

Gruß,

Fixel

EDIT: Habe mir nochmal den Code angeschaut. Es wird zur eingabe das Widget input genutzt. Hat also nicht mal etwas mit JS zu tun.

Hab hier  (https://forum.fhem.de/index.php/topic,65419.0.html)in einem Thread nochmal nachgefragt, ob es möglich ist.
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 13 Januar 2018, 22:02:00
Hey, ich hatte das gleiche Problem, und hab mein Inputwidget bearbeitet, sodass dieses
nach der Übernahme geleert wird.
Du kannst auch mehrere Sachen durch ein Komma getrennt zur Liste hinzufügen.
Titel: Antw:Widget für PostMe
Beitrag von: Fixel2012 am 13 Januar 2018, 22:11:17
Hey, ich hatte das gleiche Problem, und hab mein Inputwidget bearbeitet, sodass dieses
nach der Übernahme geleert wird.
Du kannst auch mehrere Sachen durch ein Komma getrennt zur Liste hinzufügen.

Hey Super!

Kannst du die Änderungen beschreiben oder gleich die ganze Datei anhängen?
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 13 Januar 2018, 22:47:46
Hey, solange setstate das Feature noch nicht eingebaut hat,
kannst du in der widget_input.js unter Zeile 59 folgendes einfügen

         elem.find('.textinput').val("");

Gruß
Vaddi
Titel: Antw:Widget für PostMe
Beitrag von: setstate am 18 Januar 2018, 21:44:03
Das Inputwidget kennt jetzt class="autoclear"
Titel: Antw:Widget für PostMe
Beitrag von: ext23 am 19 Januar 2018, 15:58:19
Ja funktioniert super.

Nur die Eingabe ist auf dem Tablet blöd. Wenn die Tastatur öffnet ist danach der Fully Browser unbrauchbar. Aber gut kann man ja am PC eintippen alles.

/Daniel
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 19 Januar 2018, 18:44:50
Funktioniert bei mir tadellos, auch am Tablet mit Fully. Danke setstate
Titel: Antw:Widget für PostMe
Beitrag von: ext23 am 21 Januar 2018, 12:15:51
Ich hätte glatt noch ein paar Verbesserungsvorschläge:

- Eintrag editieren
- Reihenfolge ändern (Ist bei einer ToDo Liste ganz nett)

Also die Tastatur auf meinem Tablet bringt echt den Fully Browser ausm tritt, komisch. Aber das liegt an dem Tab.

Mir ist übrigens aufgefallen, dass nach dem Cache leeren die Listen nicht richtig geladen werden und leer bleiben. Erst ein erneutes Aktualisieren zeigt die Liste.

/Daniel
Titel: Antw:Widget für PostMe
Beitrag von: dirk.k am 04 November 2018, 15:51:19
Hallo Vaddi,
gibt es eine Möglichkeit die Meldung "Keine Einträge vorhanden" wegzubekommen?
Ich benutze das Widget mit mehreren "Alarm-Leveln" in unterschiedlichen Farben im Haupt-Screen.
Dadurch habe ich dann mehrfach "Keine Einträge vorhanden" dort stehen, möchte aber nur bei Alarmen überhaupt etwas angezeigt bekommen.

@setstate: danke für das "autoclear". Habe es hier zufällig gefunden, aber schon lange an anderen Stellen benötigt. Gibt es ein zentrales "changelog" wo auch solche nützlichen Erweiterungen festgehalten werden?
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 07 November 2018, 17:58:35
Hey,
mache ich am Wochenende fertig und gebe dann hier bescheid.
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 10 November 2018, 21:29:19
Hallo dirk.k
Ich habe dem ersten Beitrag eine Version des Widgets hinzugefügt, in welcher die
Textausgabe entfernt wurde. Bitte die widget_postme_2 runterladen und umbennen
in widget_postme

Gruß
Vaddi
Titel: Antw:Widget für PostMe
Beitrag von: dirk.k am 10 November 2018, 23:19:15
Hey,
funktioniert super - wie erwartet    :)
Danke
Titel: Antw:Widget für PostMe
Beitrag von: TomTaa am 25 März 2019, 19:01:04
Hallo,

habe da mal eine Frage:
Habe das PostMe nun in FHEM eingerichtet und die ersten Inhalte hinterlegt.
Über die TBot_List habe ich auch eine funktionierende Anbindung nach Telegram.

Nun bin ich auf dieses Widget gestossen und wollte das in TabletUI einbinden.
Aber anstatt dass die Liste angezeigt wird bekomme ich eine Fehlermeldung:

ERROR
widget_postme.js:1
SyntaxError: unexpected tokel:
identifier

Jemand eine Idee dazu?
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 27 März 2019, 16:46:11
Hmm, könntest du das Widget mal auf einer leeren Seite testen?
Bei mir funktioniert es ohne Probleme.
Titel: Antw:Widget für PostMe
Beitrag von: TomTaa am 27 März 2019, 22:08:02
Hallo,

habe nun mal eine Seite angelegt und da nur das absolute Minimum eingetragen. s.u.
Problem ist aber immer noch da.
Muss ich denn irgendwo noch zusätzlich was eintragen?

Danke vorab und Gruss
Thomas


<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <script src="js/fhem-tablet-ui.js" defer></script>
    <title>FHEM-Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />

<meta name="gridster_cols" content="10"/>
<meta name="gridster_rows" content="10"/>

</head>

<body>
    <div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="8"data-sizey="8">
<header>PostME</header>
<div class="sheet">
<div class="row">
<div class="cell">
<div data-type="postme" data-list="Einkaufsliste" data-device="PostIt" data-height="200px"></div>
<div data-type="input" data-device="PostIt" data-set="add Einkaufsliste" data-get="" data-value="" class="w3x inline"></div>
<div data-type="link" class="round inline" data-color="#1D1F20" onclick="ftui.setFhemStatus('get PostIt message Einkaufsliste')" data-border-color="grey" data-background-color="grey" data-icon="fa-paper-plane-o">Liste senden</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>

</html>


Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 28 März 2019, 21:47:21
Du könntest die angehängte Datei mal testen, da habe ich mal
ein bisschen was entfernt.
Wenn das auch nicht funktioniert, vermute ich den Fehler woanders.
Titel: Antw:Widget für PostMe
Beitrag von: TomTaa am 28 März 2019, 22:00:50
Vielen Dank für den Support funktioniert jetzt.

Aber ich denke mal, dass es nur ein peinlicher Anfängerfehler war.
Ich war davon ausgegangen, dass das Widget bereits standardmäßig vorhanden ist.

Als ich nun die angepasste Version speichern wollte, habe ich gesehen, dass es da noch gar keine Datei gab.
Sorry für die Mühe.

Nochmals Dank und Gruss
Thomas