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.

[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)\