Interactiver Floorplan

[just]

Hi,

ich hatte die Idee den Floorplan interactiv zu gestalten. Mein Ziel ist es am Ende darüber die Lichter zu schalten. Dazu hab ich die SVG Datei um Javascript erweitert. Wenn ich die SVG Datei direkt aufrufe funktioniert das auch, sobald die SVG Datei aber ins Cometvisu eingebunden ist leider nicht mehr. Woran könnte das liegen?

Hier mein Code (bin kein Programmierer ... daher habt bitte etwas nachsicht)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800mm" height="450mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 80000 45000"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:white;stroke-width:40}
    .fil0 {fill:#666666}
    .fil1 {fill:#E6E6E6}
    .fil2 {fill:none}
    .fil3 {fill:#999999}
    .fil4 {fill:white}
    .fil5 {fill:yellow}
    .fil6 {fill:red}
    .fil7 {fill:#CCCCCC}
    .fil8 {fill:#009933}    
    .fil9 {fill:blue}
   ]]>
  </style>
    <script type="text/javascript">
    
        function doRectClick(obj,text){
        var myrect = document.getElementById(obj);
        
        if (myrect.style.fill == 'yellow') {
        myrect.style.fill = 'blue';
        }
        else
        {
        myrect.style.fill = 'yellow';
        }
        alert(text);
        }
    </script>
 </defs>
   <g id="licht_kueche_arbeitsplatte">
    
       <rect class="btn" transform="matrix(3.27358E-015 0.123604 -0.107373 2.84373E-015 67593.8 10392.8)" width="3641" height="4191" id="myrect" onclick="doRectClick('myrect','BLA')"/>
    <rect class="btn" transform="matrix(3.27358E-015 0.123603 -0.107373 2.84371E-015 59293.8 10387.2)" width="3641" height="4191" id="myrect2" onclick="doRectClick('myrect2','')"/>  
    <rect class="fil5 str0" transform="matrix(3.27358E-015 0.123603 -0.107373 2.84371E-015 59293.8 14427.4)" width="3641" height="4191"/>
    <rect class="fil5 str0" transform="matrix(3.27358E-015 0.123604 -0.107373 2.84373E-015 76481.3 10387.2)" width="3641" height="4191"/>
   </g>
  
</svg>

Danke schon mal im Voraus für eure Hilfe.

Grüße

[Chris M.]

Grundsätzlich funktioniert JavaScript in einer als Backdrop verwendeten SVG Datei. Siehe auch dem 2d3d-Demo.

Aber: Das 2d3d-Demo ist aktuell kaputt, wie ich gerade gesehen habe.
D.h. um hier ein Beispiel zu haben wie hier beides zusammenspielen kann, musst Du auf den Pull-Request warten, an dem ich gerade dran bin

[just]

Hi,

danke für deine Antwort. Welche wäre denn die letzte funktionierende Version? Dann könnte ich erstmal damit arbeiten bis die Geschichte gefixt ist.

Grüße

[Chris M.]

Ohne es überprüft zu haben, hätte ich die letzte Version vor dem AMD genommen, müsste also die 0.8.3 sein.

ABER: Auch die aktuelle Version geht grundsätzlich, das JavaScript läuft - bis zum Fehler. D.h. durch die Fehlermeldung ist bewiesen, dass es geht

Wenn das jQuery umgestellt ist, sollte auch die 2d3d Demo wieder schnell repariert sein. Ich schätze, dass ich am Wochenende den Pull-Request dazu stellen kann.

[just]

Danke noch einmal für deine Bemühung. Ich habs mal mit der 0.8, 0.8.3, 9.0rc1 und der 9.0rc2 versucht -> kein Erfolg. Kann es vielleicht sein das "onclick" in SVG prinzipiell nicht funktioniert? Oder steh ich irgendwie auf dem Schlauch? Wüsste jetzt auch nicht wie ich das Debuggen kann. Weder im Lighttpd Log noch im Firebug finde ich einen Fehler. *confused*

Vielleicht noch ein kleiner Stups in die richtige Richtung?

Danke im Voraus und Grüße

[Chris M.]

On onclick geht weiß ich nicht, das musst Du über andere Seiten klären. Ich kann hier nur was grundsätzliches zu eingebetteten JavaScript Code sagen.

[Chris M.]

So, im Pull-Request https://github.com/CometVisu/CometVisu/pull/308 (der auf https://github.com/CometVisu/CometVisu/pull/307 aufbaut) ist die 2D SVG wieder repariert.

Aber: ich glaube, dass das hier nicht relevant ist, da Du ja aus der SVG heraus eine Aktion in der aufrufenden Anwendung starten möchtest. Gerade die Kommunikation zwischen den beiden Instanzen ist schwierig, daher bindet hier die SVG nochmal den kompletten CometVisu Client mit ein und baut einen parallelen Kommunikationspfad auf.
Was aber geht, ist dass die aufrufende Seite in der SVG arbeitet - genau das macht der Trick-O-Matic um die Linien zu Rohre aufzuhübschen und um die Fließ-Animation zu starten. Vermutlich sollte auf ähnlichen Weg ein elementspezifisches onClick machbar sein. (Notfalls auf jeden Klick hören und dann überprüfen über welchem Element man ist)

[just]

Vielen vielen Dank für deine Unterstützung.

ich werde schauen wie ich mein Onclick aus der SVG doch noch hinkriege und dann hier berichten, vielleicht hilft es ja dem ein oder anderen noch. Aber eins würde mich noch interessieren. Wie hast du das hingekriegt:

https://raw.githubusercontent.com/Ch...demo_flat.jpeg

und würdest du evtl. die Config dazu mal posten?

Grüße

[just]

Nachdem ich mir die Sache näher angeschaut habe, gibt es doch noch einige Fragezeichen. Könntest du das:

Notfalls auf jeden Klick hören und dann überprüfen über welchem Element man ist

evlt. noch näher ausführen?

Danke im Voraus!

[Chris M.]

Wie hast du das hingekriegt:

https://raw.githubusercontent.com/Ch...demo_flat.jpeg

und würdest du evtl. die Config dazu mal posten?

Ja, lag noch lokal bei mir rum. Mit https://github.com/ChristianMayer/Co...84f217cccaed5f hab ich's mal im Branch https://github.com/ChristianMayer/Co...design_ceramic hinzugefügt.
(Hintergrund: das da das Metal-Design verwendet wird, liegt nur daran, dass das Ceramic Design noch nicht so weit ist, dass es vorzeigbar wäre... Da kam die L&B etwas zu früh )
Achtung: um auf die gleiche Darstellung wie im Screenshot zu kommen muss noch eine custom.css in's Metal Design. Das ist aber erstmal nur eine Feinheit.

Nachdem ich mir die Sache näher angeschaut habe, gibt es doch noch einige Fragezeichen. Könntest du das:

> Notfalls auf jeden Klick hören und dann überprüfen über welchem Element man ist

evlt. noch näher ausführen?

Naja, man könnte (in einer custom.js) einen globalen Event-Handler an den Click-Event hängen und in dem auswerten, was unter der Maus zum Zeitpunkt des Klicks war. Da das "äußere" JavaScript auf den inneren DOM des SVG zugreifen kann, sollte das möglich sein.