Method And Tech Examples

GUI example/base sketch

This little sketch has been set up to have the best practices for configuring p5js for apps and small installations. It includes:

  • full screen mode (press f).

  • ml5 is included

  • custom fonts from google

  • a simple GUI implementation is

  • fixed resolution for viewing on mobile platforms

  • a simple statemachine for making multiple views


QR Code reader

This example opens the webcamera and returns a qr code

Inline video player

If you need to convert video formats, then this tool is good https://handbrake.fr/ MP4 is recommended as the encoding format.

(found this rough youtube embed example)

Openstreet map

It is possible to integrate map data from e.g. open street maps.

Based on https://mappa.js.org/docs/api-mappa.html / https://leafletjs.com/

(another example here)

combi version: https://editor.p5js.org/hobye/sketches/LL2d2ughB

(note leaflet is also possible to use: https://leafletjs.com/)

GPS location

Through the browser api you can get the location of your phone or laptop. This can be combined with map API etc.

Simple "read only" JSON Database

OBS! You can edit the database while the program is running, but it will not be saved. If you need to save data look here.

Read more here https://p5js.org/reference/#/p5/loadJSON

You can use this viewer to show your data: http://jsonviewer.stack.hu/

Read more about JSON here https://www.w3schools.com/js/js_json_objects.asp

with img => https://editor.p5js.org/hobye/sketches/SETfthuSX


Make it editable online with a servive like this:

https://www.npoint.io/docs/10ed03d56d66ea2972b9

https://restdb.io/pricing/

https://tabidoo.cloud/da/pricing

Multitouch

https://editor.p5js.org/hobyedk/sketches/DWn-mfi04

SVG manipulation


https://zenozeng.github.io/p5.js-svg/examples/#manipulating

ARduino code

// This example uses an ESP32 Development Board


// to connect to shiftr.io.


//


// You can check on your device after a successful


// connection here: https://www.shiftr.io/try.


//


// by Joël Gähwiler


// https://github.com/256dpi/arduino-mqtt


#define ONBOARD_LED 2


#include <WiFi.h>


#include <MQTT.h>

#include <ESP32Servo.h>


Servo myservo; // create servo object to control a servo

// 16 servo objects can be created on the ESP32


int pos = 0; // variable to store the servo position

// Recommended PWM GPIO pins on the ESP32 include 2,4,12-19,21-23,25-27,32-33

// Possible PWM GPIO pins on the ESP32-S2: 0(used by on-board button),1-17,18(used by on-board LED),19-21,26,33-42

int servoPin = 21;



WiFiClient net;


MQTTClient client;




unsigned long lastMillis = 0;




void connect() {


Serial.print("checking wifi...");


while (WiFi.status() != WL_CONNECTED) {


Serial.print(".");


delay(1000);


}




Serial.print("\nconnecting...");


while (!client.connect("arduino", "public", "public")) {


Serial.print(".");


delay(1000);


}




Serial.println("\nconnected!");




client.subscribe("/carsharep5js");


// client.unsubscribe("/hello");


}




void messageReceived(String &topic, String &payload) {


Serial.println("incoming: " + topic + " - " + payload);


if (topic.equals("/carsharep5js") && payload.equals("on"))


{


digitalWrite(ONBOARD_LED, HIGH);

myservo.write(180);


}


else if (topic.equals("/carsharep5js") && payload.equals("off"))


{

myservo.write(0);

digitalWrite(ONBOARD_LED, LOW);


}


// Note: Do not use the client in the callback to publish, subscribe or


// unsubscribe as it may cause deadlocks when other things arrive while


// sending and receiving acknowledgments. Instead, change a global variable,


// or push to a queue and handle it in the loop after calling `client.loop()`.


}




void setup() {


Serial.begin(9600);


WiFi.begin("oliver", "hesthest"); // OBSMADS




// Note: Local domain names (e.g. "Computer.local" on OSX) are not supported


// by Arduino. You need to set the IP address directly.


client.begin("public.cloud.shiftr.io", net);


client.onMessage(messageReceived);




pinMode(ONBOARD_LED, OUTPUT);


connect();


// Allow allocation of all timers

ESP32PWM::allocateTimer(0);

ESP32PWM::allocateTimer(1);

ESP32PWM::allocateTimer(2);

ESP32PWM::allocateTimer(3);

myservo.setPeriodHertz(50); // standard 50 hz servo

myservo.attach(servoPin, 1000, 2000); // attaches the servo on pin 18 to the servo object

// using default min/max of 1000us and 2000us

// different servos may require different min/max settings

// for an accurate 0 to 180 sweep


}




void loop() {


client.loop();




delay(10); // <- fixes some issues with WiFi stability




if (!client.connected()) {


connect();


}




// publish a message roughly every second.


if (millis() - lastMillis > 1000) {


lastMillis = millis();


client.publish("/carshareesp32", "I am online");


}


}

Genkend objekter

Templates: https://learn.hobye.dk/kits/code-toolbox#h.zey3kqnyfh8i

https://teachablemachine.withgoogle.com/

Geolocation library

https://editor.p5js.org/hobye/sketches/ntgT-0s60