FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Tobias am 08 August 2018, 14:16:19

Titel: Brauche Hilfe beim Advanced Spinner
Beitrag von: Tobias am 08 August 2018, 14:16:19
Hi,
ich habeden Spinner um 90° gedreht (class=rotate-90), leider dreht sich aber der Wert mit :( Gibt es da eine Lösung?
Weiterhin möchte ich den Hintergrund des Spinners komplett transparent. Zusätzlich müsste noch der Wert "off" angezeigt werden wenn das Thermostat abgeschaltet ist.
Hat da jemand eine Idee?

Siehe Foto...
Titel: Antw:Brauche Hilfe beim Advanced Spinner
Beitrag von: Tobias am 08 August 2018, 14:39:32
Habe noch etwas rumprobiert.
Ich  bekomme die Icons nicht größer, egal ob ich als class noch "big" oder "gigantic" angebe. Da tut sich nix.
Das Problem das der Wert sich ebenfalls dreht, ihabe ich noch nicht wegbekommen.
<div data-type="spinner"
  style="position:fixed;top:230px;left:690px"
  data-device="HZ_DG_Clima"
  data-get="desired-temp"
  data-icon-left="oa-control_arrow_leftward"
  data-icon-right="oa-control_arrow_rightward"
  data-width="390px"
  data-height="0px"
  data-max="30"
  data-min="5"
  data-step="0.5"
  data-off="off"
  class="valueonly rotate-90 large">
</div>
Titel: Antw:Brauche Hilfe beim Advanced Spinner
Beitrag von: derHeimwerker am 09 August 2018, 10:38:04
Hallo Tobias,

ich kann dir zwar nicht weiterhelfen, aber der Spinner sieht wirklich gut aus. Kannst du die Formatierung hier mal posten ?
Vielen Dank

Gruß
Tom
Titel: Antw:Brauche Hilfe beim Advanced Spinner
Beitrag von: Tobias am 09 August 2018, 11:41:25
Das ist ein komplettes Hintergrundbild. Daruf ist alles pixelgenau ausgerichtet.
Nur den Spinner bekommen ich eben nicht sauber angepasst :( Anpassung im CSS ist klar, aber wo? Und Wie? Ich will ja nicht ALLE Spinner ändern sondern nur diesen.... Ich hoffe hier hat jemand einen zündenden Hinweis.

Hier ein Bild der Gesamtansicht damit ihr wisst was ich gemacht habe und was mein Problem ist.
Das Ganze läuft auf einem Nexus7 (1stGen)
Titel: Antw:Brauche Hilfe beim Advanced Spinner
Beitrag von: devil77 am 09 August 2018, 11:47:58
Hallo Tobias,
bin zwar kein Experte aber ich würde es wie folgt machen.
- füge eine zusätzliche Klasse hinzu, z.Bsp. "value_rotate"
- in deine user css datei fügst Du dann die Klasse ein

Damit sollte sich der Wert rotieren lassen. Evtl. musst Du die Definition noch für verschiedene Browser ergänzen damit es überall gleich aussieht.
Die extra Klasse ist nötig damit sich nicht ALLE spinner Werte auf deiner Seite drehen.
Mit der Definition der Klasse sollte sich genau der Value Wert in dem Spinner mit valueonly ansprechen lassen.
Auf die schnelle habe ich das bei mir getestet und es sollte funktionieren.

user css
.spinner.valueonly.value_rotate > .spinnerText {
    transform: rotate(35deg);
}


HTML Datei
<div data-type="spinner"
  ......
  class="valueonly rotate-90 large value_rotate">
</div>

[/quote]

Grüße Sten