SVG CSS and data

nimbusgb

I have a page I want to draw several SVG polygons on. The polygons are coloured according status flags that change at the server end. It appears to me that the the dynagrid is ok for this. 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. Any guidance on where I can an end to end picture of how to do this?

Giuseppe Corti

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:

dynaGrid.setNodeTypes(["div","span","img","a","input","svg","rect"]);

Then you should define a grid cell for your svg polygon:

[HTML] <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>[/HTML]

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:

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

nimbusgb

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

nimbusgb

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

 
    <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

Giuseppe Corti

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:

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

nimbusgb

think that's a little off track.

I'll keep experimenting.