FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: chris1284 am 05 August 2016, 22:09:41

Titel: Eval2.2 - Pagebutten - mehrere grid-elemente in content
Beitrag von: chris1284 am 05 August 2016, 22:09:41
Hi,
ich habe die pagebutton demo-seite angepasst um pagebutton in der eval zu testen. irgenwie bekomme ich aber immer nur einen "großen grauen kasten" in dem der kontent landet. kann man das aufbechen so das es einzelen grid sind und dennoch nur eine conten.html? anbei ein bild ist (mit rot eingezeichnet wo das wetter hin soll und ein bild was ich im paint manipuliert habe wie es aussehen soll.


def index:
Zitat
<body>
    <div class="gridster">
        <ul>
         <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            <header>Termine</header>
            <div data-type="calview" data-device="View_All" data-get="today" data-detail='["bdate","summary"]' data-max="7" class="cell"></div>
            <div data-type="calview" data-device="View_All" data-get="tomorrow" data-detail='["bdate","summary"]' data-max="7" class="cell"></div>
         </li>
            <li data-row="1" data-col="2" data-sizex="8" data-sizey="1">
                <div data-type="pagebutton" data-url="#page_heating.html" data-load="#page_heating" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_heating.html" data-icon="fa-home" class="default top-space"></div>
                <div data-type="pagebutton" data-url="#page_switches.html" data-load="#page_switches" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_switches.html" data-icon="fa-music" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#page_weather.html" data-load="#page_weather" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_weather.html" data-device="ftuitest" data-states='["0","1"]' data-icons='["fa-sliders","fa-sliders activate"]' class="prefetch top-space"></div>
            </li>
            <li data-row="2" data-col="1" data-sizex="10" data-sizey="4">
                <div class="page" id="page_heating"></div>
                <div class="page" id="page_switches"></div>
                <div class="page" id="page_weather"></div>
            </li>
        </ul>
    </div>
</body>

def weather
Zitat
<!DOCTYPE html>
<html>
<head>
    <title>FTUI Dev</title>
</head>
<body>
  <div class="page" id="page_weather">
   <ul>
      <li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
         <header>Wetter</header>
         <div class="cell" >
            <div data-type="label" class="cell left-align">Außentemp</div>
            <div data-type="label" data-device="out_sen_t" data-get="temperature" data-unit="°C" data-color="orange" class="cell big"></div>
         </div>
      </li>
      <li data-row="1" data-col="2" data-sizex="4" data-sizey="2">
         <header>Yahoo</header>
         <div class="col-1-4">
            <div data-type="label" class="cell">Heute</div>
            <div data-type="weather" data-device="weather_yahoo" data-get="fc1_condition" data-imageset="kleinklima" ></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc1_low_c" data-unit="°C" data-color="blue" class="inline "></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc1_high_c" data-unit="°C" data-color="orange" class="inline "></div>
         </div>
         <div class="col-1-4">
            <div data-type="label" data-device="weather_yahoo" data-get="fc2_day_of_week" class="cell"></div>
            <div data-type="weather" data-device="weather_yahoo" data-get="fc2_condition" data-imageset="kleinklima" ></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc2_low_c" data-unit="°C" data-color="blue" class="inline "></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc2_high_c" data-unit="°C" data-color="orange" class="inline "></div>
         </div>
         <div class="col-1-4">
            <div data-type="label" data-device="weather_yahoo" data-get="fc3_day_of_week" class="cell"></div>
            <div data-type="weather" data-device="weather_yahoo" data-get="fc3_condition" data-imageset="kleinklima" ></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc3_low_c" data-unit="°C" data-color="blue" class="inline "></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc3_high_c" data-unit="°C" data-color="orange" class="inline "></div>
         </div>
         <div class="col-1-4" >
            <div data-type="label" data-device="weather_yahoo" data-get="fc4_day_of_week" class="cell"></div>
            <div data-type="weather" data-device="weather_yahoo" data-get="fc4_condition" data-imageset="kleinklima" ></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc4_low_c" data-unit="°C" data-color="blue" class="inline "></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc4_high_c" data-unit="°C" data-color="orange" class="inline "></div>
         </div>
      </li>
      <li data-row="3" data-col="1" data-sizex="3" data-sizey="1">
         <div class="cell">
            <div data-type="gds" data-device="gdswetter" data-get="alert" data-max="5" class="cell"></div>
         </div>
      </li>
   </ul>
</div>
</body>
</html>

ich würde jetzt erwarten das er ein bei 1 startendes, 1 breites, 2 hohes element läd, nebendran mit dem standard abstand ab position 2 ein 4 breites 2 hohes element wo dann 4 columns drin sind.


Titel: Antw:Eval2.2 - Pagebutten - mehrere grid-elemente in content
Beitrag von: chris1284 am 06 August 2016, 18:09:46
niemand eine idee? die info das der pagebutton das nicht kann (also mehr als das eine grid-element austauschen als die größer do der content in der index definiert ist) würde auch schon reichen
Titel: Antw:Eval2.2 - Pagebutten - mehrere grid-elemente in content
Beitrag von: setstate am 06 August 2016, 19:51:57
Mit der ersten Seite reservierst du den Platz, mit den Unterseiten füllst du ihn. Wenn die Unterseite ein Layout bekommen soll, kann man Gridster in Gridster probieren. Dazu fehlt aber das neue Gridster div. Ansonsten nur mit col-*-* oder inline positionieren.
Titel: Antw:Eval2.2 - Pagebutten - mehrere grid-elemente in content
Beitrag von: chris1284 am 06 August 2016, 20:04:14
danke das was... den 2. gridstar einfach noch definieren der überschreibt dann den ersten!