id Tags für Widgets um diese unterschiedlich zu formatieren....

[netsrac]

Da wollte ich die Visu am Wochenende meinem Mausi vorstellen und der Zweite Satz von Ihr ließ mich gleich auf ein Problem stoßen.

Im Moment habe ich auf dem Startscreen z.B. die aktuelle Außentemperatur sowie Min und Max Wert.

Nun meinte Mausi aber, dass es doof ist, dass der aktuelle Wert genauso groß (bzw. klein) dargestellt wird wie die anderen - für sie unwichtigen - Werte.

Der Wunsch kam also auf, bestimmt Werte / Zustände (also vermutlich Widgets) unterschiedlich groß darzustellen.

Hat da schonmal jemand dran gedacht?!

Könnte man nicht jedem Widget optional noch ein "id-div" mitgeben, was man dann über die custom.css selber definieren kann?!

Dass das natürlich schon sehr an die Interna geht und mit 'nem geplanten Editor kaum irgendwie vernünftig gestaltet werden kann ist ja fast klar...

Meinungen sind herzlich willkommen :.-)

Gruß, Netsrac

[netsrac]

Okay...keine "div id's", sondern nur eine "class", aber so könnte man es machen. Bis jetzt nur bei mir local im Info-Widget eingebaut, aber die zusätzliche Auswertung eines Parameters "class" erlaubt dann sowas wie im Screenshot.

Sollte man das allgemein für alle Widgets einführen?!

Gruß, Netsrac

[Bodo]

Hoi

Sieht gut aus

[netsrac]

Okay, habe es mal für "info" und "group" committed. Hier nochmal ein Beispiel:

custom.css:

.bigtemp {
    padding: 0;
    margin: 0;
    color: #75d5ff;
    min-height: 0mm;
    font: bold 8mm "Lucida Grande", Lucida, Verdana, sans-serif;
}

.tempclass {
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

.tempclass > div > h2 {
    color: #eaeaea;
    background-image: none;
    background-color: #0096ff;
}

In meiner Config dann wie folgt:

      <group name="Temperatur Außen" class="tempclass">
        <layout colspan="3" />

        <group nowidget="true">
          <layout colspan="3" />
          <info format="%.1f °C" class="bigtemp" align="center">
            <layout colspan="1.5" />
            <address transform="DPT:9">5/1/1</address>
          </info>
          <info format="%.0f %" class="bigtemp" align="center">
            <layout colspan="1.5" />
            <address transform="DPT:5.001">5/1/2</address>
          </info>
          <break />
          <info format="%.1f °C" align="center">
            <layout colspan="1.5" />
            <label><icon name="temp_temperatur_min" /></label>
            <address transform="DPT:9">5/1/20</address>
          </info>
          <info format="%.1f °C" align="center">
            <layout colspan="1.5" />
            <label><icon name="temp_temperatur_max" /></label>
            <address transform="DPT:9">5/1/21</address>
          </info>
        </group>

      </group>
      <break />

Was mit jetzt noch nicht gelungen ist, ist es den Rahmen umzufärben. Ich glaube aber nur, dass ich mich da im CSS verfangen habe...

Wenn's gefällt, dann sollte man es flächendeckend für alle Widgets einbauen...


Gruß, Netsrac

[daviid]

Sieht cool aus, also wollt ich das auch gleich haben.

Hab folgendes in meine Config:

<group name="Temperatur Außen" class="tempclass">
	<group nowidget="true">
		<layout colspan="3" />
		<info format="%.1f °C" class="bigtemp" align="center">
			<layout colspan="1.5" />
			<address transform="DPT:9">4/3/0</address>
		</info>
		<info format="%.0f %" class="bigtemp" align="center">
			<layout colspan="1.5" />
			<address transform="DPT:5.001">5/1/2</address>
		</info>
			
		<break />
		
		<info format="%.1f °C" align="center">
			<layout colspan="1.5" />
			<label><icon name="temp_temperatur_min" /></label>
			<address transform="DPT:9">7/3/0</address>
		</info>
		<info format="%.1f °C" align="center">
			<layout colspan="1.5" />
			<label><icon name="temp_temperatur_max" /></label>
			<address transform="DPT:9">7/3/1</address>
		</info>
	</group>
</group>

Und den css code in die designs\metal\custom.css

Aber irgendwie ist nix farbig sondert sieht aus wie im Anhang.

Hab ich was vergessen?
Hab grad noch nen SVN Update gemacht, nützt abe nix.

[Chris M.]

Ich bin ehrlich: wie ich's gelesen hatte (zuerst in den SVG Commit Logs...) war ich sehr skeptisch. Ich hätte hier eine direkte Adressierung über CSS Selectors besser gefunden (ggf. mit Erweiterung des Codes um die id-Attribute geschickt zu befüllen)

Mit dem Beispiel hast Du mich aber überzeugt, dass eigene Classes Sinn machen.

Meine o.g. Angst hat sich darauf bezogen, dass Anwender sich hier leicht selber in den Fuß schießen können.
=> Vorschlag: ändere doch den Code so, dass der Klasse noch eine Prefix wie "custom_" davor gesetzt wird.

Dein Code der Config wäre gleich, die CSS müsste dann halt in etwa so aussehen:

.custom_bigtemp {
    ...
}

.custom_tempclass {
    ...
}

.custom_tempclass > div > h2 {
    ...
}

=> So ließen sich die Namensräume leicht trennen und dafür sorgen, dass auch zukünftige CV-Änderungen nichts beim User kaputt machen.

[kleinklausi]

Hat da schonmal jemand dran gedacht?!

Grad am WE habe ich darüber nachgedacht. Deine Custome CSS Lösung gefällt mir.
Allerdings hatte ich gehofft, dass man irgendwie eine Lösung finden kann bei der man ein z.B. colspan=2 und rowspan=2 angibt. Bei expand=true oder so ähnlich wird dann das Widget auf die Größe hochskaliert.

Ich fände es so recht logisch. Obs sinnvoll umzusetzten ist, habe ich bisher keinen Plan.

Gruß Moritz

[netsrac]

Sieht cool aus, also wollt ich das auch gleich haben.
Und den css code in die designs\metal\custom.css

Aber irgendwie ist nix farbig sondert sieht aus wie im Anhang.

Hab ich was vergessen?

Gibt mal die Adresse von Deiner custom.css direkt oben im Browser ein:

http://meinrechner.bla/visu/designs/metal/custom.css

Sind dort die Änderungen schon zu sehen?! Wenn nicht, dann mal Shift-Taste drücken und dabei auf den Reload Button gehen.

Bei meinen Tests hat mir immer wieder der Browser Cache übel mitgespielt :-)


Gruß, Netsrac

[netsrac]

Mit dem Beispiel hast Du mich aber überzeugt, dass eigene Classes Sinn machen.

Meine o.g. Angst hat sich darauf bezogen, dass Anwender sich hier leicht selber in den Fuß schießen können.
=> Vorschlag: ändere doch den Code so, dass der Klasse noch eine Prefix wie "custom_" davor gesetzt wird.

Okay...die Idee ist nicht schlecht. Werde ich noch machen.

Das die eigenen Classes sicherlich ein Geek-Feature sind ist klar. Sie sollen auch nix anderem im Weg stehen.

Wenn jemand eine bessere Idee hat, wie man die Formatierungen ändern kann, ist das gerne gesehen.

Wobei eine zusätzliche class eigentlich nix im Weg stehen sollte. Wer sie nicht will, gibt sie einfach nicht als Parameter an :-)

Gruß, Netsrac

[netsrac]

Okay...nochmal geändert - die angegebene Class bezieht sich jetzt auf dem identifier "custom_class".

Sprich, wenn man im "Info" oder "group" widget den parameter "class='xyz'" angibt, so kann man diesen im custom.css mit

.custom_xyz

entsprechend formatieren.

Passend zu meinem oben gezeigten Beispiel muss das CSS dann so geändert werden:

.custom_bigtemp {
        padding: 0;
        margin: 0;
        color: #75d5ff;
    min-height: 0mm;
        font: bold 8mm "Lucida Grande", Lucida, Verdana, sans-serif;
}

.custom_tempclass {
        font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

.custom_tempclass > div > h2 {
        color: #eaeaea;
        background-image: none;
        background-color: #0096ff;
}

Gruß, Netsrac

P.S. Brauchen wir das noch bei anderen Widgets?!

[daviid]

Der Cache wars natürlich ...


Wo hast du eigentlich die temp_min/max Icons her?
Selber aus den 480*480 pngs verkleinert?

[netsrac]

Der Cache wars natürlich ...


Wo hast du eigentlich die temp_min/max Icons her?
Selber aus den 480*480 pngs verkleinert?

Jupp...eine loop direkt in der Shell. Hatte leider noch keine Zeit, da ein Script zu bauen...sonst hätte ich es schon hochgestellt...

[iwan]

P.S. Brauchen wir das noch bei anderen Widgets?!

Bei der Uhr würde das noch Sinn machen...

Grüsse
Iwan

[netsrac]

Bei der Uhr würde das noch Sinn machen...

Du meinst bei der strftime?! Die kannst Du ja auch schon heute formatieren und da man die in der Regel immer gleich anzeigt, braucht man dort ja auch keine verschiedenen classes, oder?!

.text .strftime_value {
        width: 100%;
        text-align: right;
        right: 10px;
        position: fixed;
        top: -5px;
        margin-top: 0px;
}

Damit verschiebe ich die Zeit oben in die Adressleiste. Noch nicht perfekt, aber das liegt an meinem Knoten im CSS Gehirn...

Gruß, Netsrac

[MicHau]

Du und peuter implementiert das gleiche Feature, du nennst es Classes, er verwendet Flavour. Siehe hier

Ich würde sagen, ihr solltet euch angleichen