Neuer Style: flex. Flexibel für alle Geräte

[sash.sc]

Ist das richtig, dass der Titel von den Plots nicht in der eingestellten Schriftart dar gestellt werden?

Gruß Sascha

Gesendet von meinem MI 9 mit Tapatalk

[Pitcher90]

Hallo xanker,
Das Device in dem Video ist tatsächlich ein dummy (der den Harmony Hub schaltet)
Sobald ich f18 benutze tritt das Problem nicht mehr auf. Ich benutze den Chrome-Browser.

Vor 5 Tagen als ich das Problem das erste mal festgestellt habe, dachte ich erst es hätte sich etwas am notify-Modul geändert, dass meine notifys jetzt Endlosschleifen produzieren 

Edit: Sorry, wenn es wirklich nicht an deinem Style liegt. Konnte es mir nicht anders erklären.

[xanker]

Ok, kann sein, hab keinen anderen Style getestet. Wie gesagt, ist mir grad vorhin erst aufgefallen, nachdem ich oben den Post gelesen hatte (und damit irgendwie ganz automatisch davon ausgegangen bin, dass es flex betrifft)

Hallo xanker,
Das Device in dem Video ist tatsächlich ein dummy (der den Harmony Hub schaltet)
Sobald ich f18 benutze tritt das Problem nicht mehr auf. Ich benutze den Chrome-Browser.

Vor 5 Tagen als ich das Problem das erste mal festgestellt habe, dachte ich erst es hätte sich etwas am notify-Modul geändert, dass meine notifys jetzt Endlosschleifen produzieren 

Edit: Sorry, wenn es wirklich nicht an deinem Style liegt. Konnte es mir nicht anders erklären.

Ich korrigiere, das tritt bei f18 nur auf wenn ich parallel noch einen Fenster mit meinem Style offen habe...da muss ich jetzt wohl mal Forschen, keine Ahnung was das auslöst 

Ist das richtig, dass der Titel von den Plots nicht in der eingestellten Schriftart dar gestellt werden?

Richtig ja, gewollt nicht  danke...habe es gefixed

[xanker]

Ok, kann sein, hab keinen anderen Style getestet. Wie gesagt, ist mir grad vorhin erst aufgefallen, nachdem ich oben den Post gelesen hatte (und damit irgendwie ganz automatisch davon ausgegangen bin, dass es flex betrifft)

Sobald ich f18 benutze tritt das Problem nicht mehr auf. Ich benutze den Chrome-Browser.

Problem gelöst. Zur Erklärung: ich habe die Jquery Funktion "val()" überschrieben, sodass diese beim setzen eines wertes ein "change" Event feuert, das hat wohl bei FHEMWEB dazu geführt dass mit jedem change Event das Command ausgeführt wurde, was wiederrum zum setzen des Wertes mittels "val()" führt, und das ging dann immer so weiter.

Ich weiß nicht mehr warum ich das überhaupt gemacht hatte, aber es hatte einen Sinn...man wird es sehen 

[Pitcher90]

Super! Scheint wieder zu funktionieren 

[sash.sc]

Ich korrigiere, das tritt bei f18 nur auf wenn ich parallel noch einen Fenster mit meinem Style offen habe...da muss ich jetzt wohl mal Forschen, keine Ahnung was das auslöst 
Richtig ja, gewollt nicht  danke...habe es gefixed

Danke

Gesendet von meinem MI 9 mit Tapatalk

[xanker]

Seit dem ich bei den Plots geändert habe, dass die defs per Javascript gesetzt werden (um unabhängig von svg_defs.svg zu sein), werden die Gradienten bei plotEmbed 1 nicht mehr angezeigt, bei plotEmbed 0 schon. Bei beidem sind die defs aber korrekt gesetzt...falls jemand eine Idee hat 

[Gisbert]

Zitat von: Gisbert am Heute um 19:30:21
Ich habe gerade ein update gemacht, allerdings ist es auf dem Handy in Chrome immer noch abgeschnitten.
Das könnte noch daran liegen, dass noch was im Cache ist. Mobil kann man den ja nicht so schön löschen wie am PC (STRG+F5). Versuche es mal in einem Inkognito-Tab, der nutzt meines wissen einen anderen Cache.

Hat leider nicht zu einer Besserung geführt auch das Leeren des Browserverlaufs und das Löschen des Caches in Apps --> Chrome --> Cache leeren führt zu keiner Änderung.
Was könnte denn noch so ein relativ merkwürdiges Verhalten (3/4 richtige Darstellung) verursachen.

Viele​ Grüße​ Gisbert​

[Darkwing Duck]

Also ich habe das nun umgestellt, dass alle defs per Javascript gesetzt werden. Somit wird jetzt für die Gradienten die Farbe direkt gesetzt, anstatt sie per CSS zu modifizieren. Damit ist der Style nun komplett unabhängig von svg_style.css und svg_defs.svg. Zudem habe ich das mit der Farbgebung der Gradienten geändert. Start- und Endfarbe sind nun genau gleich, lediglich die Transparenz wird angepasst: von unten (60%) nach oben (30%). Somit wird der Gradient bei einem hellen Plothintergrund nach oben hin heller und bei einem dunklen Hintergrund entsprechend dunkler. Ich hoffe damit ist jeder einverstanden

Ich kann natürlich nicht für jeden sprechen, aber ich bin äußerst einverstanden. Im Grunde ist das fast genau das, was ich vorher auch behelfsweise manuell in die svg_defs.svg eingetragen hatte. Also vielen Dank!

[xanker]

Hat leider nicht zu einer Besserung geführt auch das Leeren des Browserverlaufs und das Löschen des Caches in Apps --> Chrome --> Cache leeren führt zu keiner Änderung.
Was könnte denn noch so ein relativ merkwürdiges Verhalten (3/4 richtige Darstellung) verursachen.

Wie gesagt, bei mir ist das nur aufgetreten, wenn ich die Calllist mit anderen Devices in einer Gruppe hatte. Wenn die ungruppiert ist bzw. alleine in einer Gruppe, trat das Problem nicht auf.
Es gibt jetzt nur zwei Möglichkeiten: Entweder brauche ich den HTML Code von der Callist, oder du versuchst mal die Calllist zu Gruppieren, ob das dein Problem löst. Im Prinzip wäre ich für ersteres, da ich das Problem gerne lösen würde.
An den HTML Code kommst du so:

• Rechtsklick auf den Header der callist -> "Untersuchen"
• Es öffnet sich dann der HTML Code, mit Focus auf den Header.
• ein paar Zeilen drüber findest du dann <table class="fbcalllist-container group">
• Dort einen Rechtsklick drauf -> Copy -> Copy outerHTML
• Den kannst du dann in Notepad einfügen, die Nummer raus löschen und dann hier posten, bzw. mir als PN schicken wenn du dir unsicher bist

[Icinger]

Guten Morgen,

mir sind grade folgende Dinge aufgefallen, keine Ahnung, seit wann das so ist:

1) Kein RGB-Selector mehr, wenn man unter Style-settings eine Farbe ändern will  (egal ob Desktop oder Android, jeweils Chrome)
2) Bei Auswahl von attr group/room o.ä. kommt ja das Fenster mit den verschiedenen Räumen zum anklicken. Bei anderen styles wird der Hintergrund ausgegraut und man muss erst dieses Fenster wegmachen um weiterzuarbeiten.
    Bei flex kann ich trotzdem ein anderes Attr auswählen und bearbeiten, das Checkbox-Fenster bleibt offen bis zum reload.

lg, Stefan

[binford6000]

Moin,
seit dem letzten (heutigen) Update sehe ich jetzt Teile des HTML-Codes im Hintergrund   
Die beiden verbleibenden Striche sind immer noch zu sehen.

VG Sebastian

[mahowi]

Ich hab da noch ein Problem mit flex und dem Todoist-Weblink. Beim Todoist-Modul kann man sich in einem weblink-Device alle Listen anzeigen. Bei flex wird nur eine dargestellt, bei f18 beide. Im weblink-Device selbst werden auch mit flex beide angezeigt.

Ich habe für alle 3 Fälle Screenshots angehängt.

Im HTML-Code taucht die zweite Liste (Urlaubsliste) übrigens auf. 

Code Auswählen Erweitern

<div id='content'  room='Todoist'>
<table class="roomoverview">
</table>
<script type="text/javascript">
                todoist_tt={};
                todoist_tt.refreshList='Liste aktualisieren';
                todoist_tt.clearList='Alle Elemente löschen';
                todoist_tt.clearconfirm='Wirklich alle Elemente löschen?';
                todoist_tt.delconfirm='Task wirklich löschen?';
                todoist_tt.check='Erledigen';
                todoist_tt.delete='Löschen';
              </script> <script type="text/javascript" src="/fhem/www/pgm2/todoist.js?version=1.2.0.8"></script>
                <style id="todoist_style">
                  .todoist_container {
                      display: block;
                      padding: 0;
                      float:none;
                  }
                  .todoist_table {
                      float: left;
                      margin-right: 10px;
                  }
                  .sortable-placeholder {
                    background-color: grey;
                  }
                  .todoist_col1 {
                    width:32px;
                    text-align:right;
                    padding: 4px 4px 4px 1px!important;
                  }
                  .todoist_col1 input {
                    //margin-top:4px;
                  }
                  .todoist_move {
                    width:10px;
                    float:left;
                  }
                  .todoist_sortit_handler {
                    padding-top: 0px!important;
                    content: '....';
                    width: 5px;
                    height: 20px;
                    //display: inline-block;
                    overflow: hidden;
                    line-height: 5px;
                    padding: 0px 2px!important;
                    cursor: move;
                    vertical-align: middle;
                    margin-top: -.2em;
                    margin-right: 0!important;
                    font-size: 12px;
                    font-family: sans-serif;
                    letter-spacing: 1px;
                    color: #cccccc;
                    text-shadow: 1px 0 1px black;
                  }
                  .todoist_sortit_handler::after {
                    content: '.. .. .. ..';
                  }
                  @media(max-device-width: 480px){
                    .todoist_move {
                      width:35px;
                    }
                    .todoist_sortit_handler {
                       width: 5px;
                    }
                  }
                  .todoist_delete {
                    padding-right:15px!important;
                    padding-left:15px!important;
                  }
                  tr.ui-sortable-helper {
                    background-color:#111111;
                  }
                  .todoist_indent_2 {
                    padding-left:20px!important;
                  }
                  .todoist_indent_3 {
                    padding-left:40px!important;
                  }
                  .todoist_indent_4 {
                    padding-left:60px!important;
                  }
                  .todoist_ph td {
                    padding: 4px 8px;
                  }
                  div.todoist_devType {
                    padding: 4px!important;     
                  }
                  div.todoist_icon {
                    cursor: pointer;
                    display: block;
                    float: right;
                    width: 1em;
                    height: 1em;
                    margin-left: 0.5em;
                  }
                  div.todoist_icon svg {
                    height: 12px!important;
                    width: 12px!important;
                  }
         .todoist_table {
                    margin-bottom: 15px;
                  }
                   </style>
    <div class="todoist_container">
<table class="roomoverview todoist_table">
<tr class="devTypeTr">
<td colspan="3">
   <div class="todoist_devType todoist_devType_Einkaufsliste col_header">
<a title="Detailseite des todoist-Devices aufrufen" href="/fhem?detail=Einkaufsliste">Einkaufsliste</a>   </div>
</td>
</tr>
<tr><td colspan="3"><table class="block wide sortable" id="todoistTable_Einkaufsliste">
<tr id="Einkaufsliste_3135431066" data-data="true" data-line-id="3135431066" class="sortit todoist_data odd">
<td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Einkaufsliste" type="checkbox" id="check_3135431066" data-id="3135431066" />
</td>
<td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3135431066">braunes silikon</span>
   <input type="text" data-id="3135431066" style="display:none;" class="todoist_input_Einkaufsliste" value="braunes silikon" />
</td>
<td class="col2 todoist_delete">
<a title="Löschen" href="#" class="todoist_delete_Einkaufsliste" data-id="3135431066">
   x
</a>
</td>
</tr>
<tr id="Einkaufsliste_3269460542" data-data="true" data-line-id="3269460542" class="sortit todoist_data even">
<td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Einkaufsliste" type="checkbox" id="check_3269460542" data-id="3269460542" />
</td>
<td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3269460542">Blumenstrauß</span>
   <input type="text" data-id="3269460542" style="display:none;" class="todoist_input_Einkaufsliste" value="Blumenstrauß" />
</td>
<td class="col2 todoist_delete">
<a title="Löschen" href="#" class="todoist_delete_Einkaufsliste" data-id="3269460542">
   x
</a>
</td>
</tr>
<tr id="Einkaufsliste_3288719047" data-data="true" data-line-id="3288719047" class="sortit todoist_data odd">
<td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Einkaufsliste" type="checkbox" id="check_3288719047" data-id="3288719047" />
</td>
<td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3288719047">airwick</span>
   <input type="text" data-id="3288719047" style="display:none;" class="todoist_input_Einkaufsliste" value="airwick" />
</td>
<td class="col2 todoist_delete">
<a title="Löschen" href="#" class="todoist_delete_Einkaufsliste" data-id="3288719047">
   x
</a>
</td>
</tr>
<tr id="Einkaufsliste_3315759010" data-data="true" data-line-id="3315759010" class="sortit todoist_data even">
<td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Einkaufsliste" type="checkbox" id="check_3315759010" data-id="3315759010" />
</td>
<td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3315759010">tempos</span>
   <input type="text" data-id="3315759010" style="display:none;" class="todoist_input_Einkaufsliste" value="tempos" />
</td>
<td class="col2 todoist_delete">
<a title="Löschen" href="#" class="todoist_delete_Einkaufsliste" data-id="3315759010">
   x
</a>
</td>
</tr>
<tr class="sortit odd todoist_ph" style="display:none;"> <td colspan="3">   List ist leer.
</td></tr><tr class="even"><td colspan="3"> <input type="hidden" class="todoist_name" id="todoist_name_Einkaufsliste" value="Einkaufsliste" />
<input title="Neuen Eintrag zur Liste hinzufügen" type="text" id="newEntry_Einkaufsliste" />
</td></tr></table></td></tr>
</table>
<table class="roomoverview todoist_table">
<tr class="devTypeTr">
<td colspan="3">
   <div class="todoist_devType todoist_devType_Urlaubsliste col_header">
<a title="Detailseite des todoist-Devices aufrufen" href="/fhem?detail=Urlaubsliste">Urlaubsliste</a>   </div>
</td>
</tr>
<tr><td colspan="3"><table class="block wide sortable" id="todoistTable_Urlaubsliste">
<tr id="Urlaubsliste_3269461498" data-data="true" data-line-id="3269461498" class="sortit todoist_data odd">
<td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Urlaubsliste" type="checkbox" id="check_3269461498" data-id="3269461498" />
</td>
<td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3269461498">Mietwagenvoucher</span>
   <input type="text" data-id="3269461498" style="display:none;" class="todoist_input_Urlaubsliste" value="Mietwagenvoucher" />
</td>
<td class="col2 todoist_delete">
<a title="Löschen" href="#" class="todoist_delete_Urlaubsliste" data-id="3269461498">
   x
</a>
</td>
</tr>
<tr id="Urlaubsliste_3273610918" data-data="true" data-line-id="3273610918" class="sortit todoist_data even">
<td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Urlaubsliste" type="checkbox" id="check_3273610918" data-id="3273610918" />
</td>
<td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3273610918">Flugtickets</span>
   <input type="text" data-id="3273610918" style="display:none;" class="todoist_input_Urlaubsliste" value="Flugtickets" />
</td>
<td class="col2 todoist_delete">
<a title="Löschen" href="#" class="todoist_delete_Urlaubsliste" data-id="3273610918">
   x
</a>
</td>
</tr>
<tr class="sortit odd todoist_ph" style="display:none;"> <td colspan="3">   List ist leer.
</td></tr><tr class="even"><td colspan="3"> <input type="hidden" class="todoist_name" id="todoist_name_Urlaubsliste" value="Urlaubsliste" />
<input title="Neuen Eintrag zur Liste hinzufügen" type="text" id="newEntry_Urlaubsliste" />
</td></tr></table></td></tr>
</table>
</div>

[xanker]

1) Kein RGB-Selector mehr, wenn man unter Style-settings eine Farbe ändern will  (egal ob Desktop oder Android, jeweils Chrome)
2) Bei Auswahl von attr group/room o.ä. kommt ja das Fenster mit den verschiedenen Räumen zum anklicken. Bei anderen styles wird der Hintergrund ausgegraut und man muss erst dieses Fenster wegmachen um weiterzuarbeiten.
    Bei flex kann ich trotzdem ein anderes Attr auswählen und bearbeiten, das Checkbox-Fenster bleibt offen bis zum reload.

seit dem letzten (heutigen) Update sehe ich jetzt Teile des HTML-Codes im Hintergrund   

Das hatte alles mit der Einführung des Loading Screens zu tun, habe den Content falsch aus bzw. eingeblendet. Sollte behoben sein.

Die beiden verbleibenden Striche sind immer noch zu sehen.

Ist noch auf der TODO List

Ich hab da noch ein Problem mit flex und dem Todoist-Weblink. Beim Todoist-Modul kann man sich in einem weblink-Device alle Listen anzeigen. Bei flex wird nur eine dargestellt, bei f18 beide. Im weblink-Device selbst werden auch mit flex beide angezeigt.

Sollte behoben sein.

[xanker]

Die beiden verbleibenden Striche sind immer noch zu sehen.

Jetzt aber