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.
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://tabidoo.cloud/da/pricing
Draggable object example
Multitouch
https://editor.p5js.org/hobyedk/sketches/DWn-mfi04
SVG manipulation
https://zenozeng.github.io/p5.js-svg/examples/#manipulating
Servo motor control
https://randomnerdtutorials.com/esp32-servo-motor-web-server-arduino-ide/
https://dronebotworkshop.com/esp32-servo/
https://learn.hobye.dk/development/esp32/setup-the-board
mqtt:
https://learn.hobye.dk/kits/iot-toturial#h.8w3r8becusp9
Code til carshare gruppe - nøgleboks: https://editor.p5js.org/hobye/sketches/58I16BCku
https://learn.hobye.dk/development/p5js/interactivity#h.p_TiNiHIJAKsyc
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
Distances and compas
https://editor.p5js.org/hobye/sketches/bQ4Pyg6Zw
OPEN STREET MAPS + BARCODE (GPS NOT WORKING RIGHT
Click sketch for GPS
https://editor.p5js.org/hobye/sketches/H2V_K7Z-u