Using Open Hybrid as front end

So I got Open Hybrid up and running, very cool.

I had a simple question as my javascript is quite basic compared to Python, and I don’t know much about node.js.

My goal is to basically use Open Hybrid as a front end for digital media installations, which may or may not use any arduino’s or serial devices. My thought is that running the node server on my Windows machine, I should be able to catch the broadcast messages from interface elements from within other software?

Looking around, it seems like it’s going through and in the sensorAndSlider example, touching the slider results in socket emit() calls.

So then in theory these are broadcasted and I can pickup on them from elsewhere without needing to open my own server connection?

Do you think that this conversation here could help you answering your questions?

@valentin I had read through that, but I don’t really need to interact with the machine directly, as much as I would like to pass all the interaction data to another software via UPD, OSC, TCP, anything networkable really. I tried listening on port 52316 and could catch the heartbeats, but I couldn’t seem to hear any values from the default slider.

The slider data is send to the object server via a direct TCP/IP connection using WebSockets ( and the web server port.

You can read the incoming data within the server.js in the socketServer() function.
This is where you could include your OSC and so on.


Is it possible to use the Reality Editor with a custom server ,
say i want to create a server which listens to values send from the slider from the reality editor, which format does it use ( UDP ?) ,which port should i listen to ?

Yes this is possible.
However, the open hybrid server is really exactly that.
It takes care of all the necessary communication steps with the Reality Editor.

  1. It broadcasts a heartbeat.
  2. It responds to the http calls for downloading the targets
  3. It responds to the http calls for loading the web based interface.
  4. It responds to settings that are made via the developer interface.
  5. It implements a REST protocol for dealing with the links.
  6. It implements the Websockets for communicating with the web based interface

I would suggest to build up on the open hybrid server as anything else seems a lot of extra work. Study how it works and then adopt it for your own needs.

If you have some ideas for what you want to do with the platform, maybe just share these ideas in this forum and we can think about how to add them in to the server it self? This will allow your idea to stay compatible with all future changes.

1 Like

I want to use the reality editor to switch on/off lights using the pi ,
i.e A augmented button appears when pointed at target ,then i want to switch on/off the device by pushing the button on reality editor ,
For this i can use the npm-onoff module , i need to be able to send the data from the button in the reality editor to the server on the pi and use the PIs GPIO to trigger the device

You don’t need a custom server for that. That’s exactly what the pi HW interface is for. Just expose a I/O point let’s say “switch” in the pi Hardware Interface. Then you can write values from the web frontend to it like in the example.

I would do something like the following in the script section of your index.html (don’t forget to include object.js and update your git repo because @valentin just did some work on that file):

var obj = new HybridObject();
var switchValue = 0;

obj.object.on("object", function (msg) {
     var data = JSON.parse(msg);
     if ("switch", data)) {
         switchValue ="switch", data);
    setInterval(function () {
    }, 50);

function toggleSwitch() {
    if (switchValue == 0) {
      obj.write("switch", 1);
    } else {
      obj.write("switch", 0);

Whenever the button is clicked call toggleSwitch() witch the onClick() event.

1 Like

This is what the example is made for.
It shows you how to send these commands.

You can learn more about it with this reference:
(I might need to separate the arduino from the javascript reference)

If something is unclear with these steps, we have to work on documenting them better.

The same way you can send data to an IO-Point from the arduino or your pi you can also send data from the web interface.

You just need to
obj.write("<name of your IO-Point>", <value to be send>);

If you want to read data from the server then you need to request the data to be send to your webpage with this line:

obj.readRequest("<name of your IO-Point>");

This will trigger the server to send the data to the Reality Editor.

The data transmission will trigger a event in your Reality Editor webpage:
.object.on(“object”, function (msg) { })

Within the event you can then read the IO-Point data from the server:

obj.object.on("object", function (msg) {
 <data> ="<name of your IO-Point>", JSON.parse(msg));

@valentin @Carsten , Thanks, it seems i had not fully understood the pi interface, now i get it ,
we need to do more documentation for the codes for interfaces

It seems like it.
Let me know any small problem that you have and I will find answers. We then should compile all of it in to a simple documentation.

Uff so much work to do. :smiley:

1 Like

Yeah, and I think we should write some sort of guideline on how to implement new hardware interaces as well. For example it is very important to follow your design guidelines @valentin (which got me confused in the beginning :wink: ) and where to put the addIO() calls (which is still a work in progress) and stuff.

Maybe a development guidelines section on GitHub and/or the open-hybrid site ?

Lets move the discussion for the documentation to:

Hi Valentin (@valentin),
I have some problem when I try to read the value of one IOPoint.
In my scenario I have two object: lamp and gear. Each object has one IoPoint, lampIOPoint for lamp e gearIOPoint for gear.
Using th following code in the index.html of gear object I am able to write his value in the gearIOPoint:

var obj= new HybridObject();
obj.write(“gearIOPoint”, value);

gearIOPoint is linked to lampIOPoint (using reality editor interface) so when I change the value of the first one I can read the new value of lampIOPOint using:

var obj= new HybridObject();
obj.addReadListener(“lampIOPoint”, function(e){

but I am not able to read the lampIOPoint value when I load the index.html page (of lamp object) for the first time.
I tried to insert in my code the following rows:

var obj= new HybridObject();


obj.object.on(“lamp”, function (msg){

var data = JSON.parse(msg);

if (“lampIOPoint”, data) != undefined)
print(“lampIOPoint”, data));


but no value is printed.
Thanks for your precious support

P.S. print is my javascript function to allow to write the value in my canvas object

Hi @alessiocamillo
I think you have an error in your code.
The old read method that you use here is not used anymore.
If you still want to use it, you need to act on general “object” messages instead of messages with the name of your object.

Try this:

var obj= new HybridObject();

obj.object.on("object", function (msg){
    var data = JSON.parse(msg);
    if ("lampIOPoint", data) != undefined) {
        console.log("lampIOPoint", data));


The addReadListener is basically doing the same thing as your obj.object.on.
You no longer need the readRequest because the latest Server version has an auto subscription model implemented. It automatically sends new values when they are coming in. However if no new value comes in when you first open the page, no actual state is send from the server. Thats where I think you do the right step to enforce the server to send a value via the readRequest.

So you can write your code just like that as well:

var obj= new HybridObject();

obj.addReadListener("lampIOPoint", function(e){


Let me know if the readRequest is now working. Otherwise we might need to make some changes in the server to force a message up on its call.

Hi @valentin,
thanks for your reply.

I tried to use the general “object” in the object.on method and it works.

In this moment, the working version is the one with readRequest together with object.on

 setInterval(function () {
       }, 50);

   obj.object.on("object", function (msg){
        console.log("inside obj object on");
   	var data = JSON.parse(msg);
   	console.log("lampIOPoint", data));
   	drawLampUI("lampIOPoint", data));



Hi @alessiocamillo

Can you try the addReadListener method as well?

It is basically the same just packed in a nicer API.

Hello @valentin

this is Steve
I work with @alessiocamillo

We have been testing code together
and the final version of the reading value part (for the lamp) is:

}, 50);

obj.addReadListener("lampIOPoint", function(e){

The code above is working fine

Thank you for the support


Hi @stevepayne,
you don’t have to place the readRequest in a loop.
The Reality Editor automatically subscribes to all changes on the server.
You only need to open the addReadListener and wait for data coming in.

If you want to get the last state of the server at the moment you point at your object, you only need to call readRequest once. You would do this because, the server only sends data by it self if there is actually a change.

The following code should give you the same result as your example, but relieves significantly the server from handling requests.
If this does not work, you may want to delay the readRequest by a view milliseconds.

obj.addReadListener("lampIOPoint", function(e){


Can you try if this works for you and produces the same outcome?