Ankündigung

Einklappen
Keine Ankündigung bisher.

Rooms-Menu -> Raumliste (Listview) zweispaltig

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    #16
    Hallo Miguel,

    ich habe jetzt mal deinen Ausschnitt in meinen Testaufbau mit eingefügt.

    HTML-Code:
    <ul data-role="listview" data-dividertheme="c">
     <li data-role="list-divider">Obergeschoss</li>
     <li data-icon="false" class="tilemenu">
      <a href="index.php?page=og_beleuchtung">
       <img class="icon" src="{{ icon0 }}light_light.png" />
       <h3>Flur</h3>
    
       <div class="ui-li-aside">
        {{ basic.symbol('erdgeschoss.flur.bodenlicht', ['erdgeschoss.flur.bodenlicht'], 'Bodenlicht', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
        {{ basic.symbol('erdgeschoss.flur.treppenlicht', ['erdgeschoss.flur.treppenlicht'], 'Treppe', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
        {{ basic.symbol('obergeschoss.flur.licht.status', ['obergeschoss.flur.licht.status'], 'Licht ', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
        {{ basic.float('obergeschoss.flur.temperatur', 'obergeschoss.flur.temperatur', 'temp') }} &nbsp;
       </div>
      </a>
     </li>
     <li data-icon="false" class="tilemenu">
      <a href="index.php?page=og_schlafzimmer">
       <img class="icon" src="{{ icon0 }}scene_making_love.png" />
       <h3>Schlafzimmer</h3>
    
       <div class="ui-li-aside">
        {{ basic.symbol('obergeschoss.schlafzimmer.licht.status', ['obergeschoss.schlafzimmer.licht.status'], 'Schlafzimmer ', icon1~'light_light.png', 1, 'or') }}&nbsp;
        {{ basic.symbol('obergeschoss.ankleide.licht.status', ['obergeschoss.ankleide.licht.status'], 'Ankleide  ', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
        {{ basic.symbol('obergeschoss.schlafzimmer.fenster', ['obergeschoss.schlafzimmer.fenster'], 'Fenster geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;<br>
        {{ basic.float('obergeschoss.schlafzimmer.temperatur', 'obergeschoss.schlafzimmer.temperatur', 'temp') }} &nbsp;
       </div>
      </a>
     </li>
    
     <li data-icon="false" class="tilemenu">
      <a href="index.php?page=kinderzimmer2">
       <img class="icon" src="{{ icon0 }}scene_childs_room.png" />
       <h3>Testraum</h3>
    
       <div class="ui-li-aside">
        {{ basic.symbol('obergeschoss.kindsued.licht.status', ['obergeschoss.kindsued.licht.status'], 'Deckenlicht', icon1~'light_light.png', 1, 'or') }}&nbsp;
        {{ basic.symbol('obergeschoss.kindsued.fenster', ['obergeschoss.kindsued.fenster'], 'Fenster geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;<br>
        {{ basic.float('obergeschoss.kindsued.temperatur', 'obergeschoss.kindsued.temperatur', 'temp') }} &nbsp;
       </div>
      </a>
     </li>
     <li data-icon="false" class="tilemenu">
      <div class="ui-li-aside">
       &nbsp;
      </div>
     </li>
     &nbsp;
    </ul>
    
    <ul data-role="listview" data-dividertheme="c">
     <li data-role="list-divider">Erdgeschoss</li>
     <li data-icon="false" class="tilemenu">
      <a href="index.php?page=wohnen">
       <img class="icon" src="{{ icon0 }}scene_livingroom.png" />
       <h3>Wohnbereich</h3>
    
       <div class="ui-li-aside">
        {{ basic.symbol('erdgeschoss.wohnzimmer.licht.status', ['erdgeschoss.wohnzimmer.licht.status'], 'Wohnzimmer  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
        {{ basic.symbol('erdgeschoss.wohnzimmer.esstisch', ['erdgeschoss.wohnzimmer.esstisch'], 'Esstisch  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
        {{ basic.symbol('erdgeschoss.wohnzimmer.ambiente.status', ['erdgeschoss.wohnzimmer.ambiente.status'], 'Ambiente  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
        {{ basic.symbol('erdgeschoss.wohnzimmer.giebel.status', ['erdgeschoss.wohnzimmer.giebel.status'], 'Giebel  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;<br>
        {{ basic.symbol('erdgeschoss.wohnzimmer.terrassentuer', ['erdgeschoss.wohnzimmer.terrassentuer'], 'Terrasse Wohnzimmer geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;&nbsp;
        {{ basic.symbol('erdgeschoss.essbereich.fenster', ['erdgeschoss.essbereich.fenster'], 'Terrasse Esstisch geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;&nbsp;<br>
        {{ basic.float('erdgeschoss.wohnzimmer.temperatur', 'erdgeschoss.wohnzimmer.temperatur', 'temp') }} &nbsp;
       </div>
      </a>
     </li>
     <li data-icon="false" class="tilemenu">
      <div class="ui-li-aside">
       &nbsp;
      </div>
     </li>
     &nbsp;
    </ul>
    Das Ergebnis ist:
    TestVisu.PNG

    Dazu habe ich aber noch etwas eingefügt. Damit das funktioniert müssen in einer Zeile immer 2 Listenelemente vorhanden sein. Hierzu habe ich jeweils ein leeres Listenelement zu deinem HTML Code hinzugefügt.

    HTML-Code:
     <li data-icon="false" class="tilemenu">
      <div class="ui-li-aside">
       &nbsp;
      </div>
     </li>
    Hoffe das hilft weiter.

    Gruß

    Kommentar


      #17
      Super ,vielen lieben Dank!! Wirklich klasse :-)

      Es funktioniert jetzt.

      Liebe Grüße

      Miguel

      Kommentar


        #18
        Zitat von felix86 Beitrag anzeigen
        Hi,
        Ich hätte es gerne, dass in der Startansicht die Räume zweispaltig dargestellt werden. Wenn man dann auf einen Raum geklickt hat und die Räume links aufgelistet werden wäre es besser das einspaltige Design zu haben. Bei meinem 8" Tablet passen sonst die Raumnamen und die Temperatur nicht in das Feld.
        Hallo

        hat das jemand hinbekommen?

        Gruss, Micha

        Kommentar


          #19
          Hallo Micha,

          falls es noch benötigt wird, ich habs folgendermaßen gemacht. Grundsätzlich wie beschrieben über die CSS und dann noch folgenden Eintrag in die eigene VISU CSS

          HTML-Code:
          .tilemenu {
              border-right: 0 none;
              border-top: 0 none;
              box-sizing: border-box;
              display: block;
              float: left;
              /*height: 70px;*/
              margin: 0;
              overflow: hidden;
              padding: 0 5px 5px 0;
              position: relative;
              width: 100%;
          }
          
          /* some corrections for bigger displays */
          @media all and (min-width: 900px) {
              .tilemenu {
                  width: 50%;
              }
          }
          
          .tilemenu_1z {
              border-right: 0 none;
              border-top: 0 none;
              box-sizing: border-box;
              display: block;
              float: left;
              /*height: 70px;*/
              margin: 0;
              overflow: hidden;
              padding: 0 5px 5px 0;
              position: relative;
              width: 100%;
          }
          Er stellt das Menü also 1-spaltig dar, außer du hast ein Device, das mindestens 900Pixel Breite hat, dann wirds 2-spaltig.

          Das tilemenu_1z steht bei mir für einzeilig. Bezieht sich aber nur auf das Raummenü, welches links auftaucht, wenn du einen Raum ausgewählt hast. Da das Menü recht schmal ist, wollte ich das auch 1-spaltig haben.
          Jeder Raum bekommt dann ganz oben statt
          HTML-Code:
          {% extends "rooms.html" %}
          ein
          HTML-Code:
          {% extends "rooms_1z.html" %}
          . Die rooms_1z.html ist eine Kopie der rooms.html nur, dass ich bei dieser das
          HTML-Code:
          {% include 'rooms_menu.html' %}
          durch ein
          HTML-Code:
          {% include 'rooms_menu_1z.html' %}
          ersetzt habe. Die rooms_menu_1z.html ist wiederrum eine Kopie deiner eigenen rooms_menu.html, nur dass du alle einträge von
          HTML-Code:
          class="tilemenu
          in
          HTML-Code:
          class="tilemenu_1z
          abänderst.
          Dadurch musst du zwar immer die rooms_menu UND die rooms_menu_1z aktuell halten, aber was "intelligentes" über css hab ich leider noch nicht hinbekommen und es funktioniert soweit erstmal bei mir.



          Grüße

          Zuletzt geändert von masterjost; 20.07.2018, 11:12.

          Kommentar


            #20
            1.jpg2.jpg

            Kommentar


              #21
              Hallo zusammen,
              ich habe mich auch an der zweispaltigen Darstellung versucht.
              Wenn ich das nach der letzten Anleitung einbaue, dann bekomme ich allerdings sowas hier zurück:
              smartVISU_rooms_menu.png

              mein Eintrag in der css sieht so aus:
              Code:
              .liste2fach {
                  border-right: 0 none;
                  border-top: 0 none;
                  box-sizing: border-box;
                  display: block;
                  float: left;
                  /*height: 70px;*/
                  margin: 0;
                  overflow: hidden;
                  padding: 0 5px 5px 0;
                  position: relative;
                  width: 100%;
              }
              /* some corrections for bigger displays */
              @media all and (min-width: 900px) {
                  .liste2fach {
                      width: 50%;
                  }
              }
              und die rooms_menu sieht so aus:
              Code:
              <ul data-role="listview" data-dividertheme="c">
                  <li data-role="list-divider">Infos</li>
                  <li data-icon="false" class="liste2fach">
                      <a href="index.php?page=infos_wetter">
                          <img class="icon"' src='{{ icon0 }}weather_cloudy_light.svg'/><h3>Wetter</h3>
                          <div class="ui-li-aside"></div>
                      </a>
                  </li>
                  <li data-icon="false" class="liste2fach">
                      <a href="index.php?page=infos_abfall">
                          <img class="icon"' src='{{ icon0 }}message_garbage.svg'/><h3>Abfallkalender</h3>
                          <div class="ui-li-aside"></div>
                      </a>
                  </li>
                  <li data-icon="false" class="liste2fach">
                      <a href="index.php?page=infos_telefon">
                          <img class="icon"' src='{{ icon0 }}phone_ring.svg'/><h3>Telefonliste</h3>
                          <div class="ui-li-aside"></div>
                      </a>
                  </li>
                  <li data-icon="false" class="liste2fach">
                      <a href="index.php?page=infos_lueftung">
                          <img class="icon"' src='{{ icon0 }}vent_ventilation_level_0.svg'/><h3>Lüftung</h3>
                          <div class="ui-li-aside"></div>
                      </a>
                  </li>
                  <li data-icon="false" class="liste2fach">
                      <a href="index.php?page=infos_waermepumpe">
                          <img class="icon"' src='{{ icon0 }}sani_buffer_temp_all.svg'/><h3>Wärmepumpe</h3>
                          <div class="ui-li-aside"></div>
                      </a>
                  </li>
                  <li data-icon="false" class="liste2fach">
                      <a href="index.php?page=infos_pv">
                          <img class="icon"' src='{{ icon0 }}measure_photovoltaic_inst.svg'/><h3>PV</h3>
                          <div class="ui-li-aside"></div>
                      </a>
                  </li>
                  
                  <li data-role="list-divider">Übersichten</li>
                  <li data-icon="false">
                      <a href="index.php?page=summary_rollos">
                          <img class="icon"' src='{{ icon0 }}fts_shutter_40.svg'/><h3>Rollos</h3>
                          <div class="ui-li-aside"></div>
                      </a>
                  </li>
                  <li data-icon="false">
                      <a href="index.php?page=summary_temperaturen">
                          <img class="icon"' src='{{ icon0 }}temp_temperature.svg'/><h3>Temperaturen</h3>
                          <div class="ui-li-aside"></div>
                      </a>
                  </li>
                  
                  <li data-role="list-divider">Spezial</li>
                  <li data-icon="false">
                      <a href="index.php?page=room_zentral">
                          <img class="icon"' src='{{ icon0 }}control_building_s_okg_all.svg'/><h3>Zentralfunktionen</h3>
                          <div class="ui-li-aside"></div>
                      </a>
                  </li>

              Kommentar


                #22
                letzte Zeile fehlt ein </ul>?

                <li data-role="list-divider">Spezial</li>
                <li data-icon="false">
                <a href="index.php?page=room_zentral">
                <img class="icon"' src='{{ icon0 }}control_building_s_okg_all.svg'/><h3>Zentralfunktionen</h3>
                <div class="ui-li-aside">
                </div>
                </a>
                </li>
                </ul>

                Gruß Danny

                Kommentar


                  #23
                  Hallo,
                  ich bin nach der Anleitung von Masterjost vorgegangen. Passt soweit.
                  Ich hätte allerdings gerne zwischen den Spalten einen Trenner. Oder einen kleinen Freiraum.
                  Also zwei nebeneinander angrenzende Räume sollen optisch etwas getrennt werden.

                  Hat jemand einen Tipp, wie man so etwas bewerkstelligen kann?

                  Kommentar

                  Lädt...
                  X