Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Simulated OS with Canvas

 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:






 
Ranch Hand
Posts: 2908
1
Spring Java Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Have you tried adding event listener to image, like


 
Sheriff
Posts: 7108
184
Eclipse IDE Postgres Database VI Editor Chrome Java Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Ranch Hand
Posts: 308
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Popeye has his spinach. I have this tiny ad:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
    Bookmark Topic Watch Topic
  • New Topic