Interactive kiosk application 'Media Match'

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.

6 Likes

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

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

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

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

1 Like

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?

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:

1 Like