How can I add a button in a Graphics Element?

Okaghana

Ok. So I want to create a button inside a createGraphics element. Here is an example:

var pb
var button
var x = 50
var y = 50

function setup() {
  createCanvas(200, 200);

    pg = createGraphics(100, 100);
    pg.background(100)

    button = createButton("Button")

    button.position(0,0)
    button.size(100,100)

}

function draw() {
  background(220);

    image(pg, x, y)

    x += random(-1, 1)
    y += random(-1, 1)
}

So basically I want to be the button "button" to be a part of "pb", so that the button gets moved around alongside with the darker Box.

I tried things like button.parent(pg) or button = pg.createButton(100, 100), but none of those 2 methods worked :(

So how can I do this?

Sincerely Okaghana

kfrajer

Creating a button creates an element in the DOM so I understand. It is associated with your HTML hierarchy. PG is a a graphic element, probably a Canvas and it is not a html element container like a <div> is. There are a cpl of things you could do instead:

You create a button and a pg. Draw the pgraphics first and the button second. Every time you move/resize the PGraphics, you do the same to the button. However this idea has some shortcomings: Not sure if it is reliable at all (consistent across browsers) and if you are managing more than one button, it becomes more difficult to maintain.

Another approach is that instead of creating a button html element, you create a button class using js (aka. p5.js) and then you add the button to your canvas element. It won't live in DOM (you cannot do document.getElementByID(...) foir example) but on the other hand you would control it in the backstage as a js component. This would be the approach I will choose.

Kf

GoToLoop

... to be a part of "pb", ...

What is "pb"? Do you mean variable pg? :-??

, so that the button gets moved around alongside with the darker Box.

By darker box you mean your p5.Graphics variable pg, right?

You display that pg via method p5::image() onto sketch's canvas.
So its placement coordinates are relative to the sketch's canvas (0, 0) origin, right?

However, a p5.Element, such as those created by createButton(), etc., has its placement coordinates relative to the window's, not the sketch's canvas: @-)

Therefore, you're gonna need to know the sketch's canvas own position():
_renderer.position() https://p5js.org/reference/#/p5.Element/position

// Forum.Processing.org/two/discussion/27765/
// how-can-i-add-a-button-in-a-graphics-element#Item_2

// GoToLoop (2018-Apr-14)

"use strict";

let cx, cy, // sketch canvas' coordinates
    x, y, // offscreen canvas' coordinates for image()
    pg, // p5.Graphics offscreen canvas
    btn, // p5.Element button
    bg; // p5.Color for background()

function setup() {
    createCanvas(200, 200);

    ( { x: cx, y: cy } = _renderer.position() );

    x = width>>2, y = height>>2;

    pg = createGraphics(width>>1, height>>1).background(0o200);

    btn = createButton('Button').size(pg.width, pg.height);

    bg = color(0o350);
}

Now you just need to keep re-invoking method position() on btn every time pg's x & y are changed.
Not forgetting to add the canvas' cx & cy offset coordinates as well. L-)

function draw() {
  background(bg);

  image(pg, x += random(-1, 1), y += random(-1, 1));

  btn.position(x + cx, y + cy);
}