3 ms·
Show HN: HTML5 grid-drawing tool for UI designers
- antichaos 16y agoNeatGrid is a simple HTML5 canvas application for UI designers to easily create pixel-perfect grids in the browser. I created it over the weekend to scratch my own itch. If you happen to have the same need to draw grids, please give it a whirl. Cheers!
- revorad 16y agoCan you explain how canvas generates a PNG on the client side?
- antichaos 16y agoFirst call canvas.toDataURL() to get a base-64 encoded string for the image [1], then open a new window with that data URL [2]. [1] http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl http://www.w3.org/TR/html5/the-canvas-element.html#dom-canva... [2] http://en.wikipedia.org/wiki/Data_Url http://en.wikipedia.org/wiki/Data_Url
- toshi 16y agoAlternatively, you may also set window.location.href = data_URL. That brings up the "save as" dialog window directly. Nice work, BTW! One nitpick: the link icon looks like a resistor. It's not obvious what it's supposed to do, although once I figured it out, I find it very handy.
- revorad 16y agoThanks. One simple UI improvement suggestion: add a visual indicator to mouse overs for all the buttons. I usually prefer a change of colour or cursor pointer.
- deleted 16y ago[deleted]
- thehodge 16y agoThat's pretty cool, although it took me a minute or two to see where the download button was (I was confused I couldn't right click and save as) but I guess thats canvas for you
- antichaos 16y agoThanks for the quick feedback! I've just moved the download button to a more prominent location.
- kilian 16y agoA number of years ago I build a grid drawing tool as a jQuery plugin, it's still available here: http://gridbuilder.kilianvalkhof.com/ http://gridbuilder.kilianvalkhof.com/ Might be useful to other people developing locally/designing in the browser like I do.
- Raphael 16y agoWhy images? Wouldn't HTML/CSS be more useful?