Author Topic: Custom Interface to Video Player  (Read 19777 times)

fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Custom Interface to Video Player
« on: May 31, 2014, 09:02:56 AM »
Hi All

I would like to share a project I am developing for my daughter.  She is non-verbal ASD with significant hyper-activity.  She enjoys watching her favorite videos but the remotes and menus are too complex.  And that isn't even pointing it at the media playing device.

So I have thought up a system using a makey makey. It seems I am only using the makey makey in the most basic sense but it is a critical component.

The makey makey will allow my daughter to press large buttons (replicating a key stroke).  Using HTML5 in Chrome, it is easy to throw videos onto a TV screen (via HDMI from the PC).  I have written some javascript which does the following:

Press the key 'w' - play The Wiggles.

Press the key 'space' - play next Wiggles video

Press the key 'h' - navigate back to home page of video player.

Whilst waiting for my makey makey, I have been doing to javascript.  My makey makey just arrived and last night quickly wired up the space key to show that I can "play the next video'.

Next is to create an enclosure for the buttons and makey makey.  It needs to be quite robust as she can be forceful with objects.

But I see it will give her great independence to finally be able to choose what video she wants, rather than relying on us to press the buttons for her.

Always happy for more ideas and comments.

johnschimmel

  • MaKey MaKer
  • Posts: 7
    • View Profile
    • DIYAbility
Re: Custom Interface to Video Player
« Reply #1 on: June 02, 2014, 08:26:24 AM »
Sounds like an awesome project!

Wanted to share and make sure you knew about the bluetooth module from Sparkfun that turns the MakeyMakey into a wireless Bluetooth keyboard, https://www.sparkfun.com/products/11378 and it includes a rechargable battery. Was thinking this might be helpful for her (and you) if you want to create a more "remote" like experience.

I have hooked one of these up, the only real technical requirement is to reflash the MakeyMakey with some new code. It's completely revertable and can go back to a standard usb makeymakey with another code upload.

Do you think you could share some photos or maybe an instructable of the remote :) I know there are a bunch of parents who would love to see what you've done.

Best of luck

Wim

  • MaKey MaKer
  • Posts: 12
  • The devil is in the detail.
    • View Profile
Re: Custom Interface to Video Player
« Reply #2 on: June 03, 2014, 05:26:18 PM »
I've build this MM based 4 button "mouse" in combination with a custom Youtube Player for Google Chrome Browser in Full Screen mode (Win OS) for my son.

Functions: TAB = select movie, ENTER = play movie, LEFT-ARROW = rewind movie, LEFT_CTRL+F4 = close movie. See: http://www.productiondesign.nl/yt_player/index.php and "mouse" in the attachment.

I'm looking for someone who can help me with a piece of "text to speech" javascript-code, which makes it possible to synthesize the link-title-attribute-text on focus.... as my son cannot read...


 

fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Re: Custom Interface to Video Player
« Reply #3 on: June 07, 2014, 03:33:25 AM »
What an awesome forum!  I will definitely share some more photos, code, etc.  I will make it "open source" naturally. 

I just finished mocking up an enclosure with some buttons.  And she took to it within minutes.  The makey makey and javascript is robust to long presses (which I was concerned about).

And I love the custom youtube player and "mouse".  We seem to be on the same wavelength.  I was looking for a way to have the videos locally as the internet is slow and expensive in Australia.  I would be keen to see your javascript for the custom player (mine is quite basic).

fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Re: Custom Interface to Video Player
« Reply #4 on: June 07, 2014, 03:43:11 AM »
In terms of javascript text to voice, I googled up this

http://www.masswerk.at/mespeak/

Wim

  • MaKey MaKer
  • Posts: 12
  • The devil is in the detail.
    • View Profile
Re: Custom Interface to Video Player
« Reply #5 on: June 08, 2014, 08:55:05 AM »
A few years ago I've written an offline player in combination with a Adobe Flash media player, which was able to stream movies over my home network. The interface was designed for touchscreen and build with PHP/MySQL/HTML/CSS.
The cumbersome multiplexing process - to compress each DVD-movie to streamable MPEG4 format - was the reason to stop the project. It simply took too much time.

The custom YT_player is also a combination of PHP/MySQL/HTML/CSS. It is less cumbersome and much more versatile then my offline player in a way that the movies are online available on Youtube. One can choose and customize everything with simple MySQL queries. Of course an internet connection is required and if that is too expensive or unavailable the player is worthless. A combination would have best of both worlds.

What video file format are you using? How do you get your movies?
I'm very curious about your code and hardware as well. Is it possible to post a picture of your hardware?

The JavaScript I'm looking for needs to be able to activate the 'text to speech' on 'movie focus' i.e. when the TAB key is pressed and the two green 'focus-bars' (on top and bottum) appear. It then needs to speak the link/title attribute. My javascript knowledge is very poor.

 




« Last Edit: June 08, 2014, 03:08:37 PM by Wim »

johnschimmel

  • MaKey MaKer
  • Posts: 7
    • View Profile
    • DIYAbility
Re: Custom Interface to Video Player
« Reply #6 on: June 08, 2014, 11:42:57 AM »
Hi Wim,

I haven't fully tested the mespeak file integration but this JS might get you started. Be sure to download mespeak and load onto your webserver. There are 3 files that are required, the main mespeak.js and 2 configuration files - noted in the sample script.

Here's the script, https://gist.github.com/johnschimmel/c9f5dbc0f438ba70f555

Basic idea,
1) load jquery
2) load mespeak
3) When document ready, run some jquery that will configure mespeak and set up onFocus event listeners.
4) When a selected item is focused the title attribute will be captured, logged to console and hopefully spoken with mespeak.

This javascript should go at the bottom of your html file just above the closing </body> tag.

Good luck!

Wim

  • MaKey MaKer
  • Posts: 12
  • The devil is in the detail.
    • View Profile
Re: Custom Interface to Video Player
« Reply #7 on: June 08, 2014, 02:27:33 PM »
Hi John,

First of all thank you for your help. I appreciate it very much!!

I installed the code according to your instructions and tested it in Chrome. see: http://www.productiondesign.nl/yt_player_mespeak/

Somehow it doesn't seem to work. Did I make a mistake?
« Last Edit: June 08, 2014, 03:14:57 PM by Wim »

johnschimmel

  • MaKey MaKer
  • Posts: 7
    • View Profile
    • DIYAbility
Re: Custom Interface to Video Player
« Reply #8 on: June 08, 2014, 04:39:44 PM »
Looks like a little of JS confusion. Instead of linking to your makeyscript.js file. Just copy the contents of the file from the github link  and put it into you .html / .php file  - quick Javascript tip - if you see a <script> tag - put that whole file in your html.   I incorrectly labelled the  first code sample I gave you, it was not a .js file but rather  .html. sorry about that

If you just copy/paste it above the </body> tag in your HTML you should be good.  I edited the file a bit to match your file structure.

Same link here, https://gist.github.com/johnschimmel/c9f5dbc0f438ba70f555

If it works  you can adjust the .speak function with different arguments for speech variation
« Last Edit: June 08, 2014, 04:44:17 PM by johnschimmel »

Wim

  • MaKey MaKer
  • Posts: 12
  • The devil is in the detail.
    • View Profile
Re: Custom Interface to Video Player
« Reply #9 on: June 09, 2014, 02:21:55 PM »
Changed it and it works!!

Although it does need a little editing and a tweak here and there it's is a very good starting point.

Thanks again John!




johnschimmel

  • MaKey MaKer
  • Posts: 7
    • View Profile
    • DIYAbility
Re: Custom Interface to Video Player
« Reply #10 on: June 11, 2014, 11:45:51 AM »
awesome! happy to help!

Wim

  • MaKey MaKer
  • Posts: 12
  • The devil is in the detail.
    • View Profile
Re: Custom Interface to Video Player
« Reply #11 on: June 14, 2014, 07:13:56 AM »
Another thing John.

The text to speech script is called (everytime) a selection is made.
The issue now is that one has to wait for the synthesizer to finish to select the next movie. If not the new text to speech instance starts while the current one hasn't finished, making the whole experience quite cacophonic...

Is it possible to 'interrupt' the script or synthesized speech when the next movie is selected??

W.
« Last Edit: June 14, 2014, 08:31:44 AM by Wim »

johnschimmel

  • MaKey MaKer
  • Posts: 7
    • View Profile
    • DIYAbility
Re: Custom Interface to Video Player
« Reply #12 on: June 22, 2014, 09:32:22 AM »
Sorry for the delay, busy week!

It looks like the mespeak library provides a .stop() method to stop all playing audio. I added it to line 24 of the previous example. https://gist.github.com/johnschimmel/c9f5dbc0f438ba70f555

hope this helps stop audio before playing the next.

Wim

  • MaKey MaKer
  • Posts: 12
  • The devil is in the detail.
    • View Profile
Re: Custom Interface to Video Player
« Reply #13 on: June 23, 2014, 06:28:33 AM »
« Last Edit: August 02, 2014, 06:34:45 AM by Wim »

fluffyfish

  • MaKey MaKer
  • Posts: 13
    • View Profile
Re: Custom Interface to Video Player
« Reply #14 on: July 13, 2014, 08:34:55 AM »
Not much progress on this.  The buttons concept works really well for my daughter.  She took to it instantly.  What little time I have been spending on this has been working on the PC side.  I was originally thinking of using a beaglebone (and bone script) but more investigation suggests that a Raspberry Pi will be the best choice.  Raspberry Pis apparently do video better than the beagle bones.  Luckily I have a pi sitting around so in the process of configuring it.  As I slowly make progress, I will keep this thread updated.