B4J Question With jQueryElement access SVG ?

[jinyistudio]

Hi
I have two circle and a text in following SVG file. I need to know how to access them(circle1,circle2,ComeText) with JQueryElement in my WebApp(B4J) ?

circle1,circle2 --> I want to change fill color
ComeTime --> I wnat to change text(111) to any text.

Example by javascripte -> http://www.petercollingridge.co.uk/data-visualisation/using-javascript-control-svg
How to get "svgdoc.contentDocument" ???

following code is HTML, I show the SVG in a DIV section.

<div id="p" class="easyui-panel" title="SVG" style="width:700px;height:320px;padding:10px">
        <object id="svg1" width="400" height="280" type="image/svg+xml" data="circle.svg">
</object>
    </div>

following code is a SVG file

<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   width="400"
   height="300"
   id="svg2"
   inkscape:version="0.48.5 "
   sodipodi:docname="circle.svg">
  <metadata
     id="metadata11">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs9" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1280"
     inkscape:window-height="897"
     id="namedview7"
     showgrid="false"
     inkscape:zoom="0.78666667"
     inkscape:cx="-19.27966"
     inkscape:cy="99.152543"
     inkscape:window-x="-4"
     inkscape:window-y="-4"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2" />
  <style
     id="style4">
    circle {
      fill-opacity: 0.5;
      stroke-width: 4;
      fill: #3080d0;
      stroke: #3080d0;
    }
  </style>
  <circle
     id="circle1"
     cx="10"
     cy="10"
     r="50"
     sodipodi:cx="10"
     sodipodi:cy="10"
     sodipodi:rx="50"
     sodipodi:ry="50"
     transform="matrix(0.31480258,0,0,0.35293817,53.265505,107.29093)"
     style="fill:#3080d0;fill-opacity:0.5;stroke:#3080d0;stroke-width:4" />
  <circle
     id="circle2"
     cx="100"
     cy="100"
     r="50"
     sodipodi:cx="100"
     sodipodi:cy="100"
     sodipodi:rx="50"
     sodipodi:ry="50"
     transform="matrix(0.31480258,0,0,0.35293817,196.90957,56.443471)"
     style="fill:#3080d0;fill-opacity:0.5;stroke:#3080d0;stroke-width:4" />
  <g
     id="g3967">
    <text
       inkscape:label="#text3772"
       sodipodi:linespacing="125%"
       id="ComeTime"
       y="213.55933"
       x="109.32203"
       style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       xml:space="preserve"><tspan
         y="213.55933"
         x="109.32203"
         id="tspan3774"
         sodipodi:role="line">111</tspan></text>
    <rect
       y="161.44067"
       x="76.271187"
       height="76.271187"
       width="144.91525"
       id="rect3785"
       style="fill:none;fill-opacity:1;stroke:#490000;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
  </g>
</svg>

 

[Erel]

If you know how to do it with JavaScript then call ws.Eval with the script.

 

[jinyistudio]

The javascripte code as following :

var moveSlider = function(slider, direction) {
    var value = slider.value;
    var svg = document.getElementById("circle-svg");
    var svgDoc = svg.contentDocument;
    var circle = svgDoc.getElementById("my-circle");
    circle.setAttributeNS(null, "c" + direction, value * 5);
}

Please tell me how to implementing to ws.eval(...) ?

If you know how to do it with JavaScript then call ws.Eval with the script.

 

[billzhan]

http://www.petercollingridge.appspot.com/svg-and-js

html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="/b4j_ws.js"></script>
 </head>
 <body>

    <h2>Controlling SVG with Javascript</h2>
    <div id="maindiv">
       x: <input id="x" type="text" value=100></input><br/>
       y: <input id="y" type="text" value=100></input><br/>

     </div>
     
    </br>
     
     

    <div class="page-content">
      <div><object id="circle-svg" width="400" height="300" type="image/svg+xml" data="/moving_circle.svg"></object></div>

     </div>
   
     
    <script>
   
    //orginal function; not used http://www.petercollingridge.appspot.com/svg-and-js
    var moveSlider = function(slider, direction){
        var value = slider.value;
        var svg = document.getElementById("circle-svg"); 
        var svgDoc = svg.contentDocument;
        var circle = svgDoc.getElementById("my-circle");
        circle.setAttributeNS(null, "c" + direction, value * 5);
    }

    var movexy = function(x,y) {
        //var value = slider.value;
        var svg = document.getElementById("circle-svg"); 
        var svgDoc = svg.contentDocument;
        var circle = svgDoc.getElementById("my-circle");
        circle.setAttributeNS(null, "cx" , x );
        circle.setAttributeNS(null, "cy" , y );
    }
   
   
    //connect to the web socket when the page is ready.
    $( document ).ready(function() {
        b4j_connect("/ws");
    });
    </script>
 </body>
 </html>

ws handler

'WebSocket class
Sub Class_Globals
    Private ws As WebSocket 'ignore
    Private x,y As JQueryElement
End Sub

Public Sub Initialize
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
    Log("Connected")
    ws = WebSocket1
    updatexy
End Sub

Sub x_Change(Params As Map)
    updatexy
End Sub

Sub y_Change(Params As Map)
    updatexy
End Sub

Sub updatexy ()
    Dim ft2 As Future = x.GetVal
    Dim ft1 As Future = y.GetVal
    If IsNumber(ft1.Value) AND IsNumber(ft2.Value) Then
        ws.RunFunction("movexy",Array As Object(ft2.Value,ft1.Value))
    Else
        'not number
    End If
End Sub

 

[jinyistudio]

Hi

Did you have try to change "fill color" of the circle and context(caption) of the Text?
I have try circle.setAttributeNS(null, ,"fill","green") but it is failure(cann't change color)

B4j

ws.RunFunction("SetLedColor",Array As String("svg1","circle1","green"))

My Javascripte code :

function SetLedColor(o,n,v) {
  var svg = document.getElementById(o) ;
  var svgdoc = svg.contentDocument;
  var circle = svgdoc.getElementById(n);
  circle.setAttributeNS(null, "fill","green");  
}

 

[billzhan]

I don't know how svg works with javascript. This works in Chrome.

var setfillcolor = function(color) {
    var svg = document.getElementById("circle-svg");
    var svgDoc = svg.contentDocument;
    var circle = svgDoc.getElementById("my-circle");
    circle.style.fill=color ;
   //works :  circle.setAttributeNS(null,"style", "fill:"+color)
}

 

[jinyistudio]

Thank's It is OK !

B4j

ws.RunFunction("SetLedColor",Array As String("circle1","red"))
ws.RunFunction("SetTextCaption",Array As String("ComeTime","00:00"))

Javascript code

function SetLedColor(ledn,ledc) {
  var svg = document.getElementById('svg1') ;
  var svgdoc = svg.contentDocument;
  var circle = svgdoc.getElementById(ledn);
  // circle.setAttributeNS(null, "fill","green");
  circle.style.fill = ledc
}

function SetTextCaption(Textn,Textc) {
  var svg = document.getElementById('svg1') ;
  var svgdoc = svg.contentDocument;
  var text1 = svgdoc.getElementById(Textn);
  // circle.setAttributeNS(null, "fill","green");
  text1.textContent = Textc
}