Interactive kiosk application 'Media Match'

Share your Work
1

The interactive kiosk application Media Match (Video), as seen in the News exhibition at the Museum for Communication in Berlin. Of course - Made with Hype… :wink:

The idea behind the application: to determine an individual news profile. What suits me best — video or audio, culture or politics, serious or lighthearted...? Based on the user´s preferences, the app presents suitable providers in a short profile, including a video introduction.

If you want, you can test it here.

mediaMatch
mediaMatch1024×807 74.3 KB

6 Likes
2

Bravo! Love it.

Would be cool if you shared this on Tumults Gallery page, along with a hype file. I just want to see what you're using for certain interactions.

1 Like
3

Unfortunately, I’m not allowed to share source code. However, if you’re interested in a specific feature, feel free to ask! I can certainly explain it using a small dummy example.

1 Like
4

Cool no worries at all, what are you currently using Scenes, Timelines... or any javascript hooks. I want to attempt at creating something of this nature as a fictitious project. I have general Idea on how you did this, however it would be nice to see how it was made from a purely functioning point of view and I totally understand about the not allowed part. @Daniel you can update the blog to feature this amazing Kiosk example of Hype in action. @ktewes it would be nice (if you can, and have time) for a Q/A session on how you built this with @Daniel with screenshots. It would certainly inspire other Hype users.

1 Like
5

Awesome exhibit! It is always fun to see work in a larger/more physical form :slight_smile:.

1 Like
6

Hi, this looks amazing. I'm really curious how do you make it run on these touch screens? Is it easy to implement and make it run in Kiosk mode?

7

Hello! Well, it's not really a kiosk application in the true sense. That was the original idea, but we changed it for update reasons (central content management). So this is just a regular website, with the graphic switched to fullscreen via script:

var elem = document.getElementById(hypeDocument.documentId());
	
	if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
		if (elem.requestFullscreen) {
			elem.requestFullscreen();
		} else if (elem.msRequestFullscreen) {
			elem.msRequestFullscreen();
		} else if (elem.mozRequestFullScreen) {
			elem.mozRequestFullScreen();
		} else if (elem.webkitRequestFullscreen) {
			elem.webkitRequestFullscreen();
		}
	}

Handling the touch monitor was straightforward – it worked right away (well, on the second attempt. The first time, the monitor – an iiyama ProLite TF3238MSC – arrived with a completely broken display... :grinning:

2 Likes