[aufgegeben] knob@f18@dark: Wie bzw. wo globale Vorgaben für Farben...

[Beta-User]

Hallo zusammen,
bastle grade an meinem UI rum und bin dabei auf das widget "knob" gestoßen. Das ist für einige Dinge interessant.
Das "Problem": Im Hintergrund ist der erst mal weiß, allerdings kommt im dark-Preset das grün etwas seltsam, mit dem knob per default den Wert anzeigt.

Es gibt doch sicher eine andere Möglichkeit, als jeden einzelnen knob dann manuell anzupassen in fgColor etc.?

Versucht habe ich, das mit "knob.fgColor" und "fgColor" etc. in styleData zu ändern. Scheint aber keine Auswirkungen zu haben.

Code Auswählen Erweitern

attr WEB styleData {\
"f18": {\
  "Pinned.menu": true,\
  "hidePin": false,\
  "Pinned.style.list.Styles": true,\
  "savePinChanges": true,\
  "cols.bg": "444444",\
  "cols.fg": "CCCCCC",\
  "cols.link": "FF9900",\
  "cols.evenrow": "333333",\
  "cols.oddrow": "111111",\
  "cols.header": "222222",\
  "cols.menu": "111111",\
  "cols.sel": "333333",\
  "cols.inpBack": "444444",\
  "Pinned.Room.undefined.grp.readingsProxy": true,\
  "Pinned.Room.Wettervorhersage.grp. ZE.Batterie": true,\
  "Pinned.detail.Attributes": true,\
  "Pinned.detail.DeviceOverview": true,\
  "Pinned.detail.Probably associated with": true\
}\
}
attr WEB stylesheetPrefix f18

(Das sollte eigentlich den f18 dark-preset-Colors entsprechen).

Danke für zweckdienliche Hinweise bzw. optimalerweise eine passende Lösung.

Gruß, Beta-User

[Ellert]

Hier https://wiki.fhem.de/wiki/FHEMWEB/Widgets gibt es unter Punkt 3.1 einen Link zu den Konfigurationsmöglichkeiten des knob-Widgets und unter 4 ein Beispiel wie die Attribute zu setzen sind für das Reading 11knob.

[Beta-User]

  Sorry, vielleicht war die Frage nicht eindeutig genug gestellt.

Hier https://wiki.fhem.de/wiki/FHEMWEB/Widgets gibt es unter Punkt 3.1 einen Link zu den Konfigurationsmöglichkeiten des knob-Widgets und unter 4 ein Beispiel wie die Attribute zu setzen sind für das Reading 11knob.

Danke für den Link, bis dahin (bzw. der Seite von anthonyterrien) war ich auch gekommen. Dass man das jeweils am einzelnen knob einstellen kann, ist und war soweit bekannt.

Die konkrete Frage lautet:
Muß man das wirklich an jedem einzelnen knob ausdefinieren, oder gibt es eine Option, zentral für alle knobs default-Werte zu hinterlegen? Wenn ja: Wo? (Wie wäre dann auch noch nett, aber das finde ich dann schon, wenn es die Angaben aus http://anthonyterrien.com/knob/ sind).

(Irgendwoher muß ja auch weiss/grün kommen... Super wäre auch, die Größenvorgaben zentral zu machen. Ich bin noch am rumexperimentiereen und will möglichst vermeiden, das Farbschema hinterher an 20+knobs nachjustieren zu müssen.)

[Beta-User]

Hmm,

halber Schritt weiter. Das scheint _nicht_ zu gehen, da die Defaults zu Größe und fgColor in https://svn.fhem.de/trac/browser/trunk/fhem/www/pgm2/fhemweb_knob.js hart vercoded sind (Zeilen 18+19).
Schade, dann muß es wohl händisch sein .

@Rudi:
(Du scheinst Maintainer für das js zu sein). Gibt es dafür einen Grund, oder hat sich nur bisher keiner dafür interessiert, das einfach der allg. Farbgebung anzupassen?
(Zur Größe hatte ich auch die im Wiki hinterlegten Angaben 50x50 genommen; ohne das jetzt genauer vertieft zu haben, erscheint mir das auch als ganz guter Wert, 100x100 wäre mir jedenfalls zu groß).

[Ellert]

Das lag auch an mir, ich habe wohl zu schnell gelesen.
Ein Knob ist so in FHEMWEB eingebunden:

Code Auswählen Erweitern

<div style="display:inline-block" class="knob_widget" informid="RollStrg-a-W_azi_on" title="W_azi_on">
  <div style="display:inline;width:50px;height:50px;">
    <canvas width="50" height="50"></canvas>
    <input type="text" id="knob.RollStrg-W_azi_on" data-min="0" data-max="360" data-width="50" data-height="50" data-step="1" data-linecap="round" data-angleoffset="180" data-cursor="3" data-thickness=".3" data-fgcolor="#278727" style="width: 29px; height: 16px; position: absolute; vertical-align: middle; margin-top: 16px; margin-left: -39px; border: 0px none; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; font: bold 10px Arial; text-align: center; color: rgb(39, 135, 39); padding: 0px; -moz-appearance: none;">
  </div>
</div>

Insofern müsste es über ein eigenes Stylesheet klappen, wenn Du über class="knob_widget" und/oder input, id knob.* die Attribute setzt. Ich bin aber nicht fit in CSS, da müsste ich auch die Doku studieren.
https://www.w3schools.com/cssref/css_selectors.asp

Du müsstest einen CSS-Selector formulieren der  class="knob_widget" -> input-Tag adressiert und dann die Attribute setzen.

hart vercoded sind (Zeilen 18+19)

Bei Verwendung von "!important" in CSS sollte das entsprechende Attribut überschrieben werden bin aber nicht sicher.

[Beta-User]

Puh, Danke für dei Rückmeldung, aber das mit den css-Stylesheets sind auch für mich ziemlich böhmische Dörfer .

Bevor ich mich auch da noch einlese, mache ich das vermutlich doch von Hand; aber vielleicht erbarmt sich auch rechtzeitig einer, dem das leicht von der Hand geht ...

(Aber an sich scheint mir mind. die hartvercodete Farbe nicht (mehr) optimal zu sein.)

[Ellert]

Mit

Code Auswählen Erweitern

.knob_widget input {data-fgcolor:#444444 !important;} gibt es leider keinen Erfolg.

[rudolfkoenig]

Gibt es dafür einen Grund, oder hat sich nur bisher keiner dafür interessiert, das einfach der allg. Farbgebung anzupassen?

Bisher hat mW keiner nachgefragt, und ich meine, dass Zeile 18/19 nur die Defaultwerte anbietet, falls man es nicht explizit konfiguriert hat.
Die aktuelle Methode hinterlegt im data-* Attribtuen die ueber FHEMWEB gesetzte Konfiguration, und das wird con jquery.knob verwendet.
Keine Ahnung, ob das per CSS auch zu setzen ist. Wenn ja, zeigt mir wie, dann versuche ich das "Default" aus fhemweb_knob.js zu entfernen.

[Beta-User]

Bisher hat mW keiner nachgefragt, und ich meine, dass Zeile 18/19 nur die Defaultwerte anbietet, falls man es nicht explizit konfiguriert hat.

So hatte ich das auch verstanden, dass erst eine ganze Kaskade diverser anderer Orte durchlaufen wird, an denen das potentiell eingestellt werden könnte.

An sich müßte das auch in dem Attribut styleData gehen, oder?

Mit

Code Auswählen Erweitern

.knob_widget input {data-fgcolor:#444444 !important;} gibt es leider keinen Erfolg.

Ich werde mal noch ein paar Varianten austesten, das "input" kommt mir z.B. an der Stelle seltsam vor, und die anderen Farbangaben sind ohne "#". Ist aber reines Rumprobieren .
Kann spontan jemand sagen, ob nach Änderung des Attributs irgendwas (01_FHEMWEB.pm) neu geladen werden muss oder ob das automatisch direkt beachtet wird?

[rudolfkoenig]

An sich müßte das auch in dem Attribut styleData gehen, oder?

styleData enthaelt Parameter fuer f18 (und evtl. andere Styles in der Zukunft). Da f18 knob bisher nicht kennt, hilft styleData nicht.
Das Knob Widget ist gemalt in einem <canvas>, das ist strenggenommen kein HTML, insofern wirken hier CSS Attribute nicht (das ist nur eine Vermutung, kein Wissen).

[Beta-User]

Na denn, das ist mir zu hoch in den Untiefen der Materie, dann bekommen die knobs halt jeweils ihre "individuellen" Farbangaben...
Scheint ja bisher keinen gewundert zu haben, dann kramt das vermutlich der nächste erst in 5 Jahren raus.

Trotzdem vielleicht noch eine allgemeine Frage, die nicht nur den knob betrifft: Beim Überfliegen der diversen js-Dateien fällt auf, dass es nicht nur an der Stelle hartvercodete Farbangaben gibt, was vermutlich dann kein Problem ist, solange man den style mit den default-Einstellungen betreibt - da scheinen die harten Vorgaben mit den defaults zusammenzupassen.

Wäre es aber nicht ganz allgemein möglich (und sinnvoll), da jeweils statt harter Werte mit Variablen zu arbeiten? (Ich habe zwar keine Ahnung von javascript, aber wenn da irgendeine Fleißaufgabe dahinter steht, könnte ich da bei Gelegenheit ggf. zuarbeiten).

[rudolfkoenig]

Wäre es aber nicht ganz allgemein möglich (und sinnvoll), da jeweils statt harter Werte mit Variablen zu arbeiten?

Irgendwie schon, ich habe aber (noch) keinen Plan, woher diese Variablen kommen sollen.

Eine Moeglichkeit waere sich auf f18 zu beschraenken, auf dessen Attribute kann man ueber f18_getAttr zugreifen, sie erledigt auch den raumspezifischen Parameterwahl. Bin aber unsicher, ob das die richtige Loesung ist.

[Beta-User]

Irgendwie schon, ich habe aber (noch) keinen Plan, woher diese Variablen kommen sollen.

Eine Moeglichkeit waere sich auf f18 zu beschraenken, auf dessen Attribute kann man ueber f18_getAttr zugreifen, sie erledigt auch den raumspezifischen Parameterwahl. Bin aber unsicher, ob das die richtige Loesung ist.

Hmm, ich sage dazu mal wieder meine Meinung, aber das ist kaum mehr als ein Bauchgefühl und hat nix mit Programmierung (QS) zu tun:
Da f18 zwischenzeitlich seit einiger Zeit Standard bei Auslieferung ist (und vermutlich auch von diversen Videobloggern nur gemoddet wird, also für die "neueren user" hier praktisch nichts anderes genutzt wird - warum auch), fände ich das eigentlich ok, wenn der Rest "abgehängt" würde.

Es sollte verhindert werden, dass jemand, der bisher nicht f18 nutzt, plötzlich ein anderes Aussehen hat - mehr aber auch nicht (will heißen, dass ganz am Ende dann doch die harten defaults stehen, wenn f18 nix liefert). Wer die modernen Features will, soll halt f18 nutzen (oder dann ggf. irgendwann einen Nachfolger), darf sich aber nicht beschweren...

Die Farbgebung habe ich übrigens zwischenzeitlich einigermaßen im Griff, für mich müßte der Aufwand also nicht (mehr) getrieben werden. (Was ausdrücklich keine Rücknahme des Hilfsangebots ist).

[Beta-User]

Kurz doch noch eine Frage/Anmerkung zu knob:

Kann es sein, dass nicht alle auf der bei http://anthonyterrien.com/knob/ aufgeführten Optionen funtionieren?

Mag sein, dass ich beim rumspielen ggf. auch schlicht die falsche Schreibweise/nicht den richtigen Text gewählt habe, aber z.B. "format:°C" oder "format:C" sollten eigentlich funktionieren, oder "skin:tron".

Soweit ersichtlich, scheinen sowohl das widget wie auch jquery ja auf dem aktuellen Stand zu sein, aber evtl. habe ich was übersehen?

(Leider ist die Seite nicht sehr gesprächig, was da eigentlich als Wertzuweisung im Font-Bereich möglich wäre - die Größe würde mich v.a. interessieren - , ob skin noch was anderes als tron kennt usw.. )