# Need help with text position (solved)

**URL:** <https://discourse.processing.org/t/need-help-with-text-position-solved/46756>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [July 18, 2025, 5:01pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756 "2025-07-18T17:01:06Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Meteor122](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@Meteor122](https://discourse.processing.org/u/Meteor122)\
**Post date:** [July 18, 2025, 5:01pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/1 "2025-07-18T17:01:06Z")

</div>

![Screenshot 2025-07-18 181412](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/0/9054237cf97fa4f0f8544530b69f8f171c5a3474.png)

Hi everyone, I’m creating the GUI for a ground station for a rocket I’m building with Arduino, or rather, chatGPT did it for me since I have no experience with processing and don’t have the time to learn it, so I’ll start by saying I almost don’t know what’s in the code. I know for sure that Arduino and this GUI communicate via a protocol I created, very simple. The problem is that some of the text is out of place or misaligned with the boxes. Chat wasn’t able to fix the code for me, so I’m asking if you have any advice to help me or if you have the time and desire to do me a favor and fix it for me (I don’t mean to be rude, I just need to finish this GUI quickly). In any case, here’s the code:  
// === BASIC SETTINGS ===  
import processing.serial._; // Import serial library for Arduino communication  
import controlP5._; // Import ControlP5 library for GUI buttons and sliders

Serial myPort;  
ControlP5 cp5;

String serialInput = “”;  
HashMap\<String, String\> data = new HashMap\<String, String\>(); // Stores all telemetry data  
HashMap\<String, Integer\> servoDefaults = new HashMap\<String, Integer\>(); // Stores default servo positions  
HashMap\<String, Integer\> servoValues = new HashMap\<String, Integer\>(); // Stores real-time servo positions

String modes = {“IDLE”, “GROUND\_TEST”, “FLIGHT”}; // Left panel modes  
String rightModes = {“ALIGN”, “FIN\_TEST”}; // Right panel modes  
int currentMode = 0;  
boolean wasMousePressed = false;

void setup() {  
size(1280, 720); // Set canvas size  
surface.setTitle(“Rocket Ground Station - Meteor V3”);

cp5 = new ControlP5(this);  
printArray(Serial.list()); // Print available serial ports  
myPort = new Serial(this, Serial.list()[0], 115200); // Connect to the first available serial port  
myPort.bufferUntil(‘\n’); // Read serial input line-by-line

setupGUI(); // Create GUI elements  
initServos(); // Initialize default servo values  
}

void draw() {  
background(30);  
textAlign(LEFT, BASELINE); // Reset text alignment

// Draw different sections of the interface  
drawTelemetry();  
drawServoPanel();  
drawServoDefaults();  
drawStatePanel();  
drawRocketState();

wasMousePressed = mousePressed; // Used for button clicks  
}

// === INITIALIZATION ===  
void setupGUI() {  
// Add left side mode buttons  
for (int i = 0; i \< modes.length; i++) {  
cp5.addButton(modes[i])  
.setPosition(20, 40 + i \* 60)  
.setSize(100, 50)  
.onClick(e → changeMode(e.getController().getName()));  
}

// Add right side mode buttons  
for (int i = 0; i \< rightModes.length; i++) {  
cp5.addButton(rightModes[i])  
.setPosition(1150, 40 + i \* 60)  
.setSize(100, 50)  
.onClick(e → changeMode(e.getController().getName()));  
}

// Reset Arduino button  
cp5.addButton(“RESET ARDUINO”)  
.setPosition(550, 660)  
.setSize(180, 40)  
.onClick(e → myPort.write(“RESET\n”));  
}

void initServos() {  
// Initialize servo positions to 90°  
for (int i = 1; i \<= 4; i++) {  
String key = “S” + i;  
servoValues.put(key, 90);  
servoDefaults.put(key, 90);  
}  
}

// === SERIAL COMMUNICATION ===  
void serialEvent(Serial p) {  
serialInput = p.readStringUntil(‘\n’);  
if (serialInput != null) {  
serialInput = serialInput.trim();  
if (serialInput.length() == 0) return;  
if (!serialInput.contains(“:”)) return;  
parseData(serialInput); // Parse and store incoming data  
}  
}

void parseData(String line) {  
// Split serial line into key:value pairs  
String parts = split(line, " “);  
for (String part : parts) {  
if (part.contains(”:")) {  
String kv = split(part, “:”);  
if (kv.length == 2) {  
data.put(kv[0], kv[1]); // Store in data map  
if (kv[0].startsWith(“S”)) {  
servoValues.put(kv[0], int(kv[1]));  
}  
}  
}  
}  
}

// === MODE HANDLING ===  
void changeMode(String mode) {  
int code = -1;  
// Map mode name to corresponding code  
if (mode.equals(“IDLE”)) code = 0;  
if (mode.equals(“ALIGN”)) code = 1;  
if (mode.equals(“GROUND\_TEST”)) code = 2;  
if (mode.equals(“FLIGHT”)) code = 3;  
if (mode.equals(“FIN\_TEST”)) code = 4;

// Send mode to Arduino if valid  
if (code != -1) {  
currentMode = code;  
myPort.write(code + “\n”);  
println("Modalità cambiata a: " + mode);  
}  
}

// === TELEMETRY PANEL ===  
void drawTelemetry() {  
int x = 150, y = 20, w = 260, h = 140, spacing = 20;

// Draw four telemetry boxes  
drawBox(“Accelerometers”, x, y, w, h, “AX”, “AY”, “AZ”);  
drawBox(“Gyroscopes”, x + w + spacing, y, w, h, “GX”, “GY”, “GZ”);  
drawBox(“PID Output”, x, y + h + spacing, w, h, “OUTX”, “OUTY”, “OUTZ”);  
drawBox(“Angles”, x + w + spacing, y + h + spacing, w, h, “ANGX”, “ANGY”, “ANGZ”);  
}

void drawBox(String title, int x, int y, int w, int h, String… keys) {  
fill(50);  
stroke(200);  
rect(x, y, w, h, 10);  
fill(255);  
textSize(14);  
text(title, x + 10, y + 25);

textSize(12);  
for (int i = 0; i \< keys.length; i++) {  
String val = data.containsKey(keys[i]) ? data.get(keys[i]) : “—”;  
text(keys[i] + ": " + val, x + 10, y + 45 + i \* 20);  
}  
}

// === MAIN STATUS PANEL ===  
void drawStatePanel() {  
int x = 150, y = 340, w = 540, h = 100;

fill(50);  
stroke(200);  
rect(x, y, w, h, 10);  
fill(255);  
textSize(14);  
text(“Rocket Status”, x + 10, y + 25);

// Show current flight mode  
String modeNames = {“MODE\_IDLE”, “MODE\_ALIGN\_SERVO”, “MODE\_GROUND\_TEST”, “MODE\_FLIGHT”, “MODE\_FIN\_TEST”};  
String modeVal = data.getOrDefault(“MODE”, “—”);  
String modeText = modeVal.matches(“\d”) ? modeNames[int(modeVal)] : modeVal;

// Get other state values  
String launched = data.getOrDefault(“LAUNCHED”, “—”);  
String offx = data.getOrDefault(“OFFX”, “—”);  
String offy = data.getOrDefault(“OFFY”, “—”);

fill(255);  
text("MODE: " + modeText, x + 10, y + 50);  
text("OFFX: " + offx, x + 160, y + 50);  
text("OFFY: " + offy, x + 310, y + 50);

// Color LAUNCHED status  
if (launched.equals(“1”)) fill(0, 255, 0);  
else fill(255, 0, 0);  
text("LAUNCHED: " + launched, x + 10, y + 75);  
}

// === SYSTEM STATE PANEL ===  
void drawRocketState() {  
int x = 710, y = 340, w = 400, h = 100;

fill(50);  
stroke(200);  
rect(x, y, w, h, 10);  
fill(255);  
textSize(14);  
text(“Internal State”, x + 10, y + 25);

// This line calls drawStatusText(), which sometimes causes the error  
drawStatusText(“CALIBRATING”, x + 10, y + 50);  
drawStatusText(“OFFSETTING”, x + 210, y + 50);  
drawStatusText(“MPU”, x + 10, y + 75);  
}

// === This function is correctly declared! ===  
// It displays a blinking or colored status based on value  
void drawStatusText(String key, int x, int y) {  
String val = data.getOrDefault(key, “—”);

if (val.equals(“1”)) {  
if (frameCount % 30 \< 15) fill(255, 0, 0);  
else fill(255, 255, 0);  
} else if (val.equals(“0”)) {  
fill(0, 255, 0);  
} else {  
fill(200);  
}

text(key + ": " + val, x, y);  
}

// === SERVO STATUS PANEL ===  
void drawServoPanel() {  
int cx = 900, cy = 180;  
fill(80);  
stroke(200);  
rect(cx - 120, cy - 120, 240, 240, 10);  
fill(255);  
textAlign(CENTER);  
text(“Fin Status”, cx, cy - 130);  
textAlign(LEFT);

String servos = {“S1”, “S2”, “S3”, “S4”};  
int pos = {{cx, cy - 90}, {cx + 90, cy}, {cx, cy + 90}, {cx - 90, cy}};

for (int i = 0; i \< servos.length; i++) {  
String s = servos[i];  
int x = pos[i][0];  
int y = pos[i][1];

```
fill(servoValues.get(s) == null ? 150 : 255);
ellipse(x, y, 40, 40);
fill(0);
textAlign(CENTER, CENTER);
text(s + "\n" + servoValues.get(s), x, y);

```

}  
textAlign(LEFT, BASELINE);  
}

// === SERVO DEFAULT PANEL ===  
void drawServoDefaults() {  
int startX = 820, y = 500;

fill(50);  
stroke(200);  
rect(startX - 20, y - 40, 280, 180, 10);  
fill(255);  
textSize(14);  
text(“Default Fin Positions”, startX, y - 10);

String servos = {“S1”, “S2”, “S3”, “S4”};  
for (int i = 0; i \< servos.length; i++) {  
String s = servos[i];  
int x = startX;  
int sy = y + i \* 30;  
int val = servoDefaults.get(s);

```
text(s + ": " + val + "°", x, sy);

drawButton(x + 60, sy - 10, 30, 20, "-1", () -> changeDefault(s, -1));
drawButton(x + 100, sy - 10, 30, 20, "0", () -> resetDefault(s));
drawButton(x + 140, sy - 10, 30, 20, "+1", () -> changeDefault(s, +1));

```

}  
}

// === GENERIC BUTTON HANDLER ===  
void drawButton(int x, int y, int w, int h, String label, Runnable action) {  
fill(100);  
rect(x, y, w, h, 5);  
fill(255);  
textAlign(CENTER, CENTER);  
text(label, x + w / 2, y + h / 2);

boolean inside = mouseX \> x && mouseX \< x + w && mouseY \> y && mouseY \< y + h;  
if (mousePressed && !wasMousePressed && inside) {  
action.run();  
}  
}

// === SERVO VALUE CHANGERS ===  
void changeDefault(String servo, int delta) {  
int current = servoDefaults.get(servo);  
int newVal = constrain(current + delta, 70, 110);  
servoDefaults.put(servo, newVal);  
myPort.write(servo + “:” + newVal + “\n”);  
println("Default command: " + servo + “:” + newVal);  
}

void resetDefault(String servo) {  
servoDefaults.put(servo, 90);  
myPort.write(servo + “:90\n”);  
println("Reset default: " + servo + “:90”);  
}  
P.S. Chat also wrote the code comments.

Thanks everyone in advance.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 18, 2025, 5:15pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/2 "2025-07-18T17:15:38Z")

</div>

Hello @Meteor122 ,

Please read:

> [@Guidelines—Asking Questions](https://discourse.processing.org/t/guidelines-asking-questions/2147):
>
> Summary (TL;DR) Ask complete questions to get better answers! Be specific. For example: I want to load an image. I tried using createImg() , and I expected the image to be on canvas, but what happened instead was the image showing up below the canvas. Isolate your problem and work in small steps. Share only the code directly related to your problem if it is part of a bigger project, and if something isn’t working, try the smallest code that could do the thing you want. Can we run your code to …

Above asks that you format your code and also links to this:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

`:)`

---

<div class="post-metadata">

**Author:** ![Meteor122](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@Meteor122](https://discourse.processing.org/u/Meteor122)\
**Post date:** [July 18, 2025, 5:21pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/3 "2025-07-18T17:21:42Z")

</div>

I’m really sorry but I can’t format it in any way, neither with the button nor manually.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 18, 2025, 5:38pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/4 "2025-07-18T17:38:38Z")

</div>

This topic is also posted here:

[https://www.reddit.com/r/processing/comments/1m3ar8f/need\_help\_with\_text\_position](https://www.reddit.com/r/processing/comments/1m3ar8f/need_help_with_text_position)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [July 19, 2025, 3:26pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/5 "2025-07-19T15:26:19Z")

</div>

This part from your code

```auto

void drawBox(String title, int x, int y, int w, int h, String… keys) {
fill(50);
stroke(200);
rect(x, y, w, h, 10);
fill(255);
textSize(14);
text(title, x + 10, y + 25);

textSize(12);
for (int i = 0; i < keys.length; i++) {
String val = data.containsKey(keys[i]) ? data.get(keys[i]) : “—”;
text(keys[i] + ": " + val, x + 10, y + 45 + i * 20);
}
}

```

This line change text position change 10,25 values see what happens

```auto

text(title, x + 10, y + 25);

```

This line change the text result position of  
void drawBox(String title, int x, int y, int w, int h, String… keys) {

Change 10 and 45 see what happens

```auto
text(keys[i] + ": " + val, x + 10, y + 45 + i * 20);

```

---

<div class="post-metadata">

**Author:** ![Meteor122](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@Meteor122](https://discourse.processing.org/u/Meteor122)\
**Post date:** [July 19, 2025, 5:13pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/6 "2025-07-19T17:13:27Z")

</div>

thx a lot, i fixed all the code and now is so beautiful. thanks dude

---

<div class="post-metadata">

**Author:** ![newuser](https://avatars.discourse-cdn.com/v4/letter/n/3e96dc/32.png) [@newuser](https://discourse.processing.org/u/newuser)\
**Post date:** [August 17, 2025, 3:40pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/8 "2025-08-17T15:40:50Z")

</div>

Yes, you can, here is how…

1. In your original post, click the “edit” pencil.
2. Select your code text.
3. “cut” the code text (CTRL-X)
4. Click the **\</\>** button
5. … at this point, do not click anywhere or move the cursor…
6. Paste (CTRL-V) the code text
7. Click “Save Edit” to save the edit.

The result with your code will look like this… (updated ```cpp) (further updated ```processing)

```processing
// === BASIC SETTINGS ===
import processing.serial.; // Import serial library for Arduino communication
import controlP5.; // Import ControlP5 library for GUI buttons and sliders

Serial myPort;
ControlP5 cp5;

String serialInput = "";
HashMap<String, String> data = new HashMap<String, String>(); // Stores all telemetry data
HashMap<String, Integer> servoDefaults = new HashMap<String, Integer>(); // Stores default servo positions
HashMap<String, Integer> servoValues = new HashMap<String, Integer>(); // Stores real-time servo positions

String modes = {"IDLE", "GROUND_TEST", "FLIGHT"}; // Left panel modes
String rightModes = {"ALIGN", "FIN_TEST"}; // Right panel modes
int currentMode = 0;
boolean wasMousePressed = false;

void setup() {
  size(1280, 720); // Set canvas size
  surface.setTitle("Rocket Ground Station - Meteor V3");

  cp5 = new ControlP5(this);
  printArray(Serial.list()); // Print available serial ports
  myPort = new Serial(this, Serial.list()[0], 115200); // Connect to the first available serial port
  myPort.bufferUntil('\n'); // Read serial input line-by-line

  setupGUI(); // Create GUI elements
  initServos(); // Initialize default servo values
}

void draw() {
  background(30);
  textAlign(LEFT, BASELINE); // Reset text alignment

  // Draw different sections of the interface
  drawTelemetry();
  drawServoPanel();
  drawServoDefaults();
  drawStatePanel();
  drawRocketState();

  wasMousePressed = mousePressed; // Used for button clicks
}

// === INITIALIZATION ===
void setupGUI() {
  // Add left side mode buttons
  for (int i = 0; i < modes.length; i++) {
    cp5.addButton(modes[i])
      .setPosition(20, 40 + i * 60)
      .setSize(100, 50)
      .onClick(e → changeMode(e.getController().getName()));
  }

  // Add right side mode buttons
  for (int i = 0; i < rightModes.length; i++) {
    cp5.addButton(rightModes[i])
      .setPosition(1150, 40 + i * 60)
      .setSize(100, 50)
      .onClick(e → changeMode(e.getController().getName()));
  }

  // Reset Arduino button
  cp5.addButton("RESET ARDUINO")
    .setPosition(550, 660)
    .setSize(180, 40)
    .onClick(e → myPort.write("RESET\n"));
}

void initServos() {
  // Initialize servo positions to 90°
  for (int i = 1; i <= 4; i++) {
    String key = "S" + i;
    servoValues.put(key, 90);
    servoDefaults.put(key, 90);
  }
}

// === SERIAL COMMUNICATION ===
void serialEvent(Serial p) {
  serialInput = p.readStringUntil('\n');
  if (serialInput != null) {
    serialInput = serialInput.trim();
    if (serialInput.length() == 0) return;
    if (!serialInput.contains(":")) return;
    parseData(serialInput); // Parse and store incoming data
  }
}

void parseData(String line) {
  // Split serial line into key:value pairs
  String parts = split(line, " “);
  for (String part : parts) {
    if (part.contains(":")) {
      String kv = split(part, ":");
      if (kv.length == 2) {
        data.put(kv[0], kv[1]); // Store in data map
        if (kv[0].startsWith("S")) {
          servoValues.put(kv[0], int(kv[1]));
        }
      }
    }
  }
}

// === MODE HANDLING ===
void changeMode(String mode) {
  int code = -1;
  // Map mode name to corresponding code
  if (mode.equals("IDLE")) code = 0;
  if (mode.equals("ALIGN")) code = 1;
  if (mode.equals("GROUND_TEST")) code = 2;
  if (mode.equals("FLIGHT")) code = 3;
  if (mode.equals("FIN_TEST")) code = 4;

  // Send mode to Arduino if valid
  if (code != -1) {
    currentMode = code;
    myPort.write(code + "\n");
    println("Modalità cambiata a: " + mode);
  }
}

// === TELEMETRY PANEL ===
void drawTelemetry() {
  int x = 150, y = 20, w = 260, h = 140, spacing = 20;

  // Draw four telemetry boxes
  drawBox("Accelerometers", x, y, w, h, "AX", "AY", "AZ");
  drawBox("Gyroscopes", x + w + spacing, y, w, h, "GX", "GY", "GZ");
  drawBox("PID Output", x, y + h + spacing, w, h, "OUTX", "OUTY", "OUTZ");
  drawBox("Angles", x + w + spacing, y + h + spacing, w, h, "ANGX", "ANGY", "ANGZ");
}

void drawBox(String title, int x, int y, int w, int h, String… keys) {
  fill(50);
  stroke(200);
  rect(x, y, w, h, 10);
  fill(255);
  textSize(14);
  text(title, x + 10, y + 25);

  textSize(12);
  for (int i = 0; i < keys.length; i++) {
    String val = data.containsKey(keys[i]) ? data.get(keys[i]) : "—";
    text(keys[i] + ": " + val, x + 10, y + 45 + i * 20);
  }
}

// === MAIN STATUS PANEL ===
void drawStatePanel() {
  int x = 150, y = 340, w = 540, h = 100;

  fill(50);
  stroke(200);
  rect(x, y, w, h, 10);
  fill(255);
  textSize(14);
  text("Rocket Status", x + 10, y + 25);

  // Show current flight mode
  String modeNames = {"MODE_IDLE", "MODE_ALIGN_SERVO", "MODE_GROUND_TEST", "MODE_FLIGHT", "MODE_FIN_TEST"};
  String modeVal = data.getOrDefault("MODE", "—");
  String modeText = modeVal.matches("\d") ? modeNames[int(modeVal)] : modeVal;

  // Get other state values
  String launched = data.getOrDefault("LAUNCHED", "—");
  String offx = data.getOrDefault("OFFX", "—");
  String offy = data.getOrDefault("OFFY", "—");

  fill(255);
  text("MODE: " + modeText, x + 10, y + 50);
  text("OFFX: " + offx, x + 160, y + 50);
  text("OFFY: " + offy, x + 310, y + 50);

  // Color LAUNCHED status
  if (launched.equals("1")) fill(0, 255, 0);
  else fill(255, 0, 0);
  text("LAUNCHED: " + launched, x + 10, y + 75);
}

// === SYSTEM STATE PANEL ===
void drawRocketState() {
  int x = 710, y = 340, w = 400, h = 100;

  fill(50);
  stroke(200);
  rect(x, y, w, h, 10);
  fill(255);
  textSize(14);
  text("Internal State", x + 10, y + 25);

  // This line calls drawStatusText(), which sometimes causes the error
  drawStatusText("CALIBRATING", x + 10, y + 50);
  drawStatusText("OFFSETTING", x + 210, y + 50);
  drawStatusText("MPU", x + 10, y + 75);
}

// === This function is correctly declared! ===
// It displays a blinking or colored status based on value
void drawStatusText(String key, int x, int y) {
  String val = data.getOrDefault(key, "—");

  if (val.equals("1")) {
    if (frameCount % 30 < 15) fill(255, 0, 0);
    else fill(255, 255, 0);
  } else if (val.equals("0")) {
    fill(0, 255, 0);
  } else {
    fill(200);
  }

  text(key + ": " + val, x, y);
}

// === SERVO STATUS PANEL ===
void drawServoPanel() {
  int cx = 900, cy = 180;
  fill(80);
  stroke(200);
  rect(cx - 120, cy - 120, 240, 240, 10);
  fill(255);
  textAlign(CENTER);
  text("Fin Status", cx, cy - 130);
  textAlign(LEFT);

  String servos = {"S1", "S2", "S3", "S4"};
  int pos = {{cx, cy - 90}, {cx + 90, cy}, {cx, cy + 90}, {cx - 90, cy}};

  for (int i = 0; i < servos.length; i++) {
    String s = servos[i];
    int x = pos[i][0];
    int y = pos[i][1];

    fill(servoValues.get(s) == null ? 150 : 255);
    ellipse(x, y, 40, 40);
    fill(0);
    textAlign(CENTER, CENTER);
    text(s + "\n" + servoValues.get(s), x, y);
  }
  textAlign(LEFT, BASELINE);
}

// === SERVO DEFAULT PANEL ===
void drawServoDefaults() {
  int startX = 820, y = 500;

  fill(50);
  stroke(200);
  rect(startX - 20, y - 40, 280, 180, 10);
  fill(255);
  textSize(14);
  text("Default Fin Positions", startX, y - 10);

  String servos = {"S1", "S2", "S3", "S4"};
  for (int i = 0; i < servos.length; i++) {
    String s = servos[i];
    int x = startX;
    int sy = y + i * 30;
    int val = servoDefaults.get(s);

    text(s + ": " + val + "°", x, sy);

    drawButton(x + 60, sy - 10, 30, 20, "-1", () -> changeDefault(s, -1));
    drawButton(x + 100, sy - 10, 30, 20, "0", () -> resetDefault(s));
    drawButton(x + 140, sy - 10, 30, 20, "+1", () -> changeDefault(s, +1));
  }
}

// === GENERIC BUTTON HANDLER ===
void drawButton(int x, int y, int w, int h, String label, Runnable action) {
  fill(100);
  rect(x, y, w, h, 5);
  fill(255);
  textAlign(CENTER, CENTER);
  text(label, x + w / 2, y + h / 2);

  boolean inside = mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h;
  if (mousePressed && !wasMousePressed && inside) {
    action.run();
  }
}

// === SERVO VALUE CHANGERS ===
void changeDefault(String servo, int delta) {
  int current = servoDefaults.get(servo);
  int newVal = constrain(current + delta, 70, 110);
  servoDefaults.put(servo, newVal);
  myPort.write(servo + ":" + newVal + "\n");
  println("Default command: " + servo + ":" + newVal);
}

void resetDefault(String servo) {
  servoDefaults.put(servo, 90);
  myPort.write(servo + ":90\n");
  println("Reset default: " + servo + ":90");
}

```

I do not know why this code does not have highlighted keywords…

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 17, 2025, 3:55pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/9 "2025-08-17T15:55:36Z")

</div>

> [@newuser](#):
>
> I do not know why this code does not have highlighted keywords…

See the section on _ **Syntax highlighting** _:

[FAQ - Processing Community Forum](https://discourse.processing.org/faq#format-your-code) \< I learned this recently and I am an experienced forum member!

> [@newuser](#):
>
> Yes, you can, here is how…

That is a start.  
The code you posted still has errors.  
We do not have the original source to work and can only work with what was pasted which may have additional errors lost in translation.

In a ideal world code should be formatted properly by the original poster, reviewed and tested before posting.

_ **All users, and especially new users, should be required to read all the guidelines before posting.** _

These days I follow this approach to unformatted code:

- Flag it and the moderators can address at their discretion.
- I may share a courtesy link to educate:  
_[FAQ - Processing Community Forum](https://discourse.processing.org/faq#format-your-code)_ \< See _ **Format your Code** _

The above reflects my opinions on this matter.  
We are all trying to help!

`:)`

---

<div class="post-metadata">

**Author:** ![newuser](https://avatars.discourse-cdn.com/v4/letter/n/3e96dc/32.png) [@newuser](https://discourse.processing.org/u/newuser)\
**Post date:** [August 17, 2025, 6:38pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/10 "2025-08-17T18:38:56Z")

</div>

@glv - Referring to my post/code two posts ago… Thank you! I used `cpp` after the three backticks for the code I posted… giving it highlights… nice… learning every day.

I was addressing the formatting statement _“I can’t format it in any way..”_ to give another method, assuming their first two applications (IDE and browser) were not cooperating.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 17, 2025, 6:51pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/11 "2025-08-17T18:51:50Z")

</div>

> [@newuser](#):
>
> I used `cpp` after the three backticks for the code I posted… giving it highlights… nice… learning every day.

Cool beans! I learned something new as well!

ChatGPT assisted research:

> The most reliable list of language specifiers for Highlight.js, which is used by Discourse, is maintained on their official GitHub repository.

> <https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md>

And _processing_ is in there!

This is a cool list!

> <https://github.com/highlightjs/highlight.js/blob/main/src/languages/processing.js>

`:)`

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 17, 2025, 7:06pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/12 "2025-08-17T19:06:22Z")

</div>

> [@newuser](#):
>
> I used `cpp` after the three backticks for the code I posted

Isn’t that for c plus plus? I would think you’d want to use `processing` for this forum.

---

<div class="post-metadata">

**Author:** ![newuser](https://avatars.discourse-cdn.com/v4/letter/n/3e96dc/32.png) [@newuser](https://discourse.processing.org/u/newuser)\
**Post date:** [August 18, 2025, 7:58pm UTC](https://discourse.processing.org/t/need-help-with-text-position-solved/46756/13 "2025-08-18T19:58:26Z")

</div>

I have updated the code post to ````processing`