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
Zitat 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.

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
Titel: Antw:Widget für PostMe
Beitrag von: ext23 am 22 Oktober 2019, 22:47:23
Nabend,

eine Frage. Ich habe so einen kleinen Thermodrucker der unter Android per BT drucken kann. Besteht da irgendwie die Möglichkeit über das TabletUI Widget eine Liste zu drucken, in meinem Fall wäre das eine Einkaufsliste? Ich hab das gerne in Papierform bei.

/Daniel
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 25 Oktober 2019, 15:26:13
Hi.
Ja, funktioniert.

Ich habe ganz fix etwas gebastelt.
Du müsstest dafür in der html, in der auch das Input Eingabefeld für die jeweilige Liste ist
folgendes hinzufügen
<div data-type="link" class="round inline" data-color="#1D1F20" onclick="printFunc_var_list();" data-border-color="grey" data-background-color="grey" data-icon="fa-print">Drucken</div>
Aktuell kommt es zu einer kleinen Fehlermeldung, wenn man auf Print drückt und die Liste leer ist, aber nicht weiter tragisch.
Du musst auch aufpassen, wie breit die Liste ist bzw. wie breit die Knöpfe (Liste senden und Liste löschen) sind, sonst kann es
passieren, dass der Print Button runter rutscht und nicht sichtbar ist.
Du könntest dann die Texte (Liste senden und Liste löschen) entfernen, sodass die Knöpfe schmaler werden und nur
noch das jeweilige Symbol enthalten (was auch eigentlich ausreicht)
Titel: Antw:Widget für PostMe
Beitrag von: ext23 am 27 Oktober 2019, 08:00:39
Moin,

passt die js? Ich bekomme immer "printFunc_var_list not defined" wenn ich den Button drücke.

/Daniel
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 27 Oktober 2019, 10:12:36
Moin. Sorry, ich hab das einfach von meinem Template kopiert.
Da ich das Template mit der var_list aufrufe, kommt bei dir der Fehler.
<div data-type="link" class="round inline" data-color="#1D1F20" onclick="printFunc_var_list();" data-border-color="grey" data-background-color="grey" data-icon="fa-print">Drucken</div>
Das muss angepasst werden. Bei onclick muss es heißen
onclick="printFunc_HIER-NAME-DER-LISTE();"
Titel: Antw:Widget für PostMe
Beitrag von: ext23 am 27 Oktober 2019, 20:01:11
Super danke, ich bin Java relativ blond daher habe ich das auch nicht gesehen. Jetzt funktioniert es.

Sag mal die Kürzung der Wörter machst du oder der Druckdienst? Meine Thermorolle ist nur 58mm aber mehr als "Kokos..." sollte raufpassen.

/Daniel
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 27 Oktober 2019, 20:14:43
Die Kürzung könnte durchaus von den widget kommen.
Du kannst mal die Version im Anhang testen, da habe ich die Kürzung entfernt.
Titel: Antw:Widget für PostMe
Beitrag von: ext23 am 28 Oktober 2019, 07:40:41
Ja jetzt ist es besser und bei langen Wörtern bricht der die um, so ist es gut.

Er druckt nur nicht die volle Breite. Ich hab die Ränder schon auf null in den Druckoptionen aber irgendwie scheinen da noch Leerzeichen drin zu sein, kann das sein?

/Daniel
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 29 Oktober 2019, 17:34:10
Hey, Leerzeichen sind nicht drin, ich habe da eher eine andere Vermutung.
Ich habe da mal eine Testversion gebastelt.
Titel: Antw:Widget für PostMe
Beitrag von: ext23 am 29 Oktober 2019, 21:06:42
Nabend,

ist nicht wirklich besser geworden. Sind da noch irgend welche DIV Felder oder so? Wenn ich eine kleine Textdatei über den Browser drucke, dann ist der rand kleiner.

Das ist jetzt Jammern auf hohem Niveaus aber bei einer kleinen Papierrolle merkt man jeden Millimeter ;-) Ich mach das im Moment noch mit dem Chrome. Auf dem Tab mag der Drucker Dienst für den Thermodrucker noch nicht so ganz. Und mit dem Popup spinnt das da ein bissel aber egal, dass schau ich mir an wenn es soweit ist. Aber ich find es cool, kann man sich schon ein kleinen Spickzettel ausdrucken. Bei uns im Kaufland ist nämlich immer kein Netz, da macht sich das blöd mit dem Handy.

/Daniel
Titel: Antw:Widget für PostMe
Beitrag von: Prof. Dr. Peter Henning am 30 Oktober 2019, 22:02:52
Ich schlage aus ergonomischen Gründen vor, die Häkchenboxen durch ein anderes Icon zu ersetzen, das die Bedeutung etwas klarer macht - etwa eine stilisierte Mülltonne.
Ansonsten: Sehr nette Anwendung.

LG

pah
Titel: Antw:Widget für PostMe
Beitrag von: Vaddi am 01 November 2019, 13:48:05
Gute Idee, ich werde das mal durch eine Mülltonne ersetzen.

@ext23
Hier mal 2 unterschiedliche Versionen.
Bitte entsprechend umbenennen und kurze Rückmeldung, welche dieser Versionen (hoffentlich) funktioniert.
Titel: Antw:Widget für PostMe
Beitrag von: ext23 am 01 November 2019, 17:42:17
Die machen leider alle keinen Unterschied. Aber gut, ist egal. Soll ja nur ein Einkaufszettel sein, dann wird das eben umgebrochen wenn es zu lang ist, egal.
Titel: Antw:Widget für PostMe
Beitrag von: dirk.k am 03 November 2019, 11:42:37
Hallo,
interessante Lösung mit dem Einkaufszetteldrucker.
Um das Problem mit der Offlineverfügbarkeit zu lösen habe ich damals Telegram eingebunden.
Eine einmal gesendete Liste ist dann auch bei fehlendem Netz verfügbar.
Titel: Antw:Widget für PostMe
Beitrag von: ext23 am 03 November 2019, 11:46:31
Ja habe ich auch, aber mir ist das alles etwas suspekt wegen der Sicherheit. Daher bevorzuge ich ein Zettel zum abstreichen ;-) Man muss nicht jeden Technik Misst mitmachen ^^ Und ständig mit dem Telefon rumfummeln ist auch nicht meins. Das kann man so schlecht an den Wagen klemmen und dann fliegt das runter und und und. Wer sein Telefon an die Hand geklebt hat, da geht natürlich Telegram auch sehr gut.
Titel: Antw:Widget für PostMe
Beitrag von: Prof. Dr. Peter Henning am 03 November 2019, 16:57:23
Nun, man könnte einen Handyhalter für den Einkaufswagen konstruieren. Oder ein altes Tablet dafür nehmen. Oder den Drucker im Auto installieren, da meine Holde ihre Einkaufszettel immer auf dem Wohnzimmertisch liegen lässt...


LG

pah
Titel: Antw:Widget für PostMe
Beitrag von: ext23 am 05 November 2019, 13:11:52
Der Drucker ist ja Mobil und BT, also kein Problem, einfach in die Handtasche damit und ein paar Lippenstifte rausnehmen ^^

/Daniel