[FHEM-Tablet-UI] WeekdayTimer Widget

SamNitro · 04 Februar 2017, 12:46:40

Zitat von: derHeimwerker am 04 Februar 2017, 12:03:37
Danke. Habe das mal ersetzt. Leider geht das puudown menü damit auch noch nicht wieder auf.

Bei mir leider das selbe problem.. Welches system benutzt du?

SamNitro · 05 Februar 2017, 02:43:01

Habe eine Lösung gefunden fur mein Timer Dropdown:

Code Auswählen

<link rel="stylesheet" href="lib/jquery.datetimepicker.css" />

Kann ich dem nicht sagen der soll den kompletten Ordner "lib" laden?

Edit: @Setstate: kannst du bitte die "widget_wdtimer.js" von eki in das update mit aufnehmen?

https://forum.fhem.de/index.php/topic,48106.msg573775.html#msg573775

derHeimwerker · 05 Februar 2017, 11:27:03

Zitat von: SamNitro am 05 Februar 2017, 02:43:01
Habe eine Lösung gefunden fur mein Timer Dropdown:

Super ! Hat auch bei mir funktioniert. Danke !

gibacht · 11 Februar 2017, 15:32:50

Hallo, ich habe mich jetzt hoch runter und quer durchgelesen... no way. Ich bekomme die Dropdowns nur an einem angezeigt, wenn ich vorher eine neue Zeile hinzugefügt habe. Ich habe sämtliche Dateiversionen durch ... auch das jquery-Upfdate und komme einfach nicht weiter. (FTUI 2.5).
Anbei ein paar Screenshots.. ich würde mich freuen... Viele Grüße Dirk

Scceen1: Temperatur -> funktioniert
Scrren2: Nur das eine funktioniert
Screen3: Bei Klick auf die anderen Zeit-Dropdowns wechselt nur der Focus

Code Auswählen

<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" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-weekprofile.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/jquery.min.js.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" />
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.datetimepicker.css" />

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

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

Code Auswählen

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="css/fhem-tablet-ui-weekprofile.css" /></head>
<body>
<div class="gridster">
	<ul>
		<li data-row="1" data-col="1" data-sizex="2" data-sizey="9" data-template="menu.html"></li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
                    <div id="weekprofile_ftui" style="position:absolute; bottom:0; right:0;"
                        data-type="weekprofile"
                        data-device="Hobbyz_WEEKPROFILE"
                        data-profile="master"
                        data-style="round"
                        data-theme="dark"
						data-with="1000"
                        data-title="Heizung Hobbyzimmer">
                        <div data-type="symbol" class="cell small readonly" data-icon="fa-calendar"
                            data-background-icon="fa-square-o"
                            data-on-color="#505050" data-on-background-color="#505050">
                        </div>
                    </div>

		</li>	
	</ul>

</body>
</html>

eki · 20 Februar 2017, 10:16:47

Hallo gibacht,

Du bringst da 2 Widgets durcheinander. Der Thread hier bezieht sich auf das WeekdayTimer Widget. Dein Beispiel bezieht sich aber auf das Weekprofile Widget. Sowohl die Widgets als auch die dahinter liegenden fhem Module haben direkt nichts miteinander zu tun.

Warum die erste Zeit nicht änderbar ist, kann ich dir aber warscheinlich trotzdem sagen: Beim Weekprofile sind die einzelnen Zeitschlitze eines Eintrages (also für einen Satz bestimmter Wochentage) immer aufeinander folgend. Es gibt dadurch keine Lücken. Wenn Du also in deinem ersten Eintrag (der den ersten Zeitschlitz festlegt) die End Zeit änderst, dann ändert sich die Anfangszeit für den nächsten Zeitschlitz automatisch auf die Endzeit des davor liegenden Zeitschlitzes. Beim letzten Zeitschlitz in der Liste wirst Du feststellen, dass die Endzeit immer auf 24:00 steht, und dort kann keine der beiden Zeiten gehändert werden, weil ein Eintrag immer die komplette Zeit von bis 24:00 abdecken muss.

gibacht · 20 Februar 2017, 20:25:34

Danke für die Rückmeldung... und sorry, dass ich falschen Thread unterwegs bin. Weitere Zwischenzeilen werden bei mir geöffnet und, dass die Zeit nur in der neuen Zeile veränderbar ist, trifft auch zu. Aber die Zeit muß ich von Hand eingeben. Ich erhoffte mir, dass die Zeit per Dropdown auswählbar ist... Ist dem bei Dir so?

eki · 21 Februar 2017, 15:44:48

Die Zeiten die einstellbar sind lassen sich bei mir per Dropdown einstellen.

myhome · 27 Februar 2017, 20:32:39

Hi eki, habe ein neues Problem nach dem Update ftui von 2.6.2 auf 2.6.6 bzw. 2.6.7. darin, dass sich wdtimer nicht mehr öffnet. Ein Idee woran da liegen kann? Problem habe wohl einige weitere User auch. Habe es auch unter ftui 2.6 gelesen. Thx

klausw · 28 Februar 2017, 15:47:21

Bei mir lässt sich der wdtimer öffnen, allerdings ist die Eingabemaske unten an die Seite angefügt (Siehe Bilder).

Außerdem kommt ein Fehler beim öffnen:
jquery.min.js:4 TypeError: f.getClientRects is not a function

Da ich FTUI auf dem Apache laufen habe und die Verzeichnissstruktur etwas anders ist ist mir aufgefallen, das nicht alle Dateipfade relativ zum basedir sind.
Aktuell:

Code Auswählen

function init() {
	if (!$.fn.datetimepicker){
		ftui.dynamicload('lib/jquery.datetimepicker.js', null, null, false);
		$('head').append('<link rel="stylesheet" href="./lib/jquery.datetimepicker.css" type="text/css" />');    
	}
	if (!$.fn.Switchery){
		ftui.dynamicload('lib/switchery.min.js', null, null, false);
		$('head').append('<link rel="stylesheet" href="./lib/switchery.min.css" type="text/css" />');
	}
	if (!$.fn.draggable){
		ftui.dynamicload('../pgm2/jquery-ui.min.js', null, null, false);
	}

muss meiner Meinung nach so sein:

Code Auswählen

function init() {
	if (!$.fn.datetimepicker){
		ftui.dynamicload(ftui.config.basedir + 'lib/jquery.datetimepicker.js', null, null, false);
		$('head').append('<link rel="stylesheet" href="' + ftui.config.basedir + 'lib/jquery.datetimepicker.css" type="text/css" />');    
	}
	if (!$.fn.Switchery){
		ftui.dynamicload(ftui.config.basedir + 'lib/switchery.min.js', null, null, false);
		$('head').append('<link rel="stylesheet" href="' + ftui.config.basedir + 'lib/switchery.min.css" type="text/css" />');
	}
	if (!$.fn.draggable){
		ftui.dynamicload(ftui.config.basedir + 'lib/jquery-ui.min.js', null, null, false);
	}

Edit:
Fehler korrigiert

CaSch1306 · 01 März 2017, 08:32:25

Hi,

ich bin auch gerade dabei zu versuchen das Widget zu implementieren.

Habe mit "update" und "shutdown restart" geschaut, dass alles aktuell ist.

Ergebnis:
Es wird "etwas" geöffnet
Der Error kommt auch bei mir
Jedoch sieht es bei mir aus, als ob das Widget hinter den einzelnen "DIVs" angezeigt wird. Lediglich die Tagauswahl, der Delete Button und das enable/disable toggle werden angezeigt.

Definiert habe ich das Widget wie folgt:

Code Auswählen


<div id="wdtimer_ftui"
	data-type="wdtimer" 
	data-device="WDT_WZ_Lampe_Puppies"
	data-style="square" 
	data-theme="dark" 										
	data-cmdlist='{"An":"on","Aus":"off"}'
	data-savecfg="true">
	<div data-type="symbol"
		data-icon="oa-edit_settings"
		data-background-icon="fa-square-o"
		data-on-color="#505050"
		data-on-background-color="#505050"></div>
</div>

Eingebunden über:

Code Auswählen


	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-wdtimer.css" />
	<link rel="stylesheet" href="lib/jquery.datetimepicker.css" />

Habe dabei schon verschiedene Version der js Datei und der css files probiert.

Vielleicht muss ich dazu sagen, dass ich mit pagebuttons auf Basis der Vorlage die hier im Forum zu finden ist.

SamNitro · 01 März 2017, 14:03:55

Wenn ihr in der index.html den Pfad zu der jquery.min.js so habt:

Code Auswählen

    <script src="lib/jquery.min.js"></script>

ändert den mal bitte in:

Code Auswählen

    <script src="../pgm2/jquery.min.js"></script>

klausw · 01 März 2017, 15:29:43

Zitat von: SamNitro am 01 März 2017, 14:03:55
Wenn ihr in der index.html den Pfad zu der jquery.min.js so habt:
Code Auswählen Erweitern
<script src="lib/jquery.min.js"></script>

ändert den mal bitte in:
Code Auswählen Erweitern
<script src="../pgm2/jquery.min.js"></script>

Heißt das, wdtimer kommt derzeit nicht mit der neuen jquery Version klar?

SamNitro · 01 März 2017, 15:36:33

Zitat von: klausw am 01 März 2017, 15:29:43
Heißt das, wdtimer kommt derzeit nicht mit der neuen jquery Version klar?

Bin jetzt kein Experte aber davon gehe ich aus.

Gesendet von iPhone mit Tapatalk

Schuetze5 · 01 März 2017, 15:50:41

Hallo, ich habe das gleiche Problem wie CaSch1306, nachdem ich den Pfad in der index.html geändert habe bekomme ich wieder das widget angezeigt .
Wenn ich jetzt aber etwas ändere also zB. eine neue Zeit eingebe kommt die Meldung: Einstellungen konnten nicht übernommen werden.

Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 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 TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-wdtimer.css" /> 
    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

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

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

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

Ich habe die letzten Tage schon sehr viel rumprobiert und deswegen fehlt warscheinlich nur etwas und ich wäre dankbar wenn mal jemand rüberschaut.

Danke

SamNitro · 01 März 2017, 15:55:34

Zitat von: Schuetze5 am 01 März 2017, 15:50:41
Hallo, ich habe das gleiche Problem wie CaSch1306, nachdem ich den Pfad in der index.html geändert habe bekomme ich wieder das widget angezeigt .
Wenn ich jetzt aber etwas ändere also zB. eine neue Zeit eingebe kommt die Meldung: Einstellungen konnten nicht übernommen werden.

Code Auswählen Erweitern
<!DOCTYPE html> <html> <head>  <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-wdtimer.css" />    <script src="js/fhem-tablet-ui.js" defer></script> <script src="../pgm2/jquery.min.js"></script>  <title>FHEM-Tablet-UI</title> </head>

Ich habe die letzten Tage schon sehr viel rumprobiert und deswegen fehlt warscheinlich nur etwas und ich wäre dankbar wenn mal jemand rüberschaut.

Danke

evtl das hier:

Code Auswählen

        <script src="js/widget_wdtimer.js"></script>

ungetestet