Neues Feature: colspan/rowspan

[JNK]

in diesem Zusammenhang:
es ist möglich links zB ein Element mit rowspan=2 zu definieren und rechts daneben 2 Elemente mit rowspan=1 zu positionieren - UMGEKEHRT also links 2 Elemente und rechts 1 Element "doppelhoch" geht nicht....

Das ist ein Problem, das nur indirekt mit den rowspans zusammenhängt, vorher gab es ja auch schon unterschiedlich hohe Widgets, die hatten das gleiche Problem.
Es läuft daraufhinaus, dass der Browser letztendlich von links nach rechts platziert und beim Anfangen einer neuen Zeile nicht guckt, ob ganz am Anfang noch Platz wäre, sondern bei dem am weitestens rechts stehenden Element, welches über die Unterkante des letzten platzierten Elements hinausgeht (konnte man das verstehen?).

Ich bin mir auch nicht sicher, ob sich das irgendwie umgehen lässt, ausser durch die Verwendung von Tabellen, aber dann müssten wir den Platzierer vermutlich selbst schreiben.

Noch etwas: ein "link"-element kann man (bis auf den Namen) nicht editieren: auch hier wäre row/colspan sinnvoll....

Ja, und wenn man das XML editiert funktioniert das auch. Das ist im Endeffekt das gleiche Problem, dass schon berichtet wurde, dass der Editor eingetragene colspans "vergisst", wenn man den Seiten Inhalt hinzufügt. Makki ist da dran.

Noch eine Frage: ich lese immer etwas über "groups": gibt es da etwas zu lesen oder wie geht das? Kann man da Elemente gruppieren?

Zu Lesen: nicht wirklich. Im Prinzip muss man ein <group name="xyz"> ... </group> um die Widgets machen, die gruppiert werden sollen. Das Problem ist nur, dass der Editor das nicht kann.

Gruss,

der Jan

[EPIX]

OK, danke...

ich habe die SVN geladen: da ist jetzt folgendes Problem: die Elementbreite passt nicht mehr (siehe rote Kreise)

[JNK]

Kannst Du mir mal Deine config schicken? Meine Visu sieht in dem Design eh fürchterlich aus, deswegen kann ich das nur begrenzt testen.

Gruss,

der Jan

[EPIX]

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" design="pure" xsi:noNamespaceSchemaLocation="visu_config.xsd">
  <meta>
    <plugins>
      <plugin name="colorchooser"/>
      <plugin name="diagram"/>
      <plugin name="upnpcontroller"/>
      <plugin name="gweather"/>
      <plugin name="jqclock"/>
      <plugin name="rss"/>
    </plugins>
    <mappings>
      <mapping name="Open_Close">
        <entry value="0">zu</entry>
        <entry value="1">offen</entry>
      </mapping>
      <mapping name="Close_Open">
        <entry value="0">offen</entry>
        <entry value="1">zu</entry>
      </mapping>
      <mapping name="On_Off">
        <entry value="0">Aus</entry>
        <entry value="1">An</entry>
      </mapping>
      <mapping name="Off_On">
        <entry value="0">An</entry>
        <entry value="1">Aus</entry>
      </mapping>
      <mapping name="KonnexHVAC">
        <entry value="auto">Auto</entry>
        <entry value="comfort">Komfort</entry>
        <entry value="standby">Stand By</entry>
        <entry value="economy">Economy</entry>
        <entry value="building_protection">Haus-Schutz</entry>
      </mapping>
    </mappings>
    <stylings>
      <styling name="Red_Green">
        <entry value="0">red</entry>
        <entry value="1">green</entry>
      </styling>
      <styling name="Green_Red">
        <entry value="0">green</entry>
        <entry value="1">red</entry>
      </styling>
      <styling name="Blue_Green_Red">
        <entry range_min="-100" range_max="20">blue</entry>
        <entry range_min="20" range_max="22">green</entry>
        <entry range_min="22" range_max="100">red</entry>
      </styling>
    </stylings>
    <statusbar>
      <status type="html"><![CDATA[
          <img src="icon/comet_64_ff8000.png" alt="CometVisu" /> by <a href="http://www.cometvisu.org/">CometVisu.org</a>
          - <a href=".?forceReload=true">Reload</a>
          - <a href="?config=demo">Widget Demo</a>
        ]]></status>
      <status type="html" condition="!edit" hrefextend="config"><![CDATA[
          - <a href="edit_config.html">Edit</a>
        ]]></status>
      <status type="html" condition="edit" hrefextend="all"><![CDATA[
          - <a href=".">normal Mode</a>
        ]]></status>
      <status type="html"><![CDATA[
          - <a href="check_config.php">Check Config</a>
        ]]></status>
    </statusbar>
  </meta>
  <page name="Start">
    <switch on_value="1" off_value="0" mapping="On_Off" styling="Green_Red" colspan="2" rowspan="2">
      <label>WM</label>
      <address transform="DPT:1.001" readonly="true" writeonly="false" variant="">3/1/27</address>
    </switch>
    <switch on_value="1" off_value="0" mapping="On_Off" styling="Green_Red" colspan="2" rowspan="2">
      <label>Trockner</label>
      <address transform="DPT:1.001" readonly="true" writeonly="false" variant="">3/1/21</address>
    </switch>
    <switch on_value="1" off_value="0" mapping="On_Off" styling="Red_Green">
      <label>küche</label>
      <address transform="DPT:1.001" readonly="false" variant="">1/3/90</address>
    </switch>
    <designtoggle/>
    <toggle mapping="On_Off" styling="Red_Green">
      <label>Drucker</label>
      <address transform="DPT:1.001" readonly="false" variant="">1/4/30</address>
    </toggle>
    <text/>
    <multitrigger button1label="Alles EIN" button1value="2" button2label="Alles AUS" button2value="2" button3label="TV" button3value="1" button4label="Seele" button4value="3" mapping="On_Off" styling="Blue_Green_Red" showstatus="true" rowspan="2">
      <address transform="DPT:6.020" readonly="false" writeonly="false" variant="">1/3/142</address>
    </multitrigger>
    <text colspan="6" rowspan="2">erree</text>
    <page name="Wetter">
      <image src="http://foreca.com/meteogram.php?loc_id=102766824&amp;lang=de" refresh="100"/>
      <rss src="https://knx-user-forum.de/external.php?type=rss2" refresh="10" limit="10" header="true" date="true" content="true" snippet="true" showerror="false" ssl="false" linktarget="_new" link="true" title="true"/>
    </page>
    <page name="Haustuer">
      <toggle mapping="On_Off" styling="Red_Green">
        <label>Vorplatz</label>
        <address transform="DPT:1.001" readonly="false" variant="">1/5/20</address>
        <address transform="DPT:1.001" readonly="true" variant="">1/5/21</address>
      </toggle>
      <line/>
      <image src="http://192.168.1.190/mjpg/video.mjpg" width="320" height="160" refresh="3">
        <label>Eingang</label>
      </image>
    </page>
    <page name="Wohnzimmer">
      <colorchooser>
        <label>Vitrine</label>
        <address transform="DPT:5.001" readonly="false" variant="r">1/3/112</address>
        <address transform="DPT:5.001" readonly="false" variant="b">1/3/113</address>
        <address transform="DPT:5.001" readonly="false" variant="g">1/3/114</address>
      </colorchooser>
      <upnpcontroller label="NAS" player_ip_addr="192.168.1.99" player_port="5002" refresh="3" debug="true"/>
    </page>
   [B] <text colspan="2" rowspan="2"/>[/B]
  </page>
</pages>

[JNK]

Hast Du das basic.css von pure verändert? Bei mir sieht das eigentlich richtig aus

[EPIX]

heute vom SVN upgedated...

body 
{ 
  background-color: black; 
  color: white;
  font-family: Verdana, Helvetica, sans-serif;
  font-family: 'URW Gothic L','Century Gothic','Apple Gothic',Arial,sans-serif;
  font-size: 5mm;
  overflow: hidden;
  margin:0;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

h1
{
  font-size: 2em;
  margin-left: 15px;
}

h2
{
  font-size: 1.25em;
  margin-left: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
}

body hr
{
  clear:both;
  color: #ff8000;
  background-color: #ff8000;
  height: 1px;
  border:none;
  padding:0px;
  margin:0.1em;
}

body br
{
  clear:both;
}

.nav_path 
{
  color: #ff8000;
  margin-left: 15px;
}
.nav_path a
{
  color: white;
  text-decoration:none;
}

.footer,
.footer *
{
  color: #ff8000;
  font-size: 0.9em;
  vertical-align: middle;
}


.widget_container {
   float: left;
}

/*.widget_container .widget_container {
    width: 100%;
}*/

.colspan0 { /* multiple of 8.33333% ! */
  width: 49.9998%;
}

.widget
{
  margin:0.10em;
  padding:0.1em;
  border: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  min-height: 2em;
}

.editmode .widget
{
  border: 1px solid #444;
}

.widget .label,
.widget.info .actor,
.text > div,
.link > a {
  padding: 5px;
}

.widget .label
{
  float:left; 
  width:49%;
/*  color:red; */
/*  padding-right:0.25em; */
  text-align:right;
/*  border:blue 1px solid; */
}

.widget .actor
{
  float:left;
  margin-left:1em;
}

.widget .actor div
{
  float:left;
  white-space: pre-wrap;
}

.center
{ 
   text-align:center;
}

.left
{ 
   text-align:left;
}

.right
{ 
   text-align:right;
}

.red 
{
  color:#f44;
  
}

.green
{
  color:#4f4;
}

.blue
{
  color:#44f;
}

.purple
{
  color:#f4f;
}

.link a
{
  color: #ff8000;
  text-align: right;
  width: 49%;
  padding: 5px;
}

.page
{
  float:left;
  width: 900px;
  overflow: auto;
  position: relative;
}

.switchUnpressed
{
  border-style:  solid;
  border-width:  1px;
  border-color:  #666 #444 #444 #666;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  padding: 1px;
}
.switchUnpressed div
{
  border-style:  solid;
  border-width:  1px;
  border-color:  #fff #666 #666 #fff;
  padding: 3px;
  width: 5em;
  float: left;
  text-align: center;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.switchPressed
{
  border-style:  solid;
  border-width:  1px;
  border-color:  #666 #fff #fff #666;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
 border-radius: 7px;
  padding: 1px;
}
.switchPressed div
{
  border-style:  solid;
  border-width:  1px;
  border-color:  #444 #666 #666 #444;
  padding: 3px;
  width: 5em;
  float: left;
  text-align: center;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.switchInvisible
{
   border: none;
   padding: 1px; 
}

.switchInvisible div
{
  border: none;
  padding: 5px;
  width: 5em;
  float: left;
}

.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.6em; height: 1.6em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.8em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }
.ui-widget-content { border: 1px solid #dddddd; background: #000 ; color: #000; }
.ui-widget-content a { color: #333333; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background: #000 ; font-weight: bold; color: #1c94c4; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

.dim .actor
{
  width: 3em;
}
.widget .ui-slider
{
  width: 30%;
  float: left;
  margin-left: 10px;
  margin-left: 1em;
  margin-top: 0.5em;
  border-color:  #666 #fff #fff #666;
}

.widget .ui-slider-handle
{
  border-color:  #fff #666 #666 #fff;
}
/* Clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

*:first-child+html .clearfix {
    min-height: 0;
}

* html .clearfix {
    height: 1%;
}

* html>body .clearfix {
    display: inline-block;
    width: 100%;
}

* html .clearfix {
    /* Hides from IE-mac \*/
    height: 1%;
    /* End hide from IE-mac */
}

.loading {
    display: block !important;
}

div#loading {
    display: none !important;
}

.popup,
.popup_background {
  position: absolute;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
}

.popup {
  z-index: 101;
  background: transparent;
}


.popup_background {
  z-index: 100;
  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
  background: #000;
  border: 1px solid #fff;
  opacity: 0.75;
}

.popup div {
  margin: 4px;
}

.popup div.head {
  border-bottom: 1px solid;
}

.popup_background.error {
  background: #800000;
  border: #f00;
}

.clickable {
    cursor: pointer;
}

.diagram_inline {
  width: 320px;
  height: 180px;
}

.diagram_preview {
    width: 240px;
    height: 2em;
}

#diagramTooltip {
  z-index: 1000;
  color: black;
  border: 1px solid #fdd;
  padding: 2px;
  background-color: #fee;
  opacity: 0.80;
}

/*****************************************************************************/
/* The definition of the flavours - overwrite the generic settings           */
/*****************************************************************************/

.flavour_black hr
{
  background-color: #000000;
}
.flavour_black .link a
{
  color: #000000;
}
.flavour_black.group
{
  border: #000000 1px solid;
}

.flavour_white hr
{
  background-color: #ffffff;
}
.flavour_white .link a
{
  color: #ffffff;
}
.flavour_white.group
{
  border: #ffffff 1px solid;
}

.flavour_antimony hr
{
  background-color: #00ddff;
}
.flavour_antimony .link a
{
  color: #00ddff;
}
.flavour_antimony.group
{
  border: #00ddff 1px solid;
}

.flavour_boron hr
{
  background-color: #00ff11;
}
.flavour_boron .link a
{
  color: #00ff11;
}
.flavour_boron.group
{
  border: #00ff11 1px solid;
}

.flavour_lithium hr
{
  background-color: #ff0000;
}
.flavour_lithium .link a
{
  color: #ff0000;
}
.flavour_lithium.group
{
  border: #ff0000 1px solid;
}

.flavour_potassium hr
{
  background-color: #d00055;
}
.flavour_potassium .link a
{
  color: #d00055;
}
.flavour_potassium.group
{
  border: #d00055 1px solid;
}

.flavour_sodium hr
{
  background-color: #ff8000;
}
.flavour_sodium .link a
{
  color: #ff8000;
}
.flavour_sodium.group
{
  border: #ff8000 1px solid;
}

/* styles for the preview */
div#demo_1, div#demo_2, div#demo_3 {
    width: 100%;
}

div#demo_1 {
    height: 30px;
    background-color: black;
}

div#demo_2 {
    height: 2px;
    background-color: #ff8000;
}

div#demo_3 {
    height: 58px;
    background-color: black;
}

[JNK]

Mhm. das macht bei mir keine Rahmen um die Elemente. Wenn ich bei .widget

border: 1px solid yellow;

hinzufüge, dann sieht es aus wie unten, und das scheint mir richtig zu sein. Cache geleert?

Gruss,

der Jan

[EPIX]

ja, ich benutze Chrome: also mit F5, und über das Menü....
-> keine Besserung

ich habe aber auch structure_pure.js vom SVN upgedated....
und die lib/templateengine.js auch

die basic.css habe ich zurück-gedated (also die alte Version eingespielt): keine Änderung.

wenn ich die Änderung (border: 1px solid yellow durchführe, dann sind die Rahmen zwar gelb, aber die Breite ist falsch...

Das Problem ist die Angabe des colspan=2 Parameter

[Chris M.]

Mit den *spans habe ich mich noch nicht im Detail auseinandergesetzt - aber AFAIK ist das pure-Design noch gar nicht darauf erweitert worden...

[JNK]

@epix: Kannst Du mal ein Screenshot zeigen, wie es vorher war/aussehen soll? Bei mir sieht das in FF und Chrome exakt gleich aus und für mein Verständnis auch richtig.Ich krieg beim besten Willen nicht diese kurzen Elemente hin, die Du da siehst.

Das passiert bei mir nur dann, wenn ich von Hand das "colspan0" aus dem HTML lösche. Hast Du die komplette SVN-Version geladen oder nur Teile davon? Ansonsten update bitte mal lib/templatengine.js und designs/structure_purse.js.

Gruss,

der Jan

[EPIX]

nur die angeführten Teile....

gerade nochmal vom SCN geholt & upgadated + Cache gelöscht
- structure_pur.js
- textglobal.css
- basic.css
- templateengine.js

Erfolg: nada....

Aber: nachdem ich offenbar der Einzige mit diesem Symptom bin: bitte konzentriert euch auf die Weiterentwicklung....

Spätestens mit der nä. Version wird's wieder gut...

Ich lade heute den gesamten tarball herunter, mal sehen....

[makki]

Nee, der einzige bist du nicht, auf meim Chumby (Webkit) spuckt das auch noch leicht (da kann ich aber 0,0 debuggen..)

Also, solche Berichte sind schon wichtig (Strg+Shift+I im Chrome*, wirft die Konsole da Fehler?)

bitte konzentriert euch auf die Weiterentwicklung....

Schon lieber, aber wir brauchen das auch weil es zwischendrin auch mal funktionieren soll

Also bitte weiter melden!

Makki

[JNK]

Nee, der einzige bist du nicht, auf meim Chumby (Webkit) spuckt das auch noch leicht (da kann ich aber 0,0 debuggen..)

Ich habe sowas zwar nicht, aber was tut es denn da nicht? Vielleicht kommen wir ja so an der Stelle weiter. Mir ist gerade noch aufgefalen, dass das mit der mobile.css auch noch inkompatibel (d.h. vom Design her falsch, funktionieren tut es IMHO) ist.
Da muss ich noch etwas drüber nachdenken.

Gruss,

der Jan

[EPIX]

@makki: sorry, dein Post kam zu spät...

Tarball heruntergeladen und drübergeknallt....(funktioniert wieder)

Nachdem es so ausgesehen hat es wäre der Fehler nur bei mir habe ich keine weitere Zeit versch****

aber wir brauchen das auch weil es zwischendrin auch mal funktionieren soll

was sonst noch auffällt:
- editor hat noch immer das Problem readonly="readonly" (statt readonly="true")
- <groups> wird durch den Editor "zerschossen"

derzeit gilt: wenn manuell an der XML geändert wurde: NIE mehr den Editor benutzen

[Chris M.]

- <groups> wird durch den Editor "zerschossen"

Ist bekannt (der Editor kenn <group> schlichtweg nicht)

derzeit gilt: wenn manuell an der XML geändert wurde: NIE mehr den Editor benutzen

Ne, so schlimm ist es nicht. Wenn Du nur die Widgets verwendest, die Mature genug sind (d.h. die auch vom Editor angezeigt werden, wenn Du nicht an der URL trickst), sollte es normalerweise funktionieren.

Zum readonly muss ich eh noch was (in einem anderen Thread) schreiben...