Ankündigung

**henfri** · 25.07.2012, 07:25

Sieht jedenfalls Super aus!
Danke!

**chriss1980** · 25.07.2012, 07:49

Cool! Nach meinem Verständnis sollte das bereits jetzt funktionieren, denn das SVG enthält ja JS-Code, der sich selbstständig zum CV-Backend verbindet. Unschön ist wohl erstmal, dass die GA im SVG fest codiert ist...

**christian523** · 25.07.2012, 12:08

Das Problem mit der hard-codierten GA ist gelöst. Man kann dem svg einen URL-Parameter übergeben und im JS-Teil auswerten. Auch das testweise Einbinden über Firebug klappt grundsätzlich sehr gut.

Jetzt wäre meine Frage wie man das in die CV bringt. Im Grunde bräuchte es denke ich ähnlich wie beim Image einfach eine JS-Funktion, die über <embed .... die SVN-Datei einbindet. Ich denke das wäre auch kein großes Problem die GA über eine Eingabebox abzufragen und im Hintergrund den String zusammenzubauen.
Ich habe mir mal die aktuellen svn-Version gezogen, aber inzwischen hat sich soviel getan, dass ich über ein paar Vorschläge, wie man das am geschicktesten einbindet und umsetzt sehr dankbar wäre. Die Umsetzung würde ich selbst probieren.

**Chris M.** · 25.07.2012, 19:59

Super!

Zum Einbinden gibt es ein paar Möglichkeiten:

Als SVG mit eigener Kommunikation:

Habe zwar den Code hier nicht gesehen, die Beschreibung klingt aber danach
Hier wird eine eigentlich unnötige weitere Datenverbindung aufgemacht (auf dicken Clients egal, aber auf kleinen halt nicht optimal)
Bin mir gerade nicht klar, ob das Einbinden der Bilder beim Release hier das JavaScript im SVN ausführen lässt. Vermutlich nicht...

Als eigenes Widget (bzw. Plugin):

Sollte auch mit der Release Version gehen
Keine weiteren, parallelen Datenverbindungen
Beispiel zum Spicken (im SVN) ist das Clock-Widget
Nachteil: wer's im aktuellen Release nutzen möchte, muss per Hand das Widget bzw. das Plugin hinzufügen. Könnte aber ggf. beim nächsten Update überschrieben werden (je nach gewählter Lösung)

Die richtige Lösung(TM):

Geplant - aber noch nicht umgesetzt - wäre ein Mechanismus, der die Datenverbindung der CV an eingebettete Bilder weiterreichen kann. Das ist insbesondere für die 2D Seiten wichtig (vgl. Flow-O-Mat)
Damit jetzt noch nicht verwendbar und dann auch nur ab SVN bzw. dem nächsten Release

Also wäre die vorerst beste Lösung das als eigenes Widget bzw. noch besser als Plugin zu führen.

**christian523** · 25.07.2012, 20:23

Hi Chris,

den Code habe ich vergessen, hier ist das svg:

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="48"
   height="48"
   x="0"
   y="0"
   id="svg2">
   <script xlink:href="../lib/jquery.js" type="text/javascript"></script>
   <script xlink:href="../lib/cometvisu-client.js" type="text/javascript"></script>
   <script xlink:href="../transforms/transform_default.js" type="text/javascript"></script>
   <script xlink:href="../transforms/transform_knx.js" type="text/javascript"></script>
   <script>
    <![CDATA[
    function get_url_param( name )
    {
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );

    if ( results == null )
        return "";
    else
        return results[1];
    }
    //var thisGA = '12/7/52';
    var thisGA = get_url_param('GA');
    var thisTransform = 'DPT:5.001';
    visu = new CometVisu('/cgi-bin/');
    visu.update = function( json ) // overload the handler
    {
         var h = Transform[thisTransform].decode( json[thisGA] ); 
    var space = 3.65;
    for(var i = 0; i<=Math.floor(h/10);i++) {
        var currentline = '#line'+(i+1);
              $(currentline).attr('y1',6+space*(i)+((h%10)/10)*space);
              $(currentline).attr('y2',6+space*(i)+((h%10)/10)*space);
        
    }
    for(var i = Math.floor(h/10)+1; i<=10;i++) {  
              var currentline = '#line'+(i+1);
              $(currentline).attr('y1',6);
              $(currentline).attr('y2',6);
    }

    }
    $(window).unload(function() {
      visu.stop();
    });
    visu.user = 'demo_user'; // example for setting a user
    visu.subscribe( [thisGA] );
    //]]>
  </script>
 
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <path id="windowframe" d="m3,5l42,0l0,38l-42,0l0,-38"     stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#FFFFFF" fill="#000000"  />
  <rect id="toprect"     x="1" y="5" width="46" height="4"  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#FFFFFF" fill="#FFFFFF" />
  <line id="middleline" x1="24" x2="24" y1="5"    y2="43"   stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#FFFFFF" fill="none"/>
  <line id="grip"       x1="22" x2="26" y1="25"   y2="25"   stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#FFFFFF" fill="none"/>
  <line id="line1"      x1="2"  x2="46" y1="6"    y2="6"    stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line2"        x1="2"  x2="46" y1="9.5"  y2="9.5"  stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line3"        x1="2"  x2="46" y1="13"   y2="13"   stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line4"        x1="2"  x2="46" y1="16.5" y2="16.5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line5"        x1="2"  x2="46" y1="20"   y2="20"   stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line6"        x1="2"  x2="46" y1="23.5" y2="23.5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line7"        x1="2"  x2="46" y1="27"   y2="27"   stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line8"        x1="2"  x2="46" y1="30.5" y2="30.5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line9"        x1="2"  x2="46" y1="34"   y2="34"   stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line10"        x1="2"  x2="46" y1="37.5" y2="37.5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line11"        x1="2"  x2="46" y1="41"   y2="41"   stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
</svg>

Wie gesagt, ich habe das Grundgerüst weitestgehend von Deiner Lösung "abgeschaut".
Ich schau mir mal das Clock-Widget an.

**makki** · 25.07.2012, 23:51

Jungs, wir müssen das mehr "ausschlachten" - bitte Beispiele etc.! Ich (und wir) wissen das das alles easy ganz einfach geht..
Wenn dann mal wieder "ich mal mir eine subba-dolle-Visu" aufkommt bekomme ich eher Ausschlag..
Schieb das Rolladen-SVG bitte ins SVN, das ist genau das womit man gegen die Dumm-Dumm-Malobjekte mancher anstinken kann

Makki

**christian523** · 26.07.2012, 07:03

Makki oder Chris, könnt ihr mal bitte schauen ob mein Account "christian523" für´s svn schon berechtigt ist? Ich wollte die Datei gerade hochladen und krieg ein "forbidden".

Ich hätte sie in den ./media-Ordner hochgeladen, ist das ok?

**makki** · 26.07.2012, 09:34

war nicht, erledigt..

Makki

**christian523** · 28.07.2012, 10:36

Probleme mit svn-Version

Ich habe gerade versucht mit der neuesten svn-Version ein Plugin für das "Rollo-SVG" zu bauen. Das hat letztlich auch soweit geklappt, dass er mir wie gewünscht den Quelltext im Firebug anzeigt und auch die SVG-Grafik einblendet. Allerdings bewegt sich das svg nicht mehr. Ich hatte meine Testenwicklung auf einen etwas älteren Stand der CV ausprobiert da ich die aktuelle svn-Version bei mir lokal nicht "versauen" wollte.

Kann es sein, dass es zwischenzeitlich eine Änderung an der CV gab, die dazu führt, dass das Script innerhalb des svg´s nicht mehr funktioniert?
(Ich habe testweise auch eine ganz einfache config gebastelt, aber mit der geht es auch nicht mehr):

Code:

.
.
.
 </meta>
    <page name="2D Demo" type="2d" backdrop="media/rollo.svg?GA=12/7/52">
      <slide>
        <layout x="0px" y="470px" width="600px" />
        <label>Level</label>
        <address transform="DPT:5.001" type="">12/7/52</address>
      </slide>
      <info format="%.2f">
        <layout x="350px" y="370px" />
        <address transform="DPT:5.001" type="">12/7/52</address>
      </info>
    </page>
</pages>

Vielleicht hat jemand eine gute Idee?

**Chris M.** · 28.07.2012, 16:07

Sollte schon gehen - Referenz ist die 2d3d-Config (-> http://wiregate/visu_svn/?config=2d3d) im SVN. Wenn sich der Bottich per Slider füllen und leeren lässt, funktioniert's.

Aber um das in ein Plugin zu packen braucht's diesen Mechanismus ja so nicht. Einfach /plugins/clock/ als Basis verwenden

**christian523** · 30.07.2012, 22:21

So, jetzt habe ich ein funktionierendes Plugin "zusammengeschraubt". Ich würde Dich jedoch bitten, bevor ich es ins svn schiebe, dass jemand, der sich damit etwas besser auskennt nochmal einen Blick darauf wirft, ob das einigermaßen passt, da ich es mit viel Trial & Error zusammengebastelt habe (und bei manchen Sachen noch immer keinen 100%igen Durchblick habe).

Hier ist der Inhalt der structure_plugin.js:

Code:

/* structure_plugin.js (c) 2010 by Christian Mayer [CometVisu at ChristianMayer dot de]
 *
 * This program is free software; you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the Free
 * Software Foundation; either version 3 of the License, or (at your option)
 * any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 * more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc.,
 * 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA
*/

/**
 * This is a custom function that extends the available widgets.
 * It's purpose is to change the design of the visu during runtime
 * to demonstrate all available
 */
VisuDesign_Custom.prototype.addCreator('svg1', {
  create: function( element, path, flavour, type ) {
    var $e = $(element);
    var layout = $e.children('layout')[0];
    var style = layout ? 'style="' + extractLayout( layout, type ) + '"' : '';
    var ret_val = $('<div class="widget clearfix image" ' + style + '/>');
    ret_val.setWidgetLayout($e);
    ret_val.append( extractLabel( $e.find('label')[0] ) );

    var address = {};
    $e.find('address').each( function(){ 
      var src = this.textContent;
      var transform = this.getAttribute('transform');
      var color     = this.getAttribute('variant'  );
      var readonly  = this.getAttribute('readonly' );
      ga_list.push( src ); 
      address[ '_' + src ] = [ transform, color, readonly=='true' ];
    });

    var actor = '<div class="actor"></div>';

    var $actor = $(actor);
    $actor.svg({loadURL:'plugins/svg1/rollo.svg',onLoad:function(svg){}})

    var refresh = $e.attr('refresh') ? $e.attr('refresh')*1000 : 0;
    $actor.data( {
      'address':   address, 
      'refresh':   refresh
    } ).each(setupRefreshAction); // abuse "each" to call in context...
    for( var addr in address ) {
      $actor.bind( addr, this.update );
    }
    ret_val.append( $actor );
    return ret_val;
  },
  update: function(e,d) { 
    var element = $(this);
    var h = defaultUpdate( e, d, element );
    var space = 3;
    for(var i = 0; i<=Math.floor(h/10);i++) {
          element.find('#line'+(i+1)).attr('y1',10+space*(i)+((h%10)/10)*space);
          element.find('#line'+(i+1)).attr('y2',10+space*(i)+((h%10)/10)*space);
    } 
    for(var i = Math.floor(h/10)+1; i<=10;i++) {  
          element.find('#line'+(i+1)).attr('y1',6);
          element.find('#line'+(i+1)).attr('y2',6);
    }
  },
  attributes: {
    format:  { type: 'format' , required: false },
    mapping: { type: 'mapping', required: false },
    styling: { type: 'styling', required: false },
    colspan: { type: 'numeric', required: false },
    rowspan: { type: 'numeric', required: false }
  },
  elements:   {
    label:   { type: 'string' , required: true , multi: false },
    address: { type: 'address', required: true , multi: true  },
    layout:  { type: 'layout' , required: false, multi: false }
  },
  content: false
});

und hier noch das svg-File:

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="48"
   height="48"
   id="svg2">
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <path id="windowframe" d="m3,5l42,0l0,38l-42,0l0,-38"     stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#FFFFFF" fill="#000000"  />
  <rect id="toprect"     x="1" y="5" width="46" height="4"  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#FFFFFF" fill="#FFFFFF" />
  <line id="middleline" x1="24" x2="24" y1="5"    y2="43"   stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#FFFFFF" fill="none"/>
  <line id="grip"       x1="22" x2="26" y1="25"   y2="25"   stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="#FFFFFF" fill="none"/>
  <line id="line1"      x1="2"  x2="46" y1="6"    y2="6"    stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line2"        x1="2"  x2="46" y1="9.5"  y2="9.5"  stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line3"        x1="2"  x2="46" y1="13"   y2="13"   stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line4"        x1="2"  x2="46" y1="16.5" y2="16.5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line5"        x1="2"  x2="46" y1="20"   y2="20"   stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line6"        x1="2"  x2="46" y1="23.5" y2="23.5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line7"        x1="2"  x2="46" y1="27"   y2="27"   stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line8"        x1="2"  x2="46" y1="30.5" y2="30.5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line9"        x1="2"  x2="46" y1="34"   y2="34"   stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line10"        x1="2"  x2="46" y1="37.5" y2="37.5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
  <line id="line11"        x1="2"  x2="46" y1="41"   y2="41"   stroke-linecap="round" stroke-linejoin="round" stroke-width="2"   stroke="#FFFFFF" fill="none"/>
</svg>

Ich habe es bei mir in der demo-Config eingefügt, soll ich das (in den erweiterten Widgets) auch mit hochladen?

**JNK** · 11.08.2012, 09:30

Hat jetzt nicht direkt was mit dem Rollo zu tun, irgendwie aber doch auch schon:

Ich habe mir ein SVG gemacht (s.u.), das einfach nur R, G, B mischt und ein Quadrat entsprechend einfärbt (Quasi als Farb-Indikator einer LED-Leiste). Das SVG selbst (alleine im Browser aufgerufen) funktioniert bestens.

Als <image> eingebunden funktioniert das erwartungsgemäss nicht. Ich habe jetzt händisch im DOM <img src=...> durch <embed src=...> geändert und es funktioniert bestens.

Das von Chris angesprochene Problem mit der zusätzlichen Verbindung besteht natürlich trotzdem, aber würde es Sinn machen, dem image-Widget eine Option "embed" zu spendieren, die default auf "false" steht und dann <img> erstellt und bei "true" ein <embed>? Das wäre ein Zweizeiler und würde das Problem jetzt sofort lösen, ohne zusätzliches Widget, ohne Plugin und überhaupt.

Gruss,

der Jan

**Chris M.** · 11.08.2012, 09:55

img und embed haben einen kleinen aber bedeutenden Unterschied: img ist "sicher" und embed nicht, da dort weiterer Code auf dem System ausgeführt werden kann.

Von daher wäre ich eher für ein weiteres Widget (was zu 99% von <image> kopiert wurde...) einfach um hier psychologisch klar zu machen, dass da was anderes passiert.

(Andererseits: wenn jetzt jemand das <image> Widget entsprechend pimpt würde ich den Code auch nicht rauswerfen. Das ist mehr eine Gefühl-Entscheidung...)

Unabhängig davon nun für den konkreten Fall:
Wenn's nur um die R+G+B->Anzeige geht - warum dann kompliziert über eine SVG?
Mach doch ein neues Widget oder kleines Plugin das per CSS ein <div> entsprechend einfärbt...

**christian523** · 18.08.2012, 10:30

Hallo,

ich habe gerade mal das "Rollo-svg" eingecheckt und hochgeladen. Es ist nun ein eigenes Plugin, welches folgendermaßen in der visu_config.xml eingebunden werden kann:

Im "meta"-Tag folgende Zeile ergänzen:

Code:

<meta>
   <plugins>
       ....
[COLOR=Red]       <plugin name="svg"/>
[/COLOR]   </plugins>

Anschließend kann das Bild folgendermaßen ähnlich wie ein Info-Element eingefügt werden:

Code:

<page> 
   ...
   <svg>
     <label>Fensterstatus</label>
     <address transform="DPT:5.001" readonly="true" variant="">1/2/3</address>
   </svg>
   ...
</page>

Ich habe gerade beim Versuch ein Beispiel in die demo-Config einzubauen festgestellt, dass es noch ein kleines css-Problem in der Darstellung gibt (die Zeile wird zu groß). Das schau ich mir bei Gelegenheit noch an und spiele ein Update ein (darf aber auch gerne jemand Anderes übernehmen

). Wollte es nur schon mal hochladen, vielleicht bringt es den ein oder anderen auf weitere Ideen wie man mit dynamischen svg´s die Optik der CV noch weiter optimieren kann (auch wenn ich hier nochmal erwähnen möchte, dass der derzeitige Stand der CV in meinen Augen wirklich schon äußerst gut ist

).

Noch eine Anmerkung zum svg-File. Ich habe versucht es so zu bauen, dass später mit wenig Aufwand auch die Farben geändert werden können. Der Rahmen ist absichtlich in der Farbe #FEFEFE, so kann er einfach mit suchen/ersetzen angepasst werden.

Ankündigung

"Rollo-SVG" einsetzbar?

"Rollo-SVG" einsetzbar?

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar