Evaluierungsversion 2.2

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

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 ... 39 40 41 42 43 ... 52
Benutzer-Aktionen

setstate

#600
19 August 2016, 01:53:40
Hallo Mathias,

das Slideout Widget versteht jetzt

Code Auswählen
data-position="right"

Ich habe ein Beispiel namens index_nav_right_fixed_mobil.html mit hochgeladen.

Torben

#601
19 August 2016, 05:50:01
Hallo,
ich bin jetzt auch dabei auf FTUI 2.2 und pagebutton umzustellen und habe dabei zwei Probleme.
Zum einen bleiben bei pagebutton die Buttons aktiv hinterlegt, bei denen ich "warn" nutze - solange bis ich wieder ein Button drücke, bei dem warn nicht genutzt wird - zumindest scheint mir das die Grundlage von dem Problem zu sein. Dann gehen alle bis auf den aktiven wieder aus (siehe Bilder)
Code Auswählen
            <li data-row="1" data-col="2" data-sizex="1" data-sizey="1" class="semitransparent">
                <div data-type="pagebutton" data-url="#page_home.html" data-load="#home" data-off-background-color="transparent" data-off-color="#606060"
                 data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_home.html" data-icon="fa-home" class="default top-space"></div>
                <div data-type="pagebutton" data-url="#page_music.html" data-load="#music" data-off-background-color="transparent" data-off-color="#606060"
                 data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_music.html"
                 data-icons='["fa-music","fa-music warn"]' class="prefetch top-space"
                 data-device = "Sonos"
                 data-get = "MasterPlayerPlayingCount"
                 data-states='["0","[1-9]"]'>
                </div>
                <div data-type="pagebutton" data-url="#page_temphum.html" data-load="#temphum" data-off-background-color="transparent"
                 data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_temphum.html"
                 data-icons='["fa-cloud","fa-cloud warn"]' class="prefetch top-space"
                 data-device = "unwetterzentrale"
                 data-get = "WarnCount"
                 data-states='["0","[1-9]"]'>
                </div>
                <div data-type="pagebutton" data-url="#page_phone.html" data-load="#phone" data-off-background-color="transparent" data-off-color="#606060"
                 data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_phone.html"
                 data-icons='["fa-phone","fa-phone warn"]' class="prefetch top-space"
                 data-device = "Call_List_Missed"
                 data-get = "numberOfCalls"
                 data-states='["0","[1-9]"]'>
                </div>
                <div data-type="pagebutton" data-url="#page_light.html" data-load="#light" data-off-background-color="transparent" data-off-color="#606060"
                 data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_light.html" data-icon="fa-lightbulb-o" class="prefetch top-space"></div>
                 <div data-type="pagebutton" data-url="#page_car.html" data-load="#car" data-off-background-color="transparent" data-off-color="#606060"
                 data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_car.html" data-icon="fa-car" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#page_system.html" data-load="#system" data-off-background-color="transparent" data-off-color="#606060"
                 data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_system.html" data-icon="fa-cog" class="prefetch top-space"></div>
            </li>


Mein zweites Problem betrifft die popups. Mein Anruf-Popup geht auf, aber nicht mehr beim "data-get-off"-event zu. Ich habe einiges im Forum dazu gelesen, aber keine wirkliche Lösung. Den Code vom Popup habe ich im <li data-row="1" data-col="1"...
Code Auswählen
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" id="timeDate" class="semitransparent">
                <div class="left">
                     Table mit Uhr und Datum in dieser "Haupt-div"               
                 </div>
                 <div data-type="popup" data-device="Fritz_Box" data-get="event" data-get-on="ring" data-get-off="connect|disconnect" data-width="1180px" data-height="400px">
                  <div></div>
                  <div class="dialog">
                        <header>Anruf</header>
                        <div data-type="label" data-device="Fritz_Box" data-get="external_name" class="cell callName"></div>
                        <div data-type="label" data-device="Fritz_Box" data-get="external_number" class="cell callNumber"></div>
                  </div>
                </div>
            </li>

n4rrOx

#602
19 August 2016, 17:13:37
Zitat von: setstate am 19 August 2016, 01:53:40
Hallo Mathias,

das Slideout Widget versteht jetzt

Code Auswählen
data-position="right"

Ich habe ein Beispiel namens index_nav_right_fixed_mobil.html mit hochgeladen.

Wow super =))
Wie sieht's mit "top" / "bottom" und high bzw. width aus ??  ;D

Gruß
Mathias

Photon68

#603
19 August 2016, 17:51:26 Letzte Bearbeitung: 19 August 2016, 17:55:19 von Photon68
Zitat von: fhainz am 18 August 2016, 13:09:45
Das Problem kann ich bestätigen. Ich hatte auch unten Scrollbars wegen der zu großen Breite. Ich habe mir so beholfen:

Code Auswählen

/**************     UI Optimierungen     **************/
/******************************************************/
body {
margin-top: 5px;
margin-left: 5px;
width: auto !important;
}

/*****     Gridster in Gridster Korrekturen     ******/
/******************************************************/
.gridster ul {
height: auto !important;
width: auto !important;
}
.gridster .content {
background-color: transparent !important;
width: 751px !important;
}


Meiner Liste mit den pages hab ich die klasse content verpasst.
Code Auswählen

<li data-row="2" data-col="2" data-sizex="6" data-sizey="6" class="content">
<div class="page" id="contentHome"></div>
...
...
</li>


@FHainz

In welcher Datei muss ich die UI Korrekturen eintragen. Denn ich habe das gleiche Problem, dass der Content meine rechten Menüpunkte überlagert und so nicht mehr bedienbar macht.

Danke Photon68

setstate

#604
19 August 2016, 18:50:00
Aber die Breite kann man doch mit data-sizex einstellen??'

Photon68

#605
19 August 2016, 21:33:12 Letzte Bearbeitung: 19 August 2016, 21:45:01 von Photon68
@setstate

Das habe ich natürlich getan.
Bis zum Update hat auch alles funktioniert. Seitdem habe ich nach dem Aufruf der index.html die Scrollbalken und das rechte Menü ist ab der Höhe des eingelagerten contens nicht mehr zu bedienen, da es unsichtbar vom content überlagert wird.

Gruß Photon68

setstate

#606
19 August 2016, 22:05:14
Also, ich habe jetzt mal bei mir eine Menu-Content-Menu Testseite angelegt, keine Überlagerung.

Code Auswählen

<body>
    <div class="gridster">
        <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="9">
            <div class="cell">
                <div data-type="pagebutton" data-url="#content_main.html"     data-load="#content1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*#content_main.html)" data-icon="fa-home" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_music.html"    data-load="#content2" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_music.html" data-icon="fa-music" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_settings.html" data-load="#content3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_settings.html" data-icon="fa-sliders" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_set.html"      data-load="#content4" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_set.html" data-icon="fa-lightbulb-o" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_charts.html"   data-load="#content5" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_charts.html" data-icon="fa-line-chart" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_vusolo.html"   data-load="#content6" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_vusolo.html" data-icon="fa-tv" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_tram.html"     data-load="#content7" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_tram.html" data-icon="fa-train" class="top-space"></div>
                <div data-type="pagebutton" data-url="#content_trafic.html"   data-load="#content8" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_traffic.html" data-icon="fa-car" class="top-space"></div>
            </div>
        </li>
        <li data-row="1" data-col="2" data-sizex="10" data-sizey="9">
            <div class="page" id="content1"></div>
            <div class="page" id="content2"></div>
            <div class="page" id="content3"></div>
            <div class="page" id="content4"></div>
            <div class="page" id="content5"></div>
            <div class="page" id="content6"></div>
            <div class="page" id="content7"></div>
            <div class="page" id="content8"></div>
         </li>
         <li data-row="1" data-col="11" data-sizex="1" data-sizey="9">
             <div class="cell">
                 <div data-type="pagebutton" data-url="#content_main.html"     data-load="#content1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*#content_main.html)" data-icon="fa-home" class="top-space"></div>
                 <div data-type="pagebutton" data-url="#content_music.html"    data-load="#content2" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_music.html" data-icon="fa-music" class="top-space"></div>
                 <div data-type="pagebutton" data-url="#content_settings.html" data-load="#content3" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_settings.html" data-icon="fa-sliders" class="top-space"></div>
                 <div data-type="pagebutton" data-url="#content_set.html"      data-load="#content4" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_set.html" data-icon="fa-lightbulb-o" class="top-space"></div>
                 <div data-type="pagebutton" data-url="#content_charts.html"   data-load="#content5" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_charts.html" data-icon="fa-line-chart" class="top-space"></div>
                 <div data-type="pagebutton" data-url="#content_vusolo.html"   data-load="#content6" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_vusolo.html" data-icon="fa-tv" class="top-space"></div>
                 <div data-type="pagebutton" data-url="#content_tram.html"     data-load="#content7" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_tram.html" data-icon="fa-train" class="top-space"></div>
                 <div data-type="pagebutton" data-url="#content_trafic.html"   data-load="#content8" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#content_traffic.html" data-icon="fa-car" class="top-space"></div>
             </div>
         </li>
        </ul>
    </div>
</body>


Was mache ich anders?

Photon68

#607
19 August 2016, 22:28:00
Hallo setstate,


ich bin ratlos!?

Vor allem, weil es vor dem letzten Update funktionierte.

Das heisst, ich habe außer dem Update seit Wochen nichts geändert.

setstate

#608
19 August 2016, 22:39:31
ihr könnt vielleicht aber persönliche CSS Files eingebunden haben, die sich jetzt nicht mehr vertragen. Oder ein fehlerhaftes Layout wirkt sich jetzt anders aus.
Kannst nur mal die index.html posten und ich schaue nach ...

choetzu

#609
19 August 2016, 23:07:30
Zitat von: choetzu am 25 Juli 2016, 20:12:02
das motiviert ;)

Ich habe eins nach dem anderen probiert. Erst nachdem ich alle - also 1 bis 3 - realisiert habe, hats funktioniert. Seit heute Morgen keinen Aussetzer mehr. Es scheint offensichtlich die Kombination von allen gewesen zu sein. Super!!!

Danke für die Hilfe.. BIn voll happy...

Bin doch nicht soo happy! Wenn ich die index_mobile.html vom Homebildschirm meines iPhone 6 starte, muss ich bei jedem gefühlten dritten Mal die Seite 2-3 mal starten, damit die Werte korrekt geladen werden.. Könnte es evtl. am dyndns liegen? Mein code ist ja offensichtlich ok. Oder liegt es gar an Safari od Apple?

Danke für die Hilfe
Raspi3, EnOcean, Zwave, Homematic

Photon68

#610
19 August 2016, 23:26:42
@setstate

sh. in der Anlage meine index.html

Habe auch schone versucht meinen eigenen Hintergrund etc. zu entfernen, da ich einen ähnlichen Verdacht habe.


setstate

#611
20 August 2016, 09:43:15
deine nackte index.html zeigt bei mir keine Probleme. Ich habe das Content LI in rot gefärbt und sehe keine Überlagerung und die rechten Button kann man drücken. Jetzt können Effekte aus deinen Extra CSS Files kommen oder der Inhalt der Unterseite (die ich auch nicht habe) sind zu groß.

Übrigens den Header Inhalt könnte man radikal aufräumen. DIe ganzen WIdgets JS Files werden dynamisch geladen und müssen nicht mehr drin sein. Die Files können auch relativ angegeben werden, also im Bezug auf das aktuelle Verzeichnis.

SO reicht das (plus die privaten Extra Files)
Code Auswählen

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="77">
    <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="widget_margin" content="4">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- verbose level 1-6 = output to console;0 = not output -->


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

    <!-- 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="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

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

Photon68

#612
20 August 2016, 10:30:46
Danke setstate!

Dann werde ich meine content-Seiten Seite für Seite überprüfen!
Ich melde mich wieder.

Gruß Photon68

fhainz

#613
20 August 2016, 12:52:16
Hallo setstate,

es liegt anscheinend an widget_base_width. Du gibt diese mit 77 an, bisher hatte ich 116 verwendet. Ich denke die Zahl hab ich noch aus der 1.0?
Wenn du widget_base_width auf zb 116 setzt wird, auch mit deinem code, das rechte Menü komplett verdeckt. Man sieht nichtmal die Icons.
Solle das rechte Menü nicht "rüber rutschen"?

setstate

#614
20 August 2016, 16:17:33
aber beim Beispiel von Photon68 ist die Weite auch größer und es klappt bei mir damit

Code Auswählen
<meta name="widget_base_width" content="140">
<meta name="widget_base_height" content="157">
Drucken
Nach oben Seiten 1 ... 39 40 41 42 43 ... 52
Benutzer-Aktionen