milov.nl

Interaction design • webdevelopment • web art • photography

November 2001

Here we go, possibly the coolest bookmarklet ever(?):

  !lineDraw (drag to Links-bar)

An adaptation of Glen Murphy's clever js/vml linedraw at bodytag.org. The bookmarklet overlays a transparent iframe over the current page, pointing to milov.nl/code/linedraw.html, in which multiple lines can be drawn using the mouse. Handy for quick mockups and whatnot. Should also be helpful in preventing people from touching the screen during a presentation (beh, fingerprints).

IE6 required (maybe IE5.5 works too.)
Update: yep, also works in IE5.5.



lok wrote on 2001/11/20:
ruling!


kristoff wrote on 2001/11/20:
wat met equill dat er net de brui aan gegeven heeft, lijkt dit uitstekend!
work it, milo!


23JUL wrote on 2001/11/20:
Really Cool.
Waiting for the new comments system...;-)


milov wrote on 2001/11/20:
Well I am thinking about a script to quickly post hand-drawn entries; if our sysadmin gets the PHP GD module working, it should be possible to save the vml coordinates in a gif-image. Then I could do the same for the comments, but non-wacom users would be at a disadvantage of course.


satis+ wrote on 2001/11/21:
ACE !!


x wrote on 2001/11/27:
excellent.


armand wrote on 2002/03/26:
Hey Milov, kon t niet laten hier is een svglinedraw bookmarklet
http://www.nokiko.com/svg/svg_whiteboard.htm

<a href="javascript:if(o=document.getElementById('ldf')){void(o.outerHTML='');}else{void(document.body.innerHTML+='
&lt;div id=&quot;sketch&quot; style=&quot;position:absolute; left:0px; top:0px; z-index:1; visibility:visible;&quot;&gt;&lt;embed wmode=&quot;transparant&quot;src=&quot;http://www.nokiko.com/svg/whiteboard.svg&quot; width=&quot;780&quot; height=&quot;1000&quot; type=&quot;image/svg+xml&quot;/&gt;&lt;/div&gt;
')}">SVG_WhiteBoard</a>
(drag to Links-bar)


armand wrote on 2002/03/28:
hi Milov

try a different approach to make yer code faster

document.body.innerHTML = document.body.innerHTML + ...
which means the browser has to parse the complete document.body
again. Don't add to innerHTML, use
document.body.insertAdjacentHTML('beforeEnd', 'html here')
as that way the insertion is done much more efficiently.

Armand

PS: woking on a all browser version, think we should get that to work with Create Element


Simon wrote on 2002/05/17:
I'd kill for this in Mozilla. Also, how about a complementary bookmark for turning line drawing mode off? As it is I have to reload the page to get rid of the lines (and go back to being able to click on links) - a bookmark to get rid of the iframe and gpo back to standard navigation mode would be very useful.


wrote on 2002/05/20:
fdsfds


handful wrote on 2002/05/21:
Yeah, having a "GUI" to use like some 'draw' companion would be nice.
I have a 'Companion' bookmarklet done
Just gotta stick them together
=) I 'll post something soon!


Carlos wrote on 2002/05/23:
This is one the greatest things I've ever seen. I don't know why I'm not saying the greatest at all. :-)

Simon, just click again on the !lineDraw button and the lines disappear.

Milov, how did you had such a great idea?


tom wrote on 2002/05/24:
It seems to break Coolmenus 3.


treaze wrote on 2002/12/16:
ohhhhhhhhhhh i love da sky


x wrote on 2003/01/29:
I wonder if I can get it to print.


Serdar wrote on 2003/05/27:
Great job, I'm also trying with VML and faced with some problems. I'm trying to draw lines between points collected by the mouse clicks. For this situation I'm using "line" element and the problem is that the points drawn does not seen at the position that I pointed with mouse. I use X=event.clientX and Y=event.clientY for the mouse position. Did you encounter this kind of problem? Thanks


lazy wrote on 2005/10/18:
hell yes


Curious wrote on 2009/03/23:
Is there a way to use this locally? Without pointing to your website?


DR wrote on 2009/04/16:
www.onemanga.com