Seite lädt nicht, benötige Unterstützung

kaptainlu · 26 Februar 2022, 21:21:00

Hallo zusammen,

ich benötige ein wenig Unterstützung mit Gridster.

Die Seite 1_start.html lädt nicht. Komischerweise nur diese nicht. Bei allen anderen klappt es.

In der Index.html steht folgendes:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <script src="js/fhem-tablet-ui.js" defer></script>
    <title>FHEM-Tablet-UI</title>
    <meta name="lang" content="de">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <meta name="gridster_cols" content="10"/>
    <meta name="gridster_rows" content="10"/>

    <meta name="gridster_disable" content="1">
    <meta name="gridster_margin" content="1">

    <link rel="stylesheet" href="css/fhem-blue-ui.css" />
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png"/>
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
</head>
<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="10">
                <header>Nav</header>

                <div class="sheet">
                    <div class="row">
                        <div class="cell top-align">
                          <div data-type="pagebutton" data-url="#1_wohnzimmer.html" data-load="#1_wohnzimmer-content" data-active-pattern=".*#1_wohnzimmer.html" data-icon="fa-thermometer-three-quarters" class="big top-space"></div>
                          <div data-type="pagebutton" data-url="#1_start.html" data-load="#1_start-content" data-active-pattern=".*#1_start.html" data-icon="fa-fire" class="top-space"></div>
                            <div data-type="pagebutton" data-url="#1_wetter.html" data-load="#1_wetter-content" data-active-pattern=".*#1_wetter.html" data-icon="fa-sun" class="big top-space"></div>
                            <div data-type="pagebutton" data-url="#1_verbrauch.html" data-load="#1_verbrauch-content" data-active-pattern=".*#1_verbrauch.html" data-icon="fa-bolt" class="top-space"></div>
                            <div data-type="pagebutton" data-url="#1_euro.html" data-load="#1_euro-content" data-active-pattern=".*#1_euro.html" data-icon="fa-euro" class="top-space"></div>
                            <div data-type="pagebutton" data-url="#1_test.html" data-load="#1_test-content" data-active-pattern=".*#1_test.html" data-icon="fa-lightbulb" class="top-space"></div>



<br>
<div data-type="switch"
data-icon="fa-home"
data-device='Shelly_Summer'
data-get-on="on"
data-get-off="off"
data-set-on="on"
data-set-off="off"></div>


                        </div>
                    </div>
                    <div class="row">
                        <div class="cell  middle-align">
                            <div data-type="clock" class="big darker"></div>
                            <div data-type="clock" data-format="d.m.Y" class="large darker"></div>
                        </div>


                </div>
            </li>
            <li data-row="1" data-col="2" data-sizex="9" data-sizey="10">
                <div class="page" id="1_wohnzimmer-content"></div>
                <div class="page" id="1_test-content"></div>
                <div class="page" id="1_start-content"></div>
                <div class="page" id="1_verbrauch-content"></div>
                <div class="page" id="1_euro-content"></div>
                <div class="page" id="1_wetter-content"></div>


            </li>
        </ul>
    </div>
</body>
</html>

Die Datei 1_start.html beinhaltet:

Code Auswählen

x^<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="1_start-content">
    <div class="gridster">
        <ul>
          <li data-row="1" data-col="1" data-sizex="9" data-sizey="4">
              <div class="sheet">
                  <div class="row">
                      <div class="cell">
                        <td="text-align:center"><h2>Lüftungsstufe</h2></td><div data-type="thermostat" data-device="lueftung" data-min="1" data-max="8" data-set="Stufe" data-get="Lueftungsstufe" class="great darker"></div>
                                            </div>

                                            <div class="cell">
                                                <td="text-align:center"><h2>WRG</h2></td><div data-type="switch" data-device="lueftung" data-icon="fa-fire" data-set-on="1" data-get-on="1" data-set-off="0" data-get-off="0" data-set="Tauscher" data-get="Wärmetauscher" class="darker top-space"></div>
                                            </div>
                                            <div class="cell">
                                                <td="text-align:center"><h2>Aussenluft</h2></td><div data-type="label" data-device="lueftung" data-get="Aussentemperatur" data-post-text="°" class="great darker"></div>
                                            </div>
                                            <div class="cell">
                                                <td="text-align:center"><h2>Zuluft</h2></td><div data-type="label" data-device="lueftung" data-get="Einlasstemperatur" data-post-text="°" class="great darker"></div>
                                            </div>
                                            <div class="cell">
                                                <td="text-align:center"><h2>Abluft</h2></td><div data-type="label" data-device="lueftung" data-get="Innentemperatur" data-post-text="°" class="great darker"></div>
                                            </div>
                                            <div class="cell">
                                                <td="text-align:center"><h2>Fortluft</h2></td><div data-type="label" data-device="lueftung" data-get="Ablufttemperatur" data-post-text="°" class="great darker"></div>
                                            </div>
                                             <div class="cell">
                                                <td="text-align:center"></td><div data-type="label" data-device="Shelly_Lueftung" data-get="relay_0_power" data-post-text=" Watt aktuell" class="bigger white"></div>




          </li>
          <li data-row="5" data-col="1" data-sizex="9" data-sizey="4">

            <div class="sheet">
                <div class="row">
                    <div class="cell">
                        <div data-type="chart"

                        data-logdevice="DBLogging"
                        data-logfile="HISTORY"
                data-columnspec='["lueftung:Einlasstemperatur","lueftung:Aussentemperatur"]'
                data-style='["ftui l4", "ftui l2"]'
                data-ptype='["lines"]'
                data-uaxis='["primary"]'
                data-legend='["°"]'
                data-yunit="°"
                data-minvalue="0"
                data-maxvalue="35"
                data-yunit_sec="Grad"
                data-ytext_sec="Grad"
                data-yticks="2"
                data-minvalue_sec="0"
                data-maxvalue_sec="100"
                data-crosshair="false"
                data-cursorgroup="1"
                data-scrollgroup="1"
                data-showlegend="false"
                data-xticks="auto"
                data-height="250">
                           </div>
                    </div>
                </div>
            </div>



        </li>
         <li data-row="7" data-col="1" data-sizex="9" data-sizey="2">
           <div class="sheet">
               <div class="row">
                   <div class="cell">
                     <h2>Licht Bad</h2>
                     <div data-type="switch" data-device="Licht_Bad_CH2" data-icon="fa-lightbulb"></div>
                         <div data-type="label" class="darker top-space"></div>
                 </div>


                 <div class="cell">
                   <h2>Lüftung</h2>
                     <div data-type="switch" data-device="Shelly_Lueftung" data-icon="fa-angle-double-up"></div>
                 </div>



             </div>


                </div>
            </div>
        </li>

        </ul>
    </div>
</div>
</body>
</html>

Habe auch schon versucht die Dateien umzubenennen, hat aber leider nicht geholfen.

Kann wer helfen?
Danke!

SirMarco · 26 Februar 2022, 21:26:12

Schau mal in die erste Zeile: x^ stresst bestimmt

mr_petz · 26 Februar 2022, 21:28:20

Hi. Gehört das:

Code Auswählen


x^<!DOCTYPE html>

(x^)in den Code?
Hast du auch die ensprechenden Rechte?
Das erstmal für den Anfang.
LG mr_petz

Edit: wenn es zwei denken, wird was drann sein...

kaptainlu · 26 Februar 2022, 21:32:07

habe x^ mal rausgenommen, hat leider nicht geholfen.

hier mal ein Auszug aus einer html, bei der es problemlos klappt:

Code Auswählen

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="1_wohnzimmer-content">
    <div class="gridster">
        <ul>

            <li data-row="1" data-col="1" data-sizex="9" data-sizey="4">

                <div class="sheet">
                <div class="row">
                    <div class="cell">
                      <div data-type="clock" class="gigantic darker" style="color:yellow"></div>
                      <br>
                      <div data-type="clock" data-format="d.m.Y" class="great darker"></div>
                     </div>
                     <div class="sheet">
                     <div class="row">
                       <div class="cell">
                     <div data-type="switch"
	data-icon="fa-home"
	data-device='Shelly_Summer'
	data-get-on="on"
	data-get-off="off"
	data-set-on="on"
	data-set-off="off"
	class="great">
</div>



                </div>
            </div>
        </li>

                   <li data-row="1" data-col="4" data-sizex="9" data-sizey="3">
                <div class="sheet">
                <div class="row">

                    <div class="cell">
                        <td="text-align:center"><h2>Wohnzimmer</h2></td><div data-type="label" data-device="Netatmoinnen" data-get="temperature" data-post-text="°" data-color="green" class="great darker"></div>
                    </div>
                    <div class="cell">
                        <td="text-align:center"><h2>CO2</h2></td><div data-type="label" data-device="Netatmoinnen" data-get="co2" data-post-text="ppm" data-color="white" class="great darker"></div>
                    </div>
                    <div class="cell">
                        <td="text-align:center"><h2>Luftfeuchtigkeit</h2></td><div data-type="label" data-device="Netatmoinnen" data-get="humidity" data-post-text="%" data-color="white" class="great darker"></div>
                    </div>
                    <div class="cell">
                        <td="text-align:center"></td><b><u>Netatmo Innen</b></u><div data-type="label" data-device="Netatmoinnen" data-get="temperature" class="timestamp"></h2></div>
                    <br><br>
                        <td="text-align:center"></td><b><u>Netatmo Garten</b></u><div data-type="label" data-device="Netatmoaussen" data-get="temperature" class="timestamp"></h2></div>
                    </div>

                    <li data-row="1" data-col="7" data-sizex="9" data-sizey="3">



                 <div class="sheet">
                <div class="row">
                  <div class="cell">
                      <td="text-align:center"><h2>Außen Garten</h2></td><div data-type="label" data-device="Netatmoaussen" data-get="temperature" data-post-text="°" data-color="green" class="great darker"></div>
                  </div>
                  <div class="cell">
                    <td="text-align:center"><h2>Lüftung</h2></td><div data-type="label" data-device="Shelly_Lueftung" data-get="relay_0_power" data-post-text=" W" data-color="yellow" class="great darker"></div>
                  </div>

                  <div class="cell">
                    <td="text-align:center"><h2>Stufe</h2></td><div data-type="label" data-device="lueftung" data-get="Lueftungsstufe" data-color="white" class="gigantic darker"></div>
                  </div>
                  <div class="cell">
                      <td="text-align:center"><h2>Leistung</h2></td><div data-type="label" data-device="lueftung" data-get="Leistung" data-color="white" class="gigantic darker"></div>
                  </div>

            </li>

                </div>
            </div>
        </li>









        </ul>
    </div>
</div>
</body>
</html>

mr_petz · 26 Februar 2022, 21:40:51

Kontrolliere deine divs. Vorallen die die nicht geschlossen sind.
Das erste sheet und row wird nicht oder erst irgenwo nach dem li geschlossen...
Soll heissen, die Formatierung ist nicht ganz ok.

kaptainlu · 26 Februar 2022, 21:54:54

jetzt passt es, danke

FHEM Forum

Seite lädt nicht, benötige Unterstützung

kaptainlu

SirMarco

mr_petz

kaptainlu

mr_petz

kaptainlu