Neues Design: Metal

[haegar80]

Probier mal:

 
<text>Textxxxxx
 <layout colspan="1" rowspan="2" />
</text>

So funktionierts bei mir.

Nee, das bewirkt das gleiche Ergebnis.

Mir fehlt hier noch die richtige Lösung => hätt gerne Auf/ab + Lamelle auf/zu und jeweils die Position in % dazu. Ideen?

Ich verzichte auf die % Angabe, weil die eh nix genaues aussagt. Der Slider reicht mir vollkommen.
Warum willst du kein Stopp in dem Wigdet?
Ich könnte es mir es in einer Grop mit mehreren Reihen so vorstellen vorstellen:
1. Symbol mit Fensterstatus (rowspan = 2) Auf/Stop/Ab (ohne Labels)
3. Slider Behanghöhe
4. Symbol Lamelle (rowspan = 2) Auf/Stop/Ab (ohne Labels)
5. Slider Lamellenposition

Gruß
Sascha

[Robert_Mini]

...Metal Design ist bis jetzt mit Abstand das coolste Design! Jetzt braucht keiner mehr sagen, daß die CV nicht schick ist...

FullAck! Wobei für's Smartphone gefällt mir das discreet slim am besten zusagt.

Beim Umstellen meiner Release Visu mit Pure auf SVN mit Metal sind mit folgende Dinge aufgefallen:
Bei Textelementen wird anscheinend colspan ignoriert. das sieht dann wie im Anhang aus.

Probier mal:

 
<text>Textxxxxx
 <layout colspan="1" rowspan="2" />
</text>

So funktionierts bei mir.

Deine Trigger-Kombi für die Jalousien muss ich mir morgen mal genauer ansehen. Mir fehlt hier noch die richtige Lösung => hätt gerne Auf/ab + Lamelle auf/zu und jeweils die Position in % dazu. Ideen?

lg Robert

[haegar80]

Hallo zusammen,

das Metal Desing ist bis jetzt mit Abstand das coolste Design! Jetzt braucht keiner mehr sagen, daß die CV nicht schick ist...

Beim Umstellen meiner Release Visu mit Pure auf SVN mit Metal sind mit folgende Dinge aufgefallen:

Bei Textelementen wird anscheinend colspan ignoriert. das sieht dann wie im Anhang aus.

<group name="Alle Jalousien/Rolladen" nowidget="true">
	<layout colspan="6" />
	<trigger value="1" mapping="AufAbSymbol" >
		<layout colspan="1" align="center"/>
		<address transform="DPT:1.008" readonly="false" variant="">3/0/0</address>
	</trigger>
	<trigger value="1" mapping="AnAusSymbol" >
		<layout colspan="1" align="center"/>
		<address transform="DPT:1.001" readonly="false" variant="">3/0/1</address>
	</trigger>
	<trigger value="0" mapping="AufAbSymbol" >
		<layout colspan="1" align="center"/>
		<address transform="DPT:1.008" readonly="false" variant="">3/0/0</address>
	</trigger>
	<break/>
	[B]<text align="left" colspan="2">Referenzfahrt</text>[/B]
	<trigger value="1" mapping="AufAbSymbol" >
		<layout colspan="1" align="center"/>
		<address transform="DPT:1.008" readonly="false" variant="">3/0/3</address>
	</trigger>
	<trigger value="0" mapping="AufAbSymbol" >
		<layout colspan="1" align="center"/>
		<address transform="DPT:1.008" readonly="false" variant="">3/0/3</address>
	</trigger>
</group>

Bei info Elementen mit Symbolen geht die styling Information verloren. Mit Text wird der Text je nach Styling eingefärbt.
Der Slider hat nicht die volle Breite, wenn kein Label verwendet wird. (siehe Bild)

<group name="Fenster/Rolladen">
	<layout colspan="4" />
	[B]<info mapping="GesamtAufZu" styling="GrünRot" align="center">[/B]
		<layout colspan="1" />
		<address transform="DPT:1.001" readonly="false" variant="">6/2/210</address>
	</info>
	<trigger value="1" mapping="AufAbSymbol" align="center">
		<layout colspan="1" />
		<address transform="DPT:1.008" readonly="false" variant="">3/2/210</address>
	</trigger>
	<trigger value="1" mapping="AnAusSymbol" align="center">
		<layout colspan="1" />
		<address transform="DPT:1.001" readonly="false" variant="">3/2/211</address>
	</trigger>
	<trigger value="0" mapping="AufAbSymbol" align="center">
		<layout colspan="1" />
		<address transform="DPT:1.008" readonly="false" variant="">3/2/210</address>
	</trigger>
	<break/>
	[B]<info mapping="AufZuTuerSymbol" styling="GrünRot" align="center">[/B]
		<layout colspan="1" rowspan="2"/>
		<address transform="DPT:1.001" readonly="false" variant="">6/2/230</address>
	</info>
	<trigger value="1" mapping="AufAbSymbol" align="center">
		<layout colspan="1" />
		<address transform="DPT:1.008" readonly="false" variant="">3/2/230</address>
	</trigger>
	<trigger value="1" mapping="AnAusSymbol" align="center">
		<layout colspan="1" />
		<address transform="DPT:1.001" readonly="false" variant="">3/2/231</address>
	</trigger>
	<trigger value="0" mapping="AufAbSymbol" align="center">
		<layout colspan="1" />
		<address transform="DPT:1.008" readonly="false" variant="">3/2/230</address>
	</trigger>
	<slide min="0" max="100">
		[B]<layout colspan="3" />[/B]
		<address transform="DPT:5.001" readonly="false" variant="">3/2/232</address>
		<address transform="DPT:5.001" readonly="true" variant="">3/2/235</address>
	</slide>
	<break/>
	[B]<info mapping="AufZuFensterSymbol" styling="GrünRot" align="center">[/B]
		<layout colspan="1" rowspan="2"/>
		<address transform="DPT:1.001" readonly="false" variant="">6/2/220</address>
	</info>
	<trigger value="1" mapping="AufAbSymbol" align="center">
		<layout colspan="1" />
		<address transform="DPT:1.008" readonly="false" variant="">3/2/220</address>
	</trigger>
	<trigger value="1" mapping="AnAusSymbol" align="center">
		<layout colspan="1" />
		<address transform="DPT:1.001" readonly="false" variant="">3/2/221</address>
	</trigger>
	<trigger value="0" mapping="AufAbSymbol" align="center">
		<layout colspan="1" />
		<address transform="DPT:1.008" readonly="false" variant="">3/2/220</address>
	</trigger>
	<slide min="0" max="100">
		[B]<layout colspan="3" />[/B]
		<address transform="DPT:5.001" readonly="false" variant="">3/2/222</address>
		<address transform="DPT:5.001" readonly="true" variant="">3/2/225</address>
	</slide>
</group>

Bitte versteht das nicht als Kritik! Ich denke ich helfe euch mit meinen bescheidenen Versuchen.

Danke
Sascha

[Robert_Mini]

Hallo Tobias!

Hat ein wenig gedauert mit dem update (war bis gestern auf Dienstreise). Alles soweit perfekt, nur mit Styling/Mapping hab ich noch ein Problem (werd aber eigenen Thread aufmachen, um diesen hier dem "Design Metal" vorzubehalten.

Kurz zusammengefasst: CometVisu + Metal + Icons == tolle Sache

und die Gruppen im Metal design sind eigentlich auch für das editieren der xml ganz hilfreich, da es im Code wesentlich strukturierter wirkt.

Danke an dieser Stelle mal an alle Entwickler!!!

lg
Robert

[peuter]

1 pixel fehlt allerdings noch , siehe Anhang.

Bei mir hatte das gepasst, hab den Wert nochmal ein bischen erhöht, hoffe jetzt passt es.

Was mir noch aufgefallen ist (konstruktiv gemeint!!):
Bei den Widgets fehlt die untere Begrenzungslinie. Dies tritt auch innerhalb einer Gruppe auf. Dort kann man es mit einem leeren Textfeld umgehen.

Danke für den Hinweis, ist gefixt.

[Robert_Mini]

Das Problem ist mir auch schon aufgefallen, tritt immer dann auf, wenn man Elemente mit Icons in der selben Zeile mit Elementen ohne Icons hat. Die Elemente mit Icons sind ein wenig höher als die ohne und somit sieht das immer ein wenig komisch aus.
In rev. 1003 sollte das Problem behoben sein. Außerdem hab ich wie bereits beschrieben, die colspans für die Top-/Bottom-navbars aktiviert. Abschalten kann man dass durch hinzufügen von <layout colspan="0"/>, dann erhält man wieder den altbekannten Look. Dadurch lassen sich die colspans übrigens auch für Elemente außerhalb der Navbars abschalten. Da fällt mir zwar spontan kein vernünftiger Use-Case für ein, aber wer weiß vielleicht hat ja jemand Verwendung dafür.

Gruß
Tobias

Super, Danke!

1 pixel fehlt allerdings noch , siehe Anhang.

Was mir noch aufgefallen ist (konstruktiv gemeint!!):
Bei den Widgets fehlt die untere Begrenzungslinie. Dies tritt auch innerhalb einer Gruppe auf. Dort kann man es mit einem leeren Textfeld umgehen.

Bin echt begeistert vom Design.

lg und Danke
Robert M.

[peuter]

Wenn man <info> ohne Icon mit <Multitrigger> kombiniert, ist der Trennstrich zu kurz (im Anhang rote Markierung).
Ist auch im <info> ein Icon, dann passt's (gleich darunter Fenster mit icon).

Das Problem ist mir auch schon aufgefallen, tritt immer dann auf, wenn man Elemente mit Icons in der selben Zeile mit Elementen ohne Icons hat. Die Elemente mit Icons sind ein wenig höher als die ohne und somit sieht das immer ein wenig komisch aus.
In rev. 1003 sollte das Problem behoben sein. Außerdem hab ich wie bereits beschrieben, die colspans für die Top-/Bottom-navbars aktiviert. Abschalten kann man dass durch hinzufügen von <layout colspan="0"/>, dann erhält man wieder den altbekannten Look. Dadurch lassen sich die colspans übrigens auch für Elemente außerhalb der Navbars abschalten. Da fällt mir zwar spontan kein vernünftiger Use-Case für ein, aber wer weiß vielleicht hat ja jemand Verwendung dafür.

Gruß
Tobias

[Robert_Mini]

Eine andere Möglichkeit wäre, die colspans durch <layout colspan="0"/> ausschalten zu können.

Fände ich eine gute Lösung.

Eine Kleinigkeit ist mir noch aufgefallen:
Wenn man <info> ohne Icon mit <Multitrigger> kombiniert, ist der Trennstrich zu kurz (im Anhang rote Markierung).
Ist auch im <info> ein Icon, dann passt's (gleich darunter Fenster mit icon).

Ändert aber nichts daran, dass das Design wirklich toll aussieht und mit den Navbars etc. richtig intuitiv zu bedienen ist.

Btw: Hat jemand eine geschickte Lösung für Jalousie auf/ab + Lamelle auf/zu kombiniert mit der %-Anzeige der beiden Werte. Wie man im Anhang sieht, kämpfe ich gerade damit...

lg Robert

[peuter]

Eine andere Möglichkeit wäre, die colspans durch <layout colspan="0"/> ausschalten zu können. Das könnte man dann nicht nur in der Navbar benutzen. Dadurch hätte man Elemente deren Breite nicht durch die colspans vorgegeben wäre.
Problem dabei ist nur, das jeder der eine Topnavbar im Metal-Design benutzt seine Config anpassen müsste um das bisherige Layout zu erhalten. Allerdings halte ich das für zumutbar, wer eine Entwickler-Version aus dem SVN produktiv einsetzt sollte Kummer gewohnt sein ;-)

[JNK]

Danke für Deinen Einsatz. Ich habe mir jetzt einen Workaround gebastelt, solange das kein anderer haben will, würde ich sagen, es ist ok so. Ich habe in die resizeCustom von oben noch

$('#navbarTop .widget_container').each(function(idx, e) { e.style.cssText = e.style.cssText.replace(/;/, ' !important; '); });

eingefügt, und seitdem ist alles gut.

Danke,

der Jan

[peuter]

Ich hab mal nachgeschaut, der entsprechende CSS-Code, der die Colspans in der Topnavbar deaktiviert wurde mit Rev 963 am 15.8. eingecheckt.

#navbarTop .navbar .widget_container, #navbarBottom .navbar .widget_container {
    width: auto !important;
}

Ich weiß auch nicht wie ich die colspans mit der jetzigen Optik der Topnavbar unter einen Hut bringen kann. Kannst Du mir eventuell mal einen Auszug aus Deiner Config schicken, für die Topnavbar. Dann kann ich mir das am Wochenende mal ansehen. Vielleicht fällt mir ja doch noch ne Lösung ein.

[JNK]

Hallo,

Danke erstmal für den schnellen Fix. Die colspans gingen bei mir und ehrlich gesagt fand ich das auch gut...

Gruß,

der Jan

[peuter]

Die erste Gruppe hat die Klasse "root", die andere nicht. Wenn ich diese Klasse entferne, erreiche ich das zweite Bild, was m.E. richtig ist.

Allerdings habe ich weder in page.js, group.js, navbar.js oder der templateengine.js irgendein Stück Code gefunden, dass diese Klasse hinzufügt. Weiss jemand, wo das herkommt, was das eigentlich tun soll und wie man das behebt?

Der ensprechende Code ist in der design_setup.js und hat den Sinn, das aussehen des Pagejumps zur Startseite etwas anzupassen, damit sich dieser optisch von den anderen abhebt. Das soll aber nur passieren, wenn der Pagejump der oberste ist und alleine in einer Group steht. Da gabs aber ein Problem, ist jetzt gefixt.

Beim Update auf die aktuellste Version ist mir noch aufgefallen: Seit wann geht colspan in der top-Navbar nicht mehr?

Also beim Metal-Design ist das bewusst abgeschaltet, IMHO schon seitdem die Topnavbar in seinem jetzigen Aussehen existiert. War das bei Dir bis jetzt anders?

Gruß
Tobias

[JNK]

folgendes Problem: navbar links:

   <navbar position="left" dynamic="true" width="200px">
      <group name="Funktionen">
        <pagejump target="id_0" name="Start">
           <label> 
             <icon name="steuer_home" /> 
          </label> 
        </pagejump>
        <pagejump target="Beleuchtung" name="Beleuchtung" />
        <pagejump target="Szenen" name="Szenen" />
        <pagejump target="Schaltfunktionen" name="Schaltfunktionen" />
        <pagejump target="Beschattung" name="Beschattung" />
        <pagejump target="Temperatur" name="Temperatur" />
        <pagejump target="Hausstatus" name="Hausstatus" />
      </group>
      <group name="Räume">
        <pagejump target="Wohnesszimmer" name="Wohnen">
          <label>
            <icon name="it_fernsehen" />
          </label>
        </pagejump>
        <pagejump target="Küche" name="Küche">
          <label>
            <icon name="szene_kochen" />
          </label>
        </pagejump>
        <pagejump target="Badezimmer" name="Bad">
          <label>
            <icon name="szene_pool" />
          </label>
        </pagejump>
        <pagejump target="Arbeitszimmer" name="Arbeitszimmer">
          <label>
            <icon name="zeit_notiz" />
          </label>
        </pagejump>
      </group>
    </navbar>

erzeugt das erste Bild unten. Die obere Group ist unten links abgerundet und hat rechts einen grauen Strich. Im DOM ist der Unterschied: Die erste Gruppe hat die Klasse "root", die andere nicht. Wenn ich diese Klasse entferne, erreiche ich das zweite Bild, was m.E. richtig ist.

Allerdings habe ich weder in page.js, group.js, navbar.js oder der templateengine.js irgendein Stück Code gefunden, dass diese Klasse hinzufügt. Weiss jemand, wo das herkommt, was das eigentlich tun soll und wie man das behebt?

function resizeCustom() {
  $('.widget.group.root').removeClass('root');	
}

$( window ).unbind('resize', resizeCustom).bind('resize',resizeCustom);

in der design_custom.js macht alles gut, aber so richtig prall ist das nicht. Beim Update auf die aktuellste Version ist mir noch aufgefallen: Seit wann geht colspan in der top-Navbar nicht mehr?

Gruss,

der Jan

Edit: Fehler getestet in aktuellen FF und Chrome unter Debian Wheezy, Fix im Chrome.

[Bodo]

Hoi

Aaah, super, danke.