Neuer Style: f18

[kennymc.c]

Ich hab jetzt mit Dragging active eine Ansicht für größere Auflösungen erstellt und nutzte column jetzt nur noch für die Sortierung mit horizontal kleineren Auflösungen. Obwohl ich das nur nur in einem Raum gemacht habe, gab es aber auch verschobene Elemente in andere Räumen. Konnte ich dann über das Verbotsschild zurücksetzten. Trotzdem stehen in styleData noch Daten für anderen Räume mit drin, die ich nie verändert habe.

[TomLee]

Hi und frohe Ostern,

hab jetzt genug gelesen und gesucht, komm wirklich nicht drauf.
Was muss ich denn genau tun um ein Hintergrundbild in f18 anzugeben.
Die Alternativen sind mir klar, aber direkt mit der Möglichkeit in f18 unter Edit Style einfach ein Icon auszuwählen welches  in /wwww/images/background hinterlegt ist gelingt mir nicht. Das Dialogfeld gibt mir auch nachdem ich ein Icon in dem Ordner background erstellt habe (restart wurde auch gemacht) "none" zurück. Es bringt auch nix den Ordner background in iconpath der FHEMWEB-Definition zu ergänzen.

Auf meinen Installationen verhält es sich genauso wie auf der Demo Seite.
Das Dalogfeld dort gibt auch weiterhin "none" zurück.

Dort hab ich zu Testzwecken auch eine frohe_ostern.svg in /wwww/images/background hinterlegt.

Was muss nach dem ergänzen der Datei noch gemacht werden ?
Falls es irgendwo dokumentiert ist, wo steht es, ich finde es nicht ?

Gruß

Thomas

[schwatter]

Frohe Ostern,

pack mal ein .jpg in den Ordner wwww/images/background


Gruß schwatter

[TomLee]

Danke. Im Eifer des Gefechts nicht einen Gedanken zugelassen das SVG-Dateien nicht unterstützt werden 

[myhome]

Problem mit dem Style "Transparent". Habe die Tage mal wieder ein Update von fhem gemacht, dabei gab es wohl ein f18 update. Leider ist dadurch der Hintergrund bei vielen Icons nicht mehr "Transparent". Bei den anderen Styles ist alles wie es soll, nur bei f18 nicht mehr.
Du darfst diesen Dateianhang nicht ansehen.Du darfst diesen Dateianhang nicht ansehen.   

Im ersten Bild ist ein transparenter DOIF Switch (ICON) über das Icon (Mülltonne) gelegt. Das 2te Bild ist glaube ich selbsterklärend.

So sieht es normal aus, bzw. hat es auch mal unter f18

Du darfst diesen Dateianhang nicht ansehen.

Hi zusammen  update 11.06.2024

ich habe den Fehler gefunden, warum unter f18.js seit dem Update die transparente Darstellung unter uiTable Funktionen wie switch etc. nicht funktioniert. Es liegt an den "Neu" eingefügten Zeilen ab 793 bis 797 für uzsu, wobei ich als OBER-Laie meine es liegt nur an Zeile 794 an
  style += ".ui-state-default "+bg(col("bg")+"!important");
.....
Diese Zeilen sind bei dem Update neu dazu gekommen; Nehme ich sie raus oder spiele die alte Version ein sind die grauen Kästchen oder bei den Icon diese wieder Transparent.

[Damian]

Man kann sich jetzt darüber streiten, ob es ein Bug ist oder ein Feature. Ich finde es gar nicht so schlecht, wenn das Widget iconSwitch, auf dem die Switch-Funktion basiert, einen Hintergrund bekommen hat, so weiß man jetzt, wo man klicken muss, um den Schalter zu betätigen.

Ich würde die zusätzlichen Zahlen (was immer sie bedeuten sollen), so wie die Anzahl der Tage neben der Tonne realisieren. Das ist der Code der Funktion icon_label, welche hier für die Tonne mit ihrer Anzahl der Tage benutzt wird:

Code Auswählen Erweitern

sub icon_label
 {
   my ($icon,$text,$color,$color_bg,$pos_left,$pos_top) = @_;
   $color = "" if (!defined ($color));
   $color_bg = "" if (!defined ($color_bg));
   $pos_left = -3 if (!defined ($pos_left));
   $pos_top = -8 if (!defined ($pos_top));
   my $pad = (length($text) > 1) ? 2 : 5;
   return '<div style="display:inline-table;">'.::FW_makeImage($icon).'<div style="display:inline;border-radius:20px;color:'.$color.';background-color:'.
          $color_bg.
          ';font-size:14px;font-weight:bold;text-align:center;position:relative;padding-top: 1px;padding-left: '.$pad.'px; padding-right: '.$pad.'px;padding-bottom: 1px;'.
          'left:'.$pos_left.'px;top:'.$pos_top.'px;">'.$text.'</div></div>'
 }

[mumpitzstuff]

Falls du eventuell die nächste und übernächste Leerung damit darstellen wolltest, dann könntest du das auch so realisieren.

Code Auswählen Erweitern

defmod doif_Abfall DOIF ##
attr doif_Abfall room KALENDER
attr doif_Abfall uiTable {\
  package ui_Table;;\
\
  $SHOWNOSTATE=1;;\
\
  sub ic\
  {\
    my ($icon, $days, $days2) = @_;;\
    \
    icon_label2($icon, $days, $days2, 'white', (1 == $days ? 'red' : 2 == $days ? 'darkorange' : 'green'));;\
  }\
  \
  sub icon_label2\
  {\
    my ($icon, $text, $text2, $color, $color_bg, $pos_left, $pos_top) = @_;;\
    my $pad = ((length($text) > 1) ? 2 : 5);;\
    my $pad2 = ((length($text2) > 1) ? 2 : 5);;\
    \
    $color = "" if (!defined ($color));;\
    $color_bg = "" if (!defined ($color_bg));;\
    $pos_left = -5 if (!defined ($pos_left));;\
    $pos_top = -10 if (!defined ($pos_top));;\
   \
    return '<div style="display:inline-table;;">'.::FW_makeImage($icon).\
           '<div style="display:inline;;width:16px;;height:14px;;border-radius:14px;;color:'.$color.';;background-color:'.$color_bg.\
           ';;font-size:10px;;font-weight:700;;text-align:center;;position:relative;;padding-top:1px;;padding-left:'.$pad.'px;;padding-right:'.$pad.'px;;padding-bottom:1px;;'.\
           'left:'.$pos_left.'px;;top:'.$pos_top.'px;;">'.$text.'</div>'.\
           '<div style="display:inline;;width:16px;;height:14px;;border-radius:14px;;color:'.$color.';;border:1px solid white;;'.\
           'font-size:10px;;font-weight:700;;text-align:center;;position:relative;;padding-top:1px;;padding-left:'.$pad2.'px;;padding-right:'.$pad2.'px;;padding-bottom:1px;;'.\
           'left:'.$pos_left.'px;;top:'.$pos_top.'px;;">'.$text2.'</div></div>';;\
  }\
\
  sub convDate\
  {\
    my ($date, $days) = @_;;\
\
    return 'Heute' if (0 == $days);;\
    return 'Morgen' if (1 == $days);;\
    return 'Übermorgen' if (2 == $days);;\
    \
    # the following line strips the year of the date (remove it if needed)\
    #return substr($date, 0, 5);;\
    return $date;;\
  }\
\
  sub textColor\
  {\
    my $days = shift;;\
    \
    return (1 == $days ? 'red' : 2 == $days ? 'darkorange' : 'white');;\
  }\
}\
\
DEF TPL_Abfall (style([ABFALL_LEERUNG:$1_weekday], textColor([ABFALL_LEERUNG:$1_days]))|\
style(convDate([ABFALL_LEERUNG:$1_date], [ABFALL_LEERUNG:$1_days]), textColor([ABFALL_LEERUNG:$1_days]))|\
style([ABFALL_LEERUNG:$1_text], textColor([ABFALL_LEERUNG:$1_days]))|\
ic("dustbin\@$2", [ABFALL_LEERUNG:$1_days], [ABFALL_LEERUNG:$1_daysnext]))\
\
TPL_Abfall (Restmuelltonne,red)\
TPL_Abfall (Gelbe_Tonne,green)\
TPL_Abfall (Papiertonne,limegreen)\
TPL_Abfall (Biotonne,yellow)\
TPL_Abfall (Glas,blue)\


[myhome]

Hallo
Die Zahlen neben der Tonne sagt mir in vielen Tagen die nächste Leerung ist.
Mit dem Switch zähle ich die Leerung, also wie oft ich die Tonne zur Leerung rausgestellt habe. Haben nämlich bei Rest und Bio Müll nur x Leerungen inkl.
Der Switch zählt immer +1 aber nur wenn 0Tage angezeigt wird. Danach ist er für den Rest des Tages gesperrt. DIE Zahl in der Mülltonne zeigt die Häufigkeit an. Eigentlich liegt der Switch als Icon Transparent über den Icon Mülltonne + Tage, also man kann diese gar nicht verfehlen. Vielen Danke für eure Vorschläge, ich werde es ausprobieren und mich melden. Danke!

siehe #469 Ergänzung vom 11.06.2024

Hier mal mein Code für uiTable. Das meiste mache ich mit einem Dummy geht einfach und schnell und man verliert den Überblick nicht und natürlich habe ich mir ein paar Icons gebaut wie z.B ein transparentes Icon für die switch Funktion, geht alles einfach und schnell. Der Switch hat nur die Funktion einen Zähler zu bedienen, ein kurzes on/off reicht dafür.

uiTable
{
  package ui_Table;
  $TC{0}="align='left'";
  $SHOWNOSTATE=1;
  ## Die Gerätezeile wird ausgeblendet in allen Räumen
  $SHOWNODEVICELINE = 'Status';

}
##

"<div style='position:relative;;width:50px;;height:50px'>
   <div style='position:absolute;;left:0px;;top:2px'>".
     icon_label("muelltonne\@yellow",[MuellterminDummy:GelberSack],"white",
        [MuellterminDummy:GelberSack] > 1 ? "green":"red",-4,-8).
   "</div> <div style='position:absolute;;left:60px;;top:2px'>".
      icon_label("muelltonne".[MuellterminDummy:ZaehlerBio]."\@brown",
         [MuellterminDummy:BioTonne],"white",[MuellterminDummy:BioTonne] > 1 ? "green":"red",28,-36).
   "</div> <div style='position:absolute;;left:58px;;top:2px'>".
      switch([BioTonnenZaehler:state],"muelltonneTransparent","muelltonne\@black","off","on").
   "</div><div style='position:absolute;;left:120px;;top:2px'>".
      icon_label("muelltonne\@blue",[MuellterminDummy:PapierTonne],"white",
       [MuellterminDummy:PapierTonne] > 1 ? "green":"red",28,-36).
   "</div> <div style='position:absolute;;left:180px;;top:2px'>".
       icon_label("muelltonne".[MuellterminDummy:ZaehlerRest]."\@grey",[MuellterminDummy:Restmuell],"white",
        [MuellterminDummy:RestMuell] > 1 ? "green":"red",28,-36).
   "</div><div style='position:absolute;;left:176px;;top:2px'>".
      switch([RestTonnenZaehler:state],"muelltonneTransparent","muelltonne\@black","off","on").
   "</div>
</div>" 

[dennisk]

Edit: Möglicher Fix unter: https://forum.fhem.de/index.php?msg=1323626

Ich habe ein kleines Darstellungsproblem, welches ich einfach nicht gelöst bekomme: Bei den ReadingsGroup ist der Abstand zwischen Tabelle mit den Readings und dem Heading (sprich Alias) der ReadingsGroup sehr klein, was dazu führt, dass Buchstaben wie ein kleines g in die Tabelle reinragen bzw. in die Trennlinie. Die beiden Screenshots zeigen das Problem auf dem PC und dem Smartphone, auf letzterem ist es schlimmer. Ich habe schon versucht mit height oder padding zu spielen, was zwar was bringt, aber eben auf PC und Smartphone unterschiedlich. Hat hier einer eine Idee, was man machen könnte, dass Buchstaben nicht mehr herausragen, sowohl auf dem PC als auch Smartphone?

Du darfst diesen Dateianhang nicht ansehen.
Du darfst diesen Dateianhang nicht ansehen.