Widgets verschieben

lumser2 · 03 Dezember 2019, 18:01:40

Hallo,
ich habe vor kurzem angefangen mein eigenes Overlay für FTUI zu erstellen. Hat am Anfang auch gut geklappt.
Allerdings stoße ich gerade auf die erste Hürde und komme über diese gerade nicht hinaus.

Ich habe mir mehrere Pages angelegt und die Widgets auch erfolgreich eingepflegt. Allerdings bekomme ich diese nicht positioniert. habe schon Dr. Google und das Wiki befragt, diese konnten mir allerdings auch nicht weiter helfen.

Hoffe hier gibt es Leute die mir helfen können.

MfG Lumser2

Ulm32b · 03 Dezember 2019, 18:17:41

Zitat von: lumser2 am 03 Dezember 2019, 18:01:40
... und das Wiki befragt ...

Wirklich? Was meinst Du mit "Positionieren"?
https://wiki.fhem.de/wiki/FHEM_Tablet_UI und dort "Gestaltung" liefert, zumindest für den Einstieg, hilfreiche Informationen.

lumser2 · 03 Dezember 2019, 18:24:50

Zitat von: Ulm32b am 03 Dezember 2019, 18:17:41
Wirklich? Was meinst Du mit "Positionieren"?
https://wiki.fhem.de/wiki/FHEM_Tablet_UI und dort "Gestaltung" liefert, zumindest für den Einstieg, hilfreiche Informationen.

Dort habe ich geschaut und min 4 Mal alles neu gemacht, allerdz hat sich nix verändert.
Das Menü zum Seiten wechseln passt auch, nur das was dann auf diesen Seiten angezeigt werden soll, ändert sich gar nicht.
Wollte es über ein grid machen und so das die Widgets alle nebeneinander angezeigt werden sollen. Allerdings sind die entweder ineinander oder unter einander. Mehr tut sich nicht.

amenomade · 03 Dezember 2019, 18:25:23

Meine Kristalkugel sagt: Du hast etwas in deiner html Datei falsch geschrieben.

lumser2 · 03 Dezember 2019, 18:28:22

Zitat von: amenomade am 03 Dezember 2019, 18:25:23
Meine Kristalkugel sagt: Du hast etwas in deiner html Datei falsch geschrieben.

Das ist gut möglich, allerdings habe ich es schon 4 Mal komplett neu geschrieben ohne daß sich was geändert hat.
Und ich habe mich dabei strikt an das Wiki gehalten.

amenomade · 03 Dezember 2019, 18:31:13

Kristalkugel: "ja, das ist gut möglich"

lumser2 · 03 Dezember 2019, 18:37:39

Also ich habe dein Seiten wechsel über nen Pagebutton realisiert. Dieser Funktioniert einwandfrei.
Auf der großen Kachel die sich ändert will ich mithilfe von Gridster meine Widgets anordnen. Diese lassen sich darüber aber nicht verschieben. Wenn ich die Werte ändere, passiert gar nix und die Widgets sind alle Links in die Ecke gequetscht und überlagern sich. Wenn ich die Gridster Werte alle lösche, dann sind die Widgets alle in der Mitte untereinander.

Villt hilft das bei einer Problem Findung.

amenomade · 03 Dezember 2019, 18:40:26

Also... ich dachte, es wäre mit "Kristalkugel" schon klar gewesen...

Wie sollen wir helfen, wenn Du nicht zeigst:
- was du genau gemacht hast (html Dateien)
- was das Ergebnis bzw das Problem ist (z.B. Bildschirmkopien)

?

Wir sitzen nicht hinter deinem Bildschirm, und haben keinen Zugriff auf deiner Konfiguration

lumser2 · 03 Dezember 2019, 18:54:30

Das wäre der Code der Betreffenden Page. Die Widgets sind alle in der mitte des Screens untereinander. Entschuldigung wenn das nicht so ordentlich ist, bin eig kein Programmierer oder ähnliches.

Code Auswählen



<!DOCTYPE html>
<html>
<head>
<!--
     /* FHEM tablet ui */
     /*
     * Just another dashboard for FHEM
     *
     * Version: 1.4.4
     * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->

 <meta name="widget_base_width" content="116">
 <meta name="widget_base_height" content="131">


    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>

    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
    <script src="/fhem/pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>

<body>

    <div class="gridster">
        <ul>





<div class="page" id="page3">
    <div data-type="label">Schlafzimmer</div>


<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">  
 
    <div data-type="thermostat"
         data-device="Heizung_Schlafzimmer" 
         data-valve="valveposition" 
         data-get="desiredTemperature" 
         data-temp="temperature" 
         data-set="desiredTemperature"
         data-max="25"
         data-height="200"
         data-width="200">
    </div>

     

     
    <div><font size="4">Fenster Links</font></div></br>
    <div data-type="label" 
          data-device="Fenster_Schlafzimmer_links">
    </div></br></br>
  
    <div><font size="4">Fenster Rechts</font></div></br>
    <div data-type="label" 
          data-device="Fenster_Schlafzimmer_rechts">
    </div>
</li>

 

<div data-type="switch"
	data-icon="mi-flare"
	data-device="Licht_Schlafzimmer"
	data-get-on="1" 
	data-get-off="0" 
	data-set-on="on" 
	data-set-off="off"
	data-on-color="green"
        data-on-background-color="505050">
</div>



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

</html>

Und sry ich bin nicht wirklich oft in Foren unterwegs und kenne mich deshalb nicht so damit aus.Hätte ja sein können das jemand sagt:" So wie du dir das denkst geht das gar nicht, probier es mal so....."

amenomade · 03 Dezember 2019, 19:10:08

Also... deine html Datei ist komplett durcheinander.

HTML funktioniert mit tags: <tag> am Anfang, </tag> am Ende
Wenn es verschachtelt sein soll:

Code Auswählen

<tagXX>
     <tagYY>
          <tagZZ>
               etwas
          </tagZZ>
          <tagAA>
               etwas anderes
          </tagAA>
     </tagYY>
</tagXX>

Du hast mehrere /br tags ohne br tags, div tags die nicht innerhalb eines li tag sind (was für gridster wichtig ist), ein /ul Tag kommt, wenn ein /div tag noch fehlt, usw.

Wenn ich versuche, deine Datei mit tabs zu formatieren, damit man sieht, welches Tag zu welchem gehört, sieht es so aus:

Code Auswählen


<!DOCTYPE html>
<html>
<head>
<!--
     /* FHEM tablet ui */
     /*
     * Just another dashboard for FHEM
     *
     * Version: 1.4.4
     * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->

 <meta name="widget_base_width" content="116">
 <meta name="widget_base_height" content="131">


    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>

    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
    <script src="/fhem/pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>

<body>

<div class="gridster">
	<ul>
		<div class="page" id="page3">
			<div data-type="label">Schlafzimmer</div>
			<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> 
				<div data-type="thermostat"
					data-device="Heizung_Schlafzimmer"
					data-valve="valveposition"
					data-get="desiredTemperature"
					data-temp="temperature"
					data-set="desiredTemperature"
					data-max="25"
					data-height="200"
					data-width="200">
				</div>
				<div>
					<font size="4">Fenster Links</font>
				</div>
				</br>
				<div data-type="label"
					data-device="Fenster_Schlafzimmer_links">
				</div>
				</br>
				</br>
				<div>
					<font size="4">Fenster Rechts</font>
				</div>
				</br>
				<div data-type="label"
					data-device="Fenster_Schlafzimmer_rechts">
				</div>
			</li>
			<div data-type="switch"
				data-icon="mi-flare"
				data-device="Licht_Schlafzimmer"
				data-get-on="1"
				data-get-off="0"
				data-set-on="on"
				data-set-off="off"
				data-on-color="green"
				data-on-background-color="505050">
			</div>
		</ul>
	</div>
</body>

</html>

So kann es nicht funktionieren

amenomade · 03 Dezember 2019, 19:15:25

Wenn Du keine Ahnung von HTML hast, wie es aussieht, dann empfehle ich FUIP: https://wiki.fhem.de/wiki/FHEM_User_Interface_Painter
Der erledigt das für dich

lumser2 · 03 Dezember 2019, 19:26:50

Zitat von: amenomade am 03 Dezember 2019, 19:15:25
Wenn Du keine Ahnung von HTML hast, wie es aussieht, dann empfehle ich FUIP: https://wiki.fhem.de/wiki/FHEM_User_Interface_Painter
Der erledigt das für dich

Vielen dank .) da werde ich mich mal dran versuchen