Forum Documentation Showcase Pricing Learn more

Creation of new plugin : How I can display the result of my plugin?

Hello,

I’m actually trying to implement a new plugin called DraWhatYouWant. It supposed to give you the ability to draw whatever you want into a draw area. It’s also possible to clear the area or change the color. The area is an HTML canvas and we can change or erase by clicking on buttons contaned into a div. However, that’s my first plugin and I cannot display the canvas and the button correctly in the test apps.

That’s my plugin’s configuration :

And my javascript code :

window.addEventListener("load", function(){

	var clear = document.getElementById("clear");
	var paint = false;
	var color = "black";
	var bbutton = document.getElementById("blue");
	var rbutton = document.getElementById("red");
	var gbutton = document.getElementById("green");
	var blbutton = document.getElementById("black")

	can = document.querySelector("canvas");
	context = can.getContext("2d");
	can.addEventListener("mouseup", finish);
	can.addEventListener("mousemove", draw);
	clear.addEventListener("click", clearContent);
	can.addEventListener("mousedown", painting);
	bbutton.addEventListener("click", blue);
	rbutton.addEventListener("click", red);
	gbutton.addEventListener("click", green);
	blbutton.addEventListener("click", black);
	can.height = 315;
	can.width = 312;

		function clearContent(){	
		context.clearRect(0, 0, can.width, can.height);
	}

	function painting(){	
		paint = true;
		context.beginPath();
	}

	function finish(){
		paint = false;
	}

	function draw(e){
		if (!paint) return 0;
var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
			context.strokeStyle=color;
			context.lineWidth = 5;
			context.lineCap = "round";
			context.lineTo(x, y);
			context.stroke();
	}

function blue() {
	color = "blue";
}

function red() {
	color = "red";
}

function green() {
	color = "green";
}

function black(){
	color = "black";
}


});

Notice that I haven’t yet write my js code into my plugin editor. So what I’m trying to do now is only to display my HTML code and for the moment what have is that :

So what I can do to display correctly my canvas and my range (which contain the buttons)

Any help would much appreciated.

Regards

YT

Hi!
Did you take time to read documentation about building a plugin, maybe take course from Copilot (worth the money) and search the forum here to get some hint on how this work?
There’s a lot of thing to consider while building a plugin and if you do all three above, you should be good to start.

1 Like

Yep I agree, @copilot video on Plugin Development is a nice intro into the world of building plugins for Bubble, its a little dated (no server side actions) but still very relevant and useful. Also check out the Bubble reference for building and experiment.

Course here btw

1 Like

Hey @luke2,

We’re in the process of updating the Plugin Development course to cover server-side actions, improved element action control and more. :slight_smile:

3 Likes