Drawing with Django
117 views
Skip to first unread message
Andrew Stringfield
Nov 13, 2016, 3:48:31 PM11/13/16
to Django users
hello all,
I am interested in being able to draw on a Django view. I have been reading up some on how people draw in Html and it seems that the <canvas> tag seems to a good start. Apparently I have to do some java scripting as well. What I envision is that I have a background image and then my users can make annotations on the image and save the data...some how. Any ideas?
ludovic coues
Nov 13, 2016, 3:56:40 PM11/13/16
to django...@googlegroups.com
It's barely related to django.
If all you want is to make annotation, it's fairly easy and you don't
really need canvas and it's mainly javascript, which is independent
from django.
First, display your image.
Second, get where your user want their annotation. I would do that by
listening to click event on the image and computing the position of
the click in the image, which is position of the click in the page
minus position of the image in the page.
Third, get the actual annotation.
Fourth, send to django a request to store an annotation on image Z at
position X / Y with text T.
Fifth is to display the image. Get all the annotation for the image,
display dot at the position of each annotation, display the text on
mousehover. Or directly on the image if the image is huge.
Good luck
> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to django-users...@googlegroups.com.
> To post to this group, send email to django...@googlegroups.com.
> Visit this group at https://groups.google.com/group/django-users.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/168eba94-cb9e-4dfa-a761-4f478150dd2f%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
--
Cordialement, Coues Ludovic
+336 148 743 42
If all you want is to make annotation, it's fairly easy and you don't
really need canvas and it's mainly javascript, which is independent
from django.
First, display your image.
Second, get where your user want their annotation. I would do that by
listening to click event on the image and computing the position of
the click in the image, which is position of the click in the page
minus position of the image in the page.
Third, get the actual annotation.
Fourth, send to django a request to store an annotation on image Z at
position X / Y with text T.
Fifth is to display the image. Get all the annotation for the image,
display dot at the position of each annotation, display the text on
mousehover. Or directly on the image if the image is huge.
Good luck
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to django-users...@googlegroups.com.
> To post to this group, send email to django...@googlegroups.com.
> Visit this group at https://groups.google.com/group/django-users.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/168eba94-cb9e-4dfa-a761-4f478150dd2f%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
--
Cordialement, Coues Ludovic
+336 148 743 42
Andrew Stringfield
Nov 13, 2016, 4:04:42 PM11/13/16
to Django users
Yup. I am going to need it. lol I have never done anything like this before. It should be interesting.
Tim Chase
Nov 13, 2016, 4:15:39 PM11/13/16
to django...@googlegroups.com
On 2016-11-13 21:55, ludovic coues wrote:
> It's barely related to django.
>
> If all you want is to make annotation, it's fairly easy and you
> don't really need canvas and it's mainly javascript, which is
> independent from django.
> First, display your image.
Moreover, this sounds like a great opportunity to use SVG. The text
> It's barely related to django.
>
> If all you want is to make annotation, it's fairly easy and you
> don't really need canvas and it's mainly javascript, which is
> independent from django.
> First, display your image.
in an SVG can be selectable while the text in a <canvas> isn't. It's
easy to add text elements (or lines, pictures, icons, etc)
dynamically from a database as well. It can be done server-side or
client-side as well.
Lots of benefits of SVG over Canvas for this.
-tkc
Stephen McDonald
Nov 13, 2016, 9:10:54 PM11/13/16
to Django users
Check out https://github.com/stephenmcd/drawnby - I built it for the 2011 Django Dash (and got 3rd place!). It lets users draw to a canvas element in the browser, and pushes the changes in real-time over web sockets, so multiple users can collaborate on the same image at the same time. It then stores and displays the results as PNG images.
I can't offer any support sorry, but hopefully having the source might help you out.
Reply all
Reply to author
Forward
0 new messages