Enable touch UI

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Browse to SVG-edit on your ipad/iphone
2. Select the ellipse tool (good)
3. Try to draw an ellipse (bad, the browser window scrolls instead)

We need to figure out how to enable a good experience on iPad, iPhone and
other similar touch-based devices.

I know Fyrd has done some experimental work here:
http://a.deveria.com/tests/iph-edit/

Original issue reported on code.google.com by codedr...@gmail.com on 6 Apr 2010 at 4:59

[GoogleCodeExporter]

I'm sorry.. my iPod failed me.. but from what i remember testing svg-edit on it:

-we need a different pointer (I will design one tomorrow and post it). One that 
has 
the anchor ar a different point than "the  root". so the user touches at x+10, 
y+10 in 
order to have the anchor at x, y
-we need 2 buttons: 1-emulate simple click 2-emulate shift+click

I'd like to see this on the iPad and iPod touch. let me know if i should go 
into more 
detail here. will this get any traction soon?

Original comment by Christia...@gmail.com on 9 Apr 2010 at 10:40

[GoogleCodeExporter]

touch pointer attached

Original comment by Christia...@gmail.com on 10 Apr 2010 at 7:44

Attachments:

• touch_pointer.svg

[GoogleCodeExporter]

and .png

Original comment by Christia...@gmail.com on 10 Apr 2010 at 7:52

Attachments:

• touch_pointer.png

[GoogleCodeExporter]

I have an iPad and an interest in helping.  Should you need someone to test, or 
knock around ideas. 
Currently exploring the project on the wifi version. I like this suggestion, 
but if you are looking for 
touch/graphics/ui ideas, you might want to consider some of the keynote 
conventions.  They seem to get 
the job done.

Original comment by budn...@gmail.com on 9 May 2010 at 12:05

[GoogleCodeExporter]

I did a bit of looking into this - it appears that svg-edit will need to handle 
the
touchstart, touchmove, and touchend events that are specific to touch screen 
devices.
In addition, a really nice implementation would be to handle the gesture events 
as
well so you do pinching and rotating. It would be really nice if the touch 
events
could be piggy-backed on the existing mouse events, but I doubt if it is that 
easy.
Just thought I'd mention this here since until an hour ago I didn't realize 
those
touch and gesture events existed.

Original comment by wschleter on 21 May 2010 at 2:44

[GoogleCodeExporter]

I've started doing some testing with iPad apps doing drawing sorts of things 
(Keynote and Omnigraffle so far) to see what seem to be the common conventions. 
Will write up some notes here in a bit, and start on testing the touch events 
when I have a chance.

Original comment by brion.vi...@gmail.com on 12 Jan 2011 at 3:15

[GoogleCodeExporter]

Original comment by codedr...@gmail.com on 9 Feb 2011 at 4:29

• Added labels: NeededFor-Tablet

[GoogleCodeExporter]

Has anybody defined the hurdles to implementing this into the codebase ? The 
issue seems to have been put on the backburner as a future enhancement since it 
was created over a year ago !? That doesn't seem to mean that much progress was 
(or can be) made.

The example posted before at http://a.deveria.com/tests/iph-edit/ seems to be 
on the right track. If there isn't some progress made on the main branch by 
current devs, I will probably utilize the mods made on the prototype example to 
enable usage on an iPad project/app for a client ...

Original comment by thatsmys...@gmail.com on 28 Apr 2011 at 2:23

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

+1 for Ipad and Iphone support.
I am working in an EMR company and our clients ranged in the number of 
1000-4000 doctors. Not to mention nurses and their assistants.
All of them what our system to have note taking capability as doctors still 
prefer writing to typing.
I see great potentials in svg edit if they can be  brought to tablet devices  
by enabling touch events.

Original comment by pendy...@gmail.com on 18 Nov 2011 at 5:05

[GoogleCodeExporter]

Anybody have any luck with getting it to work on an iPad or a touchscreen to 
move things around?

Original comment by JodySton...@gmail.com on 21 Mar 2012 at 3:31

[GoogleCodeExporter]

I haven't tested it in a while, and unfortunately have not contributed anything 
either, but the last comment prompted me to give it another go on Mac Safari.  
Mac now incorporates many of the same gestures, in Snow Leopard, Lion and 
Mountain Lion.  I believe with Windows 8 MS will do the same. 
So I think that the future of this project will be pretty limited if the up and 
coming devices and platforms are not supported.  

Off topic a little, but in playing with Mac Safari, the text tool does not 
work. (I don't know that I ever tried it before, or if this might also be true 
in IOS Safari.)

Original comment by budn...@gmail.com on 21 Mar 2012 at 4:28

[GoogleCodeExporter]

To follow up on the Mac Safari Text tool problem mentioned in comment 12, this 
is fixed in the current alpha release.

Original comment by budn...@gmail.com on 21 Mar 2012 at 4:31

[GoogleCodeExporter]

I made a patch that enables svg edit to work on touch devices (the ipad at 
least). It's mostly intended to get the ball rolling as a touch specific 
interface is in order.

You scroll the canvas by using two fingers.

A couple of things don't work but it's actually quite pleasant to use.

Original comment by duopi...@gmail.com on 2 Jun 2012 at 12:36

Attachments:

• touch.diff

[GoogleCodeExporter]

Great!

Original comment by richardw...@gmail.com on 2 Jun 2012 at 9:37

[GoogleCodeExporter]

Cool!  Thanks for getting the ball rolling.

Original comment by cfulne...@gmail.com on 2 Jun 2012 at 11:08

[GoogleCodeExporter]

Is there a version we can try that includes this patch ? URL ? Thanks in 
advance !

Original comment by micbu...@gmail.com on 25 Jun 2012 at 6:10

[GoogleCodeExporter]

I have added the patch submitted by duopixel. You can access it via the "trunk 
build" link on the main svg-edit page.

The patch tests for iphone/ipad and converts touch events to mouse events on 
those devices. This is a great start to supporting tablets. Thanks duopixel! In 
a short period of  testing I still see several issues.

Flyout menus are not selectable.

There is no equivalent for right click or shift-click - the user interface will 
need to be updated to accommodate this.

Buttons in some dialog boxes aren't selectable.

I am very interested in making svg-edit work on the ipad (and other touch 
devices). If anyone else is working in this area please let me know so we can 
combine forces.

Original comment by wschleter on 21 Jul 2012 at 11:28

[GoogleCodeExporter]

I also have an interest in IPad version to use it as an anotation layer for an 
enterprise collboration product we are moving to the IPAD from a PC/IE based 
platform. I'll give the truck build a try and I maybe able to contrubute as 
well.

Original comment by mike...@gmail.com on 7 Aug 2012 at 2:38

[GoogleCodeExporter]

Just tried the trunk build using the latest IPad, performance looked great! I 
would like to bolt on the same UI we use for out activeX draw tool. Notice the 
same issues with the UI Menus and Dialog buttons that are not selectable. I 
will also take a stab at fixing some of the issues.

 Could somone point me to a resource or help  with getting me started on the Breaking out of the UI.

Thanks,

Original comment by mike...@gmail.com on 7 Aug 2012 at 3:50

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

This patch does not work on Android 4.x

Any buttons loaded via extensions become inoperable due to 
event.preventDefault()

I think a workaround may be to use .bind() and .unbind().

I'm stuck on this.

Original comment by ingenuit...@gmail.com on 1 Oct 2012 at 3:39

[GoogleCodeExporter]

I have a Samsung Galaxy 10.1 Note, which comes with a pen, running Android 
4.1.2, and SVG-edit works on this tablet in Firefox 20. 

However, I would preferably have SVG-edit with Sozi-animation frames added, 
https://github.com/asyazwan/ext-sozi added, so that users can create animated 
illustrations or presentations on their tablets. 

The SVG-edit with Sozi demo seems to use version 2.6 alpha, and in that version 
of SVG-edit does not work, and behaves as described, i.e. trying to draw after 
selecting a drawing tool will just move the canvas. It works nicely in Firefox 
on a PC. If tablets interests you, perhaps you should try the latest version of 
SVG-edit.

Please see issue in Moodle tracker for further details if you need an argument 
for why drawing animated illustrations online would be useful for both students 
and teachers as EPUB 3 requires SVG illustrations - thank you! 
https://tracker.moodle.org/browse/MDL-38902

Original comment by haakon.e...@gmail.com on 4 Apr 2013 at 9:18

[GoogleCodeExporter]

The problem with extensions is that most of them is using 'click' event for the 
main button... which is not taken care of at all by touch.js touchHandler.

My hack is to add this line in svgcanvas.js:516:

        //@FIXME: Find a better way to make older exts work on touch devices
        if(svgedit.browser.isTouch()) {
            $.each(ext.buttons, function(i,btn) {
                var e = btn.events;
                //If mousedown don't exist, copy click event
                if(!e.mousedown && e.click) e.mousedown = e.click;
            });
        }

Basically I'm checking for the non-existent of mousedown event. Copy the click 
event as a mousedown even if that is the case. Then it's working on touch 
devices (as far as I tested anyway...).

If no one can suggest a better way to do it I will commit this change to trunk.

Original comment by asyazwan on 6 Apr 2013 at 4:24

Attachments:

• extTouchPatch.patch

[GoogleCodeExporter]

I changed my mind. We should re-write the extensions to properly support touch 
devices. They aren't written with touch events in mind. The patch above only 
fixes the symptom (badly too).

Original comment by asyazwan on 11 Apr 2013 at 3:32

• Added labels: NeededFor-2.7
• Removed labels: NeededFor-Future

[GoogleCodeExporter]

Hello :)  My Name Is Eric MAxfield I love SVG-Edit ... Could someone please 
please pretty please help me make or inform Me on ..........."how to make SVG 
IMPORT A Image to The Ipad . The Import image Button Highlights But No Function 
There After . Thank you Guys . It's a excellent Tool and you guys are doing 
Excellent work . Regards Eric MAxfield 

thank you HAve A blessed Day :) 

Original comment by ericmaxf...@gmail.com on 1 Oct 2013 at 5:43

[GoogleCodeExporter]

 #26 ericmaxf...@gmail.com

Hello :)  My Name Is Eric MAxfield I love SVG-Edit ... Could someone please 
please pretty please help me make or inform Me on ..........."how to make SVG 
IMPORT A Image to The Ipad . The Import image Button Highlights But No Function 
There After . Thank you Guys . It's a excellent Tool and you guys are doing 
Excellent work . Regards Eric MAxfield 

thank you HAve A blessed Day :) 

Original comment by ericmaxf...@gmail.com on 1 Oct 2013 at 5:45

[GoogleCodeExporter]

Original comment by bret...@gmail.com on 7 Apr 2014 at 3:38

• Added labels: NeededFor-nextversion

[GoogleCodeExporter]

Original comment by bret...@gmail.com on 7 Apr 2014 at 3:46

• Removed labels: NeededFor-2.7

[GoogleCodeExporter]

Codedread, Brettz9, Asyazwan,
We're considering integrating svg-edit into our web application and need touch. 
The conversation on this ticket has petered out. Any news on svg-edit plans or 
is there a better-supported, touch-enabled svg drawing tool we should consider? 
Svg-edit still looks like the best option but this ticket is a little scary.

Original comment by rockyk...@gmail.com on 14 Oct 2014 at 12:03