Hallo,
ich habe schon, seit dem ich mit ftui angefangen habe Probleme mit der Anordnung der Widgets. Oftmals sind die Widgets einfach außerhalb des vordefinierten Bereichs. Und lassen sich auch nicht mit
data-row="<>" data-col="<>" verschieben.
Ich wäre froh, wenn ihr ein Paar allgemeine Tipps habt, was die Anordnung der Widgets angeht. (Notepad ++ nutze ich schon, um gescheit zu sehen, was ich da überhaupt mache ;D )
Beispiel hier:
Die widgets sind alle untereinander Angeordnet, mir ist es nicht möglich die letzen zwei nach Rechts zu bekommen.
<div class="gridster">
<li data-row="1" data-col="1" data-sizex="3" data-sizey="4,5" class="semitransparent3d">
<header class="semitransparentheader">Batterianzeige</header>
<div data-type="readingsgroup" data-device="ZE.Batterie" data-max-update="21700"></div>
</li>
<li data-row="2" data-col="3" data-sizex="3" data-sizey="4,5" class="semitransparent3d">
<header class="semitransparentheader">Aktivität der Devices</header>
<div data-type="readingsgroup" data-device="ZE.Activity" data-max-update="21700"></div>
</li>
<li class="semitransparent3d" data-row="8" data-col="8" data-sizex="4" data-sizey="2">
<header class="semitransparentheader">FHEM-Monitor</header>
<table align="center" style="border:1px solid grey; width:80%">
<tr>
<td style="border:2px solid grey;" class="semitransparenttext"><center><div data-type="label" class="inline"><big>FHEM Uptime<br></big></div>
</br>
<div data-type="label" data-device="SystemMonitor" data-get="fhemuptime_text" class="small"></div>
</td>
</tr>
</table>
<table align="center" style="border:1px solid grey; width:80%">
<tr>
<td style="border:2px solid grey;" class="semitransparenttext"><center><div data-type="label" class="inline"><big>System Uptime<br></big></div>
</br>
<div data-type="label" data-device="SystemMonitor" data-get="uptime_text" class="small"></div>
</td>
</tr>
</table>
</li>
<li class="semitransparent3d" data-row="6" data-col="6" data-sizex="3" data-sizey="2">
<header class="semitransparentheader">Speedtest</header>
<div data-type="label" class="left-align inline top-space semitransparenttext large">Download:<br></div>
<div class="left-align inline top-space large" data-type="label" data-device="Speedtest" data-get="download"></div>
<div class="newline"></div>
<div data-type="label" class="left-align inline large semitransparenttext">Upload:</div>
<div class="left-align inline large" data-type="label" data-device="Speedtest" data-get="upload"></div>
<div class="newline"></div>
<div data-type="label" class="left-align inline semitransparenttext large">Ping:</div>
<div class="left-align inline large" data-type="label" data-device="Speedtest" data-get="ping"></div>
</li>
</div>
</body>
</html>Ebenso wäre ich dankbar, wenn ihr mir helfen könntet, die Rollläden Widgets nicht untereinander sondern nebeneinander Anzuordnen... Habe schon verschiedenes mit vbox, hbox und cell versucht.
Hier der Code:
<div class="page" id="content7">
<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->
<div class="gridster">
<li class="semitransparent3d" data-row="1" data-col="1" data-sizex="12" data-sizey="2">
<header class="semitransparentheader">EG.</header>
<!-- ========= EG.Wohnzimmer_Links ======== -->
<!-- ======================================= -->
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="EG.Wohnzimmer_Links"
data-get="reportedState"
data-states='["off","down","dim 9[7-9]","dim [0-9]","dim 1[0-9]","dim 2[0-9]","dim 3[0-9]","dim 4[0-9]","dim 5[0-9]","dim 6[0-9]","dim 7[0-9]","dim 8[0-9]","dim 9[0-7]","off","down","9[7-9]","[0-9]","10","20","30","35","40","50","60","70","80","90"]'
data-icons='["oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_window_2w","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_window_2w","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10"]'
data-colors='["yellow","yellow","green","pink","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","yellow","green","pink","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'
></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Links"
data-set-on="dim 35"
data-icon="oa-fts_shutter_70"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Links"
data-set-on="down"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Links"
data-set-on="70"
data-icon="oa-fts_shutter_30"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Links"
data-set-on="50"
data-icon="oa-fts_shutter_50"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Links"
data-set-on="up"
data-icon="fa-angle-up"></div></li>
</ul>
</div>
<div data-type="label">WZ Links</div>
<!-- ======= EG.Wohnzimmer_Mitte_Links ==== -->
<!-- ======================================= -->
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="EG.Wohnzimmer_Mitte_Links"
data-get="reportedState"
data-states='["off","down","dim 9[7-9]","dim [0-9]","dim 1[0-9]","dim 2[0-9]","dim 3[0-9]","dim 4[0-9]","dim 5[0-9]","dim 6[0-9]","dim 7[0-9]","dim 8[0-9]","dim 9[0-7]","off","down","9[7-9]","[0-9]","10","20","30","35","40","50","60","70","80","90"]'
data-icons='["oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_window_2w","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_window_2w","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10"]'
data-colors='["yellow","yellow","green","pink","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","yellow","green","pink","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'
></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Mitte_Links"
data-set-on="dim 35"
data-icon="oa-fts_shutter_70"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Mitte_Links"
data-set-on="down"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Mitte_Links"
data-set-on="70"
data-icon="oa-fts_shutter_30"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Mitte_Links"
data-set-on="50"
data-icon="oa-fts_shutter_50"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Mitte_Links"
data-set-on="up"
data-icon="fa-angle-up"></div></li>
</ul>
</div>
<div data-type="label">WZ MitteLinks</div>
<!-- ======= EG.Wohnzimmer_Mitte_Rechts ==== -->
<!-- ======================================= -->
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="EG.Wohnzimmer_Mitte_Rechts"
data-get="reportedState"
data-states='["off","down","dim 9[7-9]","dim [0-9]","dim 1[0-9]","dim 2[0-9]","dim 3[0-9]","dim 4[0-9]","dim 5[0-9]","dim 6[0-9]","dim 7[0-9]","dim 8[0-9]","dim 9[0-7]","off","down","9[7-9]","[0-9]","10","20","30","35","40","50","60","70","80","90"]'
data-icons='["oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_window_2w","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_window_2w","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10"]'
data-colors='["yellow","yellow","green","pink","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","yellow","green","pink","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'
></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Mitte_Rechts"
data-set-on="dim 35"
data-icon="oa-fts_shutter_70"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Mitte_Rechts"
data-set-on="down"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Mitte_Rechts"
data-set-on="70"
data-icon="oa-fts_shutter_30"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Mitte_Rechts"
data-set-on="50"
data-icon="oa-fts_shutter_50"></div></li>
<li><div data-type="push"
data-device="EG.Wohnzimmer_Mitte_Rechts"
data-set-on="up"
data-icon="fa-angle-up"></div></li>
</ul>
</div>
<div data-type="label">WZ MitteRechts</div>
</li>
<li class="semitransparent3d" data-row="1" data-col="3" data-sizex="12" data-sizey="2">
<div class="vbox" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
</div>
</li>
<li class="semitransparent3d" data-row="5" data-col="5" data-sizex="12" data-sizey="2">
<header class="semitransparentheader">1OG.</header>
</li>
<li class="semitransparent3d" data-row="5" data-col="5" data-sizex="12" data-sizey="2">
<header class="semitransparentheader">2OG.</header>
</li>
</div>
</body>
</html>Wäre euch sehr dankbar, wenn ihr ein wenig beschreiben könntet, wie ich am besten vorgehe, oder an was es liegt, um im Zukunft hoffentlich selbst solche Probleme lösen kann.
Danke schon mal im vorhinein,
Fixel
Edit:zweite Bild erneut angehangen (upload Fehler)
Edit2: Habe es lösen können.
einmal habe ich <ul> um <li> vergessen... Bei dem zwieten Problem half dann eine hbox.