FTUI 2.5

[Thyraz]

Setstate ist sicher schon wieder im Entwicklungsfieber für 2.6, da er die FHEM Websockets Unterstützung entdeckt hat. 

Kenne das von mir selbst: Neue Features erhalten den Programmiertrieb und die Motivation besser als Doku warten oder Rückwartskompatibilität erhalten.
Die meisten Kommentare zu dem Thema waren ja auch eher wie eure gehalten, aber ein paar waren auch von einer Erwartungshaltung und einem Tonfall geprägt, der sich für ein kostenloses Produkt nicht unbedingt ziemt...

Evtl. würde ich da auch erstmal in den Ignore-Modus schalten.
Zur Kenntnis genommen hat er es ja sicher dennoch, somit gibts ja evtl. bald wieder eine Beta, wie das früher auch schon der Fall war.

Das ändert aber nichts daran, dass nach einer Beta irgendwann wieder eine Stable Version kommt und viele wieder genauso überrascht sein warden,
da sie eben nicht konstant mitlesen.
Meiner Meinung nach dürfen bei einer UI die weiter wachsen soll durchaus auch mal alte Zöpfe abgeschnitten werden.

Übrigens betreffen die Änderungen hauptsächlich die Positionierung und das Grid.
Ich hab meine Seite mit Bootstrap und eigenen Positionsklassen aufgebaut und seit FTUI 1.x Seiten praktisch nie was ändern müssen.

Zum Thema Doku:
Hier gibt es viele Perlen, die noch nicht dokumentiert sind.
Ich glaube selbst die Möglichkeit Tabs über Link Buttons statt PageTab zu realsieren ware nur aufgrund der Doku aktuell nicht möglich.
Evtl. ware ein eigener Thread eine Lösung in der man undokumentierte Features sammelt und dann Dokuschnippsel erstellt (am Besten in Markup Langauge formatiert) die setstate direkt per Copy & Paste in seine Readme.md übernehmen kann.

Das Thema Doku kann man ja problemlos in Zusammenarbeit lösen.

[moonsorrox]

Meiner Meinung nach dürfen bei einer UI die weiter wachsen soll durchaus auch mal alte Zöpfe abgeschnitten werden.

da gebe ich dir vollkommen Recht... deshalb habe ich auch manchmal rum gemault und geschluckt, bin aber dabei geblieben (2.5)

Übrigens betreffen die Änderungen hauptsächlich die Positionierung und das Grid.
Ich hab meine Seite mit Bootstrap und eigenen Positionsklassen aufgebaut und seit FTUI 1.x Seiten praktisch nie was ändern müssen.

vergiss bitte nicht das es gerade hier in dem stetig wachsendem Segment immer wieder Neulinge gibt die gar nicht, aber auch wirklich gar nichts von dem verstehen was du hier schreibst. Bootstrap kenne ich und habe ich schon mal von meiner Homepage gehört, aber einmal mit beschäftigt weil der Template Bauer mir davon geschrieben hat... usw.

Aber, es ist eben ein schon ständig wachsendes Gebiet gerade css und davon verstehen nur wenige etwas wollen aber ebenso ein FTUI haben, nicht falsch verstehen, aber viele bauen sich doch alles nur aus den hier gebotenem alles zusammen um zum Erfolg zu kommen... und dann geht eben das Geschrei los... wo fange ich am besten an wenn alles verschoben ist.
Ging mir doch auch so, weil eben css das Allerheilmittel ist und ich habe sicher schon viel davon gehört und gebastelt 
Aber ich stoße immer wieder auf Dinge die ich nie gesehen oder gehört habe, gerade eben bei css... und es dauert manchmal schon...

Also was sagt uns dass ruhig belieben und möglichst viel fragen und zusammen arbeiten mit der Unterstützung der Profis... 

[Amenophis86]

Zum Thema Doku:
Hier gibt es viele Perlen, die noch nicht dokumentiert sind.
Ich glaube selbst die Möglichkeit Tabs über Link Buttons statt PageTab zu realsieren ware nur aufgrund der Doku aktuell nicht möglich.
Evtl. ware ein eigener Thread eine Lösung in der man undokumentierte Features sammelt und dann Dokuschnippsel erstellt (am Besten in Markup Langauge formatiert) die setstate direkt per Copy & Paste in seine Readme.md übernehmen kann.

Das Thema Doku kann man ja problemlos in Zusammenarbeit lösen.

Zum Thema Doku. Ich würde ungern noch eine dritte Baustelle aufmachen, wo Infos gefunden werden können. Aktuell haben wir das Wiki (mehr schlecht, als recht) und die Seite von setstate (gut, aber auch nicht alles dokumentiert). Mein Vorschlag wäre, dass wir uns auf das Wiki konzentrieren. Hier kann jeder einen Schreibzugang beantragen und mithelfen. Ein zusätzlichen Thread sehe ich als kontraproduktiv, weil es nur eine weitere Quelle wäre.

Kenne das von mir selbst: Neue Features erhalten den Programmiertrieb und die Motivation besser als Doku warten oder Rückwartskompatibilität erhalten.

Das steht vollkommen außer Frage und kennt sicher auch jeder. Aber leider hilft die beste Programmierung nichts, wenn die Doku dazu fehlt, lückenhaft oder Schrott ist. Schrott ist sie Gott sei dank nicht, aber lückenhaft und zwar inzwischen sehr lückenhaft, wie ich finde.


Ich denke am besten wäre es, wenn setstate sich mal äußert, wie er sich das weitere Vorgehen vorstellt. Es sind ja einige bereit zu helfen, aber dann muss er sagen wie am besten. Sollte weitere nix kommen, dann sollten wir wirklich auf ein neues Thema ausweichen und uns selbst um die Doku im Wiki kümmern. Dann aber auch so, dass das Thema nur zur Findung hilft und die Doku selbst im Wiki stattfindet.

[drhirn]

Mein Senf zum Thema "Update-Problematik": Es hindert euch eigentlich niemand daran, eine zweite FTUI-Instanz anzulegen, die für Tests verwendet werden kann, oder?
Die Updates wandern in die Test-Instanz und wenn man damit zufrieden ist, kann man die Files dann ja händisch in die Produktiv-Instanz kopieren.

Und dann möchte ich noch daran erinnern, dass setstate das alles in seiner Freizeit macht und sein grandioses Produkt uns allen kostenfrei zur Verfügung stellt. Mal ganz abgesehen davon, dass er sich sehr viel Zeit nimmt, die ganzen Fragen zu beantworten.
Wer dennoch mit seiner Arbeit nicht zufrieden ist, dem steht es frei, entweder mitzuhelfen, oder ein Fork zu machen und das Projekt selbst weiter zu entwickeln. Beides schlauer, als nur zu meckern.

[Amenophis86]

Ehrlich gesagt sind wir von Meckern weit entfernt, da wir hier einige konstruktive Vorschläge unterbreitet haben und auch mehrfach unsere Hilfe angeboten haben. Das setstate das Ganze kostenlos und in seiner Freizeit macht, wurde zu keinem Zeitpunkt außer Acht gelassen.

Der von dir unterbreitete Vorschlag ist sicher eine Möglichkeit, aber ich denke, dass er mehr Sinn macht, dass der Maintainer in einem Developer Zweig arbeitet und diesen erst nach Tests zum Hauptzweig macht. So, wie es so ziemlich jede Software tut und sich eigentlich bewährt hat Auch möchten wir das Produkt nicht selbst weiter entwickeln, sondern lediglich die Doku weiter anstoßen bzw. bei dieser helfen, dass sie der Entwicklung nicht zu weit hinterher rennt. Dies würde nämlich auch den nötigen Support eingrenzen, da viele die Infos schon über die Doku bekommen + das "Beschweren" über plötzliches nicht mehr funktionieren, ohne Ankündigung würde sich reduzieren.

[setstate]

Ich wäre für das FHEM Wiki als Hauptdoku. Jeder der ein Problem lösen konnte und sich fragt, warum steht das nirgends, sollte das gleich im Wiki eintragen. Am besten Unterseiten nach Widget getrennt und ein großer Punkt "get started" mit Hinweisen zu Layout, Positionierung, Farben usw. Viel mit Verlinkungen über Schlagworte und Inhaltsverzeichnisse. Und viele Codesnipsel  - nur mit den minimal notwendigen Attributen und Klassen. Das Erfolgsgeheimnis von Stackoverflow ist ja auch, dass man direkt unter der Frage immer die beste Lösung bekommt, ohne lange zu Scrollen. Meist mit direkt kopierbaren Code Beispiel. Das Github Wiki von nesges finde ich zum Beispiel auch sehr übersichtlich.

Das Github Repo möchte ich gerne zur Sourceverwaltung nutzen, mit beliebigen (vertretbaren) Zwischenständen. Produktive UIs sollten sich nicht direkt davon Updaten. Die Versuch mit dem Eval Zweig letztes Jahr war auch nicht das Gelbe für mich und die Empörung nach dem Merge (was ich ewig vor mir hergeschoben habe) ähnlich groß wie gerade.

[drhirn]

Ja, FHEM-Wiki ist ein guter Plan. Hat aber halt auch den Nachteil, dass man es warten muss . Und man bräuchte dann ein ausführliches "Whats New" irgendwo, damit man von den Neuerungen auch erfährt und das Wiki dementsprechend anpassen kann.
Alles in allem wird aber wohl trotzdem ein großer Teil der Dokumentation an dir hängen bleiben, einfach weil du am besten weißt, was geändert wurde. Das werden wir dir wohl nicht ersparen können

[viegener]

Ich wäre für das FHEM Wiki als Hauptdoku. Jeder der ein Problem lösen konnte und sich fragt, warum steht das nirgends, sollte das gleich im Wiki eintragen. Am besten Unterseiten nach Widget getrennt und ein großer Punkt "get started" mit Hinweisen zu Layout, Positionierung, Farben usw. Viel mit Verlinkungen über Schlagworte und Inhaltsverzeichnisse. Und viele Codesnipsel  - nur mit den minimal notwendigen Attributen und Klassen. Das Erfolgsgeheimnis von Stackoverflow ist ja auch, dass man direkt unter der Frage immer die beste Lösung bekommt, ohne lange zu Scrollen. Meist mit direkt kopierbaren Code Beispiel. Das Github Wiki von nesges finde ich zum Beispiel auch sehr übersichtlich.

Das Github Repo möchte ich gerne zur Sourceverwaltung nutzen, mit beliebigen (vertretbaren) Zwischenständen. Produktive UIs sollten sich nicht direkt davon Updaten. Die Versuch mit dem Eval Zweig letztes Jahr war auch nicht das Gelbe für mich und die Empörung nach dem Merge (was ich ewig vor mir hergeschoben habe) ähnlich groß wie gerade.

FHEMWiki und nur eine Hauptdoku finde ich gut - Github mit Zwischenständen finde ich auch richtig. Die Idee mit dem jeder der was findet sollte es ins Wiki bringen kann man bestimmt auch hier einbringen indem man vorsichtig dazu auffordert...

Ich denke es gibt auch genügend Freiwillige um ein Betatestteam aufzustellen, ich mache das häufig auch bei Features in meinen MOdulen, dass Leute, die das haben möchten auch beim Testen helfen. Das FTUI hat soviele Nutzer, dass man das vermutlich auch formaler organisieren könnte ohne dass Du das machen müsstest.

@drhirn: Die Beiträge fand ich sehr konstruktiv und kein Meckern - viele tragen hier auch bei (inkl mir) und nur in ihrer Freizeit also kann ich Deine Kommentare nicht nachvollziehen.

[drhirn]

@drhirn: Die Beiträge fand ich sehr konstruktiv und kein Meckern - viele tragen hier auch bei (inkl mir) und nur in ihrer Freizeit also kann ich Deine Kommentare nicht nachvollziehen.

Hmm, mir war die Grundeinstellung teilweise etwas zu negativ. Ich muss aber dazusagen, dass ich diesen Eindruck v.a. in anderen Threads erhalten habe.

[Standarduser]

Da ich selbst auch an der Doku interessiert bin und auch gerne daran mitarbeiten möchte, würde ich folgenden Vorschlag unterbreiten:

Wer eröffnen ein neues Thema "[FHEM Tablet-UI] Dokumentation (Diskussionsthread)", um das Thema zentral zu bündeln und diesen Thread zu seiner ursprünglichen Bestimmung zurückkehren zu lassen.
Wir erstellen eine Gliederung, ähnlich wie set state geschrieben hat und wer sich daran beteiligen möchte, bekommt ein Widget zugeteilt und erstellt die initiale Doku dazu.
Wenn das geschafft ist, kann man ja in den normalen Wiki-Betrieb übergehen und jeder ist eingeladen, etwas zu verbessern.

Kämen wir so nicht am schnellsten voran?

[drhirn]

Leg los mit dem Thread

Schlage aber vor, die Dokumentation dann gleich im Wiki zu machen. Ohne Umweg über's Forum. Bzw. für Leute, die keinen Wiki-Zugang haben, einfach die erstellte Doku hier im Wiki-Thread mit der Bitte um Einstellung abzulegen.

[viegener]

Hmm, mir war die Grundeinstellung teilweise etwas zu negativ. Ich muss aber dazusagen, dass ich diesen Eindruck v.a. in anderen Threads erhalten habe.

Schwamm drüber - denn ja ich kenne diese Statements auch

Das mit der Doku geht ja schon gut los

Ich versuche noch zuerst herauszufinden warum ich kein tablet ui mehr habe  - heute morgen war nicht genug zeit...

@setstate: Wenn das mit den Zwischenständen, die Du oben erwähnst laufen soll, vielleicht macht es Sinn diese Zwischenstände ins fhem-svn zu verlagern? Oder willst Du lieber Branches in github verwenden?

[setstate]

Oder ein Gremium stimmt ab, welcher Zwischenstand aus dem Github ins FHEM-svn gelangen darf, und ich commite nach Belieben im Github weiter. Stable-Updates dann nur noch aus dem FHEM-svn, Developer-Version aus dem Github

[TWART016]

Mit der 2.5 werden die mi-Icons bei mir nicht mehr angezeigt.

Ist das auch die Ursache für das Einrücken der 3 Elemente?

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
  <!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
         * Version: 1.3.5
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<title>FHEM Wohnzimmer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="76">
<meta name="widget_base_height" content="124">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->

<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<!--
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-pc.css" />
-->

<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/www/tablet/customfonts/font1/style.css"/>
<link rel="stylesheet" href="/fhem/www/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/m_myStyle.css" />
<link rel="stylesheet" href="css/fhem-mobil-ui-dark.css" />



<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>

<!-- Enable this lines for usage with WebViewControl --><!-- -->
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<!-- End for WebViewControl -->

<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-costum.css" />


</head>
<body>

    <!-- Demo FTUI 2.1 mobil page with slideout navigation -->

    <nav id="menu" class="bg-gray">
<section>
<div class="hbox">

<div class="vbox grow-3">
<div data-type="link" class="default large" data-icon-left="fa-music" data-active-color="green"
data-load="#t_musik_kueche"
data-url="#tablet/t_musik_kueche.html"
data-color="gray"
data-active-pattern="(.*#t_musik_kueche.html)">
</div>
<div class="tiny gray">Küche
</div>
</div>
<div class="vbox grow-3">
<div data-type="link" class=" large" data-icon-left="fa-music" data-active-color="green"
data-load="#t_musik_bad"
data-url="#tablet/t_musik_bad.html"
data-color="gray"
data-active-pattern="(.*#t_musik_bad.html)">
</div>
<div class="tiny gray">Bad</div>
</div>
<div class="vbox grow-3">
<div data-type="link" class=" large" data-icon-left="fa-music" data-active-color="green"
data-load="#t_musik_wohnzimmer"
data-url="#tablet/t_musik_wohnzimmer.html"
data-color="gray"
data-active-pattern="(.*#t_musik_wohnzimmer.html)">
</div>
<div class="tiny gray"
>Wohnzimmer</div>
</div>
<div class="vbox grow-3">
<div data-type="link" class=" large" data-icon-left="fa-music" data-active-color="green"
data-load="#t_musik_iphone"
data-url="#tablet/t_musik_iphone.html"
data-color="gray"
data-active-pattern="(.*#t_musik_iphone.html)">
</div>
<div class="tiny gray">iPhone</div>
</div>

</div>
</section>


<div data-type="link" class="default top-space large" data-width="150" data-text-align="left" data-active-color="green" data-color="gray"
data-icon-left="fa-dashboard"
data-load="#t_dashboard"
data-url="#tablet/t_dashboard.html"
data-active-pattern="(.*#t_dashboard.html)">Dashboard</div>
<div data-type="link" class="large top-space" data-width="150" data-text-align="left" data-color="gray" data-active-color="green"
data-icon-left="fa-home"
data-load="#t_wohnzimmer"
data-url="#tablet/t_wohnzimmer.html"
data-active-pattern="(.*#t_wohnzimmer.html)">Wohnzimmer</div>
        <div data-type="link" class="large top-space right-narrow" data-width="150" data-text-align="left" data-color="gray" data-active-color="green"
data-icon-left="fa-bed"       
data-load="#t_schlafzimmer"
data-url="#tablet/t_schlafzimmer.html"
data-active-pattern=".*#t_schlafzimmer.html">Schlafzimmer</div>
        <div data-type="link" class="large top-space right-narrow" data-width="150" data-text-align="left" data-color="gray" data-active-color="green"
data-icon-left="mi-kitchen"
data-load="#t_kueche"
data-url="#tablet/t_kueche.html"
data-active-pattern=".*#t_kueche.html">Küche</div>
        <div data-type="link" class="nocache large top-space right-narrow" data-width="150" data-text-align="left" data-color="gray" data-active-color="green"
data-icon-left="fa-bathtub"
data-load="#t_bad"
data-url="#tablet/t_bad.html"
data-active-pattern=".*#t_bad.html">Bad</div>
<div data-type="link" class="large top-space" data-width="150" data-text-align="left" data-active-color="green" data-color="gray"
data-icon-left="mi-child_friendly"
data-load="#t_hobbyzimmer"
data-url="#tablet/t_hobbyzimmer.html"
data-active-pattern="(.*#t_hobbyzimmer.html)">Hobbyzimmer</div>
<div data-type="link" class="large top-space" data-width="150" data-text-align="left" data-active-color="green" data-color="gray"
data-icon-left="fa-cloud"
data-load="#t_wetter"
data-url="#tablet/t_wetter.html"
data-active-pattern="(.*#t_wetter.html)">Wetter</div>
<div data-type="link" class="large top-space" data-width="150" data-text-align="left" data-active-color="green" data-color="gray"
data-icon-left="fa-gears"
data-load="#t_system"
data-url="#tablet/t_system.html"
data-active-pattern="(.*#t_system.html)">System</div>
<div data-type="link" class="large top-space" data-width="150" data-text-align="left" data-active-color="green" data-color="gray"
data-icon-left="fa-music"
data-load="#t_musik"
data-url="#tablet/t_musik.html"
data-active-pattern="(.*#t_musik.html)">Musik</div>
    </nav>



    <main id="panel" class="">
        <header id="header-nav" class="bg-lightgray">
         <div class="hbox">
<div class="vbox items-left left-space">
<div data-type="slideout" data-icon-color="white" class=""></div>
</div>
<div class="vbox grow-9 items-left">
<div id="linkname" class="big center-align middle"></div>
</div>
<div class="vbox grow-2 right-narrow">
<div class="hbox">
<div data-type="clock" data-format="H:i:s" class="cell big right-narrow"></div>
</div>
  </div>
</div>
        </header>


<div class="page" id="t_dashboard"></div>
<div class="page" id="t_wohnzimmer"></div>
<div class="page" id="t_schlafzimmer"></div>
<div class="page" id="t_kueche"></div>
<div class="page" id="t_bad"></div>
<div class="page" id="t_hobbyzimmer"></div>
<div class="page" id="t_wetter"></div>
<div class="page" id="t_system"></div>
<div class="page" id="t_musik_kueche"></div>
<div class="page" id="t_musik_bad"></div>
<div class="page" id="t_musik_wohnzimmer"></div>
<div class="page" id="t_musik_iphone"></div>
<div class="page" id="t_musik_uebersicht"></div>
</main>




</body>
</html>


Eingebunden sind die Icons

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />


[tomster]

Mit der 2.5 werden die mi-Icons bei mir nicht mehr angezeigt.

Ist das auch die Ursache für das Einrücken der 3 Elemente?

Nö, der Grund für das Einrücken der 3 Elemente ist die class right-narrow, die Du bei diesen 3 Elementen eingefügt hast.
Die mi-Icons brauchst Du in V2.5 gar nicht separat zu definieren. Auch wenn ich eigentlich kein Freund dieses terminus technicus bin: RTFM

Im ersten Posting dieses Threads hier steht unter dem ersten Indexpunkt "- dynamisches Laden der Main-CSS Files und Standard-JS-Libs." genau wie der Header in V2.5 auszusehen hat. Vergleiche das mal mit Deinem Code und ändere ihn entsprechend ab. Ich trau mir fast wetten, dass die mi-Icons danach wieder funktionieren...

Nothing for ungood, but this must once have said been