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