[FHEM-Tablet-UI] User-Demos

bjoernbo · 08 Oktober 2016, 12:48:04

Anbei ein weitere Ergänzung. Der Code ist unten beigefügt.

!DOCTYPE html>
<html>
<head></head>
<body>
  <div class="page" id="m_wohnzimmer">
    <section style="background-color:#A4A4A4;">
      
      <div class="small col-1 left-align">Lärm</div>
          <div data-type="label"
          data-device="NetatmoInnenSensor" 
                    data-get="noise" 
                    data-fix="0" 
                    data-unit=" dB"
                    class="small col-2 left-align"></div>
            <div class="small col-2 left-align">|&nbsp;Luftfeuchte</div>
                    <div data-type="label"
          data-device="Wohnzimmer.Wandthermostat" 
                    data-get="humidity" 
                    data-fix="0" 
                    data-unit="%"
                    class="small col-2 left-align"></div>
            <div class="small col-3 left-align">|&nbsp;CO&sup2; Belastung</div>
                  <div data-type="label" 
                   data-device="NetatmoInnenSensor" 
                   data-get="co2"
                   data-fix="0" 
                   data-unit=" ppm"
                   data-limits="[0, 600, 1000, 1180, 1800, 2250]"
                   data-colors='["green","yellowgreen","greenyellow","yellow","orange","red"]'
                   class="small col-3 left-align"></div>
            <div class="small col-4 left-align">|&nbsp;Temperatur</div>
                   <div data-type="label"
          data-device="Wohnzimmer.Wandthermostat" 
                    data-get="measured-temp"
                    data-unit="°C"
                    class="small col-4 right-align"></div>
    </section>
    <section>
      <div class="large col-1-2 left-align">Terassentür</div>
      <div class="big thin col-1-4 right-align"></div>
      <div data-type="symbol"
                         data-device="Fensterkontakt.Wohnzimmer"
                         data-get-on='["geöffnet","geschlossen"]'
                         data-icons='["ftui-window warn","ftui-window"]'
                         data-on-colors='["#aa6900","#555"]'
                         class="big thin col-1-4 right-align"></div>
        </section>
        <section>
      <div class="large col-1-2 left-align">Dimmer</div>
      <div class="big thin col-1-4 right-align"></div>
      <div data-type="switch" data-device="WZ_Dimmer" class="big thin col-1-4 right-align"></div>
      
      <div class="large col-1-2 left-align">Stehlampe</div>
      <div class="big thin col-1-4 right-align"></div>
      <div data-type="switch" data-device="Stehlampe" class="big thin col-1-4 right-align"></div>
      
    </section>
    <section>
     <div data-type="symbol" id="EPG" 
          data-icon="fa-indent"
          data-background-icon="fa-circle-thin"
          class="big thin col-1-4 right-align"></div>
        <div data-type="popup" data-height="600px" data-width="350px"
          data-mode="animate" data-starter="#EPG" class="col-1-6">
          <div class="dialog">
            <header>EPG</header>
           <table border="0px">
           <tr><th>Sender</th><th>Zeit</th><th>Titel</th><th>Next</th><th>Titel</th></tr>
  <tr valign="top" bgcolor="#A4A4A4;">
    <td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/Das-Erste-HD.png"  class="cell"></div></td>
    <td rowspan="2" align="left" width="20%"><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="ARD"></div></td>
    <td rowspan="2" align="left" width="20%"><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_next_time"></div></td>
    <td rowspan="2" align="center" width="50%"><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_next"></div></td>
  </tr>
  <tr>
    <td></td>
</tr>
  <tr valign="top">
    <td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/ZDF-HD.png"  class="cell"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_next_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_next"></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
   <tr valign="top" bgcolor="#A4A4A4;">
    <td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/WDR-HD.png"  class="cell"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="WDR_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="WDR"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="WDR_next_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="WDR_next"></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
   <tr valign="top">
    <td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/RTL-HD.png"  class="cell"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="RTL"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_next_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_next"></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
   <tr valign="top" bgcolor="#A4A4A4;">
    <td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/Sat.1-HD.png"  class="cell"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_next_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_next"></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr valign="top">
    <td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/Pro7-HD.png"  class="cell"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_next_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_next"></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr valign="top" bgcolor="#A4A4A4;">
    <td rowspan="2" width="20%" align="top"><div data-type="image" class="cell" data-url="img/senderlogos/VOX-HD.png"  class="cell"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="VOX"></div></td>
    <td rowspan="2" align="left"><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_next_time"></div></td>
    <td rowspan="2" align="center"><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_next"></div></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  </table>
          </div></div>
              <div data-type="switch" 
                   data-device="TV_Modus" 
                   data-icon="fa-tv" 
                   class="big thin col-2 right-align"></div>
             <div data-type="switch" 
                   data-device="AppleTV_Modus" 
                   data-icon="fa-apple" 
                   class="big thin col-3 right-align"></div>
              <div data-type="switch"
                   data-device="XBMC_Modus"
                   data-icon="font1-kodi" class="big thin col-4 right-align"></div> 
              
    </section>
    <section>
      <div class="large col-1-4 left-align">Heizung</div>
      <div data-type="label" data-device="Wohnzimmer.Wandthermostat"
        data-get="measured-temp" data-limits='[-73,19,23]'
        data-colors='["#6699FF","#aa6900","#ad3333"]' data-unit="°C"
        class="col-1-4 right-align"></div>
      <div class="col-1-2 center-align ">
        <div data-type="spinner" data-device="Wohnzimmer.Wandthermostat"
        data-get="desired-temp" data-set="desired-temp" data-unit="°C"
        data-icon-left-color="blue" data-icon-right-color="red"
        data-step="0.5" 
        data-min="4"
                data-max="30"
                data-off="off"
                data-background-color="none"
        class="valueonly center-align"></div>
      </div>
    </section>
    <selection>
      <div data-type="swiper" data-height="250px"  auto-width="400px" class="top-space-1x" style="background-color:#838181;">
            <ul>
              <li>  <div data-type="label" class="small">Favoriten</div>
              <div class="container"> 
        <table border="0px" align="center">
          <tr>
              <td><img src="img/senderlogos/Das-Erste-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number4')"></img>
              </td>
              <td><img src="img/senderlogos/ZDF-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number5')"></img></td>
              <td><img src="img/senderlogos/WDR-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number6')"></img></td>
              <td><img src="img/senderlogos/RTL-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number8')"></img></td>
             <td><img src="img/senderlogos/Sat.1-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number9')"></img></td>
             
          </tr>
          <tr>
               <td><img src="img/senderlogos/VOX-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number8; set hub command 24775848 Number7')"></img></td>
              <td><img src="img/senderlogos/Pro7-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number9; set hub command 24775848 Number2')"></img></td>
              <td><img src="img/senderlogos/kabel-eins-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number9; set hub command 24775848 Number1')"></img></td>
              <td><img src="img/senderlogos/RTL2-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number90')"></img></td>
         <td><img src="img/senderlogos/N24-HD.png" height="60" wight="60" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number9; set hub command 24775848 Number4')"></img></td>
          </tr>
        </table>
      </div>
    </li>
    <li>
<div data-type="label" class="small">Navigation</div>
              <div class="container"> 
        <table border="0px" align="center">
          <tr>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Play" data-icon="fa-play" data-on-background-color="lightgray"class="cell small"></div></td>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 VolumeUp" data-icon="fa-volume-up" data-on-background-color="lightgray"class="cell small"></div></td>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionUp" data-icon="fa-angle-up" data-on-background-color="lightgray"class="cell small"></div></td>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 ChannelUp" data-icon="fa-angle-double-up" data-on-background-color="lightgray" class="cell small"></div></td>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Pause" data-icon="fa-pause" data-on-background-color="lightgray"class="cell small"></div></td>
              
          </tr>
          <tr>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 FastBackward" data-icon="fa-fast-backward" data-on-background-color="lightgray"class="cell small"></div></td>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionLeft" data-icon="fa-angle-left" data-on-background-color="lightgray" class="cell small"></div></td>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Select" data-icon="fa-check" data-on-background-color="lightgray" class="cell small"></div></td>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionRight" data-icon="fa-angle-right" data-on-background-color="lightgray" class="cell small"></div></td>
            <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 FastForward" data-icon="fa-fast-forward" data-on-background-color="lightgray"class="cell small"></div></td>
          </tr>
          <tr>
            <td></td>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 VolumeDown" data-icon="fa-volume-down" data-on-background-color="lightgray" class="cell small"></div></td>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionDown" data-icon="fa-angle-down" data-on-background-color="lightgray" class="cell small"></div></td>
              <td><div id="" data-type="button" data-fhem-cmd="set hub command 24775848 ChannelDown" data-icon="fa-angle-double-down" data-on-background-color="lightgray" class="cell small"></div></td>
              <td></td>
          </tr>
        </table>
      </div>
    </li>
        <li>  <div data-type="label" class="small">SKY Bundesliga</div>
              <div class="container"> 
        <table border="0px" align="center">
          <tr>
              <td><img src="img/senderlogos/sky-bundesliga1HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number7; set hub command 24775848 Number9')"></img>
              </td>
              <td><img src="img/senderlogos/sky-bundesliga2HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number0')"></img></td>
              <td><img src="img/senderlogos/sky-bundesliga3HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number1')"></img></td>
              <td><img src="img/senderlogos/sky-bundesliga4HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number2')"></img></td>
             <td><img src="img/senderlogos/sky-bundesliga5HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number3')"></img></td>
          </tr>
          <tr>
               <td><img src="img/senderlogos/sky-bundesliga6HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number4')"></img></td>
              <td><img src="img/senderlogos/sky-bundesliga7HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number5')"></img></td>
              <td><img src="img/senderlogos/sky-bundesliga8HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number6')"></img></td>
              <td><img src="img/senderlogos/sky-bundesliga9HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1'; set hub command 24775848 Number8; set hub command 24775848 Number7')"></img></td>
         <td><img src="img/senderlogos/sky-bundesliga10HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number8')"></img></td>
          </tr>
        </table>
      </div>
    </li>
    <li>  <div data-type="label" class="small">SKY SPORT</div>
              <div class="container"> 
        <table border="0px" align="center">
          <tr>
              <td><img src="img/senderlogos/skysportNewsHD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number7; set hub command 24775848 Number8')"></img>
              </td>
              <td><img src="img/senderlogos/skysport1HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number8; set hub command 24775848 Number9')"></img></td>
              <td><img src="img/senderlogos/skysport2HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number0')"></img></td>
              <td><img src="img/senderlogos/skysport3HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number1')"></img></td>
             <td><img src="img/senderlogos/skysport4HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number2')"></img></td>  
          </tr>
          <tr>
               <td><img src="img/senderlogos/skysport5HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number3')"></img></td>
              <td><img src="img/senderlogos/skysport6HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number4')"></img></td>
              <td><img src="img/senderlogos/skysport7HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number5')"></img></td>
              <td><img src="img/senderlogos/skysport8HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1'; set hub command 24775848 Number9; set hub command 24775848 Number6')"></img></td>
         <td><img src="img/senderlogos/skysport9HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number7')"></img></td>
          </tr>
          <tr>
              <td><img src="img/senderlogos/skysport10HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number8')"></img></td>
              <td><img src="img/senderlogos/skysport8HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number90')"></img></td>
              <td><img src="img/senderlogos/skysport11HD.png" height="40" wight="40" class="top-center" onclick="setFhemStatus('set hub command 24775848 Number1; set hub command 24775848 Number9; set hub command 24775848 Number9')"></img></td>
          </tr>
        </table>
      </div>
    </li>
  </ul>
  </div>
  </selection>    
  </div>
</body>
</html>

Intruder1956 · 12 Oktober 2016, 16:35:46

Hallo Gemeinde,
meine Frage ist folgende.
Im ersten Beitrag in diesem Tread wird auf die Userdemo im Github verwiesen.

Sind diese Demos z.b. von bjoernbo noch aktuell und kann man diese Vorlagen mit der neuen Tablet-UI verwenden

Ich frage deshalb weil diese Vorlagen im Githup schon älter als ein Jahr sind.

Gruß Werner

bjoernbo · 12 Oktober 2016, 19:31:58

Hey Intruda,

wow, der erste Post ist ja schon etwas älter, aber JA. Ich habe seitdem nur Kleinigkeiten ergänzt oder ausgetauscht und es läuft noch alles wie am ersten Tag. Im Quellcode musste ich allerdings die ein oder andere Anpassung vornehmen. Zu beginn musst nicht alles mit data-.... versehen werden. Heute sieht es natürlich in den Widgets anders aus. Überall wird nun mit data-[blablub] "gearbeitet".

Gruß ER(6)na

lewej · 20 Oktober 2016, 20:10:21

Hallo Zusammen,

ich würde gerne bei dem ftui-mobil das Menü bei einem Tablet immer offen lassen und bei Iphone soll es automatisch sich einklappen.

Weiß jemand an welcher Stelle ich drehen muss?

Gruß
lewej

setstate · 20 Oktober 2016, 21:10:00

Genau das kann dieses Demo

https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/flexbox/index_flex_demo_menu.html

Auf einem Tablet: mit Menu immer ausgeklappt
Auf dem Telefon: Menü eingeklappt und ausfahrbar

Green Schema: <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />
Blue Schema: <link rel="stylesheet" href="css/fhem-mobil-ui.css" />

lewej · 20 Oktober 2016, 22:07:03

Zitat von: setstate am 20 Oktober 2016, 21:10:00
Genau das kann dieses Demo

https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/flexbox/index_flex_demo_menu.html

Auf einem Tablet: mit Menu immer ausgeklappt
Auf dem Telefon: Menü eingeklappt und ausfahrbar

Green Schema: <link rel="stylesheet" href="css/ftui-bright-mint-ui.css" />
Blue Schema: <link rel="stylesheet" href="css/fhem-mobil-ui.css" />

Hi,

danke habs gefunden und auf dem Tablet in Vertikal sieht es Super aus. Mit einem Iphone 5S und Ipad AIR in Hochkant klappt sich das Menü weg, aber es dann auch keins mehr zum aufrufen da.

Jemand eine Idee?

Gruss
lewej

hillbicks · 21 Oktober 2016, 00:05:39

Immer noch work in progress, ich spiele grade als Laie noch etwas mit den Material Design Guidlines rum. Ausserdem will ich die Graphen von Grafana mehr nutzen, hab davon bereits eine Seite vorbereitet um die Infrastruktur Graphen darzustellen.

setstate · 21 Oktober 2016, 03:22:10

Zitat von: lewej am 20 Oktober 2016, 22:07:03
Hi,

danke habs gefunden und auf dem Tablet in Vertikal sieht es Super aus. Mit einem Iphone 5S und Ipad AIR in Hochkant klappt sich das Menü weg, aber es dann auch keins mehr zum aufrufen da.

Jemand eine Idee?

Gruss
lewej

In der CSS fehlt noch ein !important;
Das hatte ich vorhin noch schnell gefixed.
Also, noch ein Update holen, dann klappt es.

lewej · 21 Oktober 2016, 10:54:01

Zitat von: hillbicks am 21 Oktober 2016, 00:05:39
Immer noch work in progress, ich spiele grade als Laie noch etwas mit den Material Design Guidlines rum. Ausserdem will ich die Graphen von Grafana mehr nutzen, hab davon bereits eine Seite vorbereitet um die Infrastruktur Graphen darzustellen.

Hi,

Die ui sieht super aus, könntest du deine config anhängen?

Gruss
Lewej

bjoernbo · 21 Oktober 2016, 11:02:34

wie hast Du Grafana eingebunden?

jnewton957 · 21 Oktober 2016, 12:28:29

Zitat von: hillbicks am 21 Oktober 2016, 00:05:39
Immer noch work in progress, ich spiele grade als Laie noch etwas mit den Material Design Guidlines rum. Ausserdem will ich die Graphen von Grafana mehr nutzen, hab davon bereits eine Seite vorbereitet um die Infrastruktur Graphen darzustellen.

Hallo,

kannst du für deinen jetzigen Stand schon mal das coding bereitstellen.
Das wäre bestimmt für viele hier sehr interessant.

Danke
Jörg

arosswog · 21 Oktober 2016, 13:30:47

Inspiriert von der Community in diesem Sub-Forum und als begeisterter FAN von der FHEM/Tablet-UI Kombination habe ich dieses Frontend-Framework schon seit vielen Monaten zur vollsten Zufriedenheit im Einsatz. Stellte mich anfangs die klassischen Farbkombinationsansätze der bestehenden, bereitgestellten User-Demos (schwarz/orange) noch zufrieden, habe ich mich irgendwann mal daran satt gesehen. Was Neues musste her.

Völlig begeistert hat mich der HEIMA-Ansatz welcher stark meine Vorstellung eines Visualierungs-Designs entsprochen hat, nur wie umsetzen mit zwei linken HTML/CSS Händen.

So habe ich mich dran gemacht, mit der Umsetzung zu beginnen (glücklicherweise verfolgten einige Foren-Mitglieder einen ähnlichen Ansatz, so konnte ich mich da auch am Code bedienen, danke hierfür). Ziel war es, etwas HEIMA ähnliches aufzubauen, was einen hohen WAF-Faktor haben muss und in die Stilrichtung "Apple" geht.

Das Ergebnis möchte ich Euch heute präsentieren (bitte zerreisst es nicht in der Luft, wie gesagt, ich habe meine Stärken in anderen Bereichen der IT, HTML/CSS gehört nicht dazu).

Kurz zu meinem Setup:

- MacMini mit esxI und einer virtualisierten Debian Instanz auf der FHEM läuft
- auf der gleichen Instanz läuft noch Zoneminder zur Anbindung meiner Kameras (aufgrund der Vielzahl von Endgeräten musste ich diese Zwischeninstanz einbinden, da die Direktzugriffe auf die Kameras zur Visualisierung negativen Einfluss hatten, so habe ich nur ZM für den Zugriff auf die Kameras, und die iPads bedienen sich dann bei ZM)
- Sonos 1 in allen relevanten Zimmern
- HomeMatic-Heizkörperthermostate
- HomeMatic-Fenstersensoren
- HomeMatic-LAN-Adapter
- Temperatur/Luffeuchte Sensoren über Jeelink
- PCA301 Strommesser und Schalter über Jeelink
- FritzBox angebunden
- 6 iPads (ältere Generation (3/4) über eBay geschossen) in den Zimmern an der Wand oder auf den Nachttischen verteilt

Noch offene Punkte die ich angehen möchte:
- Info-Fenster im oberen Teil für Statusnachrichten (Anruf, sonstige Warnmeldungen, Fenster offen, etc.)
- Einstellungen Seite
- Einbindung von personifizierten Seiten für die Kinder (Stundenplan der Schule, Vertretungsplan der Schule, Kalender vom OSX-Server, etc.)

Wenn Interesse besteht kann ich gerne den bisherigen Code posten, wer an der Weiterentwicklung mitarbeiten möchte, ich würde mich riesig freuen.

Viele Grüße,
Alex

accessburn · 21 Oktober 2016, 13:47:10

Zitat von: arosswog am 21 Oktober 2016, 13:30:47
Wenn Interesse besteht kann ich gerne den bisherigen Code posten, wer an der Weiterentwicklung mitarbeiten möchte, ich würde mich riesig freuen.

Erst mal "Respekt" sieht gut aus!

Mich würde die Kalenderimplementierung interessieren.

hillbicks · 21 Oktober 2016, 13:59:33

Grafana ist direkt per iframe eingebunden, das laedt aber noch nicht immer zuverlaessig, warum weiss ich noch nicht.

Code Auswählen

<iframe src="http://172.16.39.10/grafana/dashboard-solo/db/schocklel-net?theme=light&panelId=1" width="450" height="200" frameborder="0"></iframe>

Im Anhang findet ihr die momentane Config, wie gesagt, noch Kraut und Rueben teilweise, einiges funktioniert noch nicht, bzw. falsch. Aber da ihr danach gefragt habt, sollt ihr es auch haben

SvenJust · 21 Oktober 2016, 14:03:13

Zitat von: arosswog am 21 Oktober 2016, 13:30:47
Wenn Interesse besteht kann ich gerne den bisherigen Code posten, wer an der Weiterentwicklung mitarbeiten möchte, ich würde mich riesig freuen.

Hallo Alex,

das sieht richtig gut aus, ich hätte Interesse am Code...

VG Sven