Simulated OS with Canvas

Greenhorn

Posts: 2

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have to build a simulated OS for my college class. I'm making it pretty simple, nothing too fancy and am using HTML5 Canvas. So far I have the icons on a black background and have made them draggable. I want to know how I can make it so when you click on an icon a box appears (just like a real OS) and then closes by clicking on the 'x'. I also want to be able to drag any icon into the trash bin and it disappears. I understand there are click/mouse events, but I don't know how to implement them into the code I have setup. Here's a pic followed by the code:

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <div id="canvas"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'canvas',
        width: 1910,
        height: 995,
      });

//icon3
	  var icon3 = new Image();
	  
	  icon3.onload = function() {
		var icon3KJS = new Kinetic.Image({
			x:70,
			y:500,
			image: icon3,
			width: 100,
			height: 100,
			draggable: true
		});
		firstLayer.add(icon3KJS);
		firstLayer.draw();
	  };
	  
	  icon3.src =
'http://s28.postimg.org/ut86fftbd/002_18.png';
   
	//garbage
	  var garbage = new Image();
	  
	  garbage.onload = function() {
		var garbageKJS = new Kinetic.Image({
			x:1700,
			y:800,
			image: garbage,
			width: 100,
			height: 100,
			draggable: true
		});
		firstLayer.add(garbageKJS);
		firstLayer.draw();
	  };
	  
	  garbage.src =
'http://s22.postimg.org/vajw4tizx/002_15.png';
	
		//icon4
	  var icon4 = new Image();
	  
	  icon4.onload = function() {
		var icon4KJS = new Kinetic.Image({
			x:70,
			y:700,
			image: icon4,
			width: 100,
			height: 100,
			draggable: true
		});
		firstLayer.add(icon4KJS);
		firstLayer.draw();
	  };
	  
	  icon4.src =
'http://s2.postimg.org/41pzcka1x/002_43.png';
    </script>
  </body>
</html>

Sagar Rohankar

Ranch Hand

Posts: 2908

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Have you tried adding event listener to image, like

[LEARNING bLOG] | [Freelance Web Designer] | [and "Rohan" is part of my surname]

Knute Snortum

Sheriff

Posts: 7125

184

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

A nitpick about your post: you didn't quite use the code tags correctly. I fixed it for you (the [/code] goes at the end of the code). Here's a link: UseCodeTags

All things are lawful, but not all things are profitable.

Albareto McKenzie

Ranch Hand

Posts: 312

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sagar got it right, first thing is to add the event to the icons, then you would have to open a window, I don't know if that Kinetic library has that, otherwise you will have to create it yourself using other tools like jQuery UI

About the drag and drop you will have to look into the Kinectic library, it seems to have some DD implementation but you will have to read the docs to check how to do it

My favorite is a chocolate cupcake with white frosting and tiny ad sprinkles.

a bit of art, as a gift, the permaculture playing cards

https://gardener-gift.com