Neuer Style: f18

[DasQ]

Man könnte einen Spinner einbauen, der signalisiert, etwas passiert im Hintergrund.

[TomLee]

Hallo,

besteht die Möglichkeit die CSS-Anpassungen die hier vorgenommen werden, um die Tabelle im ASC-Device korrekt darzustellen, in f-18 zu übernehmen oder muß ich das weiterhin manuell anpassen ?

Gruß

Thomas

[Damian]

Hallo,

besteht die Möglichkeit die CSS-Anpassungen die hier vorgenommen werden, um die Tabelle im ASC-Device korrekt darzustellen, in f-18 zu übernehmen oder muß ich das weiterhin manuell anpassen ?

Gruß

Thomas

Diese CSS-Anpassung kann auch kontraproduktiv sein. Sie wirkt sich aus auf alle Tabellen in FHEM. Es ging hier in erster Linie um die Abstände in tabellarischer Darstellung. Die Abstände möchte ich z. B. gar nicht haben, da ich viel mit Icons hantiere und da will ich keinen Platz verschwenden. Wenn man die Abstände der Zeilen oder Spalten haben will, so dann kann man ja einmalig die CSS-Addition wie vorgeschlagen definieren und gut ist. Beim DOIF kann man das sogar für jedes Modul separat definieren.

[rudolfkoenig]

Ich gehe davon aus, dass damit die CSS-Anweisungen aus dem Screenshot im verlinkten Thema gemeint sind.

Die Anweisungen werde ich in dieser Form nicht uebernehmen:
- die Font-Groesse der Links fuer Touch-Displays ist Geschmacksache, und ich praeferiere einfach treffbare Links, d.h. grosse Buchstaben
- padding fuer alle tds zu aendern geht mir zu weit. Ich bin bereit sowas fuer bestimmte Klassen einzubauen,  wie das z.B. bei table.block.wide bereits der Fall ist, dazu brauche ich aber einen genauen CSS-Pfad
- ich habe mit viel Aufwand die Farben konfigurabel gemacht, ich werde sie sicher nicht fest kodieren.

"weiterhin manuell anpassen" klingt nach muehselige Arbeit. Habe ich was uebersehen?

[TomLee]

Mir gehts nur um die Tabelle im ASC-Device das die besser dargestellt wird, brauchen tu ich das nicht.

[Damian]

Entweder passt Cooltux das CSS für seine Tabellendefiniton an oder es reicht schon:

Code Auswählen Erweitern

td {padding-right: 5px;}

in Additional_CSS einzutragen.

[TomLee]

Entweder passt Cooltux das CSS für seine Tabellendefiniton an

Ich denke die Tage gibts ein update vom ASC-Modul 

Danke

[wowogiengen]

Hallo,
habe ich das irgendwo übersehen, oder falsch gesucht?
Ich möchte gerne alle Einstellungen des f18-styles wieder auf Standard setzen, da bei mir in einem Raum die Einstellung der Positionen und Größen der Devices absolut nicht mehr passt...

Viele Grüße
Wolfgang
PS... ich verwende configdb...

[rudolfkoenig]

Ein Raum zuruecksetzen: unter "Select style" den Knopf neben "Dragging active" setzen, und im kauptten Raum auf dem "Eingeschraenkten haltevebot" Zeichen klicken. danach "Dragging active" wieder ausschalten.

Alles zuruecksetzen: In der FHEMWEB Instanz das Attribut styleData loeschen.

[wowogiengen]

Hallo Rudi,
danke schön. alles wieder in Ordnung

Schönen Sonntag noch.

[Esjay]

Hallo zusammen,

ich habe ein Problem, bei dem ich nicht richtig weiß, wo ich ansetzen soll und benötige Hilfe.

Ursprung ist die Folgende Instanz.

Code Auswählen Erweitern

defmod TabletWEBF18 FHEMWEB 8089 global
attr TabletWEBF18 Css @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');;\
\
html, body, html * {\
  font-family: 'Roboto';;\
}\
\
@font-face {\
  font-style: normal;;\
  font-weight: 300;;\
}\
\
body, input, select, textarea {\
    font-weight: 400;;\
    font-size: 14px;;\
}\
\
input, textarea {\
    border-style: solid;;\
    border-width: 2px;;\
    border-color: #DDDDDD;;\
    border-radius: 0px;;\
}\
\
input.maininput {\
    border-width: 0px;;\
    height: 20px;;\
    color: #333333;;\
}\
\
input[type="text"] {\
    -webkit-appearance: none;;\
    padding: 2px;;\
}\
\
body.touch a {\
    font-size: 16px;;\
}\
\
#menuBtn {\
    position: absolute;;\
    top: 14px;;\
    left: 10px;;\
    width: 28px;;\
    height: 28px;;\
    filter: brightness(3);;\
}\
\
*:focus {\
    outline: none;;\
}\
\
div.pinHeader {\
    color: white;;\
    height: 18px;;\
    border-top-left-radius: 10px;;\
    border-top-right-radius: 10px;;\
    padding: 5px 8px 5px 8px;;\
}\
\
div.pinHeader a {\
    color: white !important;;\
}\
\
svg:not([fill]):not(.jssvg) {\
    fill: #B0BEC5 !important;;\
    height: 25px;;\
    width: 25px;;\
    padding-right: 10px;;\
}\
\
table.room, table.block.wide, table.fileList {\
    border-top: 0px;;\
    border-bottom: 2px solid #333333;;\
}\
\
table.block.wide {\
    font-weight: 300;;\
}\
\
table.block.wide td > div {\
    padding: 4px;;\
}\
\
td {\
    padding: 0px;;\
}\
\
div#content > table {\
    width: 100%;;\
}\
\
div#content::-webkit-scrollbar {\
    display: none;;\
}\
\
div#menu {\
    width: 200px;;\
}\
\
div#menu::-webkit-scrollbar {\
    display: none;;\
}\
\
div#menu > table, div#content > table {\
    border-collapse: collapse;;\
    width: 100%;;\
}\
\
div#menu > .col_header {\
    fill: #3373a6;;\
    font-size: 14px;;\
}\
\
div#menu > .col_header:before {\
    content: "Menü";;\
}\
\
div#menu tr {\
    border-width: 0px;;\
    background-color: #494949;;\
}\
\
div#menu tr tr:hover {\
    background-color: #3373a6;;\
}\
\
div#menu tr:last-child { \
    border-bottom: none !important;; \
}\
\
.room tr > td {\
    padding: 4px 8px 4px 8px;;\
}\
\
div#menu a {\
    color: #fff ! important;;    \
    padding-left: 5px;;\
    display: block;;\
}\
\
body.touch #menu table.room div {\
    padding: 4px;;\
}\
\
.slider {\
    background-color: #DDDDDD;;\
    border-radius: 5px;;\
    margin: 30px 0px 10px 0px;;\
    height: 4px;;\
}\
\
.colorpicker_bri .slider {\
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;;\
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;;\
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;;\
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;;\
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;;\
}\
\
.handle {\
    font-size: 13px;;\
    color: white !important;;\
    position: relative;;\
    width: 45px;;\
    height: 20px;;\
    padding: 0px;;\
    background: #3373a6;;\
    border-radius: 8px;;\
    border-width: 0px;;\
    bottom: 32px;;\
}\
\
.handle:before {\
    content: '';;\
    position: absolute;;\
    border-style: solid;;\
    border-width: 5px 5px 0;;\
    border-color: #CCCCCC transparent;;\
    display: block;;\
    width: 0;;\
    bottom: -4px;;\
    left: 17px;;\
}\
\
.handle:after {\
    content: '';;\
    position: absolute;;\
    border-style: solid;;\
    border-width: 8px;;\
    border-radius: 8px;;\
    border-color: #3373a6;;\
    box-shadow: 0px 0px 0px 2px white;;\
    display: block;;\
    width: 0;;\
    bottom: -23px;;\
    left: 14px;;\
}\
\
.sysmon table tr td {\
    padding: 2px;;\
}\
\
.makeSelect form {\
    padding: 5px;;\
    display: flex;;\
    align-items: center;;\
}\
\
.makeSelect {\
    display: flex;;\
    float: left;;\
    /* clear: left;; */\
    height: 35px;;\
    background: #333333;;\
    width: 100%;;\
}\
\
.get, .set, .attr {\
    margin-bottom: 0px;;\
}\
\
.downText {\
    margin-top: 0px;;\
}\
\
input[type="text"] {\
    color: #060606;;\
}\
\
.textField_widget input {\
    border: 0px;;\
}\
\
input.multiple_widget {\
   border: 0px;;\
}\
\
div#devSpecHelp {\
    background: #333333;;\
    width: 100%;;\
    padding-top: 5px;;\
    margin-bottom: 0px;;\
}\
\
.SVGplot * {\
    padding-top: 5px;;\
}\
\
.border {\
    stroke: #fff !important;;\
    fill: #333333 !important;;\
}\
input#md_freeText {\
    color: #000000;;\
}\
\
.room div:hover svg path {\
    fill: #FFFFFF;;\
}\
\
.roomBlock3 div, .roomBlock5 div {\
  height: 30px;;\
  text-transform: uppercase;;\
  font-weight: 300;;\
  line-height: 30px;;\
  overflow: hidden;;\
}\
\
.roomBlock1 div, .roomBlock2 div, .roomBlock4 div {\
  height: 25px;;\
  text-transform: uppercase;;\
  font-weight: 300;;\
  line-height: 25px;;\
  overflow: hidden;;\
  display: flex;;\
}\
\
canvas.flot-base {\
    width: 100% !important;;\
}\
\
.panel-title {\
    -webkit-box-pack: left !important;;\
    -ms-flex-pack: left !important;;\
    justify-content: left !important;;\
    padding: 4px !important;;\
}\
\
input.maininput {\
    border-radius: 10px;;\
    border: 1px solid #000000;;\
}\
\
table.block.wide.readings.wrapcolumns td:nth-last-child(1) {\
    width: 200px;;\
    text-align: right;;\
    padding-right: 4px;;\
}\
\
.dval a {\
    color: #a6a033 !important;;\
}\
\
table.block.wide.internals.wrapcolumns a {\
    color: #a6a033 !important;;\
}\
\
a#DEFa {\
    padding: 4px;;\
}
attr TabletWEBF18 DbLogExclude .*
attr TabletWEBF18 defaultRoom Home
attr TabletWEBF18 hiddengroup Test
attr TabletWEBF18 hiddenroom AlarmRoom,Alarm System,Alarm,Batterieübersicht,Geräte->.*,System,Unsorted,Waiting Room,harmony,Everything,Logfile,Commandref,Remote doc,Edit files,Event monitor
attr TabletWEBF18 hiddenroomRegexp (Geräte|System).*
attr TabletWEBF18 room Home
attr TabletWEBF18 roomIcons Status:status_available Home:control_building_empty Flur:scene_hall Arbeitszimmer:scene_office Garten:scene_garden GästeWlan:it_wifi Heizung:sani_heating Küche:scene_dinner Schlafzimmer:scene_sleeping Spielzimmer:scene_workshop Wohnzimmer:scene_livingroom
attr TabletWEBF18 stylesheetPrefix f18

setstate TabletWEBF18 2021-02-12 10:21:01 state Initialized



Das ist eine Standard F18 mit erweiterter CSS, welche von hier stammt. https://forum.fhem.de/index.php/topic,84760.15.html

Hab auch etwas weiter gemacht und bissel mit Farben variiert für Kontrast usw.

Der css Teil zum Theme

Code Auswählen Erweitern

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

html, body, html * {
  font-family: 'Roboto';
}

@font-face {
  font-style: normal;
  font-weight: 300;
}

body, input, select, textarea {
    font-weight: 400;
    font-size: 14px;
}

input, textarea {
    border-style: solid;
    border-width: 2px;
    border-color: #DDDDDD;
    border-radius: 0px;
}

input.maininput {
    border-width: 0px;
    height: 20px;
    color: #333333;
}

input[type="text"] {
    -webkit-appearance: none;
    padding: 2px;
}

body.touch a {
    font-size: 16px;
}

#menuBtn {
    position: absolute;
    top: 14px;
    left: 10px;
    width: 28px;
    height: 28px;
    filter: brightness(3);
}

*:focus {
    outline: none;
}

div.pinHeader {
    color: white;
    height: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 8px 5px 8px;
}

div.pinHeader a {
    color: white !important;
}

svg:not([fill]):not(.jssvg) {
    fill: #B0BEC5 !important;
    height: 25px;
    width: 25px;
    padding-right: 10px;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 2px solid #333333;
}

table.block.wide {
    font-weight: 300;
}

table.block.wide td > div {
    padding: 4px;
}

td {
    padding: 0px;
}

div#content > table {
    width: 100%;
}

div#content::-webkit-scrollbar {
    display: none;
}

div#menu {
    width: 200px;
}

div#menu::-webkit-scrollbar {
    display: none;
}

div#menu > table, div#content > table {
    border-collapse: collapse;
    width: 100%;
}

div#menu > .col_header {
    fill: #3373a6;
    font-size: 14px;
}

div#menu > .col_header:before {
    content: "Menü";
}

div#menu tr {
    border-width: 0px;
    background-color: #494949;
}

div#menu tr tr:hover {
    background-color: #3373a6;
}

div#menu tr:last-child {
    border-bottom: none !important;
}

.room tr > td {
    padding: 4px 8px 4px 8px;
}

div#menu a {
    color: #fff ! important;   
    padding-left: 5px;
    display: block;
}

body.touch #menu table.room div {
    padding: 4px;
}

.slider {
    background-color: #DDDDDD;
    border-radius: 5px;
    margin: 30px 0px 10px 0px;
    height: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}

.handle {
    font-size: 13px;
    color: white !important;
    position: relative;
    width: 45px;
    height: 20px;
    padding: 0px;
    background: #3373a6;
    border-radius: 8px;
    border-width: 0px;
    bottom: 32px;
}

.handle:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
    bottom: -4px;
    left: 17px;
}

.handle:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px;
    border-radius: 8px;
    border-color: #3373a6;
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

.sysmon table tr td {
    padding: 2px;
}

.makeSelect form {
    padding: 5px;
    display: flex;
    align-items: center;
}

.makeSelect {
    display: flex;
    float: left;
    /* clear: left; */
    height: 35px;
    background: #333333;
    width: 100%;
}

.get, .set, .attr {
    margin-bottom: 0px;
}

.downText {
    margin-top: 0px;
}

input[type="text"] {
    color: #060606;
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    background: #333333;
    width: 100%;
    padding-top: 5px;
    margin-bottom: 0px;
}

.SVGplot * {
    padding-top: 5px;
}

.border {
    stroke: #fff !important;
    fill: #333333 !important;
}
input#md_freeText {
    color: #000000;
}

.room div:hover svg path {
    fill: #FFFFFF;
}

.roomBlock3 div, .roomBlock5 div {
  height: 30px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 30px;
  overflow: hidden;
}

.roomBlock1 div, .roomBlock2 div, .roomBlock4 div {
  height: 25px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 25px;
  overflow: hidden;
  display: flex;
}

canvas.flot-base {
    width: 100% !important;
}

.panel-title {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    padding: 4px !important;
}

input.maininput {
    border-radius: 10px;
    border: 1px solid #000000;
}

table.block.wide.readings.wrapcolumns td:nth-last-child(1) {
    width: 200px;
    text-align: right;
    padding-right: 4px;
}

.dval a {
    color: #a6a033 !important;
}

table.block.wide.internals.wrapcolumns a {
    color: #a6a033 !important;
}

a#DEFa {
    padding: 4px;
}


Nun zum Problem:
Sobald ich Dragging Active einschalte, zerhaut es mir die Darstellung der Gruppe.Abhilfe schafft dann nur das betätigen des eingeschränkten Halteverbotszeichens.
Ab hier beginnt dann der Teufelskreis.

Ich habe das Ganze mal als Bilderstrecke angehängt.

Der Browser welchen ich einsetze spielt dabei auch keine Rolle. Egal ob Safari,Firefox oder Fully auf dem Tablet.

Kann ich noch irgendwelche Infos liefern, oder kann sich schon jemand vorstellen wo es hängt?

LG

[rudolfkoenig]

Danke fuer den Hinweis, habs gefixt.

Die Ursache ist, dass die Titelzeile ein Padding hat, der Inhalt nicht, und dieses Padding wurde beim Resize nicht beachtet.
In der "nicht tiefergelegten" Ansicht ist das Problem auch sichtbar, bloss nicht so prominent.

[Esjay]

Hallo Rudi,

vielen Dank für die schnelle Umsetzung. Somit kann ich an der Tablet Visu weiter arbeiten.
Sollte eines Tages Zeit vorhanden sein, würde ich dafür abstimmen Dragging active auf das Menü zu erweitern.

LG

[kpwg]

Ich habe mich heute mit F18 ein wenig auseinandergesetzt und bin begeistert. Schnelle und einfache Ergebnisse, enormer WAF 

Dennoch ist mir ein Problem aufgefallen: Ich arbeite bei WEB mit defaultRoom, erhalte also beim Aufruf der IP (mit Port natürlich) einen benannten Room, in welchem ich starte. Rufe ich die Räume links im Menü gezielt auf, ist alles perfekt, rufe ich jedoch die Startseite mit Klick auf das Logo auf, ist die Zuordnung der Gruppen und verschobenen Elemente dahin.
Ich habe es jetzt aus zwei Systemen mit verschiedenen Browsern und Rechnern getestet und kann es gut nachvollziehen.

Was mache ich falsch?

[rudolfkoenig]

Danke fuer den Hinweis, habs gefixt.