# @blackpixel/framer-controlpanellayer

> Produce a developer panel for controlling aspects of your prototype within the prototype itself.

Latest version **1.0.3** (published 2017-07-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @blackpixel/framer-controlpanellayer
pnpm add @blackpixel/framer-controlpanellayer
yarn add @blackpixel/framer-controlpanellayer
bun add @blackpixel/framer-controlpanellayer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2017-07-27 |
| First published | 2017-06-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 33 |
| Author | Black Pixel |
| Maintainers | iconmaster, machineghost, jadnco, hernanc, brandonjpierce, bpxl-labs |
| Keywords | framerjs, framer, coffeescript, settings |

## Links

- npm: https://www.npmjs.com/package/@blackpixel/framer-controlpanellayer
- Repository: https://github.com/bpxl-labs/ControlPanelLayer
- Issues: https://github.com/bpxl-labs/ControlPanelLayer/issues
- npm.io page: https://npm.io/package/@blackpixel/framer-controlpanellayer

## Dependencies (1)

- [coffeeify](https://npm.io/package/coffeeify.md) ^2.1.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.3 (latest) — 2017-07-27
- 1.0.2 — 2017-07-14
- 1.0.1 — 2017-06-02

## README

# ControlPanelLayer Framer Module

[![license](https://img.shields.io/github/license/bpxl-labs/RemoteLayer.svg)](https://opensource.org/licenses/MIT)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](.github/CONTRIBUTING.md)
[![Maintenance](https://img.shields.io/maintenance/yes/2017.svg)]()

The ControlPanelLayer module makes it easy to construct a developer panel for controlling aspects of your prototype within the prototype itself.
	
<img src="https://cloud.githubusercontent.com/assets/935/25053522/5e1b0ad2-211d-11e7-8a43-b91558fa2d63.png" width="497" style="display: block; margin: auto" alt="ControlPanelLayer preview" />	

### 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
ControlPanelLayer = require "ControlPanelLayer"
```

### API

#### `new ControlPanelLayer`

Instantiates a new instance of ControlPanelLayer.

#### Available options

```coffeescript
myControlPanel = new ControlPanelLayer
	scaleFactor: <number>
	specs: <object>
	draggable: <boolean>
	textColor: <string> (hex or rgba)
	backgroundColor: <string> (hex or rgba)
	inputTextColor: <string> (hex or rgba)
	inputBackgroundColor: <string> (hex or rgba)
	buttonTextColor: <string> (hex or rgba)
	buttonColor: <string> (hex or rgba)
	commitAction: -> <action>
	closeAction: -> <action>
```

#### 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.

---

Website: [blackpixel.com](https://blackpixel.com) &nbsp;&middot;&nbsp;
GitHub: [@bpxl-labs](https://github.com/bpxl-labs/) &nbsp;&middot;&nbsp;
Twitter: [@blackpixel](https://twitter.com/blackpixel) &nbsp;&middot;&nbsp;
Medium: [@bpxl-craft](https://medium.com/bpxl-craft)

---
_Source: https://npm.io/package/@blackpixel/framer-controlpanellayer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._