-1

I don't seem to know the right keywords to search for, so I'll describe what I'm trying to do, with a simple example, and hope for some possible techniques/technologies/libraries/tutorials.

One or more people can view a web page containing a color chooser (eg: jqueryui's color picker, with 3 sliders and a changing color box). When you first access the page you see the currently selected color (global and shared among all users). If any user changes the color by moving a slider, then (1) the new value is immediately passed to the server (which will control a physical light), and (2) the color pickers for any other viewers of the web page are changed as well.

So the two key dynamics are: One - the browser sends new values to the server whenever the user changes them on screen (eg: moves a slider) in order to update a global value common to all users. and Two - whenever the global values changes its send to the browsers of all current viewers. (If two users try to change the same control at the same time, I do not care which one "wins", just that the system remains stable).

I suspect this involves connecting a javascript UI library like jqueryui with some ajax or web socket functionality, but I'm not yet finding any references or tutorials or libraries for this.

If it matters, the initial target is a Raspberry Pi server being accessed over WiFi by phone browsers, and controlling patterns displayed on "pixel" LED lights through multiple interactive UI elements; the color picker described above is a simplified example.

And I could do this without immediate interaction by having a conventional form and submit button which sends values to the server, and refresh button which redraws the page from the server's current values. But I want users to be able to see the physical lights change as they move the slider (albeit with some inherent small delay). And I'd like other viewers to be able to start making changes from the current color (pattern/params) without needing to do manually refresh the page first.

Zeph
  • 109
  • 3
  • You'll probably need to add some code to your question if you want a good answer. Have you tried anything yet? If so - use the code in your question - if not, try something before you ask for help. – Andrew Hendrie May 11 '15 at 17:31
  • Its fairly straightforward. Establish a two-way communication channel between clients & server via web-sockets (or ajax-polling). listen/send commands on the channel, and update the UI accordingly – levi May 11 '15 at 18:08
  • Can include `html` , `js` tried ? – guest271314 May 11 '15 at 18:08
  • I suppose there will not be thousands of people at the same time using this so you can do something simple as this : - 1 - on slider value change -> send value to php script for ex : put.php - 2 - php script store value on a database or just a text file should be enough - 3 - get.php is an other script that return value from database - 4 - an ajax call is made each x seconds with a setInterval on get.php - 5 - if local value not equal server value -> update slider – jeremy castelli May 11 '15 at 18:12
  • See http://stackoverflow.com/q/24317036/2801559 , http://stackoverflow.com/q/22740665/2801559 , – guest271314 May 11 '15 at 18:14
  • Sorry - no code yet, because I am looking for a tutorial or library or hints on rolling my own solution. @levi says it's pretty straightforward, but I'd love to seem some example or tutorial as the straighforward aspect for levi may be one notch above my current understanding (but not out of grasp with a little help). – Zeph May 11 '15 at 18:33
  • So what I've tried so far is searching for a library or tutorial which would describe or support the techniques needed to enable such dynamics, without success - so I turned here for some pointers. It's not that I have bugs in code which tries to do it but fails, it's that I don't know what techniques to use in writing the code. @jeremy castelli - could you expand upon that as an answer? – Zeph May 11 '15 at 18:44
  • yes I can :) but I am not going to write your application so I would just write the same thing. I just wanted to give you a different direction. I just wanted to explain that the server doesn't have to push the values to the clients. But that the clients checks every x seconds if the value has changed. – jeremy castelli May 11 '15 at 18:55

1 Answers1

-1

I recently attended a microsoft web dev camp and they were talking about signal R which sounds alot like what you are trying to do. if you want I can make the demo lab they had for signal r available to you through dropbox

Bryan Dellinger
  • 4,724
  • 7
  • 33
  • 79
  • Yes,thank you, that does sound like a good example of what I'm looking for. But alas, on the host side I do not know asp.net and especially not on a raspberry pi. Is there a similar toolkit for PHP or Python (if it must be host-centric)? Or just using javascript (if it can be closer to host-agnostic)? – Zeph May 11 '15 at 18:37