[FHEM-Tablet-UI] WeekdayTimer Widget

Begonnen von svenson08, 24 Januar 2016, 18:39:21

Vorheriges Thema - Nächstes Thema

eki

Ich denke ich habe eine Idee. Kannst Du mir noch die Definitionen deines "custom" themes schicken.

Vermutlich liegt es an folgendem Eintrag im File fhem-tablet-ui-wdtimer.css
.wdtimer_buttonblock { float: right; height: 100%; width: 20%; }

ändere die Breite hier mal in einen absoluten Wert:
.wdtimer_buttonblock { float: right; height: 100%; width: 100px; }

ih-sqeezer

Hallo eki,

danke für den super schnellen support.

/* ---------------------------------------------------- */
/* wdtimer_widget Theam "custom" */
/* ---------------------------------------------------- */
.wdtimer_button.custom:hover, .wdtimer_time.custom:hover, .wdtimer_cmd.custom:hover, .wdtimer_checkbox.custom:hover { background-color: #007fff; }
.wdtimer_button.custom { color: #cccccc; background-color: #3D4C66; }
.wdtimer_deleteprofile {color: #ff0000!important;}
.wdtimer_time.custom { background-color: #3D4C66; color: #cccccc; }
.wdtimer_text.custom { background-color: #393939; color: #d1eeee; }
.wdtimer_datetimepicker.custom { background-color: #393939 !important; color: #d1eeee !important; }
.wdtimer_cmd.custom { background-color: #3D4C66; color: #cccccc; }
.wdtimer_checkbox.custom { background-color: #393939; color: #cccccc; }
.wdtimer_checkbox.custom>input:checked + [for*="checkbox_"] { color: #cccccc; }
.wdtimer_checkbox.custom label:after { background-color: #6495ed !important; }
.wdtimer_dialog.custom{ background-color: rgba(0,0,0,0.7); border: 1px solid #808080; border-radius: 10px; }
.wdtimer_header.custom { background-color: rgba(0,0,0,0.9); color: #8c8c8c; border: 1px solid #808080; border-radius: 10px;  }
.wdtimer_footer.custom { background-color: rgba(0,0,0,0.7); border: 1px solid #808080; border-radius: 10px; }

Ich habe den code schon dahingehend angepasst, wie du es geschrieben hast. Jedoch kann ich es erst wieder heute Abend ausprobieren.

Grüße,
Ingo

eki

Noch eine kleine Änderung:

.wdtimer_buttonblock { float: right; height: 100%; width: 90px; }

Dann passt es (zumindest bei mir) sowohl mit als auch ohne Scrollbalken.

ih-sqeezer

Hallo eki,

nach meinen ausgiebigen Tests mit der wdtimer css habe ich immer noch keinen Erfolg erzielen können.
Folgendes habe ich neues herausgefunden. Sofern ich von den vier Schlatzeiten drei lösche, springt der button "profiledown" an die korrekt Position wie, wenn ich >6 Schaltzeiten im widget habe (drei hinzugefügt). Im Prinzip scheint es ja nur diese eine button und die Zeilenhöhe pro Schaltzeit zu sein, welche bei 2 ... 6 Schaltzeiten nicht korrekt positioniert werden.
Ich habe an etlichen Parametern in der css gedreht, jedoch alle ohne Erfolg. Natürlich habe ich immer nur ein Parameter verändert, sodass ich ihn wieder zurücksetzen konnte.
Sieht also wieder aus wie gestern.
Mir kommt es so vor, dass im Fehlerfall hinter dem button "profiledown" noch irgendetwas steht, sodass diser button zu weit nach links gerückt wird.
Der Zeilenabstand zwischen den Schaltzeiten steht bei mir ebenfalls noch im Verdacht. Jedoch ist mir unerklärlich, wieso das nur bei 2 ... 6 Schaltzeiten fehlerhaft dargestellt wird.

Bist du noch etwas weiter gekommen?

SamNitro

Zitat von: ih-sqeezer am 14 September 2017, 08:22:15
Hallo eki,

meinst die Breite des widgets selbst oder das popup-fenster?
Die Breite vom popup-fenster habe ich bereits ausgetestet ... breiter, schmaler blieb alles unverändert.

Danke und Grüße,
Ingo

Poste doch mal bitte deine komplette Definition, das widget an sich ist doch ein eigenes popup.
Und Poste doch mal bitte deine custum css
(Intel-Nuc Proxmox) (Homematic) (EnOcean) (CUL868) (CUL433) (Zigbee2MQTT) (ESP8266) (Echo) (DUOFERN)

ih-sqeezer

Hallo SamNitro,

in meinen früheren posts habe ich zum Großteil schon all meine DEFs publiziert.

Hier noch mal alles zusammengefasst:

fhem:
define WohnzimmerHeatingControlWork WeekdayTimer WohnzimmerWandthermostat de 12345|17:30|comfort 12340|22:00|eco 60|08:00|comfort 56|22:30|eco
attr WohnzimmerHeatingControlWork disable 0
attr WohnzimmerHeatingControlWork group Heizung
attr WohnzimmerHeatingControlWork room Wohnzimmer


ftui:
<div data-type="classchanger"
    data-device="HeatingControlStateWork"
    data-get="state"
    data-get-on="on"
    data-get-off="off"
    data-off-class="hide"
    data-on-class="" >
<div id="wdtimer_ftui"
data-type="wdtimer"
data-device="WohnzimmerHeatingControlWork"   
data-style="round"
data-theme="custom"
data-width="800"
data-height="600"
data-title="Wohnzimmer - Heizzeiten"
data-savecfg="true"
data-timesteps="15"
data-cmdlist='{"4.5°C off":"off","15°C Eco":"eco","18°C":"18.0","20°C Komfort":"comfort","22°C":"22.0"}'>
<div data-type="push"
data-off-color="#808080"
data-off-background-color="#3D4C66"
data-icon="fa-wrench"
class="big">
</div>
<div class="">Programm
</div>
</div>
</div>


fhem-tablet-ui-wdtimer.css:
/* ---------------------------------------------------- */
/* wdtimer_widget Theam "custom" */
/* ---------------------------------------------------- */
.wdtimer_button.custom:hover, .wdtimer_time.custom:hover, .wdtimer_cmd.custom:hover, .wdtimer_checkbox.custom:hover { background-color: #007fff; }
.wdtimer_button.custom { color: #cccccc; background-color: #3D4C66; }
.wdtimer_deleteprofile {color: #ff0000!important;}
.wdtimer_time.custom { background-color: #3D4C66; color: #cccccc; }
.wdtimer_text.custom { background-color: #393939; color: #d1eeee; }
.wdtimer_datetimepicker.custom { background-color: #393939 !important; color: #d1eeee !important; }
.wdtimer_cmd.custom { background-color: #3D4C66; color: #cccccc; }
.wdtimer_checkbox.custom { background-color: #393939; color: #cccccc; }
.wdtimer_checkbox.custom>input:checked + [for*="checkbox_"] { color: #cccccc; }
.wdtimer_checkbox.custom label:after { background-color: #6495ed !important; }
.wdtimer_dialog.custom{ background-color: rgba(0,0,0,0.7); border: 1px solid #808080; border-radius: 10px; }
.wdtimer_header.custom { background-color: rgba(0,0,0,0.9); color: #8c8c8c; border: 1px solid #808080; border-radius: 10px;  }
.wdtimer_footer.custom { background-color: rgba(0,0,0,0.7); border: 1px solid #808080; border-radius: 10px; }


Grüße,
Ingo

SamNitro

#396
füge das mal deiner Custom hinzu und gib bescheid


.wdtimer_profile{ padding-top: 0 !important; padding-bottom: 5px !important; text-align: left !important; height: 85px !important;}
.wdtimer_footer { padding-bottom: 30px !important;padding-top: 5px !important;height: 30px !important;}
.wdtimer_active { float:left !important;display: inline-block !important;margin: 2px !important;}
.wdtimer_buttonblock { float: right!important; height: 100% !important; width: 90px !important; }
(Intel-Nuc Proxmox) (Homematic) (EnOcean) (CUL868) (CUL433) (Zigbee2MQTT) (ESP8266) (Echo) (DUOFERN)

ih-sqeezer

damit wird es nicht wirklich besser ...


SamNitro

Hast du auch dein .custom eingefügt


Gesendet von iPhone mit Tapatalk
(Intel-Nuc Proxmox) (Homematic) (EnOcean) (CUL868) (CUL433) (Zigbee2MQTT) (ESP8266) (Echo) (DUOFERN)

ih-sqeezer

Ich muss meine Aussage von vorhin revidieren ... funktioniert jetzt!!!
Ich habe die wdtimer css noch mal aus dem repository gezogen und das custom hinzugefügt.
Dazu habe ich noch ein paar Leerzeichen in deinen Anpassungen hinzugefügt, so wie es bei den anderen "custom" Zeilen darüber auch ist. Also ich weiß nicht, ob diese Leerzeichen nach den Semikolon und den Klammern so entscheidend sind, aber ich glaub eher nicht.
Fakt ist, nach dem update der css und einem clear cache im browser funktioniet das widget jetzt überall !!!

Danke dir für deine schnelle Hilfe!

Grüße,
Ingo

SamNitro

Super :)


Gesendet von iPhone mit Tapatalk
(Intel-Nuc Proxmox) (Homematic) (EnOcean) (CUL868) (CUL433) (Zigbee2MQTT) (ESP8266) (Echo) (DUOFERN)

Bond246

Hallo zusammen,

ich hab den Thread so grob überflogen und das ein oder andere getestet, was empfohlen wurde, wenn auf einem Screenshot ansatzweise das Problem zu sehen, war, was ich bei mir sehe. Das UI des Widgets ist verschoben. Wenn ich eines der teils mehr als 2 Jahre alten Tipps ausprobiert habe, wurde es in der Regel noch deutlich schlimmer (andere css, andere js-datei usw...). Oftmals wurde nach den Tipps das Widget auch nicht mehr "fliegend" über der Website angezeigt sondern beim Klick auf mein label unten angehangen.

Also habe ich jetzt wieder den Ursprungszustand der css-Datei und des js-Datei, die mit dem tablet-ui installer ausgeliefert werden.
Vielleicht ist das mittlerweile auch korrekt so. Im Repository sind die Files ja sehr alt. Und hier im Forum nach Anhängen zu suchen ist bei 27 Seiten irgendwie auch großer Mist.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="debug" content="3"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name='toast' content='0'> <!-- keine Ausgabe von Protokollmeldungen -->
<meta name="longpoll" content="1">

<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui-wdtimer.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />

<script src="js/fhem-tablet-ui.js" defer></script>
<script src="js/widget_wdtimer.js"></script>



<div class="card lift">
   <header>Schaltuhr</header>
      <section>
         <div class="row"><!--Kuechenradio-->
<div data-type="wdtimer"
                     data-device="kuechenradio.schaltuhr"
                     data-cmdlist='{"An":"on","Aus":"off"}'
                     data-timesteps="5"
                     data-savecfg="true"
                     data-width="700"
                     data-height="650">
                 <div data-type="label" class="cell">Kuechenradio</div></div>
</div><!-- Kuechenradio-->
      </section>
</div>


defmod kuechenradio.schaltuhr WeekdayTimer kuechenradio de 12345|07:45|on 12345|08:20|off 45|06:15|on 45|06:48|off ne (ReadingsVal("HeatingControl.Schalter.WZ", "state", "") "ausserHaus")
attr kuechenradio.schaltuhr DbLogExclude .*
attr kuechenradio.schaltuhr commandTemplate set $NAME  $EVENT
attr kuechenradio.schaltuhr disable 0
attr kuechenradio.schaltuhr icon it_radio
attr kuechenradio.schaltuhr room Technik-Logik



eki

#402
Ich habe noch mal geschaut, und einen Fehler im widget_wdtimer.js gefunden, der wahrscheinlich für das Durcheinander auf der rechten Seite verantwortlich ist. In der anghängten Version ist das beseitigt.

Dort ist jetzt auch am Ende der Liste ein Bereich hinzugefügt, über welchen man die Codes für Bedingungen etc. eingeben kann (bei mir funktioniert das, muss aber sicher noch weiter getestet werden).

Bezüglich des komischen Aussehens der Wochentagsbuttons muss ich noch schauen (liegt am verwendeten fhem-mobil-ui.css).

klausw

Hallo Eki,

habe gerade mal deine neue Modulversion probiert. Funktioniert bei mir leider nicht.
Mir ist aufgefallen das die Datei "fhem-tablet-ui-codemirror.js" nicht vorhanden ist. Woher bekomme ich diese Datei?

An ein paar Stellen ist das ftui.config.basedir verschwunden:

Zeile 109:
deps.push(ftui.config.basedir + "lib/jquery.datetimepicker.js");

Zeile 125:
deps.push(ftui.config.basedir + "lib/switchery.min.js");

Zeile 128:
deps.push(ftui.config.basedir + "lib/jquery-ui.min.js");

Grüße
Klaus
RasPi B v2 mit FHEM 18B20 über 1Wire, LED PWM Treiber über I2C, Luchtdruck-, Feuchtesensor und ein paar Schalter/LED\'s zum testen
Module: RPI_GPIO, RPII2C, I2C_EEPROM, I2C_MCP23008, I2C_MCP23017, I2C_MCP342x, I2C_PCA9532, I2C_PCF8574, I2C_SHT21, I2C_BME280

eki

#404
Codemirror habe ich wohl vergessen anzuhängen. Das ist dafür verantwortlich, dass bei den unten angefügten Perl Codes Syntax Highlighting möglich wird. Hab's jetzt an den vorherigen Post angehängt. Zusätzlich muss codemirror installiert sein (sollte mit aktueller FHEM Version erfüllt sein) und der parameter data-codemirror="true" gesetzt werden (ansonsten wird der Code Text eben normal dargestellt).

Mit Den von Dir genannten Zeilennummern komme ich ein bisschen durcheinander. In meiner neuen Version steht in Zeile 109 "if(..codemirror.css)" in der letzten aktuellen Version von ftui steht da "if (!$.fn.Switchery){" insofern solltest Du mal schauen welche Version bei Dir wirklich aktiv ist.
Die config.basedir Zeilen habe ich geändert und im vorherigen Post entsprechend aktualisiert (sollte aber keinen großen Unterschied machen, solange Du ftui im Standard Verzeichnis liegen hast und die jquery Version im pgm2 Verzeichnis aktuell ist).