Placement of sliders outside canvas

p5.js Coding Questions
1

Hi i am trying to place sliders directly under the canvas, but other text added to html keep getting in between. Does anyone have a solution to keep the sliders and buttons next to the canvas?

the problem is visible here REF., as well as the sourcecode.

Best regards Mads Peter

2

Perhaps something like this sketch below, which positions the p5js canvas between 2 images:

But instead of canvas, you’re gonna need to apply the same general idea to your sliders.

Simply create an empty <tag> w/ an id attribute right after the p5js’ <canvas> element.

Then invoke method p5.Element::parent() over each slider, so they are moved inside the container w/ the specified id.

For more details, go to the sketch’s original forum post:

3

no idea, but why not inside canvas?
in p5.js test it worked with

  rSlider = createSlider(0, 255, 0);
  rSlider.position(10, height-25);
  gSlider = createSlider(0, 255, 0);
  gSlider.position(250, height-25);
  bSlider = createSlider(0, 255, 0 );
  bSlider.position(490, height-25);
4

Thank you, just what i needed.

5

@mpsteenstrup – Glad you got it working! (which answer solved your problem?)

6

In reference to @kll’s solution, I might add that it also needs to take windowWidth & windowHeight into consideration, along w/ width & height when using p5.Element::position(): :thinking:

For the fact that p5.Element objects are positioned relative to the browser’s window coordinates, not the p5js’ canvas. :warning:

Here’s a simple example that re-centralizes a slider inside the canvas every time browser’s window is resized: :framed_picture:

7

The first answer from GoToLoop got me the hole way - thank you.

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);
}
9

Oopsy, totally forgotten that not all p5js canvases are at browser’s position (0, 0)! :man_facepalming:

Anyways, here are some “tricks”: :mage:

We don’t need to store the p5.Renderer returned by the p5:createCanvas() in some global variable. :convenience_store:

p5js already does it for us under its “secret” variables _renderer & _curElement: :male_detective:

So, in order to grab sketch’s main canvas coordinates, we just need: _renderer.position(). :smile_cat:

Of course, don’t forget to import “p5.dom.js” for the p5.Element::position() method. :flushed:

Another 1 is that all the id attributes secretly become global variables already. :shushing_face:

So rather than parent('canvasposition') as a string, simply pass the id global variable: parent(canvasposition). :yum: