Neues Design: Metal

Robert_Mini antwortet

24.10.2012, 21:22
Zitat von Chris M. Beitrag anzeigen

@Robert: Der Buffer sieht ganz nett aus. Ist's ein SVG? Dann könntest Du ja mal den Pipe-o-Mat bzw. v.a. den Flow-o-Mat darauf ansetzten und da drinnen den Fluss hübsch animieren (vgl. https://knx-user-forum.de/cometvisu/...r-heizung.html)...

Leider nur ein png von der Herstellerhomepage.
Aber hier den Fluss der FBH, HK, WW und Solar zu animieren, dass wär einfach nur cooooool.

Werd deinen Link noch weiter studieren, aber ein wenig Hilfe wird's dazu brauchen. Das HowTo ist versprochen.

Welche (freien) Programme können svg's erzeugen?

lg Robert
Einen Kommentar schreiben:
Chris M. antwortet

24.10.2012, 20:55
Zitat von Robert_Mini Beitrag anzeigen

PS: Falls sich wer wundert => das sind noch nicht die tatsächlichen Temperaturen im Buffer....

@Robert: Der Buffer sieht ganz nett aus. Ist's ein SVG? Dann könntest Du ja mal den Pipe-o-Mat bzw. v.a. den Flow-o-Mat darauf ansetzten und da drinnen den Fluss hübsch animieren (vgl. https://knx-user-forum.de/cometvisu/...r-heizung.html)...

Zitat von peuter Beitrag anzeigen

Ich habe diesbezüglich einige Änderungen eingecheckt, probier das mal aus.

@Tobias: Mit dem Commit bin ich nicht glücklich - ein Design abhängiger Code in templateengine.js geht IMHO gar nicht.

Ich sehe da zwei Möglichkeiten:

Entweder über die Dateien des Designs (geht z.B. nicht ein "overflow:hidden !important" an der richtigen Stelle im eigenen CSS?)

Oder das ganze Thema abstrahieren und eine generische Lösung finden (hab nicht im Detail reingeschaut, wie das am besten gehen soll. Aber da sollte sich schon was finden lassen)
Einen Kommentar schreiben:
Robert_Mini antwortet

24.10.2012, 19:01
Zitat von peuter Beitrag anzeigen

Ich habe diesbezüglich einige Änderungen eingecheckt, probier das mal aus.
Tobias

Danke, sieht gut aus!!!!

Siehe Anhang!

Meiner Meinung nach würde ich einfach die doppelte Linie an den Grenzen zwischen den Widgets akzeptieren. Das macht die ganze Rechnerei mit Positionierung doch einfacher, oder? Leere Felder müsste man dann halt mit leeren Text-Feldern auffüllen (wie ich in der Gruppe oben rechts noch nicht gemacht).

Noch 2 Fragen:
Ist es möglich den Bezugsbereich für den Zeilenumbruch beim Infowidget zu vergrößern.
Bei Solar VL könnte das VL doch locker in der gleichen Zeile stehen!

Wie könnte ich in mit no-widget gruppierten Infotriggern doch wieder den Trennstrich erzwingen (Buffer Gruppe)?
Hier wären weitere Optionen für Gruppen ideal, wie "Trennlinien zu benachtbarten Widgets" ein/aus. Aber ich weiß, das ist schon jammern auf sehr hohem Niveau!

Lg
Robert
Angehängte Dateien

Solar_group_nowidget2.png (269,6 KB, 261x aufgerufen)
Einen Kommentar schreiben:
peuter antwortet

24.10.2012, 17:45
Zitat von Robert_Mini Beitrag anzeigen

Folgendes Problem:
Um links 2 Gruppen und rechts 1 Gruppe darzustellen, braucht man um die beiden Gruppen eine Gruppe

Code:

<group nowidget="true">

damit werden leider die beiden Inneren Gruppen nicht mehr richtig dargestellt => keine Abstand zwischen den Gruppen und keine runden Ecken bzw. auch der Abstand zum Navbar links und oben stimmt so nicht mehr. Weiters werden die Linien zw. den Widgets nicht mehr angezeigt (zB zw. den Diagrammen).

Ich habe diesbezüglich einige Änderungen eingecheckt, probier das mal aus.

Zitat von Robert_Mini Beitrag anzeigen

Ganz hab ich das ganze noch nicht verstanden. Man sieht die Probleme damit auch schon auf der Demo-Seite ==> colspan/rowspan, aber dort werden generell keine runden Ecken gemacht, hängt das davon ab, ob die Gruppe einen Namen hat?

Eine nowidget-group soll eine möglichst unsichtbare Gruppierung von Elementen ermöglichen, d.h. die Gruppe selbst hat einen eckigen Rahmen, die Elemente in der Gruppe jedoch keinen. Die Idee dahinter ist es, z.B. einen Multitrigger nachbilden zu können, ohne dessen Beschränkungen zu haben.
Eine normale group hat den abgerundeten Rahmen, usw. ist also auch optisch als Gruppierung von Elementen zu erkennen und setzt sich von den umliegenden Elementen ab.
Ich hoffe das bringt ein wenig Licht ins Dunkel.

Zitat von haegar80 Beitrag anzeigen

ich habe noch etwas bei Groups gefunden, die 2 Zeilen hoch sind.
Irgendwie passen da die Höhen der Symbole nicht mit den Höhen der Trigger zusammen. Eigentlich sollte doch ad auch ein Strick dazwischen sein?

Also irgendwie passt dein Code-Beispiel nicht zum Screenshot. Groups mit nowidget="true" haben keinen abgerundeten Rahmen. Also nach bitte mal ein update vom SVN(inkl. Browsercache leeren usw.). Außerdem solltest Du sämtliche rowspan="1" Definitionen aus Deinem Code entfernen. Die sind nämlich überflüssig, da das der default-Wert ist und machen im Zweifelsfall nur unnötige Probleme. Ebenfalls sind die rowspan="2" Definitionen für die Gruppen überflüssig, da sich das automatisch aus dem Inhalt der Gruppen ergibt.

Also versuchs mal hiermit:

Code:

<group nowidget="true"> <layout colspan="1.5"/> <text align="left"> <layout colspan="0.5"/> <icon name="user_anwesend" /> </text> <toggle mapping="AnAusSymbol" styling="NeutralGrün" align="center"> <layout colspan="1"/> <address transform="DPT:1.001" readonly="false" variant="">10/2/16</address> <address transform="DPT:1.001" readonly="true" variant="">10/2/17</address> </toggle> <text align="left"> <layout colspan="0.5"/> <icon name="user_abwesend" /> </text> <toggle mapping="AnAusSymbol" styling="NeutralGrün" align="center"> <layout colspan="1"/> <address transform="DPT:1.001" readonly="false" variant="">10/2/18</address> <address transform="DPT:1.001" readonly="true" variant="">10/2/19</address> </toggle> </group> <group nowidget="true"> <layout colspan="1.5"/> <text align="left"> <layout colspan="0.5"/> <icon name="user_anwesend" /> </text> <toggle mapping="AnAusSymbol" styling="NeutralGrün" align="center"> <layout colspan="1"/> <address transform="DPT:1.001" readonly="false" variant="">10/2/16</address> <address transform="DPT:1.001" readonly="true" variant="">10/2/17</address> </toggle> <text align="left"> <layout colspan="0.5"/> <icon name="user_abwesend" /> </text> <toggle mapping="AnAusSymbol" styling="NeutralGrün" align="center"> <layout colspan="1"/> <address transform="DPT:1.001" readonly="false" variant="">10/2/18</address> <address transform="DPT:1.001" readonly="true" variant="">10/2/19</address> </toggle> </group>

Gruß
Tobias
Einen Kommentar schreiben:

haegar80 antwortet

23.10.2012, 22:50

Hallo zusammen,

ich habe noch etwas bei Groups gefunden, die 2 Zeilen hoch sind.
Irgendwie passen da die Höhen der Symbole nicht mit den Höhen der Trigger zusammen. Eigentlich sollte doch ad auch ein Strick dazwischen sein?

Code:

<group nowidget="true">
	<layout colspan="1.5" rowspan="2"/>
	<text align="left">
		<layout colspan="0.5" rowspan="1"/>
		<icon name="user_anwesend" />
	</text>
	<toggle mapping="AnAusSymbol" styling="NeutralGrün" align="center">
		<layout colspan="1" rowspan="1"/>
		<address transform="DPT:1.001" readonly="false" variant="">10/2/16</address>
		<address transform="DPT:1.001" readonly="true" variant="">10/2/17</address>
	</toggle>
	<text align="left">
		<layout colspan="0.5" rowspan="1"/>
		<icon name="user_abwesend" />
	</text>
	<toggle mapping="AnAusSymbol" styling="NeutralGrün" align="center">
		<layout colspan="1" rowspan="1"/>
		<address transform="DPT:1.001" readonly="false" variant="">10/2/18</address>
		<address transform="DPT:1.001" readonly="true" variant="">10/2/19</address>
	</toggle>
</group>
<group nowidget="true">
	<layout colspan="1.5" rowspan="2"/>
	<text align="left">
		<layout colspan="0.5" rowspan="1"/>
		<icon name="user_anwesend" />
	</text>
	<toggle mapping="AnAusSymbol" styling="NeutralGrün" align="center">
		<layout colspan="1" rowspan="1"/>
		<address transform="DPT:1.001" readonly="false" variant="">10/2/16</address>
		<address transform="DPT:1.001" readonly="true" variant="">10/2/17</address>
	</toggle>
	<text align="left">
		<layout colspan="0.5" rowspan="1"/>
		<icon name="user_abwesend" />
	</text>
	<toggle mapping="AnAusSymbol" styling="NeutralGrün" align="center">
		<layout colspan="1" rowspan="1"/>
		<address transform="DPT:1.001" readonly="false" variant="">10/2/18</address>
		<address transform="DPT:1.001" readonly="true" variant="">10/2/19</address>
	</toggle>
</group>

Gruß
Sascha

Angehängte Dateien

Aufzeichnen.JPG (16,2 KB, 292x aufgerufen)

Einen Kommentar schreiben:

Robert_Mini antwortet

23.10.2012, 22:26

Ich setze mal in diesem Thread fort, falls eigener Thread gewünscht, bitte verschieben.

Hallo Tobias!

Bin grad dabei mit colspan und rowspan und Gruppen meine Solarseite zu basteln.

Folgendes Problem:
Um links 2 Gruppen und rechts 1 Gruppe darzustellen, braucht man um die beiden Gruppen eine Gruppe

Code:

 <group nowidget="true">

damit werden leider die beiden Inneren Gruppen nicht mehr richtig dargestellt => keine Abstand zwischen den Gruppen und keine runden Ecken bzw. auch der Abstand zum Navbar links und oben stimmt so nicht mehr. Weiters werden die Linien zw. den Widgets nicht mehr angezeigt (zB zw. den Diagrammen).

Ganz hab ich das ganze noch nicht verstanden. Man sieht die Probleme damit auch schon auf der Demo-Seite ==> colspan/rowspan, aber dort werden generell keine runden Ecken gemacht, hängt das davon ab, ob die Gruppe einen Namen hat?

hier der Code, kommt meinem Wunsch ziemlich nahe, bis auf die ganz oben beschriebenen Probleme.

Vielleicht kannst du das mal ansehen,
lg
Robert

PS: Falls sich wer wundert => das sind noch nicht die tatsächlichen Temperaturen im Buffer....

Code:

<page name="Solar+Buffer">
        <layout colspan="12" />
   <group nowidget="true">
     <layout colspan="8" />
        <group name="Solarregler">
          <layout colspan="8" />    
          <info mapping="Ein_Aus" styling="GreenRed">
            <layout colspan="4" />
            <label>Betriebsstatus</label>
            <address transform="DPT:1.001" readonly="false" variant="">5/0/1</address>
          </info>
          <info format="%.1f °C">
            <layout colspan="4" />
            <label>Solar Rücklauf</label>
            <address transform="DPT:9.001" readonly="false" variant="">5/6/50</address>
          </info>
          <info format="%.0f Lux">
            <layout colspan="4" />
            <label>Außenhelligkeit</label>
            <address transform="DPT:9.004" readonly="false" variant="">10/1/9</address>
          </info>
        </group>
                <group name="Diagramme">
          <layout colspan="8" />
          <!--<diagram height="400px" width="700px" period="1" refresh="300" series="day" unit="°C" gridcolor="#707070" popup="false" previewlabels="true">
            <layout colspan="6"></layout>
            <rrd yaxis="temp" color="#FF0000" label="Solar RL [°C]">28.9B3172020000_temp</rrd>
          </diagram>        
          <diagram height="400px" width="700px" period="1" refresh="300" series="day" unit="Lux" gridcolor="#707070" popup="false" previewlabels="true">
            <layout colspan="6"></layout>
            <rrd yaxis="temp" color="#0000FF" label="Außenhelligkeit [Lux]">Helligkeit_Mittelwert_korr</rrd>
          </diagram>        -->
          <diagram height="400px" width="400px" period="1" refresh="300" series="day" unit="°C" gridcolor="#707070" popup="false" previewlabels="true" legendposition="nw">
            <layout colspan="4"></layout>
            <rrd yaxis="temp" color="#FF0000" label="Solar RL [°C]">28.9B3172020000_temp</rrd>
          </diagram>        
          <diagram height="400px" width="400px" period="1" refresh="300" series="day" unit="Lux" gridcolor="#707070" popup="false" previewlabels="true" legendposition="nw">
            <layout colspan="4"></layout>
            <rrd yaxis="temp" color="#0000FF" label="Außenhelligkeit [Lux]">Helligkeit_Mittelwert_korr</rrd>
          </diagram>
        </group>   
 </group>
        <group name="Buffer">
        <layout colspan="4" />
          <group nowidget="true">
            <layout colspan="1" />
            <info format="%.1f °C">
              <layout colspan="1" rowspan="2"/>
              <label>WW</label>
              <address transform="DPT:9.001" readonly="false" variant="">5/6/50</address>
            </info>
            <info format="%.1f °C">
              <layout colspan="1" rowspan="2"/>
              <label>HK</label>
              <address transform="DPT:9.001" readonly="false" variant="">5/6/50</address>
            </info>
            <info format="%.1f °C">
              <layout colspan="1" rowspan="2"/>
              <label>FBH</label>
              <address transform="DPT:9.001" readonly="false" variant="">5/6/50</address>
            </info>
            <info format="%.1f °C">
              <layout colspan="1" rowspan="2"/>
              <label>Solar</label>
              <address transform="DPT:9.001" readonly="false" variant="">5/6/50</address>
            </info>
            <info format="%.1f °C">
              <layout colspan="1" rowspan="2"/>
              <label>Solar VL</label>
              <address transform="DPT:9.001" readonly="false" variant="">5/6/50</address>
            </info>
          </group>
          <group nowidget="true">
            <layout colspan="3" rowspan="10"/>
            <image src="media/Schichtspeicher-PRO-CLEAN-R_multibox_image.png  ">
              <layout colspan="3" />
            </image>
          </group>
        </group>
      </page>

Angehängte Dateien

Solar_group_nowidget.png (267,2 KB, 297x aufgerufen)

Einen Kommentar schreiben:

peuter antwortet

15.10.2012, 11:26
Zitat von haegar80 Beitrag anzeigen

mir ist ein Schönheitsfehler aufgefallen:
info Widgets sind per default nicht genau 1 rowspan hoch.

Erst wenn man sie direkt mit rowspan="1" definiert passt das.

Das Problem liegt daran, das ich die widgets per css um einen Pixel nach oben und nach links verschiebe. Dadurch wird erreicht, das der Rahmen zwischen zwei widgets auch nur 1px breit ist (sonst wäre eben 2px breit, was IMHO nicht gut aussieht). Dies bringt allerdings die Höhenberechnung für die rowspans aus dem Tritt.
Ich habe in Rev. #1062 einen kleinen Workaround eingecheckt, der den Rahmen für rowspan-widgets entfernt. Dadurch passt die Höhe dann wieder. Allerdings gibt es dadurch dann einen optischen Unterschied zwischen diesen und den normalen widgets, daher bin ich mit der Lösung nicht 100%ig zufrieden.
Der Königsweg, wäre es eine andere Lösung dafür zu finden, das zwei widgets nebeneinander nicht zu einen doppelten Rahmen führen, aber mir fällt keine ein.
Vielleicht gibts ja hier jemanden, der eine Lösung parat hat. Ich bin für jeden Hinweis dankbar.

Zitat von lio123 Beitrag anzeigen

Die switches haben jedoch keine Funktion. (Die GA's habe ich selbstverständlich auch angepasst)
Hat dazu jemand eine Idee? muss ich da noch was an anderer Stelle anpassen?

Da kann ich nur raten, zumindest solltest Du mal das readonly="false" löschen. Das readonly Attribut gibt es so nicht mehr in der config. Ich glaube aber nicht, dass das Dein Problem löst.

Gruß
Tobias
Einen Kommentar schreiben:
MicHau antwortet

15.10.2012, 10:50
Zitat von lio123 Beitrag anzeigen

Des weitern hätte ich gern oben die Navbar, um die Geschosse auszuwählen, links sollen dann die Räume sein. Wie komme ich dazu? Kann mir dazu jemand seine Config senden?

Schau dir mal die Metal-Demo-Config an: SourceForge.net Repository - [openautomation] Contents of /CometVisu/trunk/visu/visu_config_metal.xml
Das sind im Topnavbar Pagejumps und die Pages haben einen linken Navbar definiert.
Einen Kommentar schreiben:
lio123 antwortet

15.10.2012, 10:28
Hallo,
ich passe gerade die Confi von Jumi an meine Bedürfnisse an.
Ich habe die page "Aussen bereits so weit fertig.
Nach einem Test ist alles in etwa so platziert wie es sein soll.
Die switches haben jedoch keine Funktion. (Die GA's habe ich selbstverständlich auch angepasst)
Hat dazu jemand eine Idee? muss ich da noch was an anderer Stelle anpassen?

<page name="Garten">
<group name="Terrasse" >
<layout colspan="12" />

<switch mapping="On_Off" styling="Red_Green">
<label>Licht Terrasse</label>
<address transform="DPT:1.001" readonly="false" variant="">1/3/0</address>
</switch>

<layout colspan="12" />

<switch mapping="On_Off" styling="Red_Green">
<label>Steckdosen Terrasse</label>
<address transform="DPT:1.001" readonly="false" variant="">4/5/10</address>
</switch>

</group>
<group name="Garage" >
<layout colspan="12" />

<switch mapping="On_Off" styling="Red_Green">
<label>Licht Garage</label>
<address transform="DPT:1.001" readonly="false" variant="">1/7/0</address>
</switch>

<layout colspan="12" />

</group>
<group name="Sonstiges" >
<layout colspan="12" />

<switch mapping="On_Off" styling="Red_Green">
<label>Lüftungsanlage</label>
<address transform="DPT:1.001" readonly="false" variant="">6/1/0</address>
</switch>

<layout colspan="12" />
<switch mapping="On_Off" styling="Red_Green">
<label>Rasenbewässerung Kreis A</label>
<address transform="DPT:1.001" readonly="false" variant="">4/5/20</address>
</switch>
<layout colspan="12" />
<switch mapping="On_Off" styling="Red_Green">
<label>Rasenbewässerung Kreis B</label>
<address transform="DPT:1.001" readonly="false" variant="">4/5/21</address>
</switch>
<layout colspan="12" />
<switch mapping="On_Off" styling="Red_Green">
<label>Haustür öffnen </label>
<address transform="DPT:1.001" readonly="false" variant="">X/X/X</address>
</switch>

</group>

Des weitern hätte ich gern oben die Navbar, um die Geschosse auszuwählen, links sollen dann die Räume sein. Wie komme ich dazu? Kann mir dazu jemand seine Config senden?

Danke und Grüße,
Lio

Danke und Grüße,
Einen Kommentar schreiben:
haegar80 antwortet

13.10.2012, 17:29
Hallo zusammen,

mir ist ein Schönheitsfehler aufgefallen:
info Widgets sind per default nicht genau 1 rowspan hoch.

Erst wenn man sie direkt mit rowspan="1" definiert passt das.

Beispiel:
- obere 2 Widgets mit rowspan="1"
- untere 2 Widgets ohne rowspan
Die Symbole sind immer rowspan="2"

Gruß
Sascha
Angehängte Dateien

Aufzeichnen.JPG (20,1 KB, 252x aufgerufen)
Einen Kommentar schreiben:
MicHau antwortet

12.10.2012, 19:42
Zitat von peuter Beitrag anzeigen

Ich habe den Hintergrund der Widgets in den Top-/Bottom Navbars entfernt. Die die Navbar selbst den selben Hintergrund hat, war das an der Stelle sowieso redundant.

Perfekt.
Mal wieder den Wald vor lauter Bäumen nicht gesehen.
Einen Kommentar schreiben:
peuter antwortet

12.10.2012, 19:14
Zitat von MicHau Beitrag anzeigen

Durch die folgende Änderung

Code:

.strftime { font-family: Helvetica, Arial, sans-serif; font-size: 5mm; }

wird die Schriftgröße kleiner (vorher 5.5mm) und damit wird auch das Widget im Navbar kleiner. Das sieht etwas unschön aus, weil die Uhrzeit einen anderen Hintergrund als der Rest erhält.

Ich habe den Hintergrund der Widgets in den Top-/Bottom Navbars entfernt. Die die Navbar selbst den selben Hintergrund hat, war das an der Stelle sowieso redundant. Dadurch erledigt das o.g. Problem gleich mit.

Gruß
Tobias
Einen Kommentar schreiben:
haegar80 antwortet

12.10.2012, 17:11
Zitat von peuter Beitrag anzeigen

Stimmt, noch was übersehen. Gefixt in Rev. #1054.

Wow, das ging ja flott!
Jetzt ist es richtig gut!!!

Danke
Sascha
Einen Kommentar schreiben:
MicHau antwortet

12.10.2012, 16:50
Durch die folgende Änderung

Code:

.strftime { font-family: Helvetica, Arial, sans-serif; font-size: 5mm; }

wird die Schriftgröße kleiner (vorher 5.5mm) und damit wird auch das Widget im Navbar kleiner. Das sieht etwas unschön aus, weil die Uhrzeit einen anderen Hintergrund als der Rest erhält.

Kann ich an einer anderen Stelle erzwingen, dass die Widgets im Navbar alle die gleiche Höhe haben? Habe leider noch zuwenig Kenntnis der CSS-Eigenheiten.
Angehängte Dateien

Screenshot.png (10,5 KB, 285x aufgerufen)
Einen Kommentar schreiben:
peuter antwortet

12.10.2012, 16:08
Zitat von haegar80 Beitrag anzeigen

Ganz passt es immer noch nicht. Jetzt wird die Formatierung angezeigt, aber der Wert ist immer noch 0%.

Stimmt, noch was übersehen. Gefixt in Rev. #1054.
Einen Kommentar schreiben:

Ankündigung

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben:

Einen Kommentar schreiben: