FTUI 2.5

[setstate]

Beim Anpassen einer Seite ist mir gerade aufgefallen, dass der folgende Header:

Code Auswählen Erweitern


<li data-row="4" data-col="3" data-sizex="2" data-sizey="1">
    <header class="large orange">ARBEITSZIMMER</header>
</li>


mit einer kleineren Schriftgröße im Vergleich zu:

Code Auswählen Erweitern


<li data-row="2" data-col="3" data-sizex="2" data-sizey="1">
    <header class="orange" style="font-size:125%">WOHNZIMMER ANGI</header>
</li>


dargestellt wird. "large" ist als

Code Auswählen Erweitern


.large {
    font-size: 125%;
}


definiert. Kann mir jemand erläutern was hier den Unterschied bedingt?

Gruß Ralf

Wenn man in die Entwicklertools schaut, sieht man, dass das ".gridster li header" höhere Priorität bekommt, als das ".large". Das liegt an der höheren Anzahl von Elementen im Selector. ".gridster li header" ist eine genauere, bestimmtere Angabe als die ".large". Deshalb siegt der Wert aus der Header Definition. Der Wert von .large ist durchgestrichen, wird nicht benutzt.
Man müsste der ".large" Definition ein "!important" hinten dran stellen, damit es gewinnt. Ein direktes style Attribute gewinnt auch immer.

Ich werde jetzt alle FTUI Größen auf !important setzen.

[setstate]

Hallo,

ich habe zwei Tablet-UI's definiert. einmal für das Tablet und für das Smartphone.
Ich habe bei der Seite für das Smartphone auf die Ordner css, fonts, js und lib  vom Tablet verlinkt, da nur diese geupdated werden.

Mit dem dynamic load funktioniert das ganze nun nicht mehr. Es wird im Ordner des Smartphone UI gesucht, aber dort befinden sich diese nicht.

Wie kann ich das denn nun wieder "umstellen" ?

So sieht meine Index.html aus

Ich würde die Links zu den originalen js und css Ordnern im Filesystem per symbolischen Link machen (ln -s)

Im Header dann immer nur relativ zur aufgerufenen HTML Datei: <script src="js/fhem-tablet-ui.js" defer></script>

[Wiesel]

Ich würde die Links zu den originalen js und css Ordnern im Filesystem per symbolischen Link machen (ln -s)

Im Header dann immer nur relativ zur aufgerufenen HTML Datei: <script src="js/fhem-tablet-ui.js" defer></script>

Die Antwort ist oft so einfach. Ich probiere es direkt aus und gebe dann Rückmeldung.


EDIT:
Hat Funktioniert. Vielen Dank nochmal. Du machst hier echt eine Top Arbeit

Grüße
Wiesel

[Jojo11]

Hallo,

das Meiste läuft jetzt wieder 
Bei der mobilen Version mit slide-out links habe ich jetzt ewig viel Platz links neben dem icon (und icons/Text sind kleiner). Wie/wo kann ich darauf denn Einfluss nehmen? Die 256 px Breite des slide-outs habe ich schon mal gefunden...

[edit]
Ein left-space in den links hat schon mal geholfen - auch wenn man das Gegenteil erwarten würde 

schöne Grüße
Jo

[Garbsen]

Wenn ich die Rückmeldungen zu 2.5 lese, möchte ich natürlich einerseits gerne updaten, andererseits, mir aber meine mühsam geschaffene Oberfläche nicht zerschießen. Ich würde für notwendige Anpassungen wohl eine Weile brauchen, da ich nur unregelmäßig und insgesamt zu wenig Zeit habe.
Kann mir jemand sagen, welche Dateien / Ordner ich vor dem Update sichern muss?
Meine Überlegung ist, die neuen Versionen dann umzubenennen und die alten zunächst zurück zu sichern, um mit den neuen Versionen Dann parallel zu arbeiten

[h3llsp4wn]

Habe meine Tablet-Oberfläche jetzt umgestellt, dabei auch mit der mobilen angefangen. Jetzt habe ich aber ein komisches Problem festgestellt. Buttons sind quasi überall klickbar, d.h. nicht nur der Button selbst, sondern auch das Elternelement (d.h. der DIV in dem der Button ist oder die Tabellenzelle). Das ist ziemlich nervig, da so ziemlich jeder "klick" ins leere eine Aktion triggert?

Was muss ich tun, um dieses Verhalten abzustellen? So kann ich nicht auf die 2.5 ... fällt natürlich nicht auf, wenn man immer auf die Buttons klickt, aber wenn man z.B. zwei Zellen nebeneinander hat - mit abstand und in die freie Mitte klickt, dann wir auch ausgelöst ....

Habe mal eine Screenshot angehängt ... der ganze Balken ist "klickbar" ... ich fürchte hier werden die klickbaren Bereicht direkt mit skaliert ....

[PatrickR]

Mahlzeit!

Jetzt hat es mich wieder erwischt. Seit dem Update heute sind die Checkboxen verschwunden:

Code Auswählen Erweitern


      <div class="row left-space right-space top-space" style="height: 35px">
        <div data-type="label" class="big inline left bottom">Eiswürfelmaschine</div>
        <div
          data-type="checkbox"
          data-device="OG.KU.Eiswuerfelmaschine"
          data-get = "ice"
          class="inline right"
        ></div>
      </div>


Patrick

[setstate]

Habe meine Tablet-Oberfläche jetzt umgestellt, dabei auch mit der mobilen angefangen. Jetzt habe ich aber ein komisches Problem festgestellt. Buttons sind quasi überall klickbar, d.h. nicht nur der Button selbst, sondern auch das Elternelement (d.h. der DIV in dem der Button ist oder die Tabellenzelle). Das ist ziemlich nervig, da so ziemlich jeder "klick" ins leere eine Aktion triggert?

Was muss ich tun, um dieses Verhalten abzustellen? So kann ich nicht auf die 2.5 ... fällt natürlich nicht auf, wenn man immer auf die Buttons klickt, aber wenn man z.B. zwei Zellen nebeneinander hat - mit abstand und in die freie Mitte klickt, dann wir auch ausgelöst ....

Habe mal eine Screenshot angehängt ... der ganze Balken ist "klickbar" ... ich fürchte hier werden die klickbaren Bereicht direkt mit skaliert ....

Das ist ein sehr guter Hinweis. Das musste noch angepasst werden. Update ist erfolgt

[moonsorrox]

Wenn ich die Rückmeldungen zu 2.5 lese, möchte ich natürlich einerseits gerne updaten, andererseits, mir aber meine mühsam geschaffene Oberfläche nicht zerschießen. Ich würde für notwendige Anpassungen wohl eine Weile brauchen, da ich nur unregelmäßig und insgesamt zu wenig Zeit habe.
Kann mir jemand sagen, welche Dateien / Ordner ich vor dem Update sichern muss?
Meine Überlegung ist, die neuen Versionen dann umzubenennen und die alten zunächst zurück zu sichern, um mit den neuen Versionen Dann parallel zu arbeiten

du brauchst nur deinen Ordner /tablet umzubennen /tablet_meiner und den gleichen als /tablet nehmen, dann macht er das Update ja immer in /tablet.
So nutze ich immer mal zum probieren mehrer Ordner die ich einfach nur umbenenne
/tablet_x
/tablet_y

usw.

[stauraum]

Hallo zusammen,

nachdem letzte Woche das FTUI auf 2.5 angehoben wurde, habe ich mich entschlossen, nochmal komplett neu aufzubauen.

Mit PageTab habe ich allerdings ein optisches Problem. Auf der ersten Seite wird das Menu noch ordentlich angezeigt. Schalte ich aber auf die zweite Seite, zieht er das Menü ewig in die Breite. Mit den zusätzlichen Metas hab ich es schon versucht, aber irgendwie greift das nicht. Steht das Menu alleine auf einer Seite, nimmt es gar die gesamte Seite in Anspruch. Vllt. habt ihr einen Tip, wo genau ich was falsch mache bzw. wie ich das Menu auf eine Feste breite einstelle?

Danke & VG
stauraum

Menu:

Code Auswählen Erweitern


<html>
<body>
    <header>MENU</header>
    <div class="cell">
        <div data-type="pagetab" data-url="./ksc/sub1.html"  data-icon="fa-home" class="top-space"></div>
        <div data-type="pagetab" data-url="./ksc/sub2.html"  data-icon="fa-film" class="top-space"></div>
        <div data-type="pagetab" data-url="./ksc/sub3.html"  data-icon="fa-cutlery" class="top-space"></div>
        <div data-type="pagetab" data-url="./ksc/sub4.html"  data-icon="fa-bed" class="top-space"></div>
        <div data-type="pagetab" data-url="./ksc/sub5.html"  data-icon="fa-line-chart" class="top-space"></div>
        <!-- <div data-type="clock" data-format="H:i"></div> -->
</div>
</body>
</html>


sub1.html

Code Auswählen Erweitern


<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <meta name="gridster_cols" content="12">
    <meta name="gridster_rows" content="9">
    <meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="131">


    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>

<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="./ksc/menu.html"></li>
<!-- ANWESENHEIT -->
<li data-row="1" data-col="2" data-sizex="3" data-sizey="2">


sub2.html

Code Auswählen Erweitern


<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <meta name="gridster_cols" content="12">
    <meta name="gridster_rows" content="9">
    <meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="131">


    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>

<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="./ksc/menu.html"></li>
<!-- WOHNZIMMER -->


[Garbsen]

du brauchst nur deinen Ordner /tablet umzubennen /tablet_meiner und den gleichen als /tablet nehmen, dann macht er das Update ja immer in /tablet.
So nutze ich immer mal zum probieren mehrer Ordner die ich einfach nur umbenenne
/tablet_x
/tablet_y

usw.

Danke, dachte es mir so, war aber nicht sicher, ob noch andere Dateien außerhalb dieses Ordners betroffen sind

[Thyraz]

Nachdem mein automatisches FTUI Update irgendwie nicht mehr funktioniert hat,
hab ich gestern von 2.2 auf 2.5 geupdated.

Bis auf die runden Ecken, welche ich den Gridster Boxen gegeben hatte, sieht alles noch aus wie vorher.

Danke für deine andauernden Bemühungen FTUI zu verbessern setstate.
Die Aktualisierung der Daten ist schon seit längerem super stabil geworden und FTUI ein echter Gewinn für die eigene Smarthome Installation.

[Garbsen]

Auch von mir kurzes Feedback, war nach ein paar Fehlermeldungen hier zu 2.5 etwas zurückhaltend, habe dann heute nach Sicherung des Tablet Ordners das Update gefahren: alles problemlos, sieht alles so aus wie zuvor.
Werde dann mal in einer Testumgebung die vielfältigen Änderungen ausprobieren.
Danke an die Entwickler hier, die für stetige Verbesserungen sorgen.

[Animal64]

Hi Setstate,

Many thanks for your FTUI work. I recently started migrating my pgm2 site to FTUI and it starts looking much more modern and crisp. I ran also into a few things I cannot directly solve.
1) I 'd like to have the labels under my switch widgets a bit closer to the icon. I tried to use compressed but then my icon is not centered anymore and the background icon still is.
2) I 'd like to change the color of the plot lines in my charts. I tried to do this in my fhem-tablet-ui-user.css but these changes get overwritten by ftui_chart.css, how can I do this (other then editing ftui_chart).
3) related to above if I do change plotline color (in ftui_chart) the fill style remains the same. Is there an option to change fillcolor based on plotline color.

Many thanks,
Rene
BTW you can answer in German (I can read not write) for the benefit of the others in the forum here.

[h3llsp4wn]

Das ist ein sehr guter Hinweis. Das musste noch angepasst werden. Update ist erfolgt

@setstate: Danke für den schnellen Fix - soweit ok - nur beim widget_button ist das Problem nach Update noch immer vorhanden, d.h. zu großer "klickbarer" Bereich.