Web interface (ofxHTTP, ofxJSONRPC)

It’s certainly possible to run the ofxJSONRPC server app on a web server (i’ve done it before), it really depends on the architecture of your network, and how you local app will get that data etc … if you make a little diagram of your ideal setup (your local machine, the server, the gui, etc) maybe we could give you some ideas?

yes,
hope this sketch makes it more concrete:

basically, i want to send data to an ofApp via the website and pull data from ofApp to show it on the website.

1 Like

Assuming your local net has a static ip address (or you can setup dyndns or something to make sure you can locate it), it seems like the easiest solution is to forward an external port(s) on your router to the raspberry pi’s ports of interest. There are lots of resources for figuring out how to forward ports (http://portforward.com/) for your particular router.

So, if your external IP address (for your local net) is something like 198.123.123.2 and you forward the external port 2987 (or whatever) to the internal port 192.168.1.10:8197, you could get the web page from anywhere on the web using:

198.123.123.2:2987 which would map to 192.168.1.10:8197.

If your local net does not have a public ip address or a router you can configure for port forwarding it gets a little trickier. That’s when I start to think about reverse ssh tunnels or VPN services or something like that.

1 Like

Hello @bakercp.
I have another question on this topic: is it possible to have this IP video being responsive as well when displayed in the web page? Something similar to this: http://getbootstrap.com/components/#responsive-embed

I manage to have the container being responsive but I cannot get to have this video being resized at same time as the window is shrinked.
Thanks

Currently the video just presents itself as an image, so you can resize the <img> tag in the html (I think you already tried that). If you want to change the size on the back end, you’ll need to modify the code. The easiest way I can think of would be to add some parameters to the URL for the IPVideo so that when the stream is requested initially you can specify the requested size … and then keep a cache of different available sizes to send. I’d start looking in the IPVideoRoute::send method and at the

        IPVideoFrameSettings settings;
//
//        settings.quality = settings.quality;

        IPVideoFrame::SharedPtr frame = IPVideoFrame::makeShared(settings, timestamp, compressedPixels);

section. I started to implement something this … but didn’t finish it as you can see.

1 Like

Ok, thanks.
On my side I asked some help from more gifted people than me in web-related thing and found a solution.

Instead of displaying the image using:

<img src="/ipvideo"></img>

I used:

<img src="/ipvideo" style="width:100%; max-width: 640px;"></img>

I still have difficulty understanding exactly what this does but it works awesome :smile:

2 Likes

Sounds like a nice, simple solution, just scaling the image in HTML. Great!

Just a little addition to this topic:
I realised that since the IP video server is using MJEPG, it does not work on mobile platform browsers.

I found this solution that fixes this problem: https://github.com/rodowi/Paparazzo.js
Now I am able to get the video stream on mobile platform as well! :stuck_out_tongue:

2 Likes

hi there,
again, thanks for all this! with your help i was able to get the ‘simpleWebInterface’ working on a vserver, and now i can access the gui from anywhere out there.
in my case, it is not always possible to open ports or change routersettings, so i decided to run the ofApp with json- and videoserver on a vserver with static ip. this vserver then also provides the webgui.html. so next step for me would be to set up a jsonrpcclient in the ofApp of my RPI, that connects to the jsonserver on my vserver to send data continuously. does this make sense? till now i thought that the ‘simpleWebInterface’-app first inits the jsonserver on localhost, to serve it later with data. then it should be easy to change the settings. “do no connect to localhost:xxxx but domain.com:xxxx” . But i’m not so sure anymore :slight_smile:

i tried to visualize the problem. my question is represented in the red line. how can i send json from a ofApp to the jsonserver-app on my vserver?

i tried this command via terminal but it isn’t working:

curl -X POST -H “Accept: application/json” http://81.89.101.8:8197 -d ‘{“main”:“1.0”,“method”:“test-checkbox”,“module”:“Server”,“params”:{“bool”:false}}’

returns this: 500 - No handlers for route.

got it working with ofxLibwebsockets !
i modified example_client_hello_world so that it connects to the jsonrpc-server (vserver).
this command sends the slider-data:

client.send("{\"jsonrpc\":\"2.0\",\"method\":\"test-slider\",\"params\":"+ ofToString(slider) +",\"id\":"+ ofToString(idcount) +"}");

slider is a float, idcount is an int that counts up with every sent message.

hi @Meach,
concerning the float problem you can change the following line:

setSliderValue(args.params.asFloat());

to

setSliderValue(ofToFloat(args.params.asString()));

thank you guys!

1 Like

hi! i need some help for this:
need to build a web interface with 10 pushbutton to activate and deactivate
gpio of the raspberry pi from multiple clients . could do this with get or post?

You can do this pretty easily with ofxJSONRPC. See the push button examples. Inside the example, buttons (from bootstrap) are used to trigger sounds on the server (which could also be use to trigger GPIO pins on RPi).

1 Like

hi @bakercp
Example works very well, now I need to send with python (or other language) and receive post data to the server (in raspberry pi)
i test this:

import requests, time r = requests.post('http://192.168.0.103:7890', data={"ts":time.time()}) print r.status_code print r.content

and this is the console output:
500

500 - No handlers for route.

500 - No handlers for route.

What code are you using on the server side?

1 Like

hi @bakercp!
I have a full working implementation of a user interface that controls analog device DSP with I2C . It look awesome and continue research to improve.
thanks for your help
and thanks for share!