Code explanation

In the following the different elements in the base sketch is explained:

wifiName and WifiPassword defines the wifi and password for the "Add to app button".

var wifiName = "fablab-droner";

var wifiPassword = "39nerdro";

This is the setup function that only runs once:

function setup() {

frameRate(30);

This creates the canvas and sets it to the size of the window:

const canvas = createCanvas(windowWidth, windowHeight);

Sets the defualt font used:

textFont('Share Tech Mono');

Settings for connecting to the proxy through a websocket and creates one drone.

WebSocketStart("ws://localhost:9000");

drones.push(new Drone("192.168.10.1"));

}

This is the function that draws the element and where you code the interactivity

function draw() {

It sets the background to black

background(0);

This calls a function that draws the drone ui

drawUI();

This code creates a button. When the button is clicked it sends four commands to the dorne queue to execute

if (uiButton("Do drone show", color(255, 255, 255), 200, 30, 40, 30).clicked) {

droneCmd("takeoff", true);

droneCmd("right 30", true);

droneCmd("left 30", true);

droneCmd("land", true);

}

}

Use this method if you want to register a mouse click

function mousePressed() {

}

Use this method to register keypresses - the first if statement registers when somebody presses the A button

function keyReleased() {

if (key == 'a') {

droneCmd("left 30", true);

}

if (key == 'f') {

var fs = fullscreen();

fullscreen(!fs);

}

}