PDA

View Full Version : Create and edit "objects" in Javascript


Niklas Schröder
April 17th, 2008, 05:39 PM
I'm working on a little Javascript project. But I'm pretty much a newb when it comes to that kind of coding, so I was wondering if some of you could help me get started.

I need to have the user set some parameters through an options dialog, have the browser draw an object based on those parameters, and then allow the user to edit the parameters of the newly created object if needed by clicking on the object and having an options dialog show.

Like I said before, I'm a newb at Javascript, so commented code and such would be appreciated! ;)

jespdj
April 17th, 2008, 05:57 PM
You want to draw, i.e. generate graphics, in JavaScript running in a browser? I don't know if that's easy / possible.

There are some very nice JavaScript, HTML, CSS, DOM and other tutorials here: http://www.w3schools.com/

Niklas Schröder
April 17th, 2008, 06:04 PM
Ok. I guess I'll do some more poking around in that site. But I know for a FACT that it's possible to draw objects with Javascript. It may not be easy, but it's a good exercise. :p

LaRoza
April 17th, 2008, 06:10 PM
Ok. I guess I'll do some more poking around in that site. But I know for a FACT that it's possible to draw objects with Javascript. It may not be easy, but it's a good exercise. :p

http://blog.nihilogic.dk/2008/04/super-mario-in-14kb-javascript.html

It is possible, but not easy.

That game is all javascript.

Niklas Schröder
April 17th, 2008, 06:13 PM
Ok. So it's not easy. Got it. But I didn't think the project would be in the first place.

IS there an easy way to do what I want? If so I'd love to hear about it...

LaRoza
April 17th, 2008, 06:15 PM
Ok. So it's not easy. Got it. But I didn't think the project would be in the first place.

IS there an easy way to do what I want? If so I'd love to hear about it...

Investigate the code of the project I linked to.

Niklas Schröder
April 17th, 2008, 06:23 PM
Will do. Seems a bit complex though. All I need is a way for the user to define an angle and have a line drawn from the center of a circle to about 200 pixels out with a text box at the end...

LaRoza
April 17th, 2008, 06:31 PM
Will do. Seems a bit complex though. All I need is a way for the user to define an angle and have a line drawn from the center of a circle to about 200 pixels out with a text box at the end...

Just a circle?

Could you describe this a bit more; I have a few ideas.

Wybiral
April 17th, 2008, 06:35 PM
Use SVG DOM to render shapes, etc.

Niklas Schröder
April 17th, 2008, 06:37 PM
For my project, there will be a circle in the middle with lines coming out of the sides. Depending on where the line comes out of the circle, it corresponds to a certain time of day. It's a day planner. Basically a customizable, digital version of this.

http://lifehacker.com/377905/muji-chronotebook-non%20linear-day-planner

I want the user to be able to create new lines (which correspond to events and the times at which they happen) and then be able to click on that object once it's on the screen and edit the text/angle.

Wybiral
April 17th, 2008, 06:42 PM
Unless you want to use Flash (which isn't portable) or Java applets (which can be a pain) you should use SVG. You can render circles / lines / rectanges / etc. There are tons of tutorials on Javascript and SVG online (google it).

pmasiar
April 18th, 2008, 07:52 PM
use a library to manipulate DOM, like jQuery, and/or JS GUI widgets, like Yahoo UI. Don't waste time on handcoding stuff and figuring out by your own trial and errors what should be cross-platform compatible but isn't - people learned all the lessons.