Placement of sliders outside canvas

p5.js Coding Questions
8

thanks to @GoToLoop ( sorry, but here ignoring the resize… )
and a canvas position readback,
https://p5js.org/reference/#/p5.Element/position
now works also when the canvas is not at 0,0
so i could position the slider at its own outside canvas position,
but my original DOM test elements back ( over ) the canvas.
pls see:
https://editor.p5js.org/kll/sketches/h53BeOPNU

SNAG-0024
SNAG-0024.jpg481×554 20.3 KB

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <script src="sketch.js"></script> 
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <h1> header text </h1>
    <p><img width="700px" src="data/murly@storm_header.jpg" ></p>
    <p id="canvasposition"></p>
    <p> RGB slider: </p>
    <p id="controlposition"></p>
    <h2>end text</h2>
  </body>
</html>

sketch.js

// DOM
// https://p5js.org/reference/#/libraries/p5.dom
// https://p5js.org/reference/#/p5.Element/position
// change slider to outside canvas control and test
// and absolute position for "calculation" elements ON canvas
// 
// https://discourse.processing.org/t/placement-of-sliders-outside-canvas/9631/6

var inputw1, inputw2, buttonadd, buttonsub, showadd, showsub, outputadd=0, outputsub=0;
var rSlider, gSlider, bSlider;
var r=0,g=0,b=0;
var cnv,cnvat;

function setup() {
  // create canvas
  cnv = createCanvas(700, 300).parent('canvasposition');
  check_pos();                          // read where the canvas has its x0,y0
  textAlign(CENTER);
  textSize(20);
  //two input windows and calculation buttons and result text ON canvas positioned
  inputw1 = createInput(30);
  inputw1.position(20+cnvat.x, 15+cnvat.y);
  inputw2 = createInput(10);
  inputw2.position(20+cnvat.x, 45+cnvat.y);

  buttonadd = createButton('+');
  buttonadd.position(220+cnvat.x, 75+cnvat.y);
  buttonadd.mousePressed(calcadd);

  buttonsub = createButton('--');
  buttonsub.position(220+cnvat.x,105+cnvat.y);
  buttonsub.mousePressed(calcsub);


  showadd = createElement('p', 'add:');
  showadd.position(20+cnvat.x, 65+cnvat.y);

  showsub = createElement('p', 'sub:');
  showsub.position(20+cnvat.x, 95+cnvat.y);

  // slider test ( change from inside canvas to its own position below canvas
  rSlider = createSlider(0, 255, 200).parent('controlposition');
//  rSlider.position(20, height - 25);
  gSlider = createSlider(0, 255, 200).parent('controlposition');
//  gSlider.position(250, height - 25);
  bSlider = createSlider(0, 255, 0).parent('controlposition');
//  bSlider.position(490, height - 25);

}

function calcadd() {
  var intxt1 = inputw1.value();
  var output1 = float(intxt1);
  var intxt2 = inputw2.value();
  var output2 = float(intxt2);
  outputadd = output1 + output2;
  showadd.html('[+] ' + outputadd);
}


function calcsub() {
  var intxt1 = inputw1.value();
  var output1 = float(intxt1);
  var intxt2 = inputw2.value();
  var output2 = float(intxt2);
  outputsub = output1 - output2;
  showsub.html('[-] ' + outputsub);
}

function get_slider() {
  r = rSlider.value();
  g = gSlider.value();
  b = bSlider.value();  
}

function draw() {
  background(r,g,b);
  get_slider();
  fill(b,r,g);
  ellipse(width/2,height/2,outputadd,outputsub);
}

function check_pos() {  
  cnvat = cnv.position();
  print("canvas at : x "+cnvat.x+" y "+cnvat.y);
}
2 Likes