New FHEM Tablet UI

[uniqueck]

Das Widget habe ich aus folgenden Thread http://forum.fhem.de/index.php/topic,19922.msg319607.html#msg319607,
allerdings wurde es nicht weiter entwickelt und es habe nicht viele genutzt, ich wollte allerdings nicht über das einbinden von readingGroups gehen, daher habe ich es selber etwas weiter entwickelt, allerdings nur den einen Strang innerhalb des widgets, wenn der original author nix dagegen hat, kann es von mir aus gerne bei dir mit aufgenommen werden.

Kann ja ein erfahrender widget  Ersteller mal drüber schauen und es vielleicht ein bisschen aufräumen, vor allem können die log Meldungen raus.

gruß

Guten Morgen

wo ist den das widget_calview gehostet?
Soll/darf ich es mit in das FTUI Repo aufnehmen, damit es auch per Update verteilt wird?

ciao

[PatrickR]

Hi!

Nach erneuter Betrachtung deines Screenshots.... Mach die <li> mal auf data-sizey="2"

Hatte ich schon getestet. Dann ist der zweite Regler daneben aber immer noch zu viel :/

Patrick

[uniqueck]

Ohne die Log Meldungen aus der Console kann ich dir da leider nicht weiter helfen.
Wegen der Schrift Größe, da wirst du aktuell direkt in der javascript Datei beim erstellen der entsprechenden divs ne eigene Klasse mit einschleußen müssen, oder man erweitert das widget so, dass diese von außen mit gegeben werden kann.

Aber es freut mich, dass es nun noch jemanden gibt, wer diese widget nutzen kann.

Hi @uniqueck

Super, es funktioniert, zumindest teilweise. Heutige Termine werden nicht angezeit, siehe Anlage.

Und wie bekomm ich die Schrift kleiner? Ich habe class small genommen, aber das ist mir noch zu groß.

Danke

[Nobby1805]

@PatrickR: Hmm, bei mir sieht da so und damit richtig aus ... ich glaube, die Ursache liegt außerhalb des von dir geposteten Teils ... poste doch mal die komplette Datei

[PatrickR]

Hi!

@PatrickR: Hmm, bei mir sieht da so und damit richtig aus ... ich glaube, die Ursache liegt außerhalb des von dir geposteten Teils ... poste doch mal die komplette Datei

Das Interessante ist, dass das Auftreten des Bugs abhängig von der aufgerufenen URL ist:

Code Auswählen Erweitern


http://fhem:8083/fhem/ftui#index.html => Fehler tritt auf
http://fhem:8083/fhem/ftui/index.html (wird zu http://fhem:8083/fhem/ftui/index.html#index.html) => Fehler tritt nicht auf

Löschen des Caches brachte keine Besserung.

Patrick

[viegener]

Hi!
Das Interessante ist, dass das Auftreten des Bugs abhängig von der aufgerufenen URL ist:

Code Auswählen Erweitern


http://fhem:8083/fhem/ftui#index.html => Fehler tritt auf
http://fhem:8083/fhem/ftui/index.html (wird zu http://fhem:8083/fhem/ftui/index.html#index.html) => Fehler tritt nicht auf

Löschen des Caches brachte keine Besserung.

Patrick

Kann es sein, dass Du in deinem index.html einen pagetab definiert hast?
Am besten postest du mal den ganzen index.html file...

[roman1528]

Damit hatte ich auch riesige probleme. Immer "http://IP:PORT/fhem/ftui/" als startadresse
So wie das aussieht "/index.html#index.html" hat er mal nen pagetab mal nen button... ich habe alles auf pagebutton umgestellt weil viele Probleme mit dem nachladen neuer Seiten gab

Gesendet von meinem SM-G900F mit Tapatalk

[viegener]

Hi!
Das Interessante ist, dass das Auftreten des Bugs abhängig von der aufgerufenen URL ist:

Code Auswählen Erweitern


http://fhem:8083/fhem/ftui#index.html => Fehler tritt auf
http://fhem:8083/fhem/ftui/index.html (wird zu http://fhem:8083/fhem/ftui/index.html#index.html) => Fehler tritt nicht auf

Löschen des Caches brachte keine Besserung.

Patrick

Achso und kannst Du mal den define fuer den httpsrv posten, der erste url ist wirklich sehr komisch...

[uniqueck]

Abend @setstate,

du kannst das widget_calview mit ins TabletUI Repo aufnehmen, dann wird es demnächste mit verteilt.

Guten Morgen

wo ist den das widget_calview gehostet?
Soll/darf ich es mit in das FTUI Repo aufnehmen, damit es auch per Update verteilt wird?

ciao

[PatrickR]

Mahlzeit!

Tatsächlich nutze ich pagetabs:
http://pastebin.com/swKpTWkW

Patrick

[setstate]

Ich habe alle Widgets, die widget_knob als Basisklasse haben (HomeStatus,Volume,Thermostat) etwas aufgeräumt und dabei festgestellt, dass man "knob" auch als eigenständiges Control nutzen kann.

Code Auswählen Erweitern

   
<div data-type="knob"
        data-device='dummy1'
        data-angleArc=360
        data-angleOffset=0
        class="blue large">
</div>


[roman1528]

Tatsächlich nutze ich pagetabs:

http://pastebin.com/swKpTWkW

Pagetabs haben bei mir Probleme beim nachladen der neuen Seite verursacht... obwohls ja echt schick aussieht das überblenden.
habe auf pagebutton umgestellt....

Mir ist aufgefallen, auch wenn die widgets ihre *.css oder *.js selbst einbinden macht es sinn sie mit in die *.html rein zu schreiben...
ich habe bei weitem auch nicht alle drin aber bei mir sieht das so aus: außerdem habe ich alles im <head> stehen. einfach der reihenfolge wegen^^

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
        <title>HOME</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="130">
        <meta name="widget_base_height" content="147">
        <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="0"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="gridster_disable" content="1">
        <meta name="debug" content="0"> <!-- 1=output to console;0=no 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/lib/font-awesome.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-roman.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>
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/pgm2/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'FHEMWZ':'Tablet'}; var wvcUserCssFile="/fhem/pgm2/webviewcontrol.css"</script>
</head>
<body>

Das wird dein Problem garantiert nicht lösen aber es ist ein ansatz... ansonsten kann ich keinen Fehler in deiner html entdecken. Ich hatte ab und an doppelte anführungszeichen was zu problemen geführt hat aber bei dir is soweit nix falsch.... komisch

[setstate]

ich gebe es zu, Pagetab ist sehr kompliziert und verwirrend, wo was hin muss 
Vllt. können wir das noch optimieren, um es einfacher nutzen/aufbauen zu können.

Aber ich versuche nochmal die Nutzung von Pagetab und die Seiten zu erklären:
- Die index.html (Startseite) ist minimal und beinhaltet nur das Menu mit den 1-n Pagetabs

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
<title>FHEM-Tablet-UI</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="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 http-equiv="X-UA-Compatible" content="IE=edge">
        <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/lib/jquery.gridster.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/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/css/fhem-tablet-ui-user.css" />
</head>
<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li>
        </ul>
    </div>
</body>
    <script src="/fhem/pgm2/jquery.min.js"></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js"></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js"></script>

    <!-- Remove this line to enable for usage with WebViewControl -->
    <script src="/fhem/pgm2/cordova-2.3.0.js"></script>
    <script src="/fhem/pgm2/webviewcontrol.js"></script>
    <script>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <!-- End for WebViewControl -->
</html>



- die per Template eingebundene menu.html enthält die Pagetabs mit den Links zu den Unterseiten

Code Auswählen Erweitern

<html>
<body>
    <header>MENU</header>
    <div class="cell">
        <div data-type="pagetab" data-url="index_main.html"  data-icon="fa-home" class="top-space"></div>
        <div data-type="pagetab" data-url="index_music.html" data-icon="fa-music" class="top-space"></div>
        <div data-type="pagetab" data-url="index_vusolo.html" data-icon="fa-sliders" class="top-space"></div>
        <div data-type="pagetab" data-url="index_set.html" data-icon="fa-lightbulb-o" class="top-space"></div>
        <div data-type="pagetab" data-url="index_charts.html" data-icon="fa-line-chart" class="top-space"></div>
        <div data-type="pagetab" data-url="index_8.html" data-icon="fa-line-chart" class="top-space"></div>
        <div class="bottom bottom-space-2x">
           <div data-type="clock" data-format="H:i" class="large"></div>
           <div data-type="clock" data-format="d.n.Y" class="small"></div>
        </div>
</div>
</body>
</html>


- Ganz oben ist die index_main.html, die zuerst angezeigt wird und die Widgets hat
- Jede Unterseite hat wieder eine Menü-Leiste dabei, die per Template eingebunden wird. Aber, die Unterseiten  enthalten keine Header Dateien / CSS links mehr.

Code Auswählen Erweitern


<html>
<title>FHEM</title>
<head>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html"></li>
<li data-row="1" data-col="2" data-sizex="3" data-sizey="4">
  <header>EXAMPLE1</header>
  <!-- place your widget here -->
</li>
<li data-row="1" data-col="4" data-sizex="6" data-sizey="4">
   <header>EXAMPLE2</header>
   <!-- place your widget here -->
</li>
<li data-row="1" data-col="10" data-sizex="2" data-sizey="4">
    <header>EXAMPLE3</header>
    <!-- place your widget here -->
</li>
<li data-row="5" data-col="2" data-sizex="6" data-sizey="3">
  <header>EXAMPLE4</header>
  <!-- place your widget here -->
</li>
<li data-row="5" data-col="8" data-sizex="5" data-sizey="3">
  <header>EXAMPLE5</header>
  <!-- place your widget here -->
</li>
</ul>
</div>
</body>
</html>


index.html -> Header-Files (css/js), Nur ein Gridster-Element zum Import des Templates "menu.html"
menu-html ->  eine Liste von Pagetab Widgets mit Links zu den Unterseiten
index_*.html -> Unterseiten mit den eigentlichen Widgets, keine Header-Files, ein Gridster-Element für die menu.html

@PatrickR: Deine Seite hat schon mal den Fehler, dass es ein Pagetab mit url "index.html" gibt

[ChrisK]

ich gebe es zu, Pagetab ist sehr kompliziert und verwirrend, wo was hin muss 
Vllt. können wir das noch optimieren, um es einfacher nutzen/aufbauen zu können.

Was hältst Du denn von dieser Lösung: http://forum.fhem.de/index.php/topic,34233.msg340230.html#msg340230

[roman1528]

Was hältst Du denn von dieser Lösung: http://forum.fhem.de/index.php/topic,34233.msg340230.html#msg340230

Von Anfang an alles laden und im Hintergrund aktualisieren lassen. Sehr gute Idee... muss ich mich die Tge nochmal mit befassen^^ Nett!

ich gebe es zu, Pagetab ist sehr kompliziert und verwirrend, wo was hin muss 
Vllt. können wir das noch optimieren, um es einfacher nutzen/aufbauen zu können.

Aber ich versuche nochmal die Nutzung von Pagetab und die Seiten zu erklären:
- Die index.html (Startseite) ist minimal und beinhaltet nur das Menu mit den 1-n Pagetabs
....

Das ist mal eine klare Erklärung. Habe es danach aufgebaut und siehe daaa... alles schick. bis auf das eine klitzekleine Problemchen dass er ab und an die icons nicht oder nur teilweise lädt. Habe schon alles auf Fehler (Anführungszeichen, <div>, ', und und und) gecheckt... Alles hat seine Ordnung. Der Fehler tritt auch nur sporadisch auf.