[FHEM-Tablet-UI] User-Demos

[Tobias]

ja klar gerne..

für die Wetterspalten oben habe ich folgendes in fhem eingestellt

Code Auswählen Erweitern

define Wetterext PROPLANTA Burgdorf+%28Kreis+Hannover%29

hier musst du natürlich deine Stadt eintragen. Die html findest du unten.

Für das Chart benutze ich Meteo

https://github.com/knowthelist/fhem-tablet-ui/tree/master/examples/charts

Hi,
kann sich einer vorstellen warum beim Meteogram nichts, noch nichtmal ein leeres Diagramm angezeigt wird? Ich habe es 1:1 kopiert übernommen.... Die Widgets sind bei mir up-to-date

[en-trust]

Habe meine FTUI jetzt auf dem Tablet 1024x600 getestet. Aber die Darstellung lässt sich so beschreiben, dass alle Boxen am Oberen Bildschirm aufgereiht sind. Am PC und auf dem Handy wird mir das alles richtig angezeigt.

Folgendes habe ich vorab in der index stehen.

Code Auswählen Erweitern


  <script type="text/javascript">               
  if (getWidth() == "1280" ) {
    document.write('<meta name="widget_base_width" content="83">');
    document.write('<meta name="widget_base_height" content="72">');
  }
  else if (getWidth() == "1024" ) {
    document.write('<meta name="widget_base_width" content="65">');
    document.write('<meta name="widget_base_height" content="52">');
  }
  else {
    document.write('<meta name="widget_base_width" content="106">');
    document.write('<meta name="widget_base_height" content="82">');
  };
  </script>


Ansonsten sieht sie eher so aus wie bei Paul. Jemand eine Erklärung für das Phänomen ?

[Wasserwerk33]

Hi leute

Ich bekomme es einfach nicht hin, habe bei anderen schon geschaut aber da finde ich meinen fehler nciht, habe auch schon sachen von denn kopiert aber das bringt mir auch nix. 

Ich würde gerne das Icon oben habe und was dahintersteck drunter stehen haben: z.b WETTER icon und unten drunter wetter.

Code Auswählen Erweitern

<li class="" data-row="1" data-col="1" data-sizex="11" data-sizey="2">
<header class="">Menü</header>
                  <div class="cell">
                        <div class="center-align">
                           <div class="hbox">

                              <div class="compressed normal shadow inline">

</div>
<div data-type="pagebutton"
data-url="#content_Untergeschoß.html"     
data-load="#content11"
data-fade-duration="fast"
data-active-pattern=".*#content_untergeschoß.html"
data-icon="fa-desktop"
class="inline large shadow">
</div>
<div data-type="label"
class="compressed normal shadow inline darker">Untergeschoß</div>

<div data-type="pagebutton"
data-url="#content_Obergeschoß.html" 
data-load="#content12"
data-fade-duration="fast"
data-active-pattern=".*#content_obergeschoß.html"
data-icon="oa-it_remote"
class="large shadow">
</div>
<div data-type="label"
     class="inline small shadow darker">Obergeschoß</div>

<div data-type="pagebutton"
data-url="#content_Wetter.html"    
data-load="#content3"
data-fade-duration="fast"
data-active-pattern=".*#content_wetter.html"
data-icon="oa-light_ceiling_light"
class="large shadow">
</div>
<div data-type="label"
class="inline shadow darker">Wetter</div>

mir würde es reichen wenn ihr mir sagt was ich ändern muss.
Danke

[paul79]

Hallo, ich würde es so machen

Code Auswählen Erweitern

<li class="" data-row="1" data-col="1" data-sizex="11" data-sizey="2">
<header class="">Menü</header>
         <div class="hbox">
            <div class="vbox">
<div data-type="pagebutton"
data-url="#content_Untergeschoß.html"     
data-load="#content11"
data-fade-duration="fast"
data-active-pattern=".*#content_untergeschoß.html"
data-icon="fa-desktop"
class="large shadow"></div>
<div data-type="label" class="compressed normal shadow darker">Untergeschoß</div>
</div>
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Obergeschoß.html" 
data-load="#content12"
data-fade-duration="fast"
data-active-pattern=".*#content_obergeschoß.html"
data-icon="oa-it_remote"
class="large shadow"></div>
<div data-type="label" class="compressed normal shadow darker">Obergeschoß</div>
</div>
<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Wetter.html"    
data-load="#content3"
data-fade-duration="fast"
data-active-pattern=".*#content_wetter.html"
data-icon="oa-light_ceiling_light"
class="large shadow">
</div>
<div data-type="label" class="compressed normal shadow darker">Wetter</div>
</div>
</div>
</li>

Gruß Paul

[Wasserwerk33]

hey

Danke für die Hilfe.

Also vor jedem Button einen VBox setzten
nochmals dafür den Tipp

[Wasserwerk33]

hi
Wieso macht es den sowas??

normalerweise sollte dieses unten auf der Seite sein.
Finde meinen Fehler einfach nicht

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
   <head>
      <!--
         /* FHEM tablet ui */
         /*
         * UI builder framework for FHEM
         *
         * Version: 2.6.x
         * 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="widget_min_cols" content="13"> -->
      <script type="text/javascript">
         function getWidth()
         {
         xWidth = null;
         if(window.screen != null)
          xWidth = window.screen.availWidth;
         
         if(window.innerWidth != null)
          xWidth = window.innerWidth;
         
         if(document.body != null)
          xWidth = document.body.clientWidth;
         
         return xWidth;
         }
      </script>
      <title>FHEM-Tablet-UI</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <script type="text/javascript">
         if (getWidth() == "1280" ) {
          document.write('<meta name="widget_base_width" content="83">');
          document.write('<meta name="widget_base_height" content="72">');
         }
         else {
          document.write('<meta name="widget_base_width" content="60">');
          document.write('<meta name="widget_base_height" content="52">');
         };
      </script>
      <!--meta name="viewport" content="maximum-scale=1.0, user-scalable=yes"-->
      <!--meta name="widget_base_width" content="60"-->
      <!--meta name="widget_base_height" content="52"-->
      <!--meta name="gridster_cols" content="14"-->
      <!--meta name="gridster_rows" content="10"-->
      <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="gridster_disable" content="1">
      <meta name="widget_margin" content="1">
      <meta name="longpoll_type" content="websocket">
      <!-- 1=longpoll;0=shortpoll every 30sec; "ajax" -> HTTP AJAX; websocket-->
      <meta name="debug" content="0">
      <!-- 1=output to console;0=not output -->
      <meta name="toast" content="0">
      <!-- 1=Toast messages deaktivieren ;0=not output -->
      <meta name="lang" content="de">
      <link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui.css" />
      <link rel="stylesheet" type="text/css" href="css/fhem-grayblue-user-ui.css" />
      <link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" />
      <link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-weekprofile.css" />
      <script type="text/javascript">
         if (getWidth() == "1280" ) {
          document.write('<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user-1280.css" />');
         };
      </script>
      <script type="text/javascript" src="../pgm2/jquery.min.js"></script>
      <script src="js/fhem-tablet-ui.js" defer></script>
      <!-- Remove this line to enable for usage with WebViewControl
         <script defer>
          var wvcDevices = {
          '12345': 'Tablet'
          };
          var wvcUserCssFile = "webviewcontrol.css"
         </script>
         <script src="../pgm2/cordova-2.3.0.js" defer></script>
         <script src="../pgm2/webviewcontrol.js" defer></script>-->
      <!-- End for WebViewControl -->
      <title>FHEM-Tablet-UI-PageUI</title>
   </head>
   <body>
      <div class="gridster">
         <ul>

<!-- ============= Menü ================ -->

<!-- ====================================== -->
<li class="data-row="1" data-col="1" data-sizex="11" data-sizey="2">
<header class="">Menü</header>

   <div class="hbox">

                 <div class="vbox">
   <div data-type="pagebutton"
data-url="#content_main.html"     
data-load="#content_main"
data-fade-duration="fast"
data-active-pattern=".*#content_main.html"
data-icon="fa-home"
class="top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed normal shadow darker">Untergeschoß</div>
     </div>

   <div class="vbox">
   <div data-type="pagebutton"
data-url="#content_Obergeschoß.html" 
data-load="#content2"
data-fade-duration="fast"
data-active-pattern=".*#content_obergeschoß.html"
data-icon="fa-bed"
class="top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed normal shadow darker">Obergeschoß</div>
</div>

<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Wetter.html"    
data-load="#content3"
data-fade-duration="fast"
data-active-pattern=".*#content_wetter.html"
data-icon="fa-cloud"
data-color="green"
class="top-narrow-2x">
</div>
<div data-type="label" class="compressed normal shadow darker">Wetter</div>
</div>

<div class="vbox">
<div data-type="pagebutton"
data-url="#content_dwd.html"    
data-load="#content_dwd"
data-fade-duration="fast"
data-active-pattern=".*#content_dwd.html"
data-device="Unwetterzentrale"
data-get="WarnCount"
        data-states='["0","[1-9]{1}|[0-9]{2}"]'
data-icons='["fa-bolt","fa-bolt warn"]'
data-colors='["#04B404","firebrick"]'
class="top-narrow-2x">
</div>
<div data-type="label" class="compressed normal shadow darker">Unwetter</div>
  </div>
     
            </li>
<!-- ============= Uhrzeit ================ -->

<!-- ====================================== -->


<li class="" data-row="1" data-col="12" data-sizex="4" data-sizey="2">

<header class="">Uhrzeit</header>
         
  <div class="cell">

              <div data-type="clock"
                 class="cell top-space-1x big yellow semitransparenttext">
</div>

              <div data-type="clock"
         data-format="l d.m.Y"
                 class="large semitransparenttext">
      </div>
</div>

</li>


<li class="semitransparentoff" data-row="3" data-col="1" data-sizex="15" data-sizey="5" >
<div class="page" id="content_main"></div>
<div class="page" id="content_obergeschoß"></div>
<div class="page" id="content_wetter"></div>
<div class="page" id="content_Unwetter"></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>
<div class="page" id="content9"></div>
<div class="page" id="content10"></div>
<div class="page" id="content11"></div>
<div class="page" id="content12"></div>
<div class="page" id="content13"></div>
<div class="page" id="content14"></div>
<div class="page" id="content15"></div>
<div class="page" id="content16"></div>
<div class="page" id="content17"></div>
<div class="page" id="content18"></div>
<div class="page" id="content19"></div>
</div>

</li>

<!-- ============= Jalousien status ================ -->

<!-- ====================================== -->

<li class="data-row="9" data-col="1" data-sizex="11" data-sizey="1">
<header class="">Menü</header>

   <div class="hbox">

<div class="vbox">
   <div data-type="symbol"
                        data-device="UG_Runter_Kontrolle_"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
data-icons='["foa-fts_shutter_100","oa-fts_window_2w"]'
                        data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
  <div data-type="label" class="narrow compressed small shadow darker">Untergeschoß</div>
</div>

   <div class="vbox">
   <div data-type="symbol"
                        data-device="OG_Runter_Kontrolle_"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
        data-icons='["foa-fts_shutter_100","oa-fts_window_2w"]'
                                data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
  <div data-type="label" class="narrow compressed small shadow darker">Obergeschoß</div>
</div>

   <div class="vbox">
                           <div data-type="symbol"
                                data-device="Sonnenschutz_OG_Kontrolle"
        data-get-on="on"
        data-get-off="off"
        data-states='["on","off"]'
data-icons='["foa-fts_shutter_50","oa-fts_window_2w"]'
                          data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
  <div data-type="label" class="compressed small shadow darker">sonnenschutz OG</div>
</div>

  <div class="vbox">
  <div data-device="Sonnenschutz_UG_Kontrolle"
       data-get-on="on"
       data-get-off="off"
       data-states='["on","off"]'
       data-icons='["foa-fts_shutter_50","oa-fts_window_2w"]'
                               data-colors='["green","#FF0000"]'
       class="small top-narrow-2x">
</div>
  <div data-type="label" class="compressed small shadow darker">Sonnenschutz UG</div>
  </div>
      <div class="vbox">
<div data-device="Party_Kontrolle"
      data-states='["on","off"]'
                              data-icons='["fa-battery-4","fa-battery-1"]'
                              data-colors='["green","firebrick"]'
      class="small top-narrow-2x">
</div>
  <div data-type="label" class="compressed small shadow darker">Party</div>
  </div>

                         <div class="vbox">
<div data-type="symbol"
                              data-device="Urlaub_Kontrolle"
                              data-states='["on","off"]'
                              data-icons='["fa-battery-4","fa-battery-1"]'
                              data-colors='["green","firebrick"]'
      class="small top-narrow-2x">
</div>
  <div data-type="label" class="compressed small shadow darker">Urlaub</div>
  </div>
     
            </li>
</ul>
</div>
</div>
</body>
</html>

[Fixel2012]

@Paul79 Wie hast du in den Navigationsleisten, wenn sie angeklickt werden das ganze rot gefärbt? Wo muss ich diese Änderungen vornehmen?

Konnte dazu bezüglich nichts finden.

Danke und Gruß,

Fixel

[paul79]

@Paul79 Wie hast du in den Navigationsleisten, wenn sie angeklickt werden das ganze rot gefärbt? Wo muss ich diese Änderungen vornehmen?

Konnte dazu bezüglich nichts finden.

Danke und Gruß,

Fixel

Hallo, wie hier geschrieben https://forum.fhem.de/index.php/topic,37378.msg591642.html#msg591642 habe ich im Widget widget_pagebutton den roten Schatten eingefügt

Code Auswählen Erweitern

    function changeState(elem, isOn) {
        var faelem = elem.data('famultibutton');
        if (isOn) {
            if (faelem) {
                faelem.setOn();
            }
            // overwrite default colors for showMultiStates
            elem.data('on-colors', [elem.data('on-color')]);
            elem.data('on-background-colors', [elem.data('on-background-color')]);
elem.addClass('shadowred');
elem.removeClass('shadow');
        } else {
            if (faelem) {
                faelem.setOff();
            }
            // overwrite default colors for showMultiStates
            elem.data('on-colors', [elem.data('off-color')]);
            elem.data('on-background-colors', [elem.data('off-background-color')]);
elem.addClass('shadow');
elem.removeClass('shadowred');
        }
        var state = elem.getReading('get').val;
        if (ftui.isValid(state)) {
            var states = elem.data('states') || elem.data('limits') || elem.data('get-on');
            if ($.isArray(states)) {
                me.showMultiStates(elem, states, state);
            }
        }
    }

         elem.addClass('shadowred');
         elem.removeClass('shadow');

Gruß Paul

[Fixel2012]

Danke dir!!

[paul79]

hi
Wieso macht es den sowas??

normalerweise sollte dieses unten auf der Seite sein.
Finde meinen Fehler einfach nicht

Hallo, du nimmst keinen gescheiten Editor und so siehst du nicht deine Fehler

z.B. vergisst du </div> oder class" das 2te "

hier mal etwas gereinigt aber bitte verwende Notepad++

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
   <head>
      <!--
         /* FHEM tablet ui */
         /*
         * UI builder framework for FHEM
         *
         * Version: 2.6.x
         * 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="widget_min_cols" content="13"> -->
      <script type="text/javascript">
         function getWidth()
         {
         xWidth = null;
         if(window.screen != null)
          xWidth = window.screen.availWidth;
         
         if(window.innerWidth != null)
          xWidth = window.innerWidth;
         
         if(document.body != null)
          xWidth = document.body.clientWidth;
         
         return xWidth;
         }
      </script>
      <title>FHEM-Tablet-UI</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <script type="text/javascript">
         if (getWidth() == "1280" ) {
          document.write('<meta name="widget_base_width" content="83">');
          document.write('<meta name="widget_base_height" content="72">');
         }
         else {
          document.write('<meta name="widget_base_width" content="60">');
          document.write('<meta name="widget_base_height" content="52">');
         };
      </script>
      <!--meta name="viewport" content="maximum-scale=1.0, user-scalable=yes"-->
      <!--meta name="widget_base_width" content="60"-->
      <!--meta name="widget_base_height" content="52"-->
      <!--meta name="gridster_cols" content="14"-->
      <!--meta name="gridster_rows" content="10"-->
      <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="gridster_disable" content="1">
      <meta name="widget_margin" content="1">
      <meta name="longpoll_type" content="websocket">
      <!-- 1=longpoll;0=shortpoll every 30sec; "ajax" -> HTTP AJAX; websocket-->
      <meta name="debug" content="0">
      <!-- 1=output to console;0=not output -->
      <meta name="toast" content="0">
      <!-- 1=Toast messages deaktivieren ;0=not output -->
      <meta name="lang" content="de">
      <link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui.css" />
      <link rel="stylesheet" type="text/css" href="css/fhem-grayblue-user-ui.css" />
      <link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" />
      <link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-weekprofile.css" />
      <script type="text/javascript">
         if (getWidth() == "1280" ) {
          document.write('<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user-1280.css" />');
         };
      </script>
      <script type="text/javascript" src="../pgm2/jquery.min.js"></script>
      <script src="js/fhem-tablet-ui.js" defer></script>
      <!-- Remove this line to enable for usage with WebViewControl
         <script defer>
          var wvcDevices = {
          '12345': 'Tablet'
          };
          var wvcUserCssFile = "webviewcontrol.css"
         </script>
         <script src="../pgm2/cordova-2.3.0.js" defer></script>
         <script src="../pgm2/webviewcontrol.js" defer></script>-->
      <!-- End for WebViewControl -->
      <title>FHEM-Tablet-UI-PageUI</title>
   </head>
   <body>
      <div class="gridster">
         <ul>

<!-- ============= Menü ================ -->

<!-- ====================================== -->
<li class="data-row="1" data-col="1" data-sizex="11" data-sizey="2">
<header class="">Menü</header>

     <div class="hbox">
             <div class="vbox">
   <div data-type="pagebutton"
data-url="#content_main.html"     
data-load="#content_main"
data-fade-duration="fast"
data-active-pattern=".*#content_main.html"
data-icon="fa-home"
class="top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed normal shadow darker">Untergeschoß</div>
 </div>

<div class="vbox">
   <div data-type="pagebutton"
data-url="#content_Obergeschoß.html" 
data-load="#content2"
data-fade-duration="fast"
data-active-pattern=".*#content_obergeschoß.html"
data-icon="fa-bed"
class="top-narrow-2x">
</div>
<div data-type="label" class="narrow compressed normal shadow darker">Obergeschoß</div>
</div>

<div class="vbox">
<div data-type="pagebutton"
data-url="#content_Wetter.html"    
data-load="#content3"
data-fade-duration="fast"
data-active-pattern=".*#content_wetter.html"
data-icon="fa-cloud"
data-color="green"
class="top-narrow-2x">
</div>
<div data-type="label" class="compressed normal shadow darker">Wetter</div>
</div>

<div class="vbox">
<div data-type="pagebutton"
data-url="#content_dwd.html"    
data-load="#content_dwd"
data-fade-duration="fast"
data-active-pattern=".*#content_dwd.html"
data-device="Unwetterzentrale"
data-get="WarnCount"
        data-states='["0","[1-9]{1}|[0-9]{2}"]'
data-icons='["fa-bolt","fa-bolt warn"]'
data-colors='["#04B404","firebrick"]'
class="top-narrow-2x">
</div>
<div data-type="label" class="compressed normal shadow darker">Unwetter</div>
  </div>
     </div>
            </li>
<!-- ============= Uhrzeit ================ -->

<!-- ====================================== -->


<li class="" data-row="1" data-col="12" data-sizex="4" data-sizey="2">

<header class="">Uhrzeit</header>
         
  <div class="cell">

              <div data-type="clock"
                 class="cell top-space-1x big yellow semitransparenttext">
</div>

              <div data-type="clock"
         data-format="l d.m.Y"
                 class="large semitransparenttext">
      </div>
</div>

</li>


<li class="semitransparentoff" data-row="3" data-col="1" data-sizex="15" data-sizey="5" >
<div class="page" id="content_main"></div>
<div class="page" id="content_obergeschoß"></div>
<div class="page" id="content_wetter"></div>
<div class="page" id="content_Unwetter"></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>
<div class="page" id="content9"></div>
<div class="page" id="content10"></div>
<div class="page" id="content11"></div>
<div class="page" id="content12"></div>
<div class="page" id="content13"></div>
<div class="page" id="content14"></div>
<div class="page" id="content15"></div>
<div class="page" id="content16"></div>
<div class="page" id="content17"></div>
<div class="page" id="content18"></div>
<div class="page" id="content19"></div>


</li>

<!-- ============= Jalousien status ================ -->

<!-- ====================================== -->

<li class="" data-row="9" data-col="1" data-sizex="11" data-sizey="1">
<header class="">Menü</header>

     <div class="hbox">

<div class="vbox">
   <div data-type="symbol"
                        data-device="UG_Runter_Kontrolle_"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
data-icons='["foa-fts_shutter_100","oa-fts_window_2w"]'
                        data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
  <div data-type="label" class="narrow compressed small shadow darker">Untergeschoß</div>
</div>

   <div class="vbox">
   <div data-type="symbol"
                        data-device="OG_Runter_Kontrolle_"
data-get-on="on"
data-get-off="off"
data-states='["on","off"]'
        data-icons='["foa-fts_shutter_100","oa-fts_window_2w"]'
                                data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
  <div data-type="label" class="narrow compressed small shadow darker">Obergeschoß</div>
</div>

   <div class="vbox">
                           <div data-type="symbol"
                                data-device="Sonnenschutz_OG_Kontrolle"
        data-get-on="on"
        data-get-off="off"
        data-states='["on","off"]'
data-icons='["foa-fts_shutter_50","oa-fts_window_2w"]'
                          data-colors='["green","#FF0000"]'
class="small top-narrow-2x">
</div>
  <div data-type="label" class="compressed small shadow darker">sonnenschutz OG</div>
</div>

  <div class="vbox">
  <div data-device="Sonnenschutz_UG_Kontrolle"
       data-get-on="on"
       data-get-off="off"
       data-states='["on","off"]'
       data-icons='["foa-fts_shutter_50","oa-fts_window_2w"]'
                               data-colors='["green","#FF0000"]'
       class="small top-narrow-2x">
</div>
  <div data-type="label" class="compressed small shadow darker">Sonnenschutz UG</div>
  </div>
      <div class="vbox">
<div data-device="Party_Kontrolle"
      data-states='["on","off"]'
                              data-icons='["fa-battery-4","fa-battery-1"]'
                              data-colors='["green","firebrick"]'
      class="small top-narrow-2x">
</div>
  <div data-type="label" class="compressed small shadow darker">Party</div>
  </div>

                         <div class="vbox">
<div data-type="symbol"
                              data-device="Urlaub_Kontrolle"
                              data-states='["on","off"]'
                              data-icons='["fa-battery-4","fa-battery-1"]'
                              data-colors='["green","firebrick"]'
      class="small top-narrow-2x">
</div>
  <div data-type="label" class="compressed small shadow darker">Urlaub</div>
  </div>
      </div>
            </li>
</ul>
</div>
</div>
</body>
</html>


Gruß Paul

[Wasserwerk33]

okay
werde mir Notepad besorgen

danke schön

[paul79]

okay
werde mir Notepad besorgen

danke schön

aber Notepad plus plus

https://notepad-plus-plus.org/

[Wasserwerk33]

Hallo Paul

Benutze nun Notepad++
Danke für den Tip man sieht es wirklich alles besser.

Habe nur ein problem da es dieses mal wirklich komplett mein eigendes ist. Hänge ich echt.

Habe Pagebutton das sind 4 stück Funktoniert auch soweit. Ausser das mit dem Wetter. Aber das ist halb so wild.

Wenn ich mein Tablet ui nun anschalte komme ich auf meine Index.html seite ist ja soweit auch richtig. Muss aber auf Untergeschoß klicken damit ich diese als erste Seite habe. Sollte eigentlich so sein das es direkt irgendwie klappt.

Und wenn ich dann auf irgendeine Seite gehe, verrutschen meine Seiten Dimensionen total. Was muss ich ändern oder noch einfügen?

[Thyraz]

Hab am Wochenende aus dem iOS UI Template hier:
http://mercury.io/blog/free-ios-9-3-iphone-ui-kit-for-illustrator-and-sketch

Die iOS Wetter Icons extrahiert und etwas angepasst.
Sind benannt für die Nutzung mit dem Wunderground Modul.

Evtl. kann es ja jemand brauchen.

[gloob]

Ich finde deine komplette Visualisierung sieht sehr gut aus. Würdest du die oder teile davon bereitstellen?

Danke.