Sending a button press from a different machine

I'm working on a museum project and would like to use a couple of Hype based project over two screens - one shows information on a touch screen but also can control video clips (and other scenes) on another machine (and thus IP) with a screen.

One device may be an Android tablet with Fully Kiosk as its browser which the developer said to advantage of the browsers REST API - I'm knowledgable of HTML but little experience in the REST to send something like /?cmd=loadUrl&url=javascript%3Asomefunction%28%29%3B

Any pointers would be greatly welcomed.

Not sure if this thread is what you need but may be worth a look.

Yeah was looking for something that is point to point so no internet required. Pusher is interesting but the delay wasn't great and needing to talk to servers even less so.

That line you have there looks like you are sending a function via a parameter ?

Hasn't your developer given you any instructions for the setup of pushing the message and receiving it?

You can user the pusher template combined with Hype Global Behavior. This is a proven solution for that scenario given you are online with both devices. If you need a local solution you can run a custom socket server. The pusher solution is just very easy to setup up and the free plan is mostly more than enough.

1 Like

What about a local web server? :thinking:

Also, here's a crazy idea… https://caniuse.com/?search=bluetooth …what about Bluetooth? The support is terrible, but maybe there's a chance for the two computers to communicate over Bluetooth.

I haven't tried that tech, but that seems like a cool way to solve the problem — if it works. There are potential security issues though…

The Web Bluetooth CG has opted to only rely on user consent, which we believe is not sufficient protection.
https://mozilla.github.io/standards-positions/#web-bluetooth

Bluetooth is an interesting idea! It also appears that WebRTC allows for peer-to-peer connections via data channels. Both are probably not the easiest to code, though.

If you don't do either of these, you'd need an approach where there's a server/service in the middle. Unfortunately other web technologies (like web sockets) don't allow for setting up servers within the browser and must be run elsewhere separately.

This is super cool :smiley:.

I've done this for a museum project at Mystic Aquarium. I ran two different windows on one machine instead of two computers which was my initial goal. This way it was MUCH easer to control one window from another instead of trying to control another computer.

I had a touchscreen that controlled the projection on another screen. I opened one window fullscreen and sent commands to the other window opened on the projection screen. On scene change the touchscreen page sends a command to a listener script on the other monitor that tells it which scene to play.

The touchscreen script looks like this:

function changeSceneBrain(hypeDocument, element, event) {
	localStorage.setItem('newScene', 'yourSceneName');
}

The listener script looks like this:

function listenSceneChange(hypeDocument, element, event) {
	window.addEventListener ('storage', function(e) {
		hypeDocument.showSceneNamed (e.newValue, hypeDocument.kSceneTransitionCrossfade);
	});
}

Again, this was much easier running two window from one computer if that's an option. Hope that helps.

-Jason

1 Like

Just a mess around really but I wanted to see if this would work across my network.
Its a bit of a hack and a concept example, not production:

I am using a text doc that is written to by the controller webpage and read using polling by the webpage that will change.

The polling is 1s intervals which since its across local network work server- using trail of (MAMP Pro)
It would not matter that much.

The server and files can be on any Mac or PC (or online ) for that matter.
In my case one of my Macs runs MAMP


In my sites folder there is the php file that does the writing/overwrites to the text.txt file.

write.php

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');


$data = $_POST['jsonString'];
//set mode of file to writable.
chmod("text.txt",0777);
$f = fopen("text.txt", "w+") or die("fopen failed");
fwrite($f, $data);
fclose($f);
?>

Then two hype projects files.

The write.html is the one I load on the controlling device, in my case iPhone.
Using my local server run by MAMP in this case.

i.e http://YOUR_SERVER_IP_ADDRESS_HERE/write.html

The function to call the php to write

  sceneString = element.dataset.scene;
  $.ajax({
    url: 'write.php',
    data : {'jsonString':sceneString},
    type: 'POST'
  });
  
  hypeDocument.goToTimeInTimelineNamed(element.dataset.timeline, 'dot')

The controlled.html is loaded on which ever device you want to control it on.

The change scene function used.

		
		var txtFile = new XMLHttpRequest();
txtFile.open("GET", "text.txt", true);
txtFile.onreadystatechange = function() {
  if (txtFile.readyState === 4) {  // Makes sure the document is ready to parse.
    if (txtFile.status === 200) {  // Makes sure the file has been found.
      allText = txtFile.responseText; 
               var csene = hypeDocument.currentSceneName();
                if  ( csene != txtFile.responseText){
                  hypeDocument.showSceneNamed(txtFile.responseText, hypeDocument.kSceneTransitionCrossfade, 1.1)	
               
                }
    }
  }
}
txtFile.send(null);

On my mobile I tap one of the buttons to change to a new scene etc...


Any way just a bit of fun but may be helpful

control_test_example.zip (118.1 KB)

1 Like

Thanks all for the info everyone - @MarkHunte your way looks interesting especially as I can send actual hype API commands which for my simple mind helps me make sense of it. I tried building your example Hypedocs and exported to MAMP but not much was happening.

I also have been messing with @Davirus's OBS graphics layer setup - which I have working but am scratching my head how it all comes together. It's quite nice as it runs a web server locally too and uses node.js. Theres a 2 second delay from pressing a remote button the slave(s) changing scenes.

Can you explain more of what seemed to be not happening. :smiley:

When I said site folder. I should have explained better. The files go into the local host folder in the sites folder.


The @Davirus OBS looks great, I totally forgot about that as I don't think I look into it when they posted it.

The zip seems to be missing the index.php?

The Pusher approach comes with a demonstration. To see it in action:

  1. Visit this URL on multiple devices: http://dev.maxziebell.de/Hype/GlobalBehavior/PusherTest.html
  2. Press the button on any device.

Since it utilizes the same Hype document, all Hype files respond to the global behavior being broadcasted across different devices and networks. When working with two Hype files, you can craft an asymmetrical interface where behavior is triggered in one file but not in the other, allowing for bidirectional interactions.

1 Like

That's was just the MAMP - The virtual host was set up successfully. starter page.

I've mad it dynamic now. (with a tine bit of help from Arrggh openAi and the php side. More correcting my syntax)

It does work but remember @MaxZieb and the other approaches are likely more robust as mine is just me messing around with the idea. But it does work..

I've managed to get it working without an external server via REST API sends to Fully Browser

Using @Daniel 's code from here -

This is great as the files are locally hosted on device and no internet required.
Next step is to not do scene changes but button presses as I'd like to control video playback using @MarkHunte 's Video Controller Symbol - Video Controller Symbol

Thanks all for the help

3 Likes