Results 1 to 6 of 6
  1. #1

    SVG CSS and data

    I have a page I want to draw several SVG polygons on.<br><br>The polygons are coloured according status flags that change at the server end.<br><br>It appears to me that the&nbsp; the dynagrid is ok for this.&nbsp;<br><br>I call for a list of elements - about 30 on my page. the metadat provider supplieds the shapes and ids and my adaptor simply provides the status updates to allow the js to change colours as thing change in my middleware.<br><br>Any guidance on where I can an end to end picture of how to do this?<br><br>

  2. #2
    Administrator
    Join Date
    Feb 2012
    Location
    Milano
    Posts
    538
    Hi nimbusgb,

    Yes, I confirm that DynaGrid can be used to display your svg polygons and let Lightstreamer updates their style properties.
    Please be sure to add the respective html nodes to those managed by the grid, for example:

    Code:
    	dynaGrid.setNodeTypes(["div","span","img","a","input","svg","rect"]);
    Then you should define a grid cell for your svg polygon:

    HTML Code:
          <td><svg width="40" height="15">
              <rect data-source="lightstreamer" data-field="mypoly" data-fieldtype="extra" data-update="style.width" width="30" height="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
          </svg></td>
    Please note that in this case I have mapped the width property for automatic update with the field mypoly; if you need to update more than a single property you should implement that in the onVisualUpdate, something like this:
    Code:
    onVisualUpdate: function(key,info,domNode) {
    
    	if ( info.getCellValue("myflag") ) {
    
    		info.setCellAttribute("mypoly", "green", "green", "fill");
    	} else {
    		info.setCellAttribute("mypoly", "red", "red", "fill");
    	}
    	...
    }

    Hope that helps.

    Regards,
    Giuseppe

  3. #3
    Excellent. I'll get on to that now .......

  4. #4
    Small increments here.

    Each polygon is also sourced from the database. ( usually only once during the snapshot one assumes )

    The colour then changes depending on status.

    So my handcrafted html looks like this

    Code:
     
        <tr> 
            <td>
                <div class="svg-container">
                       <svg viewBox="-0.015766113996505737 -0.004459307994693518 344.0315246582031 288.0089111328125" >
                            <polygon style="" id="A2_polygon" points="136.91 247.353 145.347 246.97 148.798 248.887 149.949 251.188 142.279 270.747 138.827 266.912 133.842 266.528 136.526 257.324"/>
                         </svg>
                </div>
          </td>
       </tr>

    How do I get the points to be served from the db and the fill to be processed at the client end?

    The svg-container on each table row is required to ensure that all shapes are painted relative to the same point on the canvas.

    similarly the viewbox keeps everything in one window.

    I am sourcing the list of points from my db ..... how do I attach them to the points keyword and keep the lot interpreted as svg?


    tia
    Last edited by nimbusgb; July 16th, 2019 at 04:30 PM.

  5. #5
    Administrator
    Join Date
    Feb 2012
    Location
    Milano
    Posts
    538
    Hi nimbusgb,

    One option you could leverage is that in the onItemUpdate callback you cleanup your polygon and associate the new values for points received from Lightstreamer server.
    Something like this:
    Code:
    onItemUpdate: function(info) {
    			var A2 = document.getElementById(info.getItemName());
    			var SVG_Box = document.getElementById("A2_Box");
    			
    			A2.points.clear();
    			
    			var Po1 = SVG_Box.createSVGPoint();
    			Po1.x = info.getValue("Po1X");
    			Po1.y = info.getValue("Po1Y");
    			
    			
    			var Po2 = SVG_Box.createSVGPoint();
    			Po2.x = info.getValue("Po2X");
    			Po2.y = info.getValue("Po2Y");
    			
    			 ...
    			
    			var Po8= SVG_Box.createSVGPoint();
    			Po8.x = info.getValue("Po8X");
    			Po8.y = info.getValue("Po8X");
    			
    			A2.points.initialize(Po1);
    			A2.points.appendItem(Po2);
    			A2.points.appendItem(Po3);
                A2.points.appendItem(Po4);
                A2.points.appendItem(Po5);
    			A2.points.appendItem(Po6);
    			A2.points.appendItem(Po7);
    			A2.points.appendItem(Po9);
    }
    But I'm not sure if it's actually what you need.

    Regards,
    Giuseppe

  6. #6
    think that's a little off track.

    I'll keep experimenting.

 

 

Similar Threads

  1. Replies: 1
    Last Post: October 2nd, 2017, 08:34 AM
  2. Replies: 1
    Last Post: July 22nd, 2013, 09:28 AM
  3. Passing data dynamicatlly to Java Data Adapter via
    By V S Suresh in forum Adapter APIs
    Replies: 2
    Last Post: October 25th, 2012, 08:11 AM
  4. Single data provider and multiple data sources
    By pluczak in forum Adapter APIs
    Replies: 1
    Last Post: April 26th, 2012, 10:50 AM
  5. General data and User specific data
    By mnenchev in forum Adapter APIs
    Replies: 5
    Last Post: September 1st, 2009, 09:36 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT +1. The time now is 04:33 AM.