move draw graph up by 100px

zerocool5878

Hi all I am trying to move this bar graph to the center of the window size while maintaining a 100px clear area for a scale, legend and titles to show thru from a background image. I managed to get the x start and end as well as the y sorted but i can't seem to locate an area to adjust where the graph starts in lower Y direction. any help you can offer would be greatly appreciated.

import processing.serial.*;
PImage bg;

Serial myPort;        // The serial port
int xPos = 100;         // horizontal position of the graph added to leave space on the left
float inByte = 0;

void setup () {
  // set the window size:
  size(800, 800);

  // List all the available serial ports
  // if using Processing 2.1 or later, use Serial.printArray()
  println(Serial.list());

  // I know that the first port in the serial list on my mac
  // is always my  Arduino, so I open Serial.list()[0].
  // Open whatever port is the one you're using.
  myPort = new Serial(this, "COM4", 115200);

  // don't generate a serialEvent() unless you get a newline character:
  myPort.bufferUntil('\n');
  bg = loadImage("full.png");
  // set inital background:
  //background(255); //was 0 for black
   background(bg);
}
void draw () {
  // draw the line:
  stroke(0, 0, 0);  // was 127, 34, 255 use RGB to hex converter
  line(xPos, height, xPos, height - inByte);

  // at the edge of the screen, go back to the beginning:
  if (xPos >= width-100) { //added -100 to leave room at right side
    xPos = 100; //reset x position once you get to end
    background(bg); //(255);// was 0 black you need to change both
  } else {
    // increment the horizontal position:
    xPos++;
  }
}


void serialEvent (Serial myPort) {
  // get the ASCII string:
  String inString = myPort.readStringUntil('\n');

  if (inString != null) {
    // trim off any whitespace:
    inString = trim(inString);
    // convert to an int and map to the screen height:
    inByte = float(inString);
    println(inByte);
    inByte = map(inByte, 0, 1023, 0, height-100); //minus 100 was added to leave space at top
  }
}

benja

This is the line where you draw the lines of your graph:

line(xPos, height, xPos, height - inByte);

if you want to move these lines upward, then you have to subtract some value from the y-values of this line. Something like this:

line(xPos, height-100, xPos, height -100- inByte);

zerocool5878

That worked perfect thank you very much!