ControlPanelLayer Framer Module

The ControlPanelLayer module makes it easy to construct a developer panel for controlling aspects of your prototype within the prototype itself.

Installation

NPM Installation

$ 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:

# If you manually installed
ControlPanelLayer = require "ControlPanelLayer"
# else
ControlPanelLayer = require "@blackpixel/framer-controlpanellayer"

API

new ControlPanelLayer

Instantiates a new instance of ControlPanelLayer.

Available options

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.

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.

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.

myControlPanel = new ControlPanelLayer
	specs: exampleSpecs
	closeAction: -> print "panel closed"

Example of integration with 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.

{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 the example to try it for yourself.

---

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