#gelöst# Widget Select Anzeige

Helmi55 · 10 Mai 2020, 19:14:02

Hallo guten Abend
wir stehen auf Kriegsfuß.
Ich habe einen Dummy - Hysterese - hier das List

Internals:
   FUUID      5c4b2e6e-f33f-b033-558e-a94c7ca5b19b1a59
   NAME       Hysterese
   NR         225
   STATE      15
   TYPE       dummy
   READINGS:
     2020-05-10 19:02:45   state           15
Attributes:
   fm_type    state
   group      Schalter
   room       Poolsteuerung
   setList    1 3 4 5 7 10 15 0

und Hier mein FTUI Code

Code Auswählen

<li data-row="2" data-col="11" data-sizex="3" data-sizey="2">
       
        <div class="large"</div>
        <br />
        
        
        <div
        
        data-type="select"
        data-device="Hysterese"
        date-set="STATE"
        data-get="STATE"
        data-setList='["1","3"]'
        dat-alias='["1","3"]'""></div>
        
        
    </div>
        
         
        </li>

Ich kann daraus schalten und empfangen, aber ich habe kein Pulldownmenu

So sieht alles zusammengepresst aus

Erst wenn ich drauf klicke kommt das Menue

Laut wiki https://wiki.fhem.de/wiki/FTUI_Widget_Select
Sehe ich keinen Unterschied?

Verwende ich das Falsche? Ich möchte einfach nur ein DropDown Menu um die Auswahl 1,2 3, 5, 7 ...... zu haben
keine Thermometeransicht.....

Danke für die Hilfe
Helmut

Helmi55 · 11 Mai 2020, 18:24:12

Code Auswählen

<li data-row="2" data-col="11" data-sizex="3" data-sizey="2">
       
        <div class="large"</div>
        
        
        
        <div
        
        data-type="select"
        data-device="Hysterese"
        date-set="STATE"
        data-get="STATE"
        data-items='["1","3"]'
        </div>
        
        
    </div>
        
         
        </li>

Ich kann schalten und ich kann empfangen nur die Ansicht ist total kaputt

Wer kann mir da bitte helfen - Danke
Helmut

amenomade · 11 Mai 2020, 19:12:58

Code Auswählen

<div class="large"</div>
Falsch

Code Auswählen

<div class="large"></div>
Richtig (aber leer, dann komplett unnötig)

Genauso fehlt das > nach data-items='["1","3"]'

Das letzte </div> ist zu viel (kein entspr <div>)

Also:

Code Auswählen


<li data-row="2" data-col="11" data-sizex="3" data-sizey="2">
	<div	data-type="select"
		data-device="Hysterese"
		date-set="STATE"
		data-get="STATE"
		data-items='["1","3"]'>
	</div>
</li>

Helmi55 · 11 Mai 2020, 22:36:53

Servus und Danke

Code Auswählen

 <li data-row="2" data-col="11" data-sizex="3" data-sizey="2">       
        <div      
        data-type="select"
        data-device="Hysterese"
        date-set="STATE"
        data-get="STATE"
        data-items='["1","3"]'>
        </div>         
        </li>

so siehts jetzt aus. Aber die Anzeige sieht noch immer unschön aus

Klicke ich auf das "Gewurle" sieht es so aus

amenomade · 11 Mai 2020, 23:46:25

Angenommen, was Du vorher für Fehler gemacht hast, kann ich nicht davon ausgehen, dass das restliche HTML deiner Seite keinen anderen Fehler enthält...

Zweitens kann ich die Klappliste nicht verstehen, wenn data-items nur 1 und 3 enthält. Hast Du die Seite neu-geladen? Cache gellert? Reden wir vom gleichen "li" Abschnitt?

Helmi55 · 12 Mai 2020, 09:39:06

Servus
ich hoffe ja doch nicht das meine Seite nur aus Fehlern besteht..........
Das mit den data-items hat mich auch verwirrt. Hatte sie einmal komplett draußen und auf der Seite wurden aber alle angezeigt.
Habe jetzt alle items eingefügt und leider ändert sich nichts.
Habe im Firefox den Nach geleert - negativ. Auch im Safari Browser - negativ. Ja, reload der Seite mache ich immer.
Wenn ich darf, hänge ich die ganze Seite an:

Code Auswählen

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="1_pool-content">
    <div class="gridster">
        <ul>
        
        
         </li>
                        <li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
        <header></header>
        <br />
        <br />
        <div data-type="label" 
             data-device="PoolSensor"
             data-get="temperature"
             data-limits='[13,15,25]'
             data-colors='["blue","green","#FF0000"]'
             data-unit="&deg;C"
             data-fix="1"
             class="tall"
             class="centered"></div>  
        <br /> 
        <div data-type="label" class="small">Pool</div> 
        </li>

</li>
       <li data-row="1" data-col="3" data-sizex="3" data-sizey="2">
        <header></header>
        <br />
        <br />
        <div data-type="label" 
             data-device="PoolBoden"
             data-get="temperature"
             data-limits='[13,15,25]'
             data-colors='["blue","green","#FF0000"]'
             data-unit="&deg;C"
             data-fix="1"
             class="tall"
             class="centered"></div>  
        <br /> 
        <div data-type="label" class="small">Pool Boden</div> 
        </li>
 <li data-row="1" data-col="5" data-sizex="3" data-sizey="2">
        <header></header>
        <br />
        <br />
        <div data-type="label" 
             data-device="SolarSensor"
             data-get="temperature"
             data-limits='[13,15,25]'
             data-colors='["blue","green","#FF0000"]'
             data-unit="&deg;C"
             data-fix="1"
             class="tall"
             class="centered"></div>  
        <br /> 
        <div data-type="label" class="small">Solar</div> 
        </li>
</li>
<li data-row="1" data-col="7" data-sizex="3" data-sizey="2">
        <header></header>
        <br />
        <br />
        <div data-type="label" 
             data-device="WP_Vorlauf"
             data-get="temperature"
             data-limits='[13,15,25]'
             data-colors='["blue","green","#FF0000"]'
             data-unit="&deg;C"
             data-fix="1"
             class="tall"
             class="centered"></div>  
        <br /> 
        <div data-type="label" class="small">WP_Vorlauf</div> 
        </li>

</li>
<li data-row="1" data-col="9" data-sizex="3" data-sizey="2">
        <header></header>
        <br />
        <br />
        <div data-type="label" 
             data-device="WP_Ruecklauf"
             data-get="temperature"
             data-limits='[13,15,25]'
             data-colors='["blue","green","#FF0000"]'
             data-unit="&deg;C"
             data-fix="1"
             class="tall"
             class="centered"></div>  
        <br /> 
        <div data-type="label" class="small">WP_Ruecklauf</div> 
        </li>
               
<li data-row="1" data-col="11" data-sizex="3" data-sizey="2">
       <header></header>
        <br />
        <br />
        <div data-type="label" 
             data-device="WP_Luft"
             data-get="temperature"
             data-limits='[13,15,25]'
             data-colors='["blue","green","#FF0000"]'
             data-unit="&deg;C"
             data-fix="1"
             class="tall"
             class="centered"></div>  
        <br /> 
        <div data-type="label" class="small">WP_Luft</div> 
        </li>
</li>        
<li data-row="2" data-col="1" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div 
             data-type="switch"    
		     data-device="PoolMaster"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >             
        </div>   
        <br />  
        <div data-type="label" class="bold">Pool Master</div>
        </li>
        
        </li> 
              
        <li data-row="2" data-col="3" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div data-type="switch"
		     data-device="PoolPumpe"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >
        </div>
        <br />  
        <div data-type="label" class="bold">Pool Pumpe</div>
        </li>
        
        </li> 
       
        <li data-row="2" data-col="5" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div data-type="switch"
		     data-device="SolarPumpe"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >
        </div>  
        <br />
        <div data-type="label" class="bold">Solar Pumpe</div>
        </li>
        </li> 
              
        <li data-row="2" data-col="7" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div data-type="switch"
		     data-device="WPPool"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >
        </div>  
        <br />
        <div data-type="label" class="bold">WP Pool</div>
        </li>        
        
        <li data-row="2" data-col="9" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div 
             data-type="switch"    
		     data-device="du_3WV"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >             
        </div>   
        <br />  
        <div data-type="label" class="bold"></div>
        </li>
        <br />
         <li data-row="2" data-col="11" data-sizex="3" data-sizey="2">
       
        <br />
        <br />
        <br />
        <br />
                
        <div
        
        data-type="select"
        data-device="Hysterese"
        date-set="STATE"
        data-get="STATE"
        data-items='["0","1","3","4","5","7","10","15"]'>
        </div>      
         
        </li>        
        
        <li data-row="3" data-col="1" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div data-type="switch"
		     data-device="PoolRollladen"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >
        </div>  
        <br />
        <div data-type="label" class="bold">Pool Rollladen</div>
        </li>        
        
        <li data-row="3" data-col="3" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div 
             data-type="push"    
		     data-device="Pool_auf"  	
	         data-set-on="on-for-timer 90"
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >             
        </div>   
        <br />  
        <div data-type="label" class="bold">Rollladen</div>
        </li>
        
        <li data-row="3" data-col="5" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div data-type="switch"
		     data-device="Roboter"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >
        </div>  
        <br />  
        <div data-type="label" class="bold">Roboter</div>
        </li>
        <li data-row="3" data-col="7" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div data-type="switch"
		     data-device="Roboter_auto"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >
        </div>  
        <br />  
        <div data-type="label" class="bold">Roboter auto</div>
        </li>
        
        <li data-row="3" data-col="9" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div data-type="switch"
		     data-device="Chlor_Schalter"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >
        </div>  
        <br />  
        <div data-type="label" class="bold">Chlor Schalter</div>
        </li>
        
        <li data-row="3" data-col="11" data-sizex="3" data-sizey="2">
        <header class="cell" ></header>
        <div class="top-space-2x"</div>
        <br />
        <div data-type="switch"
		     data-device="Abend"  	
	         data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-lightbulb"
             data-background-colors='["red","green"]'
             class="small" >
        </div>  
        <br />  
        <div data-type="label" class="bold">Pumpe abends</div>
        </li>

Und so sieht sie aus:
Nichts besonderes, ist nur eine Unterseite

Danke für deine Hilfe
Helmut

amenomade · 12 Mai 2020, 21:12:27

Ohje...

HTML funktioniert so: ein Tag definiert, wie der Inhalt aussehen soll.
Man muss immer so schreiben:

Code Auswählen

<tag>
	Inhalt
</tag>

evtl dann verschachtelt und mit Attribute:

Code Auswählen

<tag>
	<othertag ding1="etwas" class="Klasse">
		Inhalt
	</othertag>
	<othertag2/
		Anderer Inhalt
	</othertag2>
</tag>

Ausnahme: selbstschliessende tags wie <br />, was gleich ist wie <br></br>
Die Tabulators sind optional, helfen aber viel, um zu sehen, was man gemacht hat

In deinem Code:
<ul> wird nie geschlossen
Dann kommt </li> ohne vorheriges <li>
Danach wird jede <li> mehrmals mit </li> geschlossen.

Also:

Code Auswählen

<body>
	<ul>
		<li data-row="... usw>
			<header>Das wird gross geschrieben (titel)</header>
			<br />
			<div data-type="widgetx" usw>
			</div>
			<div data-type="label" usw>
				Inhalt
			</div>
		</li>
		<li data-row...>
			<div ...></div>
		</li>
	</ul>
</body>

Also, korrigiere bitte zuerst dein HTML-Code, und dann kann man evtl. nochmal reden, falls das Problem immer noch besteht.

amenomade · 12 Mai 2020, 21:23:07

Man kann auch nicht 2 gleiche Attribute haben.
Statt

Code Auswählen

class="tall"
class="centered"

muss man

Code Auswählen

class="tall centered"schreiben

EDIT: Und es gibt noch einige

Code Auswählen

					<div class="top-space-2x"</div>

und das ist immer noch falsch

Helmi55 · 13 Mai 2020, 18:25:21

Servus und Danke für deine genaue Erklärung.
Du hast mir ja schon sehr oft geholfen.
Ich habe jetzt nach deiner Anleitung eine neue Seite erstellt

Code Auswählen

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="1_test-content">
    <div class="gridster">
<ul>
 <li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
       
        <header>Das wird gross geschrieben (titel)</header>
        <br />
        <div
        
        data-type="select"
        data-device="Hysterese"
        date-set="STATE"
        data-get="STATE"
        data-items='["0","1","3","4","5","7","10","15"]'>
        </div>      
         
        </li>        
        </ul>
    </body>

Aber leider sieht es Genaus so aus. Oder ich bin zu doof und hab wieder was übersehen

Klicke ich auf das Symbol ( sofern man das als Symbol bezeichnen kann...)
sieht es so aus. Wäre ja ok - aber warum sehe ich nicht den derzeit eingestellten wert???

Danke und nice Eve
Helmut

Gunther · 13 Mai 2020, 23:32:47

Zitat von: Helmi55 am 13 Mai 2020, 18:25:21

sieht es so aus. Wäre ja ok - aber warum sehe ich nicht den derzeit eingestellten wert???

schau mal in Dein list:

Code Auswählen

READINGS:
     2020-05-10 19:02:45   state           15

versuch mal

Code Auswählen

data-get="state"
statt

Code Auswählen

data-get="STATE"

vermutlich für data-set genauso

amenomade · 13 Mai 2020, 23:54:13

STATE sollte nicht falsch sein. Das ist sowieso der Standard-Wert, man könnte data-get und data-set einfach weg lassen.
Da das Dummy ein setList hat, kann man sogar auch data-items weg lassen.

Versuch mal aber die Klasse w1x hinzuzufügen

Code Auswählen

<div       
        data-type="select"
        data-device="Hysterese"
        date-set="STATE"
        data-get="STATE"
        data-items='["0","1","3","4","5","7","10","15"]'
        class="w1x">
</div>

oder sogar, wie gesagt

Code Auswählen

<div
	data-type="select"
	data-device="Hysterese"
	class="w1x">
</div>

Helmi55 · 14 Mai 2020, 08:58:58

Guten Morgen
Danke. Das Zauberwort ist w1x gewesen. so funktioniert es auch in deiner letzten Kurzform UND auch in meinem ursprünglichen Feld.

Herzlichen Dank und schönen Tag - gesund bleiben
LG
Helmut