Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gohypergiant/RemoteLayer
A Framer module to generate an interactive Apple TV remote for tvOS app prototypes.
https://github.com/gohypergiant/RemoteLayer
Last synced: about 2 months ago
JSON representation
A Framer module to generate an interactive Apple TV remote for tvOS app prototypes.
- Host: GitHub
- URL: https://github.com/gohypergiant/RemoteLayer
- Owner: gohypergiant
- License: mit
- Created: 2016-06-22T20:35:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-18T14:49:16.000Z (about 7 years ago)
- Last Synced: 2024-05-28T14:04:38.855Z (8 months ago)
- Language: CoffeeScript
- Homepage:
- Size: 37.1 KB
- Stars: 30
- Watchers: 16
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-framer - RemoteLayer - The RemoteLayer module allows you to instantly generate an interactive Apple TV remote for your tvOS app prototypes. (Modules)
README
# RemoteLayer Framer Module
[](https://opensource.org/licenses/MIT)
[](.github/CONTRIBUTING.md)
[]()
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.
### 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:
```coffeescript
# If you manually installed
RemoteLayer = require "RemoteLayer"
# else
RemoteLayer = require "@blackpixel/framer-remotelayer"
myRemote = new RemoteLayer
```
### Assigning Actions to Buttons
```coffeescript
myRemote = new RemoteLayer
menuAction: ->
homeAction: ->
micAction: ->
playPauseAction: ->
volumeUpAction: ->
volumeDownAction: ->
clickAction: ->
swipeUpAction: ->
swipeDownAction: ->
swipeLeftAction: ->
swipeRightAction: ->
```
### API
#### `new RemoteLayer`
Instantiates a new instance of RemoteLayer.
**Available options**
```coffeescript
myRemote = new RemoteLayer
align: ("left" || "center" || "right")
margin:
fromBottom:
gloss:
transition: ("fade" || "pop")
hide:
autoHide:
highlightColor: (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](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/bpxl-labs/RemoteLayer/tree/master/example.framer) the example to try it for yourself.
---
Website: [blackpixel.com](https://blackpixel.com) ·
GitHub: [@bpxl-labs](https://github.com/bpxl-labs/) ·
Twitter: [@blackpixel](https://twitter.com/blackpixel) ·
Medium: [@bpxl-craft](https://medium.com/bpxl-craft)