Evaluierungsversion 2.2

Begonnen von setstate, 17 März 2016, 10:40:13

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 2 3 4 5 ... 52
Benutzer-Aktionen

kvo1

#30
28 März 2016, 16:12:27 Letzte Bearbeitung: 28 März 2016, 16:24:51 von kvo1
Hallo setstate,
Habe das mal kurz installiert und getestet. Gefühlt läuft das auch alles etwas schneller , werde mal sehen ob alles noch läuft soweit.

Ich kann nur mit den 4 Auswahlmöglichkeiten nichts anfangen , nur nach Wischen erscheint dann mein Altes Menue.
Ansonsten schon mal , danke und wie immer klasse Arbeit.
Klaus
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

ulli

#31
29 März 2016, 20:36:59
Nachdem ich die letzte Woche jeden tag geschaut  habe ob es die 2.1er schon gibt...frag ich jetzt doch....wann hast du denn geplant es im svn zur Verfügung zu stellen so das ich es per update in fhem rein bekomme?

setstate

#32
29 März 2016, 20:52:39 Letzte Bearbeitung: 30 März 2016, 08:26:45 von setstate
Heute kommt erst einmal ein Update im Branch mit Demos zur Nutzung von Pagebutton, die zeigt, wie schnell dann das Umschalten mit prefetch und cache funktioniert.
Dann konvertiere ich noch die restlichen Widgets und zeige am Beispiel allen Widgets-Entwicklern, was man ändern muss.
Wenn dann genügend positves Feedback kommt, können wir über ein Merge in den Trunk nachdenken.

Vorher ich habe ein bisschen Angst, dass hier sonst zu viel Ärger losgeht: "Das geht bei mir nicht mehr ..."; "das Widget läuft nicht mehr" usw. 

Also bitte: testen, testen testen ...

Roman

#33
29 März 2016, 22:28:24
Hallo,

hab heute auch die 2.1 mal ausprobiert.
sieht nett aus und lief fast auf Anhieb.

In deiner Info steht der Pfad '/<fhem-path>/www/tablet_eval'  und 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL'
In den index-Dateien steht als Pfad allerdings 'tablet_dev', hier waren noch Anpassungen notwendig.

Meine bestehende Installation scheint auch direkt mit der 2.1 zu funktionieren (hab meine *html Dateien in den Ordner /tablet_eval kopiert).
Noch nicht ausgiebig getestet, aber ein Aufruf meiner Seiten klappt problemlos, die Anzeige ist OK, Schalten etc. geht auch ohne Probleme.

Gruß
Roman

Roman

#34
30 März 2016, 00:13:27
Hallo setstate,

ich hab noch ein wenig weiter getestet, meine Seiten werden im neuen Design angezeigt, was mich für den ersten Test nicht überraschte,
Ich würde mit der 2.1 Version aber auch das 'alte' Design testen wollen. Das Gridster-Element scheint hier nicht zu funktionieren (oder noch nicht ? ).

ZitatAlle HTML Seiten sehen mit der 2.1 genauso aus, wie sie gebaut worden sind.

Hab ich was übersehen, oder muss ich noch was einstellen ?

Ich hab mal 2 kleine Screenshots (neu mit 2.1 und alt) angehängt.
Als einzige Änderung an den html-Dateien hab ich für die neue Version 2.1 Widgets die noch nicht unterstützt werden rausgenommen.

Gruß
Roman

setstate

#35
30 März 2016, 00:58:52
Das helle Aussehen ist nicht neu, das kommt durch die Angabe dieser Zeile:

Code Auswählen
<link rel="stylesheet" href="/fhem/tablet_eval/css/fhem-mobil-ui.css" />

Ist auch schon bei 1.x dabei.

Aber das Beispiel index_nav_mobil.html nutzt kein Gridster und hat damit auch die notwendigen Zeilen im Header nicht dabei.

jquery.gridster.min.css
jquery.gridster.min.js

Für deine Seiten muss der Header dann eher so aussehen:

Code Auswählen

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.1.1
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * !!!! Evaluation version - run only in a staging enviroment !!!!
     *
     * - create a new folder named 'tablet_eval' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="shortpoll-interval" content="900">
    <meta name="shortpoll-only-interval" content="30">
    <meta name="longpoll-delay" content="5"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- 1=output to console;0=not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="/fhem/tablet_eval/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet_eval/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet_eval/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet_eval/lib/jquery.toast.min.css" />

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

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet_eval/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet_eval/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet_eval/js/fhem-tablet-ui.js" defer></script>

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


siehe index_page_demo.html

setstate

#36
30 März 2016, 01:36:21 Letzte Bearbeitung: 30 März 2016, 08:32:50 von setstate
nun eine kurze Erklärung zum neuen Aufbau der Widgets.

So sieht die Grundstruktur aus.
Die Funktionen init und update sind public und das Widget erbt vom Basis-Widget

Code Auswählen

var Modul_example = function () {

    function init () {
    };

    function update (dev,par) {
    };

    return $.extend(new Modul_widget(), {
        widgetname: 'example',
        init: init,
        update: update,
    });
};

Notwendige Anpassungen:

Version 1.*
Code Auswählen
this.elements = $('div[data-type="'+this.widgetname+'"]');
Version 2.1
Code Auswählen
this.elements = $('div[data-type="'+this.widgetname+'"]',this.area);

Version 1.*
Code Auswählen
elem.addReading('get');
Version 2.1
Code Auswählen
this.addReading(elem,'get');


Version 1.*
Code Auswählen
init: function () {},
Version 2.1
Code Auswählen
function init () {};

Das neue Update ist jetzt eingecheckt. Siehe erste Seite in diesem Thread.

Anbei auch eine angepasste Version vom Clock-Widget zum Vergleich, was angepasst werden muss, damit es wieder läuft.

nesges

#37
30 März 2016, 16:17:00
Zitat von: setstate am 17 März 2016, 10:40:13
bzw.
Code Auswählen
git clone https://github.com/knowthelist/fhem-tablet-ui.git
und dann
Code Auswählen
git checkout version2.1

Code Auswählen
root@wopr:/var/www/ftui# git clone https://github.com/knowthelist/fhem-tablet-ui.git
Cloning into 'fhem-tablet-ui'...
remote: Counting objects: 5076, done.
remote: Compressing objects: 100% (34/34), done.
remote: Total 5076 (delta 14), reused 0 (delta 0), pack-reused 5039
Receiving objects: 100% (5076/5076), 4.48 MiB | 1.86 MiB/s, done.
Resolving deltas: 100% (3044/3044), done.
root@wopr:/var/www/ftui# git checkout version2.1
fatal: Not a git repository (or any of the parent directories): .git

Irgendwas fehlt da - versucht hab ich:

Code Auswählen
root@wopr:/var/www/ftui# cd fhem-tablet-ui/
root@wopr:/var/www/ftui/fhem-tablet-ui# git checkout version2.1
Branch version2.1 set up to track remote branch version2.1 from origin.
Switched to a new branch 'version2.1'
root@wopr:/var/www/ftui/fhem-tablet-ui# git pull
Already up-to-date.

Passt das so?

ulli

#38
30 März 2016, 18:04:20
Ein Symlink tut noch gut
ln -s /opt/fhem/www/ftui/fhem-tablet-ui/www/tablet /opt/fhem/www/tablet_dev

und danach ein neues define
define TABLETDEV HTTPSRV tablet/ ./www/tablet_dev Tablet-UI

Dann hat es bei mir geklappt

ulli

#39
30 März 2016, 18:08:43
Habe gerade den "Pagebutton" testen wollen.
Dazu habe ich meine inc_menu.html wie folgt angepasst:
Code Auswählen

<header class="headerTransparent">MENU</header>

<div class="container large">
<div data-type="pagebutton" class="cell"
data-return-time="60" data-url="index_home.html"
data-icon="fa-home"
data-background-icon="fa-circle-thin"
data-on-color="cornflowerblue"
></div>

<div data-type="pagebutton" class="cell"
data-url="index_wohnzimmer.html"
data-icon="oa-scene_livingroom"
data-background-icon="fa-circle-thin"
data-on-color="cornflowerblue"
></div>

<div data-type="pagebutton" class="cell"
data-url="index_System.html" data-icon="fa-wrench"
data-background-icon="fa-circle-thin"
data-on-color="cornflowerblue"
></div>
   </div>


Diese wird wie folgt durch die index.html eingebunden:
Code Auswählen

<!DOCTYPE html>
<html>
<head>
<title>Ulli's Haussteuerung</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="112">
<meta name="widget_base_height" content="110">
<meta name="widget_margin" content="1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="gridster_disable" content="1">
<!-- <meta http-equiv="Cache-Control" content="no-store" />-->
<meta name="debug" content="0"> <!-- 1=output to console;0=no output -->

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

<link rel="stylesheet" href="/fhem/tablet_dev/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet_dev/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet_dev/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet_dev/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet_dev/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet_dev/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet_dev/lib/powerange.min.css" />

<!-- css mit Anpassungen, wie z.B. Hintergrundbild -->
<link rel="stylesheet" href="/fhem/tablet/css/my-fhem-tablet-ui.css" />


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

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

<body>
<div class="gridster">
<ul>
<li class="halbTransparent" data-template="inc_menu.html" data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
</ul>
</div>
</body>

</html>


Was stimmt denn da nicht?

dadoc

#40
30 März 2016, 18:12:25
Zitat von: setstate am 17 März 2016, 10:40:13
und dann
Code Auswählen
git checkout version2.1
Da bekomme ich einen Fehler:
Code Auswählen
:~# git clone https://github.com/knowthelist/fhem-tablet-ui.git
Cloning into 'fhem-tablet-ui'...
remote: Counting objects: 5076, done.
remote: Compressing objects: 100% (34/34), done.
remote: Total 5076 (delta 14), reused 0 (delta 0), pack-reused 5039
Receiving objects: 100% (5076/5076), 4.48 MiB | 514 KiB/s, done.
Resolving deltas: 100% (3044/3044), done.
root@raspberrypi:~# git checkout version2.1
fatal: Not a git repository (or any of the parent directories): .git

Was mache ich falsch?
Grüße
Martin
Standort 1: FS20 mit CUL und FHEM auf Raspi. HM-Komponenten (Heizung, Rollladen, Schalter). HM IP über Raspimatic (testweise)
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods

ulli

#41
30 März 2016, 18:17:04
Vorher in das Verzeichnis "/opt/fhem/www/ftui/fhem-tablet-ui" gehen :)

setstate

#42
30 März 2016, 18:20:30
@Ulli: okay, merke gerade, da ist noch etwas Erklärung von meiner Seite notwendig.
Dem pagebutton muss man mitgeben, was wohin geladen werden soll. data-load
Die Ziel und die Source Seite muss dementsprechend getagged sein.
<div class="page" id="content1">
Schau dir meine Beispielseite mal genauer an, was minimal dasein muss.

dadoc

#43
30 März 2016, 18:35:58
Zitat von: ulli am 30 März 2016, 18:17:04
Vorher in das Verzeichnis "/opt/fhem/www/ftui/fhem-tablet-ui" gehen :)
Dasselbe:
Code Auswählen
pi@raspberrypi:/opt/fhem/www/ftui/fhem-tablet-ui# git checkout version2.1
fatal: Not a git repository (or any of the parent directories): .git
Standort 1: FS20 mit CUL und FHEM auf Raspi. HM-Komponenten (Heizung, Rollladen, Schalter). HM IP über Raspimatic (testweise)
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods

ulli

#44
30 März 2016, 18:53:53
Zitat von: setstate am 30 März 2016, 18:20:30
@Ulli: okay, merke gerade, da ist noch etwas Erklärung von meiner Seite notwendig.
Dem pagebutton muss man mitgeben, was wohin geladen werden soll. data-load
Die Ziel und die Source Seite muss dementsprechend getagged sein.
<div class="page" id="content1">
Schau dir meine Beispielseite mal genauer an, was minimal dasein muss.

Ok kapiert.

Generell zum Verständnis: Wie soll dann bestmöglich die Seite aufgebaut werden?

Ich vermute ohne pagetab nur noch pagebutton.
D.h. ich habe in unterschiedlichen page_content files jeweils mehrerer <li> Einträge.
Generelle <li> Einträge, wie eine Uhrzeit oder das Menü selbst, welche auf jeder Seite angezeigt werden sollen, dann in die index.html. Somit werden diese durch das anklicken eines Menüeintragens (pagebuttons) nicht neu geladen?

Ist das die Idee?
Drucken
Nach oben Seiten 1 2 3 4 5 ... 52
Benutzer-Aktionen