koenbok

# Preferred way to deal with subprojects, because we want to avoid submodules.
# This way we do everything explicitly, and can verify everything in commits.
# We need to always keep master in good condition.

TMP = ./tmp
PROJECT_TEMP = $(TMP)/FramerSketch
PROJECT_GIT = [email protected]:motif/FramerSketch2.git

update%project:
	@mkdir -p $(TMP)

koenbok

Advanced Programming

Programming setup

• Instant visual output.
• Fast startup time, fast execution.
• Sensible errors, with code locations.
• Easy to set up and get working.

Architecture

koenbok

layerA = new Layer
layerB = new Layer

# The old way
layerB.superLayer = layerA
print layerA.subLayers

# The new way
layerB.parent = layerA
print layerA.children

koenbok

# Current click event
layerA.on Events.Click, -> ...

# With a shortcut
layerA.onClick -> ...

koenbok

layerA = new Layer

# Enable pinching & panning
layerA.pinchable.enabled = true
layerA.draggable.enabled = true

koenbok

layerA = new Layer

# Check the force value
layerA.on Events.ForceTap, (event) ->
	print event.force

koenbok

# Listen to an edge swipe on Screen 
Screen.on Events.EdgeSwipeTop, ->
    ...

koenbok

Programming

Programming is hard because

• Mix between English, logic and math.
• It is very strict: tabs, spaces, commas and capitalization matters.
• Errors can be hard to understand but often mean something simple.

Before we begin

koenbok

# Gesture events
Gestures = {}

# Tap
Gestures.Tap = "tap"
Gestures.TapStart = "tapstart"
Gestures.TapEnd = "tapend"
Gestures.DoubleTap = "doubletap"

# Force Tap

koenbok

logEventListeners = ->
	
	return if window.__logEventListeners
	window.__logEventListeners = true
	
	addEventListener = Element::addEventListener
	removeEventListener = Element::removeEventListener
	
	Element::addEventListener = () ->
		print "addEventListener", arguments[0], @