Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jywarren/fred

Simple, stripped down JavaScript layered drawing environment with multitouch events
https://github.com/jywarren/fred

Last synced: 3 months ago
JSON representation

Simple, stripped down JavaScript layered drawing environment with multitouch events

Awesome Lists containing this project

README 

        
 .o88o.                          .o8  

 888 `"                         "888  

o888oo  oooo d8b  .ooooo.   .oooo888  

 888    `888""8P d88' `88b d88' `888  

 888     888     888ooo888 888   888  

 888     888     888    .o 888   888  

o888o   d888b    `Y8bod8P' `Y8bod88P" 



Simple, stripped down JavaScript layered drawing environment with multitouch events, with an eye towards tablet web/vector authoring.



===========================================



For more information, contact [email protected]

There is usually a reasonably recent demo available at http://fred.unterbahn.com



===========================================



To-do:



- text toolbar: alignment, text size, font, text color

- text wrapping

- style toolbar: line width, line color

- edit polygons with CPs, edit beziers with mod key + CPs

- color, linewidth, fill style panel, swipe open?

	- this is the nascent Fred.Tray class. Jeff's workin on it



- Group class which can self-contain and matrix transform (this will stop mouseclicks getting to members... ug)

	- grouping key binding 'g' is not working on .select()

	- Select class is the prototype for this

- Fred.drag is broken. Edit tool is using Fred.tools.edit.dragging

- .make_draggable() sets up .dragging based on is_mousewithin() -also is_draggable = true

	- generates an on_drag() call

	- or default to polygon is_mousewithin()

- add on_mousedown_within to only fire when pointer is within, if it conforms to Polygon? 

- url hash rewriting, to generate permalinks for different states?

- styling in CSS-like syntax (like Cartagen)

- fix android viewport width/height

	- try removeing Fred.resize() entirely

- alias events like on_touchstart > on_mousedown

- line 73 of pen.js shouldn't be necessary - modifier key not turning off

- shift key locks line drawing to 45 degree angles

- clicking on bezier polygons (currently treats them like linear polys)

	- clicking on bezier lines: http://algorithmist.wordpress.com/2008/08/15/closest-point-on-bezier-code/



- full iPhone/Android multitouch, with editing UI

- use Android call "window.devicePixelRatio" for pixel density

- this list is getting more ambitious as it goes so I'll finish now



===========================================



To contribute, please fork the project in Github: https://github.com/jywarren/fred, Then send pull requests! 



You'll have to edit the files in /src/, then run 'rake build' from the Fred root directory and it'll compile everything in the /src/ directory into /fred.js, stripping out comments as it goes. This helps maintain ordering of the source loading, and also helps with minification.



You can also just create new tools in /tools/, adding them to Fred.tools, just as the pen tool is: Fred.tools.pen



Tools 'take over' mouse events and must have:



- .select() and .deselect() methods which are called when the tool is selected with Fred.select_tool('pen')

	- the deselect() method is called when you switch to a different tool, and must unsubscribe the tools listeners

- .draw() method which is called every frame

- .description, a string which describes the tool (used in tooltips and menus) 



===========================================

To debug from Android with the Android Debug Bridge:



adb kill-server

sudo adb start-server

adb logcat browser:V *:S



===========================================

Icon sources:



http://www.famfamfam.com/lab/icons/silk/

http://git.gnome.org/browse/gimp/tree/themes/Default/images



Potential sources:



http://www.greepit.com/open-source-icons-gcons/

http://sublink.ca/icons/sweetieplus/