New FHEM Tablet UI

bjoernbo · 27 März 2015, 07:14:04

Hallo!

auf meiner "Startseite" habe ich lediglich Bilder der CAM via <iframe> eingebunden. Ich hatte zwischenzeitlich im <head> Bereich ein ein JS zum refresh eingebunden. Dadurch hatte sich aber das Tablet nicht mehr automatisch ausgeschaltet. Das JS hatte ich über google gefunden. (autom. Seitrenrefresh nach X Sekunden) Mittlwerweile habe ich bei mir das LIVE-Bild der Kameras eingebunden. (entsprechende CGI Notation). Somit benötige ich nicht mehr den refresh. Was für eine CAM hast Du im Betrieb? Ich benutze FOSCAM's.

setstate · 27 März 2015, 07:39:58

Zitat von: chris1284 am 27 März 2015, 06:38:01
@setstate: danke für's umsetzen im thermostat widget!

kann mir evtl jemand sagen wie man per java-script ein img (zb http://schierke-am-brocken.de/webcam/schierke01.jpg) neu lädt ohne die seite zu refreshen? ich habe es auf basis des fronthem widgets "multimedia.image" versucht nachzubauen aber bekomme es nicht hin.
hier haben ja einige einen snapshot ihrer webcam eingebaut. optimal wäre ja ein widget dem man den pfad zum pic und den intervall mitgeben könnte so daas man stehts ein aktuelles bild hat

Es gibt das Image Widget, das erwartet eine Image URL per Reading. Wir können dieses Widget aber leicht erweitern, sodass eine URL fest vorgegeben werden kann und ein Refresh Intervall per Data Attribut.

chris1284 · 27 März 2015, 08:25:28

Zitat von: setstate am 27 März 2015, 07:39:58
Es gibt das Image Widget, das erwartet eine Image URL per Reading. Wir können dieses Widget aber leicht erweitern, sodass eine URL fest vorgegeben werden kann und ein Refresh Intervall per Data Attribut.

das hört sich sehr gut an!

@bjoernbo: diverse, eine wansview ( instar nachbau), ein d-link und ich möchte einige öffentliche einbinden (bei denen wird es schwer per cgi das bild abzugreifen

). ein lifestream ist auch nicht notwendig für die internen cams. es wird auch von verschiedenen geräten zugegriffen und es ist a) die anzahl der streams begrenzt b) die performance sicher nicht toll bei x-full-hdstreams und x sd-streams gleichzeitig

dancatt · 27 März 2015, 08:37:10

Zitat von: nesges am 27 März 2015, 00:55:38
Zu der Thermostat-Lösung noch eine Anmerkung:
4.5 in die Skala aufzunehmen war nicht möglich ohne data-step=0.5 zu setzen. Das wollte ich nicht erzwingen. Wenn man aber nicht auf die normalen Min- und Max-Werte verzichten möchte kann man zB data-min="4" und data-max="31" setzen. Ein vollständiges Beispiel:

Code Auswählen Erweitern
<div data-type="thermostat" data-device="W_HEIZUNG" data-min="4" data-off="off" data-max="31" data-boost="boost"></div>

Wenn man damit den Regler auf 4 zieht, wird "off" gesendet, wenn man auf 31 zieht wird "boost" gesendet. Auf dem Rückweg funktioniert's übrigens genauso: Wenn fhem "off" meldet, zeigt der Regler im Beispiel "4" an und bei boost wird "31" angezeigt. Ich persönlich setze übrigens min=5 und max=30 - sieht chicker aus und diese Temperaturen werde ich ansonsten niemals ernsthaft brauchen. Wenn man die Attribute data-off und data-boost werden off und boost übrigens nicht ausgewertet, d.h. es sind keine Defaults für "off" und "boost" vorgesehen.

Danke für's übernehmen des Vorschlags!

Ist es auch möglich in das Thermostat Widget 2 Icons einzubauen welche "off" und "boost" steuern? Die Anzeige der Temperatur müsste dann auch entsprechend angepasst werden wenn man so ein Icon betätigt.
Fände ich persönlich besser und schöner als den Regler zu ändern. Wenn das aber nicht gehen sollte dann ists auch gut.

Noch eine Frage am Rande:
- Gibt es eigentlich schon eine Lösung oder auch ein geplantes Vorgehen bzgl. Updates? Kann man das in Fhem integrieren?
- Wie wird mit den Widgets anderer Entwickler (z.B. die von nesges) verfahren?
=> Natürlich alles nur wenn setstate mitspielt.

Trotzdem sehr sehr geile Sache das ganze hier. Schlicht, einfach und schön.
Passt nur auf dass ein Widget nicht zu kompliziert wird. Lieber ein Widget mehr machen als ein Widget welches alles kann.

Danke an alle die hier mitarbeiten.

chris1284 · 27 März 2015, 08:52:42

naja, die buttons kannst du dir aktuell auch schon selber bauen aber ja, die option mit dem standardwidget
gleich die buttons boost / mode (auto/manu) und ggf. on/off zu haben wäre toll.

bjoernbo · 27 März 2015, 09:54:40

Ich habe eben mein UI übers Smartphone aufgerufen. Dabei kam mir dann spontan die Idee, dass ich mir eine "abgespeckte" Version ( HTML Seiten ) erzeuge die Smartphone freundlich ist.
Hierzu muss ich aber das verschieben der WIDGTES unterbinden.

Frage: Wie und Wo konnte man das unterbinden?

@ jehu: Auf deinem Post ist zu erkennen, dass dein UI im WebViewControl läuft. Bei mir wird seit einiger Zeit nicht mehr das Akkuzustand angezeigt. Damit dieser angezeigt wird, hast du dazu in der index.html die auskommentierten Zeilen im Bezug auf das WEBViewControl aktiviert?
Bei mir wird es trotzdem nicht angezeigt.

jehu · 27 März 2015, 10:15:19

Hallo bjoernbo,

für das Ausschalten der Verschiebefunktion von gridster wollte setstate noch ein Meta-Tag bauen. Aktuell geht das m.E. nicht über die index.html.
Ein paar Seiten vorher hat ein nesges noch eine Funktion gepostet mit der man das wohl in einem Script steuern kann. Aber das fehlt mir auch eindeutig das Know-how zu JS/Jquery.

Zum WebviewControl: Ja, ich habe die Zeilen im html aktiviert und es läuft alles ohne Probleme. Allerdings liegen die Batterie-Symbole und das TTS-Speech-Symbol unter den Gridster-Boxen. Das ist etwas störend, vielleicht hat einer der Web-Cracks hierzu eine Idee ?

Grüße
Jens

jehu · 27 März 2015, 10:18:38

kurze Anmerkung zum WebViewControl für @bjoernbo

Das WebVievControl-Device ist bei dir aber richtig definiert?
Ich musste meins z.B. in androidTablet umbenennen.

Code Auswählen

<script type="text/javascript">var wvcDevices = {'12345': 'androidTablet'}; var wvcUserCssFile="webviewcontrol.css"</script>

Grüße
Jens

nesges · 27 März 2015, 10:42:48

Zitat von: jehu am 27 März 2015, 10:15:19
Ein paar Seiten vorher hat ein nesges noch eine Funktion gepostet mit der man das wohl in einem Script steuern kann. Aber das fehlt mir auch eindeutig das Know-how zu JS/Jquery.

Das folgende in die HTML-Datei aufzunehmen sollte reichen:

Code Auswählen

<script type="text/javascript">$(document).ready(function() { gridster.disable() })</script>

bjoernbo · 27 März 2015, 10:48:26

@jehu => das mit dem Andorid wird es sein. Check ich nachher. Danke.

alex885 · 27 März 2015, 11:57:27

Bonjour!

Toll was hier alles passiert!

Habe auch noch zwei Vorschläge/Wünsche für Widgets

das neue symbol.widget mit dem Button-kreis hinterlegen und ein multi-toggle-button drausmachen.

ein/zwei Timer widgets
klein: in Button Größe, die Zeit kann ähnlich wie beim Dimmer eingestellt werden, Ablauf Visualisierung über den Hintergrund-Kreis wie auf einem Zifferblatt ähnlich iOS app thyme (s. Bildanhang)
groß: über ein Volume Widget nur halt mit Vollkreisskala.

grüsse, Alex

P.S. Hat schon mal jemand damit experimentiert Widgets dynamisch zu adden/deleten ?

Damian · 27 März 2015, 12:42:46

Zitat von: setstate am 26 März 2015, 19:45:32
@Damian: Sieht erst mal gut aus. Jetzt müssen wir unter die Haube schauen
Was sagt die Webconsole? Gibt es da Fehler, oder was kommt vom longpoll an?
Verwenden der Konsole zum Anzeigen von Fehlern und zum Debuggen

Achtung, bitte setzen

So, ich habe es mir über die Console angeschaut, debug ist auf 1. Keine Fehler. Bei longpoll=1 kommt nach dem Schalten der Steckdose keine Message, bei longpoll=0 kommt alle 30 Sekunden:

update done for device:* parameter:*

Edit: ich sehe gerade bei longpoll=1 kommt zyklisch die Meldung:

start longpoll

Gruß

Damian

dancatt · 27 März 2015, 12:51:38

Zitat von: Damian am 27 März 2015, 12:42:46
So, ich habe es mir über die Console angeschaut, debug ist auf 1. Keine Fehler. Bei longpoll=1 kommt nach dem Schalten der Steckdose keine Message, bei longpoll=0 kommt alle 30 Sekunden:

update done for device:* parameter:*

Gruß

Damian

Bei mir gehts auch nicht. Hatte ich schon in http://forum.fhem.de/index.php/topic,34233.msg275608.html#msg275608 erwähnt. Hatte nur noch keine Zeit mich darum zu kümmern.

bjoernbo · 27 März 2015, 16:20:58

Wenn ich die Farbtemperatur steuern will (rechtes Volume Control) so wird der Wert zwar übertragen, aber die Anzeige merkt sich nicht den Wert und springt zurück. Bei der RGB Wahl (linkes Volume Control) wird sich der Wert gemerkt.

Bug? Feature? oder DAU-Fehler?

Zitat<li data-row="1" data-col="4" data-sizex="3" data-sizey="2">
<header>LightiFy</header>
<div class="container">
<div class="cell"> </div>
<div class="center">
<div data-type="dimmer" data-device="lightify_sz_bjoern"
data-get-on="[0-9]{1,3}|on"
data-get-off="off"
class="cell"></div>
</div>
<div class="left">
<div data-type="volume" data-device='lightify_sz_bjoern'
data-min='0'
data-max='65535'
data-get='hue'
data-set='hue'
class="cell hue-tick"><div class="cell"> </div>
</div>
</div>
<div class="cell"> </div>
<div class="right">
<dic class="cell"> </div>
<div data-type="volume" data-device="lightify_sz_bjoern" data-get="ct" data-set="ct" data-min="154" data-max="500" class="cell"></div>
</div>

</li>

bjoernbo · 27 März 2015, 17:07:08

... bei Dimmer fällt mir auf ... Wenn dieser auf 50%steht und ich die Lampe ausschalte geht das Icon in den Off Modus. Nach 3 Sekunden ist das Icon wieder ON und steht auf 0 !