• 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 Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Junilu Lacar
  • Liutauras Vilda
Sheriffs:
  • Paul Clapham
  • Jeanne Boyarsky
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Piet Souris
  • Carey Brown
Bartenders:
  • Jesse Duncan
  • Frits Walraven
  • Mikalai Zaikin

Simulated OS with Canvas

 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Have you tried adding event listener to image, like


 
Sheriff
Posts: 7113
184
Eclipse IDE Postgres Database VI Editor Chrome Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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: 312
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
pie. tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic