1

I have a bit of a complicated setup and therefore question. I have a PHP script that pulls data from a MySQL table, namely status of some sensors. I created some KineticJS HTML5 to graphically display sensor status from the MySQL table.

I want to have the data automatically refreshed, but I don't want to refresh the whole page, I just want to refresh the relevant elements within the KineticJS stage.

How do I reload the PHP page (to get a fresh read of the SQL data) without reloading the complete KineticJS stage and call a function that will only reload the elements that have changed?

Thanks

lolouk44
  • 199
  • 1
  • 2
  • 4
  • Use Ajax to fetch current data from MySQL asynchronously. Then use the node.set... methods to reset the properties on your existing Kinetic objects which have changed. Finally, do layer.draw() to redraw those changed objects. – markE Dec 21 '13 at 01:32
  • Thanks MarkE for the pointers :) – lolouk44 Dec 21 '13 at 23:20
  • Hi MarkE, hoping you can still advice: I have the sql data retrieval sorted thanks. What would recommend I to run a loop to constantly pull that data and refresh the content? If I run a while loop, the page doesn't show anything (as it's stuck in the while loop). – lolouk44 Dec 24 '13 at 06:47
  • What ya got so far? My advice changes based on your design needs: (1) if your sql data changes infrequently you can put your ajax GET in a timer loop that executes periodically--use setInterval to execute the GET periodically instead of constantly. (2) if your sql data changes constantly you can create a websocket connection with the server. Websockets are duplex connections with the server which remain open and allow data to flow to/from client and server. With websockets, the server can "push" data whenever it changes. I can recommend the socketIO websocket library: http://socket.io/ – markE Dec 24 '13 at 08:05
  • As far as incoming data overwhelming you ability to update the kinetic objects, be sure to update only those objects that have changed based on the latest information. Kinetic now allows redrawing individual node objects without having to clear the whole canvas and redraw everything on the layer. – markE Dec 24 '13 at 08:26
  • hi MarkE, thanks again for your help with this. At the moment I think a 1-2 sec wait before pulling the data will be good enough to have a semi-live display so probably don't need the websocket, but it's prob something I'll look into next out of interest. for SetInterval I was looking at this http://stackoverflow.com/questions/18844365/setinterval-and-ajax. Are able to provide some pointers on how to redraw only a node. closest I could find is a layer per node and redraw that layer. – lolouk44 Dec 24 '13 at 11:21

0 Answers0