Show HN: RoughNotation – create and animate hand-drawn annotations on a web page • Hacker News Board

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#41

Post by grizzles » Thu, May 28, 2020, 9:52 PM UTC

This is cool. Slightly OT but I saw the word animate and I got excited because I'm in the market for some easy to use animation software. Krita & Synfig just aren't doing it for me.

The best one I ever used was a web app built a decade ago by an iirc ~12 year Korean American kid. It seems to have disappeared off the web but it was just amazing for usability. Anyone remember it / the name of it?

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#42

Post by julianeon » Thu, May 28, 2020, 9:55 PM UTC

I'd love to use this, but I don't see an easy way how to using the frameworks I know, React (well) and Svelte (a bit).

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#43

Post by shihn » Thu, May 28, 2020, 9:56 PM UTC

tiborsaas wrote: post #39

XCSme wrote: post #34

This is cool. I wonder if this could just be a CSS library instead, where you just add the class "annotate-circle" to an element and it will use pseudo-elements (:before, :after) to draw the lines.

With CSS Houdini it's possible. To draw these irregular lines / shapes with normal CSS it's really hard, maybe if you inline some SVG.

I did implement a version of this in Houdini a couple of years back, that and a short thread of what Houdini was lacking in this case: https://twitter.com/preetster/status/1265679970006757376

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#44

Post by shihn » Thu, May 28, 2020, 9:57 PM UTC

julianeon wrote: post #42

I'd love to use this, but I don't see an easy way how to using the frameworks I know, React (well) and Svelte (a bit).

People have created framework wrappers for this:

Rect: https://github.com/linkstrifer/react-rough-notation Svelte: https://github.com/dimfeld/svelte-rough-notation Vue: https://github.com/Leecason/vue-rough-notation

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#45

Post by shihn » Thu, May 28, 2020, 10:02 PM UTC

Ptrulli wrote: post #36

Great job on this! What made you think of this product and how long did it take you to make?

I wrote roughjs a couple of years ago and had always thought it would be nice to use it in all the ways people draw hand-drawn shapes. Annotation is one of them. I never got around to implementing it. Since roughjs does most of the heavy lifting, implementing this was not a lot of time. I did it in a day (~4-6 hours). Actually it took longer to make the website for the project and writing the readme :/

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#46

Post by 49531 » Thu, May 28, 2020, 10:02 PM UTC

julianeon wrote: post #42

I'd love to use this, but I don't see an easy way how to using the frameworks I know, React (well) and Svelte (a bit).

You can use querySelectors in React, it's just normal JavaScript. You can also use refs if you don't want to use querySelector.

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#47

Post by shihn » Thu, May 28, 2020, 10:04 PM UTC

talkinghead wrote: post #32

a text popover feature would be super useful!

Definitely. Please add an issue with what you'd like to see. Thanks.

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#48

Post by yurry » Thu, May 28, 2020, 10:10 PM UTC

julianeon wrote: post #42

I'd love to use this, but I don't see an easy way how to using the frameworks I know, React (well) and Svelte (a bit).

I advise you to learn Javascript/DOM before learning high level 'magic' frameworks. You clearly are missing the fundamentals.

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#49

Post by egfx » Thu, May 28, 2020, 10:10 PM UTC

grizzles wrote: post #41

This is cool. Slightly OT but I saw the word animate and I got excited because I'm in the market for some easy to use animation software. Krita & Synfig just aren't doing it for me. The best one I ever used was a web app built a decade ago by an iirc ~12 year Korean American kid. It seems to have disappeared off the web but it was just amazing for usability. Anyone remember it / the name of it?

Hi there. Please check out https://gif.com.ai

You probably haven’t heard of it because it’s a bit under the radar and not really being promoted to the outside yet.

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#50

Post by julianeon » Thu, May 28, 2020, 10:39 PM UTC

shihn wrote: post #44

julianeon wrote: post #42

I'd love to use this, but I don't see an easy way how to using the frameworks I know, React (well) and Svelte (a bit).

People have created framework wrappers for this: Rect: https://github.com/linkstrifer/react-rough-notation Svelte: https://github.com/dimfeld/svelte-rough-notation Vue: https://github.com/Leecason/vue-rough-notation

Wow, thanks! That's exactly what I want, with a demonstration code example. I'll be using this.