New FHEM Tablet UI

knochenmuehle · 12 Januar 2016, 19:18:58

Zitat von: setstate am 12 Januar 2016, 07:10:49
Kombinieren? Man kann kann jedes Widget mit anderen kombinieren.
Mach das Fenster Symbol klein und farblich passend zur deiner Minimalvariante und positioniere es per CSS ganz nah/ überlappend zum Thermostat Widget.

Habs jetzt einfach mit in den Header übernommen und den Text nach links geschoben ...

Code Auswählen


<header align=left>Schlafzimmer<div data-type="symbol" data-device="MK_Schlafzimmer" class="small right"></div></header>
<div class="container">
<div data-type="thermostat" data-device="RT_SZ_1_Clima" data-valve="ValvePosition" class="cell"></div>
</div>

so reicht's mir

Gruß Andreas

Gunther · 12 Januar 2016, 20:10:06

Gibt es eine Übersicht über die ganzen Formatierungsmöglichkeiten?

Also, was macht
col-1-2 left
narrow darker
...

Woran kann ich erkennen, welche es gibt und was ich damit machen kann?

Edit: zumindest habe ich schonmal die class Einträge im wiki gefunden. Dann bleibt vermutlich nur testen...

setstate · 12 Januar 2016, 20:55:00

Zitat von: kvo1 am 11 Januar 2016, 23:47:00
gut wäre natürlich wenn die "data-return-time" getriggert würde, also solange man sich in den Untermenüs bewegt soll die
Zeit nicht laufen , erst wenn ich "data-return-time" keine Eingabe/Auswahl getätigt habe soll diese loslaufen !

Update beim Pagetab: erst wenn nichts mehr gedrückt wird, auf dem Subtabs, läuft der Countdown zum Rücksprung zum Maintab los.

kvo1 · 12 Januar 2016, 21:02:20

ZitatUpdate beim Pagetab: erst wenn nichts mehr gedrückt wird, auf dem Subtabs, läuft der Countdown zum Rücksprung zum Maintab los.

PERFEKT !

Danke Klaus

kumue · 12 Januar 2016, 21:35:33

Zitat von: roman1528 am 12 Januar 2016, 12:45:40
PageTab lädt die aufgerufene seite jedes mal neu... Also quasi schon ein ReLoad.
PageTab lädt allerdings nur all das nach, was im <body>-Tag steht! Deswegen brauch man bei Verwendung von PageTab ja auch nur in der allerersten Seite (index.html) einen <head>-Tag definieren. Auf den Unterseiten nicht.
Du kannst aber in einer PageTab-Unterseite einen iframe (data-type="iframe") einbauen und dort eine vollständige! verkehr.html aufrufen in der dein Script und die Ausgabe dazu läuft.

Grüße^^

Hallo tomster,
ich versuche auch die Verkehrslage einzubinden, aber bisher

Hast Du das hinbekommen wie roman1528 es beschrieben hat ?

Gruß

tomster · 12 Januar 2016, 21:50:23

Zitat von: kumue am 12 Januar 2016, 21:35:33
Hallo tomster,
ich versuche auch die Verkehrslage einzubinden, aber bisher
Hast Du das hinbekommen wie roman1528 es beschrieben hat ?

Gruß

Yepp, piece of cake nach dem Hinweis von Roman:
1. googlemaps.html

Code Auswählen


<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 560px;
width: 710px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.13&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 9,
disableDefaultUI: true,
center: new google.maps.LatLng(47.6555492,11.6689186),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
window.setInterval(function(){initialize();}, 60000);
</script>
</head>
<body>
<div id="map-canvas" ></div>
</body>
</html>

2. Entsprechender Eintrag auf der gewünschten Seite:

Code Auswählen


<li data-row="3" data-col="2" data-sizex="10" data-sizey="8">
        <header>VERKEHRSLAGE</header>
        <div data-type="iframe"
        data-src="googlemaps.html"
        data-width="710"
        data-height="560">
        </div>
</li>

JoeALLb · 12 Januar 2016, 22:10:36

auch eine Anfängerfrage, deren Antwort ich nicht ergoogeln konnte.... erschießt mich nicht gleich....
Wie speichere ich die Position von verschobenen Fenstern(Raumen) in ftui ab?

Gunther · 12 Januar 2016, 22:20:05

Das Verschieben solltest DU sperren. Meiner Ansicht nach kannst Du das nicht abspeichern.

roman1528 · 12 Januar 2016, 22:23:36

Zitat von: setstate am 09 Januar 2016, 20:59:21
Das Popup schließt sich beim Klicken auf den Hintergrundschatten und beim Klick auf das X des Fensters. Also muss man dieses Event beim Drücken auf deinen Button auslösen:
- Close-Element selektieren -> $('.dialog-close')
- Klick Event triggern -> trigger('click')

Code Auswählen Erweitern
onclick="$('.dialog-close').trigger('click');"

Ein komplettes Beispiel:
Code Auswählen Erweitern
<li data-row="5" data-col="1" data-sizex="3" data-sizey="3"> <header>EXAMPLE2</header>  <div data-type="popup" data-height="400px" data-width="200px"> <div data-type="link" class="large thin">Show Temperatur</div> <div class="dialog"> <header>DIALOG</header> <div class="top-space"> <div class="newline"> <div data-type="label" data-device="THSensorWZ" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="bigger thin"></div> <div data-type="label" class="cell">Temperatur</div> </div> <div class="newline"> <div data-type="label" data-device="THSensorWZ" data-fix="0" data-part="4" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="bigger thin"></div> <div data-type="label" class="cell">Luftfeuchte</div> </div> <div data-type="link" class="round top-space-3x left-space-2x" data-width="130" data-height="50" data-color="white" data-background-color="green" data-icon="fa-check" onclick="$('.dialog-close').trigger('click');">OK</div> </div> </div> </div> </li>

Vielen vielen Dank! Habe es leider übersehen...

Das läuft.

Grüße^^

tomster · 12 Januar 2016, 23:07:00

Zitat von: setstate am 12 Januar 2016, 20:55:00
Update beim Pagetab: erst wenn nichts mehr gedrückt wird, auf dem Subtabs, läuft der Countdown zum Rücksprung zum Maintab los.

Irgendwie steig ich durch die Pagetab-Nummer nicht so recht durch...
Seit dem Update zu "return-to-maintab-after-inactivity" scheint wieder etwas an der Funktionalität geändert worden sein.
Ich bin davon ausgegangen, dass in der index.html neben den Header-includes nur z.B. menu.html mit den Pagetabs angegeben werden muss. Beim Aufruf sollte dann automatisch auf den 1. pagetab-Link weitergeleitet werden.
Seit dem o.g. Update bleibt bei mir nun die index.html beim Einblenden des Inhalts von menu.html stehen.
Bug oder neue Funktionalität?

setstate · 12 Januar 2016, 23:26:54

Zitat von: tomster am 12 Januar 2016, 23:07:00
Irgendwie steig ich durch die Pagetab-Nummer nicht so recht durch...
Seit dem Update zu "return-to-maintab-after-inactivity" scheint wieder etwas an der Funktionalität geändert worden sein.
Ich bin davon ausgegangen, dass in der index.html neben den Header-includes nur z.B. menu.html mit den Pagetabs angegeben werden muss. Beim Aufruf sollte dann automatisch auf den 1. pagetab-Link weitergeleitet werden.
Seit dem o.g. Update bleibt bei mir nun die index.html beim Einblenden des Inhalts von menu.html stehen.
Bug oder neue Funktionalität?

So war es und ist es auch immer noch. Daran habe ich nichts geändert. Evtl. musst du den Cache löschen (was sinnvolleres fällt mir im Moment auch nicht ein)

tomster · 12 Januar 2016, 23:32:39

Irgendsowas war's wohl... Cache-leeren und Neustart hat's getan. Sorry für den Aufstand

TWART016 · 13 Januar 2016, 00:56:45

Hallo,

ich habe hier noch einen offenen Thread mit der Farbe vom Select-Hintergrund.
forum.fhem.de/index.php?topic=47047.new;topicseen

Kann mir das einer beantworten?

Gruß
TWART016

kumue · 13 Januar 2016, 06:10:48

Zitat von: tomster am 12 Januar 2016, 21:50:23
Yepp, piece of cake nach dem Hinweis von Roman:
1. googlemaps.html
Code Auswählen Erweitern
<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { margin: 0; padding: 0; height: 560px; width: 710px; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.13&sensor=false"></script> <script> var map; function initialize() { var mapOptions = { zoom: 9, disableDefaultUI: true, center: new google.maps.LatLng(47.6555492,11.6689186), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var trafficLayer = new google.maps.TrafficLayer(); trafficLayer.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); window.setInterval(function(){initialize();}, 60000); </script> </head> <body> <div id="map-canvas" ></div> </body> </html>
2. Entsprechender Eintrag auf der gewünschten Seite:
Code Auswählen Erweitern
<li data-row="3" data-col="2" data-sizex="10" data-sizey="8"> <header>VERKEHRSLAGE</header> <div data-type="iframe" data-src="googlemaps.html" data-width="710" data-height="560"> </div> </li>

Servus Tomster,
funktioniert wunderbar !

Danke Dir !

tomster · 13 Januar 2016, 16:02:09

@setstate

Nur als kleiner Kosmetiktipp:
Wenn Du das nächste Mal zufällig am widget_weather.js zu tun hast, füge doch bitte noch eine Zeile

Code Auswählen


"Schneeschauer":                'snowflurries.png',

bei den PROPLANTA-DEFs ein. (Zumindest) das Reading scheint zu noch fehlen. Mir schmeisst's die Zeile nach jedem Update wieder raus...
Danke & LG

P.S. Ist beim Update der FA-Icons etwas durcheinander geraten? Mir fehlen einige Icons...