GUI with Processing and Arduino [School project]

Here’s some context you can skip if you want :
Hi guys, I’m a 17yo french student, usually I don’t ask questions on internet as in most case someone already did before (often in forums between 2010-2015) but my problem here is quite specific.

My project with 3 comrades is to make a “connected gymn” this means pitch lines (made with led not paint), goal posts, seats etcetera will all be controlled remotedely. My part is to do both the GUI and Arduino (serial with other sensors), the centerpiece, so I really need it to work or… mm let’s not imagine lol. Hope you can give me answers my teacher couldn’t.

Actually I’m prototyping with Java because it is easier and faster to build but I will need it to work on any android device (that’s why all lengths are scaled based on width and height), ofc I’m also using android mode.

Java simplified version (normally works on android too due to some comments) :

import controlP5.*;//GUI library
//import processing.serial.*;

//Serial mySerial;
ControlP5 cp5;
Textfield textfield;//created so that I can call .remove() method later (is there another way to do ?)

int Red = color(255, 0, 0); //rouge
int Green = color(0, 255, 0); //vert
int colors[] = {
	100,
	100,
	100,
	100
};

String password = "password";
String status[] = {
	"Inconnu",
	"Inconnu",
	"Inconnu",
	"Inconnu"
};//initialize 4 Unknown values to get from Arduino (simulated with buttons)
String titles[] = {
	"Poteaux",
	"Tribunes",
	"Terrain",
	"Smartgrid"
};//label of 4 values
String buttons[] = {
	"Deployer",
	"Retracter",
	"Changer",
	"Rafraichir"
};

void setup() {
	size(640, 240);
	authentification();//if you replace by gui(), pixel resolution will be perfect (look question at the end of topic)
}

void authentification() {
	cp5 = new ControlP5(this);
	textfield = cp5.addTextfield("a").setPosition(320, 120).setSize(50, 50).setAutoClear(false); //password check with controlP5
	cp5.addButton("Submit").setPosition(200, 100).setSize(50, 50);
}

void draw() {
//there will be communication with Arduino, yet to do
}

void gui() {
	int xCoordinate = 1;
	int sectionNumber = 1;

	float titleSize = height * .075;

	background(177); //background default color

	while (sectionNumber < 4) {
		line(width / 4 * sectionNumber, 0, width / 4 * sectionNumber, height);
		sectionNumber++;
	} //separate 4 sections with 3 lines

	textSize(titleSize);
	textAlign(CENTER);

	sectionNumber = 0;

	fill(255);

	while (sectionNumber < 5 & xCoordinate < 8) {
		text(titles[sectionNumber], width * (xCoordinate) / 8, height * .1);
		sectionNumber++;
		xCoordinate += 2;
	} //display titles in their section

	sectionNumber = 0;
	xCoordinate = 1;

	while (sectionNumber < 5 & xCoordinate < 8) {
		rectMode(CENTER);
		fill(colors[sectionNumber]);
		rect(width * (xCoordinate) / 8, height * 0.22, width / 5, height * .11);
		fill(0);
		text(status[sectionNumber], width * (xCoordinate) / 8, height * .25);
		sectionNumber++;
		xCoordinate += 2;
	} //display status depending on data sent by sensors (buttons in that case for testing)

	sectionNumber = 0;
	xCoordinate = 1;

	while (sectionNumber < 5 & xCoordinate < 8) {
		cp5 = new ControlP5(this);
		cp5.addButton(buttons[sectionNumber]).setPosition(width * (xCoordinate) / 8, height * 0.4);
		sectionNumber++;
		xCoordinate += 2;
	} //display clickable buttons to send orders to Arduino (simulate the Arduino in that case)

	sectionNumber = 0;
	xCoordinate = 1;
}

void Submit() {
	String pwd = cp5.get(Textfield.class, "a").getText();
	if (pwd.equals(password)) {
		cp5.remove("Submit");
		textfield.hide();
		gui();
	}//if password is good boot gui, hide authentification()
}

void Deployer() {
	colors[0] = Green;
	status[0] = "RAS";
	gui();
}//change colour and label just in order to test

void Retracter() {
	colors[1] = Red;
	status[1] = "Danger";
	gui();
}//change colour and label just in order to test
/*
void Changer(){
  mySerial.write('2');
}

void Rafraichir(){
  mySerial.write('2');
}*/

Android version has very few differences : instead of processing.serial, I will use a compatible custom library, I set window size to fullscreen and landscape.

So here’s my questions

1. When I erase the authentification zone after the correct password is submitted and charge the gui, why do I have a poor pixel resolution of gui() while it’s perfect when loaded directly from setup without authentification zone for example.
2. Why does it work perfectly on Java but when I click buttons on phone the app crash, is it related to the fact I refresh gui(), framerate etc ? Is there a way to update status whithout reloading whole sketch (seems not).
3. I plan maybe having more than 2 pages (authentification+gui) if possible, I don’t know but do you think Processing is good for that use or should I use app Inventor (fork kodular to be exact) even if it doesn’t manage well serial communication with blocks and looks childish in front of jury ?
4. Also how can I correctly configure default.txt file or anything so that I can boot processing on my usb whatever the pc, tried sketchbook.tree.path it worked then updated from 3.5.3 to 3.5.4 and now sketch book missing wherever I’m trying.

Contribution much appreciated, feel free to ask further precision, for now I’m sleeping :sleepy: :sleeping: and pardon my awfull english !

@Borgen ===

  • i’m not sure at all that ControlP5 works with Android; anyway you can easily create buttons or textField with android native widgets
  • your gui() is using relative values; your authentication() is using hardcoded values; in your setup() you have to get the displayMetrics of your phone and calculate some factor knowing that the medium mdpi is 160 (then hdpi 240, then xhdpi 380, then xxxdpi 640) and low (ldpi) is 120

more details & examples here: https://developer.android.com/reference/android/util/DisplayMetrics.html