import processing.serial.*;

Serial myPort;
int val;

float barWidth = 300.0;
float sliderPos = 100.0;
float hueVal = map(sliderPos, 0.0, barWidth, 0.0, 255.0);

void setup()
{
  String portName = Serial.list()[4];
  myPort = new Serial(this, portName, 115200);
  
  size(400,100);
  background (128);
  colorMode(HSB, 255);
  stroke(0,0,0);
  println(hueVal);
  
}

void draw()
{
  
  ////If you want to listen for something on the serial port, do this:
  //if (myPort.available()>0){
  //  val = myPort.readStringUntil('\n');
  //}
  //println(val);
  
  background(128);
  fill (255);
  
  hueVal = drawSlider(20.0,20.0,barWidth,30.0,hueVal);
  val = 255 - (int)hueVal + 170;
  
  myPort.write(val);
  println(floor(hueVal));
  
}

float drawSlider(float xPos, float yPos, float sWidth, float sHeight,float _hueVal){
  fill(255);
  noStroke();
  rect(xPos-5,yPos-10,sWidth+10,sHeight+20);  //draw white background behind slider
   
  float sliderPos=map(_hueVal,0.0,255.0,0.0,sWidth); //find the current sliderPosition from hueVal
   
  for(int i=0;i<sWidth;i++){  //draw 1 line for each hueValue from 0-255
      _hueVal=map(i,0.0,sWidth,0.0,255.0);  //get hueVal for each position in the bar
      stroke(_hueVal,255,255);
      line(xPos+i,yPos,xPos+i,yPos+sHeight);
  }
  if(mousePressed && mouseX>xPos && mouseX<(xPos+sWidth) && mouseY>yPos && mouseY <yPos+sHeight){
     sliderPos=mouseX-xPos;
  }
  stroke(100);
  _hueVal=map(sliderPos,0.0,sWidth,0.0,255.0);
  fill(_hueVal,255,255);
  rect(sliderPos+xPos-3,yPos-5,6,sHeight+10);
  rect(sWidth+40, yPos, sHeight,sHeight);
  return _hueVal;
}