Skip to content

A Framer module to generate an interactive Apple TV remote for tvOS app prototypes.

License

Notifications You must be signed in to change notification settings

gohypergiant/RemoteLayer

Repository files navigation

RemoteLayer Framer Module

license PRs Welcome Maintenance

Install with Framer Modules

The RemoteLayer module allows you to instantly generate an interactive Apple TV remote for your tvOS app prototypes. You can choose your preferred styling, alignment, animation and button highlight color. All buttons (and swipes on the touchpad) can be configured to perform your own supplied actions.

RemoteLayer preview

Installation

NPM Installation

$ cd /your/framer/project
$ npm i @blackpixel/framer-remotelayer

Manual Installation

Copy / save the RemoteLayer.coffee file into your project's modules folder.

Adding It To Your Project

In your Framer project add the following:

# If you manually installed
RemoteLayer = require "RemoteLayer"
# else
RemoteLayer = require "@blackpixel/framer-remotelayer"

myRemote = new RemoteLayer

Assigning Actions to Buttons

myRemote = new RemoteLayer
	menuAction: -> <action>
	homeAction: -> <action>
	micAction: -> <action>
	playPauseAction: -> <action>
	volumeUpAction: -> <action>
	volumeDownAction: -> <action>
	clickAction: -> <action>
	swipeUpAction: -> <action>
	swipeDownAction: -> <action>
	swipeLeftAction: -> <action>
	swipeRightAction: -> <action>

API

new RemoteLayer

Instantiates a new instance of RemoteLayer.

Available options

myRemote = new RemoteLayer
	align: <string> ("left" || "center" || "right")
	margin: <number>
	fromBottom: <number>
	gloss: <boolean>
	transition: <string> ("fade" || "pop")
	hide: <boolean>
	autoHide: <boolean>
	highlightColor: <string> (hex or rgba)

Setting autoHide implicitly sets hide to true.

Returns

Layer (Object): A newly instantiated Framer Layer.

myRemote.show()

Show the RemoteLayer instance.

myRemote.hide()

Hide the RemoteLayer instance.

myRemote.align(align, margin, fromBottom)

Useful if you wish to change the remote location some time after initialization.

Arguments

  1. align (String): One of ("left" || "center" || "right")
  2. margin (Number): Layer margin value
  3. fromBottom (Number): Distance from bottom of screen

myRemote.hidden

readonly

Returns

(Boolean): Whether or not the RemoteLayer is currently hidden

Example project

Download the example to try it for yourself.


Website: blackpixel.com  ·  GitHub: @bpxl-labs  ·  Twitter: @blackpixel  ·  Medium: @bpxl-craft

About

A Framer module to generate an interactive Apple TV remote for tvOS app prototypes.

Resources

License

Stars

Watchers

Forks

Packages

No packages published