I have written a scetch for processing. I’m reading a circuit of sensors via usb and I’ve created a graphical environment. Is it possible to create a server within the same scetch and display a second user interface so that I can manage the data through a website eg chrome ??? if so what would you advise me ??? Thanks.
1 Like
Hi @Theo68
By USB you mean USB serial to Arduino or similar?
I don’t know if Processing-Java can help you, but this was my route:
- Processing IDE, top right “Java” select (add mode?) p5.js.
- Use the Javascript examples and learn Javascript.
- Watch videos about Node.js starting here: https://www.youtube.com/watch?v=bjULmG8fqc8&feature=youtu.be
- (For RPi add GPIO interaction from GitHub - jperkin/node-rpio: Raspberry Pi GPIO library for node.js)
- Add serial comms from GitHub - p5-serial/p5.serialport: Client for use with p5.serialserver
Now you can build a web-site where Node.js runs your server written in Javascript, with serial comms to Arduino, socket.io comms to the web-page (that it served to the browser on phone/PC etc.) UDP comms is also useful between two of these servers, or other programs in Java/C(++).
2 Likes
In the same issue, I could use the server / client library in processing so that by developing a server application in p5.js I can transfer the variables and make a new graphical interface ??? Do you think this is possible ???
For creating browser based control panels for Processing sketches I’ve used one of these options:
- websocket server library (https://github.com/alexandrainst/processing_websockets). You can implement websockets in a local html page without the need of a server. Just open it with double click and it can communicate with Processing. Note that the lib provides client and server. I used server, the client is the html page.
- a simple nodejs application that serves html, css, javascript and provides websockets to communicate with the html page, then OSC to talk to Processing. I’ve done that to create multi user applications where participants use their mobile devices connected to a local wifi, all communicating with Processing, openFrameworks or three.js.
- https://github.com/sebpiq/rhizome and maybe https://nexus-js.github.io/ui/
With a friend we created this for a party where people participated with their mobile devices:
The idea was that there could be a bunch of multiuser interactive sketches to try. Not very documented but if anyone is interested we could add some more details.
1 Like
Yes, I used socket.io as in the video to transfer values both ways between server and web-page. Then built with rect/text/etc. as in p5.js. One application shows the temperatures in the house hot-water tank. The top 3 rects keep moving right to show everything is working. Top one is simply frameCount in the web-page, next has been to the server (RPi) and back, next has been to server, Arduino and back. It still does the ‘draw on one client appears on all the others’ as in the video because I started with that.
in my own project for small greenhouses I use an esp32 as master unit which communicates with 5 others via esp-now protocol and collects all the values in separate arrays. With these I update the application via usb port. with the graphics that I have done in prosessing I can and do monitor all the prices and moves that are made. At the same time I can activate all functions manually or automatically. What I want for the future is to be able to access from anywhere via computer or mobile. And I confess that this piece will be the most difficult for me.
1 Like
I took a look at everything you suggest. At the moment I’m so confused that I can’t decide where to start. I’ve also seen other posts you’ve made about websockets. I just haven’t found the edge yet to start. Thanks again
Sorry about the confusion…
I totally forgot about the post you mention:
What if you start by listing everything you need in your html interface? names and types of inputs / outputs?
Are you experienced with plain web development? vue.js or react?
I started experimenting with processing and I have something that definitely works. Transferring Gui to a page is the next step. If I ever gain the knowledge and experience, I may come to the conclusion that there are simpler solutions than the ones I use now. There is always something new or better. I just don’t have the knowledge and experience to see it.
Also use and connect to a database. I keep finding something new to do. But there is something ready and that is the sure local handling through processing. For all that we are discussing now I do not have the relevant experience and what I am looking to find is a way out because it would be a great disappointment for me to deal with a language that would not be able to meet my requirements or that would make it very difficult for me. .
Can you give more details about what you are looking for? What’s the real goal? I understand you have something that works, and you want to change it. Can you elaborate on why?
Currently I can think of three reasons for having an html based interface in my projects:
- Once an interactive installation is set up, it can be hard to physically access the computer to tweak settings. Being able to adjust settings on a tablet or phone makes things easier for me.
- Other times I want the audience to be able to participate. Most people carry a mobile device with a web browser. That’s the lowest common denominator. I don’t need to provide a device for people to use or worry about it being stolen: people use their own devices to interact.
- One more reason: html/css/javascript makes iterating over the design and behavior of a GUI easy, simpler than creating interfaces in Java or C++. You can change things in real time without having to stop and restart a program. The browser console/inspector lets you see the current state and observe and change values and design. This greatly helps develop and experiment with the GUI. It is also great because of the separation of concerns: you write a core Processing program that works right and the messy part of user interactions is totally separated, becoming easier to maintain.
I could use the server / client library in processing so that by developing a server application in p5.js I can transfer the variables and make a new graphical interface ??? Do you think this is possible ???
It is possible. You need to decide what kind of interaction you want: is the web interface only showing information? (so Processing sends data, maybe via websockets to the web) Or do you want bi-directional capabilities, so you can tweak values BOTH in the Processing window and in the HTML window? It’s also doable, just a bit more work.
Will you set this up just once? Or other people must be able to set it up and use it too?
I saw and tried the example you mention with websockets but I generally did not find more information about this library in a processing environment. The same goes for developing a webpage. I miss the “usage instructions” and the way to retire for the page development environment, whether it’s html or js or anything else.
If you have any specific questions I or others can try to answer 
1 Like