https://github.com/gohypergiant/ControlPanelLayer
A Framer module for creating a developer panel to control aspects of the prototype from within the prototype.
https://github.com/gohypergiant/ControlPanelLayer
Last synced: 6 months ago
JSON representation
A Framer module for creating a developer panel to control aspects of the prototype from within the prototype.
- Host: GitHub
- URL: https://github.com/gohypergiant/ControlPanelLayer
- Owner: gohypergiant
- License: mit
- Created: 2017-04-12T19:50:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-18T14:51:07.000Z (about 8 years ago)
- Last Synced: 2025-04-30T15:09:48.061Z (6 months ago)
- Language: CoffeeScript
- Homepage:
- Size: 38.1 KB
- Stars: 34
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-framer - ControlPanelLayer - Framer module for creating a developer panel to control aspects of the prototype from within the prototype. (Modules)
README
# ControlPanelLayer Framer Module
[](https://opensource.org/licenses/MIT)
[](.github/CONTRIBUTING.md)
[]()
The ControlPanelLayer module makes it easy to construct a developer panel for controlling aspects of your prototype within the prototype itself.
### Installation
#### NPM Installation
```bash
$ cd /your/framer/project
$ npm i @blackpixel/framer-controlpanellayer
```
#### Manual installation
Copy or save the `ControlPanelLayer.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
ControlPanelLayer = require "ControlPanelLayer"
# else
ControlPanelLayer = require "@blackpixel/framer-controlpanellayer"
```
### API
#### `new ControlPanelLayer`
Instantiates a new instance of ControlPanelLayer.
#### Available options
```coffeescript
myControlPanel = new ControlPanelLayer
scaleFactor:
specs:
draggable:
textColor: (hex or rgba)
backgroundColor: (hex or rgba)
inputTextColor: (hex or rgba)
inputBackgroundColor: (hex or rgba)
buttonTextColor: (hex or rgba)
buttonColor: (hex or rgba)
commitAction: ->
closeAction: ->
```
#### The specs object
The ControlPanelLayer requires your behavior specifications to be organized in key-value object form. Each item must include a `label` and `value`. Optionally, you may include an explanatory `tip`. Additional keys will be ignored.
Specs object values can include strings, numbers, and booleans.
```coffeescript
exampleSpecs =
defaultText:
label: "Default text"
value: "hello"
tip: "Initial text to display."
animationTime:
label: "Animation time"
value: 5
tip: "How long the animation will run."
autoplay:
label: "Should autoplay"
value: false
```
Referring to a particular spec is done with the usual dot or bracket notation, e.g., `exampleSpecs.animationTime.value` or `exampleSpecs["animationTime"]["value"]` or `exampleSpecs["animationTime"].value`.
#### The commit action
The ControlPanelLayer features a Commit button that can be customized to perform any action. You will want to at least overwrite your specs object with any changes that resulted from using the ControlPanelLayer.
```coffeescript
myControlPanel = new ControlPanelLayer
specs: exampleSpecs
commitAction: -> exampleSpecs = this.specs
```
#### The close action
The panel close button works to hide the panel, but you may supply it with additional functionality.
```coffeescript
myControlPanel = new ControlPanelLayer
specs: exampleSpecs
closeAction: -> print "panel closed"
```
#### Example of integration with [QueryInterface](https://github.com/marckrenn/framer-QueryInterface/)
Using ControlPanelLayer in conjunction with QueryInterface provides a way to maintain settings across a reload or link to your prototype with custom settings included in the URL.
```coffeescript
{QueryInterface} = require 'QueryInterface'
querySpecs = new QueryInterface
key: "specs"
default: exampleSpecs
myControlPanel = new ControlPanelLayer
specs: querySpecs.value
commitAction: -> querySpecs.value = this.specs; window.location.reload(false)
```
#### `myControlPanel.show()`
Show the ControlPanelLayer instance.
#### `myControlPanel.hide()`
Hide the ControlPanelLayer instance.
#### `myControlPanel.hidden`
> readonly
**Returns**
_(Boolean)_: Whether or not the ControlPanelLayer is currently hidden.
### Example project
[Download](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/bpxl-labs/ControlPanelLayer/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)