I've made a few updates today:
Some more refactoring.
Fixed a bug when loading saved drawings larger than the default canvas. This also applies to the importing tool.
Simplified the html export feature ( was unnecessary in <pre>).
Finished most of the groundwork for the gallery feature.
Added an about page.
Ad optimization.
The gallery feature is currently only showing in the nightly build, because it doesn't real doing anything at the moment except show 10 random drawings inline.
Some other news, I purchased asciidraw.com recently. I intent on splitting the tool set into two, one aimed at diagram drawing, the other at more arty drawing, freeform, spraypaint, fill, etc. Although they will both point to the same site with a slightly different configuration, figured it couldn't hurt to acquire some URL real estate.
Blog, changelists and updates
Monday, 17 October 2011
Wednesday, 14 September 2011
Release 0.2.2b
Fixed some residing bugs in the save/load UI.
Changed ads, randomly select from a left, right, top, or bottom ad slot. This has required a move to use a JSP for the host page.
Only minor, mostly cosmetic!
Changed ads, randomly select from a left, right, top, or bottom ad slot. This has required a move to use a JSP for the host page.
Only minor, mostly cosmetic!
Friday, 9 September 2011
Release 0.2.1b
I wasn't quite sure if this is technically stable but It seems to work as far as I can tell!
The biggest changes since the previous release are mostly refactorings, however feature wise there is some cool stuff:
History support for moving between documents, as well as keeping the current url hash matched to the current open document.
A much improved widget for saving drawings, with the ability to add a title and specify whether you wish this to be public (looking ahead to a gallery feature), links that don't screw up the page etc.
A loading widget, as the appengine API calls can be slow if there isn't already an instance running.
A whole new set of drawing icons, courtesy of my good friend Sam Irvine http://www.samirvine.co.uk/, along with some minor css tweaks, smaller text most notably.
The properly managed history tokens also now offers away around the bug that is, loading diagrams that are larger than the default sized canvas.
If anything is broken please let me know as soon as humanly possible!
Enjoy.
The biggest changes since the previous release are mostly refactorings, however feature wise there is some cool stuff:
History support for moving between documents, as well as keeping the current url hash matched to the current open document.
A much improved widget for saving drawings, with the ability to add a title and specify whether you wish this to be public (looking ahead to a gallery feature), links that don't screw up the page etc.
A loading widget, as the appengine API calls can be slow if there isn't already an instance running.
A whole new set of drawing icons, courtesy of my good friend Sam Irvine http://www.samirvine.co.uk/, along with some minor css tweaks, smaller text most notably.
The properly managed history tokens also now offers away around the bug that is, loading diagrams that are larger than the default sized canvas.
If anything is broken please let me know as soon as humanly possible!
Enjoy.
Tuesday, 6 September 2011
Update
Have been off development for a month or so now for various reasons, but been hacking away the last couple of days, have a look in nightly for some updates, new icons, an update widget for saving diagrams, and most of all (but hard to show anything for) I've had a huge refactor. The main goal of this was to allow me to easily integrate a decent model for saving diagrams, as well as hopefully having multiple drawings open at once.
My immediate goals are:
Revamp the save/load UI (Google Docs is what I am modelling it on I guess).
Give the menu buttons a consistent look at feel across platforms/browsers, and hopefully matching the new icons.
Some more refactoring!
A resize tool (has been requested many times, but very hard to implement given my "dumb" canvas model).
Add an about section to the site with a bit more info about usage.
Implement servlets for linking to raw readonly images, for embedding into other sites.
Once the above is completed, I plan to start work on a Gallery feature.
Drawings marked public will be browsable. Nothing fancy, maybe some ratings...
My immediate goals are:
Revamp the save/load UI (Google Docs is what I am modelling it on I guess).
Give the menu buttons a consistent look at feel across platforms/browsers, and hopefully matching the new icons.
Some more refactoring!
A resize tool (has been requested many times, but very hard to implement given my "dumb" canvas model).
Add an about section to the site with a bit more info about usage.
Implement servlets for linking to raw readonly images, for embedding into other sites.
Once the above is completed, I plan to start work on a Gallery feature.
Drawings marked public will be browsable. Nothing fancy, maybe some ratings...
Monday, 4 July 2011
Release 0.2b
I suppose I have done enough to go to 0.2! New features:
Freeform tool: Draw freehand, in any character entered from the keyboard.
Move tool: Available under the Select tool, once an area is selected, click inside it and drag to move.
Added Unicode support: This should support all unicode characters, including chinese symbols. There are some issues around chinese monospace fonts, will look into this after some more testing.
Social Links: Plus One, Facebook and Twitter, standard.
Ads: Had to be done!
Refactoring: I have optimized some of the slower methods such as clear cells and erase. I have also made preperations for supporting a photoshop like tool configuration panel, so you can draw boxes/lines etc with custom edge/corner characters.
Notes:
IE seems to be working better now after the refactor, latest Chrome release has massively increased performance, I would highly recommend this for larger diagrams.
Freeform tool: Draw freehand, in any character entered from the keyboard.
Move tool: Available under the Select tool, once an area is selected, click inside it and drag to move.
Added Unicode support: This should support all unicode characters, including chinese symbols. There are some issues around chinese monospace fonts, will look into this after some more testing.
Social Links: Plus One, Facebook and Twitter, standard.
Ads: Had to be done!
Refactoring: I have optimized some of the slower methods such as clear cells and erase. I have also made preperations for supporting a photoshop like tool configuration panel, so you can draw boxes/lines etc with custom edge/corner characters.
Notes:
IE seems to be working better now after the refactor, latest Chrome release has massively increased performance, I would highly recommend this for larger diagrams.
Tuesday, 21 June 2011
Release 0.1.3b
Changed layout to absolute, mainly for performance reasons on IE, which is now usable!
Added cut functionality to the select tool.
Refactored core canvas code to minimize DOM changes and JS execution time when drawing.
History manager now stores differential changes as opposed to an entire snapshot of the canvas which has lowered latency and memory usage. Undo steps are now at 100 (Unnecessary I am sure!).
TODO's
FB/Twitter/+1 buttons.
Support UTF characters, for accented languages and hopefully Chinese.
Add move capability to select tool.
Add import ability.
Add save ability.
Ads?
Added cut functionality to the select tool.
Refactored core canvas code to minimize DOM changes and JS execution time when drawing.
History manager now stores differential changes as opposed to an entire snapshot of the canvas which has lowered latency and memory usage. Undo steps are now at 100 (Unnecessary I am sure!).
TODO's
FB/Twitter/+1 buttons.
Support UTF characters, for accented languages and hopefully Chinese.
Add move capability to select tool.
Add import ability.
Add save ability.
Ads?
Wednesday, 15 June 2011
Nightly Environment + IE
Lesson learnt, I've set-up a nightly environment for testing and anybody curious enough out there! http://nightly.ascii-flow.appspot.com/
The follow up to this is, I've been experimenting with some performance enhancements, namely for IE. After a bit more research, it seems that IE sucks at page layout. It didn't take long to see this was one of the slowest parts of the screen updates. The solution to this, is absolute positioning! So the current nightly build should have just that, 3000 absolute positioned cells, and IE actually works! (Just). Chrome has also seen a very nice latency drop, approximately 7ms Mouse Handler & Logic, 4ms Layout, 5ms Paint (for a 30x100 sized box) in total, which is about twice as fast as before.
Unfortunately, Firefox seems to have taken this change to heart and has slowed down a tad... Oh well, at least IE is usable. Check it out on nightly!
The follow up to this is, I've been experimenting with some performance enhancements, namely for IE. After a bit more research, it seems that IE sucks at page layout. It didn't take long to see this was one of the slowest parts of the screen updates. The solution to this, is absolute positioning! So the current nightly build should have just that, 3000 absolute positioned cells, and IE actually works! (Just). Chrome has also seen a very nice latency drop, approximately 7ms Mouse Handler & Logic, 4ms Layout, 5ms Paint (for a 30x100 sized box) in total, which is about twice as fast as before.
Unfortunately, Firefox seems to have taken this change to heart and has slowed down a tad... Oh well, at least IE is usable. Check it out on nightly!
Release 0.1.2b
Seems that my last attempts to refactor the key eventing model failed, and I broke all of the ctrl+? commands. Hopefully should be working now.
Probably a good incentive for me to branch an unstable version of the app for development and testing!
Probably a good incentive for me to branch an unstable version of the app for development and testing!
Tuesday, 14 June 2011
IE Performance Issues
I spent this evening trying to improve IE support, to no avail.
As explained previously, I was attaching event listeners to each individual cell, and there are a lot of them! A colleague suggested I attach a single listener to a parent element instead, and allow these events to propagate up to this handler, thus reducing the 3000 odd individual event listener attachments.
Sounds good! I turn of all event listeners except mouseOver, using this technique, so I can isolate the performance of the eventing system, and just highlight the hovered over cells. Unfortunately IE still fails, massively. On the plus side, Chrome and FF see an improvement in latency.
Some code snippets:
public class Canvas extends Composite {
//init
sinkEvents(Event.ONMOUSEOVER);
@Override
public void onBrowserEvent(Event event) {
Element e = DOM.eventGetTarget(event);
controller.onMouseOver(e.getId());
}
}
It could be that accessing the DOM is the expensive operation in getId(). Not really any way to avoid that though...
As explained previously, I was attaching event listeners to each individual cell, and there are a lot of them! A colleague suggested I attach a single listener to a parent element instead, and allow these events to propagate up to this handler, thus reducing the 3000 odd individual event listener attachments.
Sounds good! I turn of all event listeners except mouseOver, using this technique, so I can isolate the performance of the eventing system, and just highlight the hovered over cells. Unfortunately IE still fails, massively. On the plus side, Chrome and FF see an improvement in latency.
Some code snippets:
public class Canvas extends Composite {
//init
sinkEvents(Event.ONMOUSEOVER);
@Override
public void onBrowserEvent(Event event) {
Element e = DOM.eventGetTarget(event);
controller.onMouseOver(e.getId());
}
}
It could be that accessing the DOM is the expensive operation in getId(). Not really any way to avoid that though...
Release 0.1.1b
Some minor bugfixes and improvements.
Updated export code to trim whitespace from the end of lines (but not the start, obviously).
Added <pre> tags to the Export Html function and removed <br>'s.
Fixed problem with Firefox4 and the the search tool stealing focus.
Adding link to this blog.
Moved information panel into a more noticeable place and updated some tool descriptions.
Updated export code to trim whitespace from the end of lines (but not the start, obviously).
Added <pre> tags to the Export Html function and removed <br>'s.
Fixed problem with Firefox4 and the the search tool stealing focus.
Adding link to this blog.
Moved information panel into a more noticeable place and updated some tool descriptions.
Wow...
Posted this on reddit.com last night, woke up to 10k page views. Nice. Seems to be spreading quickly:
http://news.ycombinator.co
http://www.reddit.com/r/pr
Twitter exposure is spreading like wildfire!
https://twitter.com/#!/search/asciiflow.com
Currently at 22k views today, and have a whole load of bugs to fix tonight, along with maybe a bit more 'marketing' ;)
http://news.ycombinator.co
http://www.reddit.com/r/pr
Twitter exposure is spreading like wildfire!
https://twitter.com/#!/search/asciiflow.com
Currently at 22k views today, and have a whole load of bugs to fix tonight, along with maybe a bit more 'marketing' ;)
Monday, 13 June 2011
Some details
So, I've been using GWT for a while now, and decided to give myself a little out of work project.
I pretty much hacked this thing together at first, started with the box and line tools, so some of it needs improving!
The main DOM canvas is composed of individual divs (FlowPanels). This probably seems horrendously inefficient, but I don't think I had much choice. Fortunately, all browsers except you know what handle this incredibly well. Take the default canvas, thats 100x30 = 3000 cells, each with an individual mouse{Up|Down|Over} handler... Yuck, I know!
The trick to maintaining acceptable performance was to limit reads and writes to the DOM, for obvious reasons. I effectively mirror the current cell state in JS variables. Not only that, when each tool does draws its output, this is actually done in a staging area. Without too much detail, once the tool has finished drawing its current shape/object, it notifies the controller to flush these values to the commit value, and updates the canvas. The nice thing about this is, you only have to change div's whose values have changed.
A similar mechanism is in place for cell styles. You can see this setup manifest itself in the text tool, having to press enter to flush the changed values.
Apart from that, I am using GWT2, Guice3, and Gin (Took a bit fo hacking to get this working!). Obviously I am hosting on appengine too.
Once I have cleaned up the code and given the site some time to establish itself I plan on (pretty much) open sourcing this, although I will probably vet updates for a while at least.
I pretty much hacked this thing together at first, started with the box and line tools, so some of it needs improving!
The main DOM canvas is composed of individual divs (FlowPanels). This probably seems horrendously inefficient, but I don't think I had much choice. Fortunately, all browsers except you know what handle this incredibly well. Take the default canvas, thats 100x30 = 3000 cells, each with an individual mouse{Up|Down|Over} handler... Yuck, I know!
The trick to maintaining acceptable performance was to limit reads and writes to the DOM, for obvious reasons. I effectively mirror the current cell state in JS variables. Not only that, when each tool does draws its output, this is actually done in a staging area. Without too much detail, once the tool has finished drawing its current shape/object, it notifies the controller to flush these values to the commit value, and updates the canvas. The nice thing about this is, you only have to change div's whose values have changed.
A similar mechanism is in place for cell styles. You can see this setup manifest itself in the text tool, having to press enter to flush the changed values.
Apart from that, I am using GWT2, Guice3, and Gin (Took a bit fo hacking to get this working!). Obviously I am hosting on appengine too.
Once I have cleaned up the code and given the site some time to establish itself I plan on (pretty much) open sourcing this, although I will probably vet updates for a while at least.
Example
Actually a rough overview of my planned refactor to a slightly more strict MVC setup... probably needs some work!
+--------------+ +-------------+
|Controller | |Model |
+--------------+ commitDraw() +-------------+
|BoxTool | setDrawValue()|Cells |
|LineTool +---------------> |
|... | | |
+- - - ->| +------+ | |
| +--------------+ | +-------------+
^ | ^
| | | |
onClick() | |
| |onMouse...() |refreshCanvas() |
| |
| | | |
+-----+-------+ +-----v---------+ |
|ViewControls | | |View | |getValue()
+-------------+ +---------------+ |getDrawValue()
|MenuPanel | | |Canvas | |getCommitValue()
|ToolPanel | | +--------+
| | | | |
| | +- - - - - - + |
| | +---------------+
+-------------+
+--------------+ +-------------+
|Controller | |Model |
+--------------+ commitDraw() +-------------+
|BoxTool | setDrawValue()|Cells |
|LineTool +---------------> |
|... | | |
+- - - ->| +------+ | |
| +--------------+ | +-------------+
^ | ^
| | | |
onClick() | |
| |onMouse...() |refreshCanvas() |
| |
| | | |
+-----+-------+ +-----v---------+ |
|ViewControls | | |View | |getValue()
+-------------+ +---------------+ |getDrawValue()
|MenuPanel | | |Canvas | |getCommitValue()
|ToolPanel | | +--------+
| | | | |
| | +- - - - - - + |
| | +---------------+
+-------------+
Beta Release
Just launched the first official beta! I suppose I will call this v0.1b?
Current features: select, copy, paste, box, titled box, lines, arrows, erase, undo, redo.
Huge performance issues with IE :(
Enjoy!
Current features: select, copy, paste, box, titled box, lines, arrows, erase, undo, redo.
Huge performance issues with IE :(
Enjoy!
Subscribe to:
Posts (Atom)