This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jaco Otto
Posted Apr 19 - Read on Facebook

Hiya,

I want to build a TV UI prototype which is controlled with a PS4 controller or a remote. I saw a tutorial which explains how to rewire a bluetooth controller to macbook keyboard keys. (https://blog.framer.com/apple-tv-prototype-with-framer-using-game-controller-59f1fc3d3b0f ) I want to use the keyboard arrow keys to move the selected states between different elements depending on the direction one press on the dpad of the remote. Down to select/focus on an element below, right to select/focus one on the right. etc. When you press Enter it needs to load a new screen or perhaps pause the video etc. Does anyone perhaps know a good tutorial for this? The one I linked to seems really hard to adapt to what i need, since it's specific for a grid of identical items. Perhaps due to my lack of coding skills I don't know how to group elements and move the selected state between different elements with the arrow keys. Any links or suggestions would be greatly appreciated. Thanks

3 Comments

Jaco Otto

Thanks Ntin, I think you are right, the code might be in the prototype in the link. When i analysed the code (BTW i'm a complete noob) it did appear that it's mainly for a grid of identical items (image and title) with the same hover effect. I'll try and apply it to the image i uploaded, to move focus between not identical icons. Your prototype is very similar to what I'm trying to achieve, I want build the video controls and a few other screens .

Jaco Otto

btw, your prototype looks great, is it perhaps possible to see the framer code?

Jaco Otto

I did figure it out in the end, sort of... This is now using keyboard arrows and enter/return to navigate https://framer.cloud/Utley/ and I found Remotebuddy https://www.iospirit.com/products/remotebuddy/ to link a Playstation 3 BD Remote

Read the entire post on Facebook