Hauptmenü

Widget für PostMe

Begonnen von Vaddi, 14 September 2017, 15:05:27

Vorheriges Thema - Nächstes Thema

Vaddi

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
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

ToM_ToM

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
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

Fixel2012

Ist das nicht besser hier aufbewahrt?

Zumindest sollte darauf hingewiesen werden.
Fhem 5.8 auf Raspi 3, HMLAN und 868MHz CUL mit einigen Komponenten, Z-Wave Rollladenaktoren, Tablet UI, 433 MHz CUL mit Baumarktsteckdosen und Temp Sensoren, Amazon Echo, Echo Dot, 2x SONOS  play1, 1x SONOS Connect AMP,  presence, HUE, Lightify

ToM_ToM

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
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

ToM_ToM

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
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

Vaddi

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 :)
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

ToM_ToM

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
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

Fixel2012

#7
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 in einem Thread nochmal nachgefragt, ob es möglich ist.
Fhem 5.8 auf Raspi 3, HMLAN und 868MHz CUL mit einigen Komponenten, Z-Wave Rollladenaktoren, Tablet UI, 433 MHz CUL mit Baumarktsteckdosen und Temp Sensoren, Amazon Echo, Echo Dot, 2x SONOS  play1, 1x SONOS Connect AMP,  presence, HUE, Lightify

Vaddi

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.
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

Fixel2012

#9
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?
Fhem 5.8 auf Raspi 3, HMLAN und 868MHz CUL mit einigen Komponenten, Z-Wave Rollladenaktoren, Tablet UI, 433 MHz CUL mit Baumarktsteckdosen und Temp Sensoren, Amazon Echo, Echo Dot, 2x SONOS  play1, 1x SONOS Connect AMP,  presence, HUE, Lightify

Vaddi

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
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

setstate

Das Inputwidget kennt jetzt class="autoclear"

ext23

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
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

Vaddi

Funktioniert bei mir tadellos, auch am Tablet mit Fully. Danke setstate
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

ext23

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
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

dirk.k

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?

Vaddi

Hey,
mache ich am Wochenende fertig und gebe dann hier bescheid.
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

Vaddi

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
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

dirk.k

Hey,
funktioniert super - wie erwartet    :)
Danke

TomTaa

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?

Vaddi

Hmm, könntest du das Widget mal auf einer leeren Seite testen?
Bei mir funktioniert es ohne Probleme.
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

TomTaa

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>




Vaddi

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.
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

TomTaa

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

ext23

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
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

Vaddi

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)
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

ext23

Moin,

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

/Daniel
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

Vaddi

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();"
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

ext23

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
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

Vaddi

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.
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

ext23

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
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

Vaddi

Hey, Leerzeichen sind nicht drin, ich habe da eher eine andere Vermutung.
Ich habe da mal eine Testversion gebastelt.
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

ext23

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
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

Prof. Dr. Peter Henning

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

Vaddi

#34
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.
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

ext23

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.
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

dirk.k

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.

ext23

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.
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

Prof. Dr. Peter Henning

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

ext23

Der Drucker ist ja Mobil und BT, also kein Problem, einfach in die Handtasche damit und ein paar Lippenstifte rausnehmen ^^

/Daniel
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)