New FHEM Tablet UI

[pnewman]

Hallo waschbaerbauch,

habe mal dein MAX! Stellungsregler Beispiel ausprobiert.

Super gemacht, tolle Idee.

2 Probleme habe ich damit auf meinem Tablet.
Nicht nur dass sich bei mir das PopUp bewegt wenn ich die Temperatur einstellen möchte,
nein auch wenn ich das PopUp schließe und neben das Icon tippe dann sendet das Tablet desiredTemperature eco, desiredTemperature boost etc.

Links vom icon tippen von oben nach unten, eco, boost, comfort, auto.

Aber dieses Phänomen tritt erst nach dem erstmaligen öffnen der PopUps auf.

Ich hoffe das dies nur bei mir so ist und der Fehler bei mir liegt.

Stellt euch vor das würde bei jedem PopUp so sein?

Könnt Ihr mal prüfen ob dieses Phänomen auch bei euch auftritt?
Auch bei andern PopUps?

Ich habe nur diese.

Gruß
Ralf

[knochenmuehle]

Hallo,

mir kam gerade der Gedanke, ob man nicht die normale Darstellung des Thermostaten mit dem Fenster (Status geöffnet/geschlossen soll angezeigt werden) kombinieren könnte...
Wäre echt hilfreich und würde viel Platz sparen... versuche eine Minimaloberfläche auf nem 8 Zoll Tablet auf einer Seite zu gestalten.

Gruß Andreas

keiner eine Idee?

Andreas

[setstate]

keiner eine Idee?

Andreas

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.

[Aladin222]

hi @all ,@Roman

auf die Gefahr hin das es langsam hier recht unübersichtlich wird ,frage ich mal hier : ( ...oder sollten für Fragen zum Tablet UI jeweils neue threads eröffnet werden ?)

Ich probiere gerade am Beispiel von Roman´s Demo die Größe auf ein iPad optimal anzupassen :
dachte das funktioniert hier in der index.html

Code Auswählen Erweitern

        <meta name="widget_base_width" content="138">
        <meta name="widget_base_height" content="155">
leider bekomme ich das da nicht gelöst Denke das liegt am Hintergrund ( Farbverlauf ) ,da dieser sich da nicht in der Größe verändern lässt ...

Habt ihr einen Tip ?

[roman1528]

hi @all ,@Roman

auf die Gefahr hin das es langsam hier recht unübersichtlich wird ,frage ich mal hier : ( ...oder sollten für Fragen zum Tablet UI jeweils neue threads eröffnet werden ?)

Ich probiere gerade am Beispiel von Roman´s Demo die Größe auf ein iPad optimal anzupassen :
dachte das funktioniert hier in der index.html

Code Auswählen Erweitern

        <meta name="widget_base_width" content="138">
        <meta name="widget_base_height" content="155">
leider bekomme ich das da nicht gelöst Denke das liegt am Hintergrund ( Farbverlauf ) ,da dieser sich da nicht in der Größe verändern lässt ...

Habt ihr einen Tip ?

Bei Tante Google oder wo du deine Bilder auch immer her bekommst ein Bild raussuchen, dass genau der Anzeige-Auflösung deines Device entspricht.

Mit "widget_base_width/height" änderst du nur die Grundgröße der einzelnen <gridster>-Elemente. Nicht die der Gesamtseite.
Dieses tust du um einen gleichmäßigen Außenrand zu bekommen. Kannst sie natürlich auch kleiner machen... Dann bekommst du mehr elemente auf eine Seite, allerdings müssen dann die eigentlich Widgets auch immer kleiner werden, was bis zur Unbedienbarkeit führt.

Grüße^^

P.S.... Wenn ihr mich hier anschreibt bekomme ich das in 99% der Fälle nicht mit. Schreibt mir eine PN oder nutzt die Kommentarfunktion auf meiner Seite.

[tomster]

Servus zusammen!
Ich möchte auf einer pagetab-Seite gerne eine Karte mit der aktuellen Verkehrslage einbinden. Ausgesucht hab ich mir dazu schlichtweg Google Maps.
Leider funzt der von mir im Netz zusammengeklaute Code nicht in Verbindung mit Pagetab. Ich vermute, dass beim Pagetab kein wirklicher "Reload" der Seite angestossen wird und deshalb das Script nicht gezündet wird. Hat jemand eine Idee, wie man das hinbekommen könnte?

Code Auswählen Erweitern


style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 702px;
width: 486px;
}
</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(53.5333, -113.5000),
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>

[roman1528]

Servus zusammen!
Ich möchte auf einer pagetab-Seite gerne eine Karte mit der aktuellen Verkehrslage einbinden. Ausgesucht hab ich mir dazu schlichtweg Google Maps.
Leider funzt der von mir im Netz zusammengeklaute Code nicht in Verbindung mit Pagetab. Ich vermute, dass beim Pagetab kein wirklicher "Reload" der Seite angestossen wird und deshalb das Script nicht gezündet wird. Hat jemand eine Idee, wie man das hinbekommen könnte?

Code Auswählen Erweitern


style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 702px;
width: 486px;
}
</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(53.5333, -113.5000),
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>

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^^

[tomster]

Klar, so geht's auch. Hatte das iframe-widget gar nicht mehr auf dem Schirm...
Danke!

[hulzer]

Frage zu Thermostat Widget:

Ich verwende MAX-Thermostate, möchte allerdings bei der Anzeige der Ist-Temperatur ein anderes Device verwenden.
Ich habe jetzt testweise den Code des Thermostat-Widgets so angepasst, dass man bei data-temp das Reading über DEVICE:READING angeben kann.

Code Auswählen Erweitern


...
// alt (Zeile 13)
// var val_temp = getDeviceValue( device, 'temp');

// neu
var deviceName = device.data('device');
var tempParam = device.data('temp');

// optional "external" temp sensor defined by DEVICE:reading regex
if (tempParam.match(/:/))
deviceName = tempParam;

var val_temp = getDeviceValueByName( deviceName, device.data('temp'));
...


Code Auswählen Erweitern


<div
    data-type="thermostat"
    data-device="EG.wz.HZ"
    data-valve="valveposition"
    data-get="desiredTemperature"
    data-temp="EG.wz.TF:temperature"
    data-set="desiredTemperature",
    data-step="0.5"
    class="big">
</div>


Gibt es diese Möglichkeit eventuell bereits eine andere Möglichkeit dies zu realisieren (ohne dummys, userReading und Co.)?

Vielleicht könnte man ja die Änderung auch mit übernehmen?

Danke,

Gruß
Hulzer

[waschbaerbauch]

Hallo waschbaerbauch,

habe mal dein MAX! Stellungsregler Beispiel ausprobiert.

Super gemacht, tolle Idee.

2 Probleme habe ich damit auf meinem Tablet.
Nicht nur dass sich bei mir das PopUp bewegt wenn ich die Temperatur einstellen möchte,
nein auch wenn ich das PopUp schließe und neben das Icon tippe dann sendet das Tablet desiredTemperature eco, desiredTemperature boost etc.

Links vom icon tippen von oben nach unten, eco, boost, comfort, auto.

Aber dieses Phänomen tritt erst nach dem erstmaligen öffnen der PopUps auf.

Ich hoffe das dies nur bei mir so ist und der Fehler bei mir liegt.

Stellt euch vor das würde bei jedem PopUp so sein?

Könnt Ihr mal prüfen ob dieses Phänomen auch bei euch auftritt?
Auch bei andern PopUps?

Ich habe nur diese.

Gruß
Ralf

Moin Ralf,

nachdem du das so geschildert hast hab ich mal hier rumprobiert. Also bei mir wandert das Popup nach links/rechts, je nachdem wohin man den Regler bewegt mit der Maus (am Desktop). Auf boost, off und min scheint es zu stellen wenn ich rechts (boost) links (min) jeweils unterhalb des Skalaendes und unter dem valveWert (off) klicke. Wenn ich einfach das Popup schließe kann ich es nicht nachvollziehen.

Gruß
Mario

[justme1968]

ich habe auf meinen beiden Tablets das problem das die popups nicht zentriert werden sondern rechts aus dem bildschirm rausschauen.

manchmal werden sie beim aller ersten popup nach einem kompletten reboot zentriert. aber sogar das ist selten.

hat jemand eine idee woran das liegt?

gruss
  andre

[waschbaerbauch]

"button" ist aus dem nesges-Repo, scheint aber nicht mehr kompatibel zu sein, es erscheint immer nur der Background, das Icon fehlt.
"pagebutton" ist dem am ähnlichsten, man kann aber auch das Basis Widget aller Schalter direkt nutzen ->  "famultibutton"

Code Auswählen Erweitern

data-type="famultibutton"

https://github.com/knowthelist/fhem-tablet-ui#pagebutton-widgets

Hi setstate,

ich hatte grad mal 'button' gegen 'pagebutton' bzw. 'famultibutton' getauscht. Kann man denen denn genauso Farben mitgeben? Wenn ich lediglich den data-type ändere scheint er die mit 'button' genutzten Farben nicht zu nutzen bzw. verwenden zu können.

PS: Also bei mir laden sie ja für gewöhnlich, manchmal benötigt man allerdings mehrere reloads. Ich bin mir allerdings nicht sicher ob es am button liegt oder am 'integrierten' Webserver. Zum testen hab ich mir mal (mit meinem beschränkten Wissen) einen LAMPP Webserver installiert und meine html Dateien dann unter /opt/lampp/htdocs/fhem/www/tablet abgelegt. Die Seiten werden dann immer geladen, die Buttons machen (bisher) keine Probleme, allerdings lädt er so natürlich nicht die Werte aus dem FHEM in die Seiten ein. Das wäre noch eine Baustelle wo ich mal gucken muss wie ich das dem Apache beibringen kann..

[Depechem]

kann man gar nicht die FHEM eigenen Icons nutzen? Also die im images Ordner von FHEM?
Nur diese? http://fortawesome.github.io/Font-Awesome/icons/

Mein Smartphone nimmt die orginale FHEM App mit den orginalen Icons daher wöllte ich am TUI gern die gleichen verwenden.
Weiterhin gibt es dort schönere als die fpr TUI vorgesehenen(Mehrere Türen und Fenster, Rasenroboter, Garagen)

[waschbaerbauch]

Doch kann man - je nachdem welche es sind mit 'oa-', 'fs-' oder 'fa-'.

PS: Da bin ich aber auch erst drauf gekommen, nachdem ich Stunden im Netz geguckt hab und diverse Versuche gestartet hatte mir einen personalisierten Icon-Font zu bauen

Damit du diese nutzen kannst musst du sie natürlich vorher einbinden.

Code Auswählen Erweitern


<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css">
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css">


PPS: FTUI Wiki

[Depechem]

vielen Dank

Doch kann man - je nachdem welche es sind mit 'oa-', 'fs-' oder 'fa-'.

PS: Da bin ich aber auch erst drauf gekommen, nachdem ich Stunden im Netz geguckt hab und diverse Versuche gestartet hatte mir einen personalisierten Icon-Font zu bauen

Damit du diese nutzen kannst musst du sie natürlich vorher einbinden.

Code Auswählen Erweitern


<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css">
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css">


PPS: FTUI Wiki