hmetzner
/
do_fhem


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
							<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * 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)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="gridster_cols" content="12">
    <meta name="gridster_rows" content="12">
    <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="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- 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" / -->
    <link rel="stylesheet" href="css/fhem-tablet-ui-custom_1280.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>

    <!-- Um ein 'schönes' Favicon auf dem HomeScreen von Appledevices zu bekommen, muss zu folgendem Trick gegriffen werden:
    Die folgenden Zeilen aktivieren. - Die Standardverbindung via https und user cert schlägt beim
    Laden des apple touch icons leider fehl - mit diesem Workarround funktioniert es

    ERLEDIGT Die Icons wurden auf einen 'öffentlichen Server' - mean ohne client cert verschoben - nun passt es -->

    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://www.metzner.myhome-server.de/images/myfhemfavico_120x120.png">
    <link rel="apple-touch-icon" sizes="120x120" href="https://www.metzner.myhome-server.de/images/myfhemfavico_120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="https://www.metzner.myhome-server.de/images/myfhemfavico_144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="https://www.metzner.myhome-server.de/images/myfhemfavico_152x152.png">
    <link rel="apple-touch-icon" sizes="167x167" href="https://www.metzner.myhome-server.de/images/myfhemfavico_167x167.png">
    <link rel="apple-touch-icon" sizes="180x180" href="https://www.metzner.myhome-server.de/images/myfhemfavico_180x180.png">
    <link rel="apple-touch-icon" sizes="512x512" href="https://www.metzner.myhome-server.de/images/myfhemfavico_512x512.png">

    <title>FHEM-Dev-UI</title>
</head>
<body>
<div class="gridster">
  <ul>
<!--Verbindungen-->
    <li data-col="1" data-row="1" data-sizex="4" data-sizey="6" class="fulltransparent">
      <header class="fulltransparent">Ihre nächsten Verbindungen</header>
      <div class="sheet">
        <div class="row-5 bigger left-align">NW-Böbig</div>
        <div class="row"
             data-template="templates/template_abfahrt.html"
             data-parameter='{"paraDev":"HaNW",
                              "paraTve":"travel_vehicle_nr_1",
                              "paraPde":"plan_departure_1",
                              "paraTde":"travel_departure_1",
                              "paraPdd":"plan_departure_delay_1"}'>
        </div>
        <div class="row"
             data-template="templates/template_abfahrt.html"
             data-parameter='{"paraDev":"HaNW",
                              "paraTve":"travel_vehicle_nr_2",
                              "paraPde":"plan_departure_2",
                              "paraTde":"travel_departure_2",
                              "paraPdd":"plan_departure_delay_2"}'>
        </div>
        <div class="row"
             data-template="templates/template_abfahrt.html"
             data-parameter='{"paraDev":"HaNW",
                              "paraTve":"travel_vehicle_nr_3",
                              "paraPde":"plan_departure_3",
                              "paraTde":"travel_departure_3",
                              "paraPdd":"plan_departure_delay_3"}'>
        </div>
        <div class="row-5 bigger left-align">Mannheim</div>
        <div class="row"
             data-template="templates/template_abfahrt.html"
             data-parameter='{"paraDev":"HaMA",
                              "paraTve":"travel_vehicle_nr_1",
                              "paraPde":"plan_departure_1",
                              "paraTde":"travel_departure_1",
                              "paraPdd":"plan_departure_delay_1"}'>
        </div>
        <div class="row"
             data-template="templates/template_abfahrt.html"
             data-parameter='{"paraDev":"HaMA",
                              "paraTve":"travel_vehicle_nr_2",
                              "paraPde":"plan_departure_2",
                              "paraTde":"travel_departure_2",
                              "paraPdd":"plan_departure_delay_2"}'>
        </div>
        <div class="row"
             data-template="templates/template_abfahrt.html"
             data-parameter='{"paraDev":"HaMA",
                              "paraTve":"travel_vehicle_nr_3",
                              "paraPde":"plan_departure_3",
                              "paraTde":"travel_departure_3",
                              "paraPdd":"plan_departure_delay_3"}'>
        </div>
      </div>
    </li>
<!--Kalender-->
    <li data-col="5" data-row="1"  data-sizex="4" data-sizey="6" class="fulltransparent">
      <header class="fulltransparent">Was steht an</header>
      <div data-type="calview"
           data-device="OurCalendars"
           data-get="all"
           data-max="10"
           data-dateformat="short"
           data-timeformat="short"
           data-detail='["bdate","timeshort","summary","sourcecolor"]'
           data-sourcecolor="yes"
           data-detailwidth='["10","20","50"]'
           data-class="left-align bold">
      </div>
    </li>
<!--Sprit-->
    <li data-col="9" data-row="1"  data-sizex="1" data-sizey="7" class="fulltransparent">
      <header class="fulltransparent">Sprit</header>
      <div data-type="image"
           data-url="./images/real_800x400.png"
           data-size="80px">
      </div>
      <div class="large">
        <div data-type="label" data-device="Spritpreise" data-get="prices_51d4b632-a095-1aa0-e100-80009459e03a_e5" class="inline"></div> /
        <div data-type="label" data-device="Spritpreise" data-get="prices_51d4b632-a095-1aa0-e100-80009459e03a_diesel" class="inline"></div>
      </div>
      <div data-type="image"
           data-url="./images/avia_500x360.png"
           data-size="90px">
      </div>
      <div class="large">
        <div data-type="label" data-device="Spritpreise" data-get="prices_b01f066b-9b21-45c6-a687-00f5fb1a7463_e5" class="inline"></div> /
        <div data-type="label" data-device="Spritpreise" data-get="prices_b01f066b-9b21-45c6-a687-00f5fb1a7463_diesel" class="inline"></div>
      </div>
      <div data-type="image"
           data-url="./images/esso_390x276.png"
           data-size="90px">
      </div>
      <div class="large">
        <div data-type="label" data-device="Spritpreise" data-get="prices_e935427e-bd37-4daf-979c-b4fe2d112981_e5" class="inline"></div> /
        <div data-type="label" data-device="Spritpreise" data-get="prices_e935427e-bd37-4daf-979c-b4fe2d112981_diesel" class="inline"></div>
      </div>
      <div data-type="image"
           data-url="./images/shell_360x360.png"
           data-size="90px">
      </div>
      <div class="large">
        <div data-type="label" data-device="Spritpreise" data-get="prices_b48682b4-d344-4bb9-8890-a8504912119d_e5" class="inline"></div> /
        <div data-type="label" data-device="Spritpreise" data-get="prices_b48682b4-d344-4bb9-8890-a8504912119d_diesel" class="inline"></div>
      </div>
    </li>
<!--Müll-->
    <li data-col="10" data-row="1"  data-sizex="1" data-sizey="7" class="fulltransparent">
      <header class="fulltransparent">Müll</header>
<!-- Der Müllbereich kann angeklickt werden und zeigt dann ein Popup mit den anstehenden Leerungsterminen-->
      <div data-type="popup"
           data-height="400px"
           data-width="900px">

            <div class="big"
              data-type="symbol"
              data-background-icon="none"
              data-device="myABFALL"
              data-get="Rest_days"
              data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
              data-icons='["fa-trash warn fa-spin","fa-trash warn blink","fa-trash warn"]'
              data-colors='["gray","gray","gray"]'>
            </div>
            <div class="big"
              data-type="symbol"
              data-background-icon="none"
              data-device="myABFALL"
              data-get="Bio_days"
              data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
              data-icons='["fa-trash warn fa-spin","fa-trash warn blink","fa-trash warn"]'
              data-colors='["green","green","green"]'>
            </div>
            <div class="big"
              data-type="symbol"
              data-background-icon="none"
              data-device="myABFALL"
              data-get="Papier_days"
              data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
              data-icons='["fa-trash warn fa-spin","fa-trash warn blink","fa-trash warn"]'
              data-colors='["#4747D1","#4747D1","#4747D1"]'>
            </div>
            <div class="big"
              data-type="symbol"
              data-background-icon="none"
              data-device="myABFALL"
              data-get="LVP_days"
              data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
              data-icons='["fs-bag warn fa-spin","fs-bag warn blink","fs-bag warn"]'
              data-colors='["#E6E600","#E6E600","#E6E600"]'>
            </div>
            <div class="big"
              data-type="symbol"
              data-background-icon="none"
              data-device="myABFALL"
              data-get="Glas_days"
              data-get-on='["0","1","[2-9]{1}|[0-9]{2}"]'
              data-icons='["fs-bag warn fa-spin","fs-bag warn blink","fs-bag warn"]'
              data-colors='["#FFFFFF","#FFFFFF","#FFFFFF"]'>
            </div>
<!-- Popup Dialog für die detailierten Leerungsdaten-->
            <div class="dialog bigger bg-popupgreenboard">
              <header class="fulltransparent">Müll</header>
              <div>Die nächste Leerung findet am
                <div data-type="label" data-device="myABFALL" data-get="next_weekday" class="inline"></div>,
                <div data-type="label" data-device="myABFALL" data-get="next_date" class="inline"></div> statt.</div>
              <div>Es werden dann
                <div data-type="label" data-device="myABFALL" data-get="next_text" class="inline"></div>-müll abgeholt.</div>
              <div>Restmüll -
                <div data-type="label" data-device="myABFALL" data-get="Rest_weekday" class="inline"></div>,
                <div data-type="label" data-device="myABFALL" data-get="Rest_date" class="inline"></div></div>
              <div>Papiermüll -
                  <div data-type="label" data-device="myABFALL" data-get="Papier_weekday" class="inline"></div>,
                  <div data-type="label" data-device="myABFALL" data-get="Papier_date" class="inline"></div></div>
              <div>Biomüll -
                  <div data-type="label" data-device="myABFALL" data-get="Bio_weekday" class="inline"></div>,
                  <div data-type="label" data-device="myABFALL" data-get="Bio_date" class="inline"></div></div>
              <div>Gelber Sack -
                  <div data-type="label" data-device="myABFALL" data-get="LVP_weekday" class="inline"></div>,
                  <div data-type="label" data-device="myABFALL" data-get="LVP_date" class="inline"></div></div>
              <div>Glas -
                  <div data-type="label" data-device="myABFALL" data-get="Glas_weekday" class="inline"></div>,
                  <div data-type="label" data-device="myABFALL" data-get="Glas_date" class="inline"></div></div>
              <div>Sondermüll -
                  <div data-type="label" data-device="myABFALL" data-get="Sondermuell_weekday" class="inline"></div>,
                  <div data-type="label" data-device="myABFALL" data-get="Sondermuell_date" class="inline"></div></div>
          </div>
      </div>
    </li>
<!--Uhrzeit-->
    <li data-col="11" data-row="1"  data-sizex="2" data-sizey="2" class="fulltransparent">
      <header data-type="clock"
              data-format="D, j.M Y"
              class="fulltransparent">
      </header>
      <div data-type="clock"
           data-format="H:i"
           class="great">
      </div>
      <!-- div data-type="clock"
           data-format="D, j.M Y"
           class="bigger">
      </div-->
    </li>
    <li data-col="11" data-row="3"  data-sizex="2" data-sizey="5">
      <header>EXAMPLE4</header>
      <!-- place your widget here -->
    </li>
<!--Reisezeiten-->
    <li data-col="1" data-row="7" data-sizex="4" data-sizey="6" class="fulltransparent">
      <header class="fulltransparent">Aktuelle Reisezeiten</header>
      <div class="sheet">
        <div class="row-5 large left-align">via  Hockenheim</div>
        <div class="row"
             data-template="templates/template_fahrzeit.html"
             data-parameter='{"paraDev":"trafficViaHockenheim"}'>
        </div>
        <div class="row-5 large left-align">via  Talhaus</div>
        <div class="row"
             data-template="templates/template_fahrzeit.html"
             data-parameter='{"paraDev":"trafficViaTalhaus"}'>
        </div>
        <div class="row-5 large left-align">via  A61/Talhaus</div>
        <div class="row"
             data-template="templates/template_fahrzeit.html"
             data-parameter='{"paraDev":"trafficViaA61Talhaus"}'>
        </div>
        <div class="row-5 large left-align">via  A61/A6</div>
        <div class="row"
             data-template="templates/template_fahrzeit.html"
             data-parameter='{"paraDev":"trafficViaA61A6"}'>
        </div>
      </div>
    </li>
<!--Geburtstage-->
    <li data-col="5" data-row="7"  data-sizex="4" data-sizey="6" class="fulltransparent">
      <header class="fulltransparent">Geburtstage</header>
      <div data-type="calview"
           data-device="BirthdayView"
           data-get="today"
           data-color="red"
           data-detail='["bdate","summary","age"]'
           data-detailwidth='["10","50","10"]'
           data-class="bold">
      </div>
      <div data-type="calview"
           data-device="BirthdayView"
           data-get="tomorrow"
           data-color="yellow"
           data-detail='["bdate","summary","age"]'
           data-detailwidth='["10","50","10"]'
           data-class="bold">
      </div>
      <div class="left-align">demnächst</div>
      <div data-type="calview"
           data-device="BirthdayView"
           data-get="all"
           data-start="notomorrow"
           data-max="9"
           data-dateformat="short"
           data-detail='["bdate","summary","age"]'
           data-detailwidth='["10","50","10"]'
           data-class="bold">
      </div>
    </li>
    <li data-col="9" data-row="8" data-sizex="4" data-sizey="3">
      <header>Küchenorchester</header>
      <!-- place your widget here -->
    </li>
  </ul>
</div>
</body>
</html>