bbernhard
commented
5 years ago Thanks a lot for this very detailed review - much appreciated!
To be honest, I was expecting it to be much worse on tablets (I haven't done any adjustments for tablets), but looks like it's not that bad. Really glad that the responsive layout takes care about most of that stuff.
(but I still think the unified workflow will be useful.. don't give up on that :)
no worries. It's almost in a state where I can push it to production.
is it possible through Javascript/the browser to detect what device is being used ?
I think that should be possible by looking at the user agent string (at least as long as the user agent string isn't obfuscated; I think there are some browser extensions that obfuscate the user agent string to prevent websites from tracking the devices infos)
I'd say the point size shown is fine for an active-stylus user (and of course desktop/laptop). What might be interesting is the option to make the points bigger for a finger touchscreen user or capacitive stylus user.
perhaps a precision estimate could be made based on the device, and stored with then annotations (eg mouse = maximum precision, pen=medium, finger = low)
Interesting idea. I think that should be possible :)
(iii) "Lasso" - drawing continuous lines ? I tried this in my own experiment a little.. if you hold a finger/stylus (or mouse button) down whilst moving, imagine dropping a sequence of vertices i.e. one new vertex after the cursor has moved a set distance. A more advanced solution would be to draw an owe sampled lasso curve , then apply some reduction to the resulting point list until some threshold is reached (to keep the sharp direction changes etc)
totally agreed - a mode where one can draw continuous lines would be really great (especially for the smartphone/tablet + pencil use case). The underlying library (fabric.js) that ImageMonkey uses for drawing does indeed support free drawing. see http://fabricjs.com/freedrawing for a interactive demo.
In the past, I've experimented a bit with the free drawing mode, but haven't found a workflow that felt natural to me. As an initial attempt I tried to create a convex hull for all the points as soon as the user stopped drawing. While that worked, it wasn't a very pleasant experience (one hardly gets the outline done in one go without any errors, so there needs to be a way to correct errors with a rubber or something similar. But that also means that it's not possible to do the "free drawing -> polyline" conversion automatically as soon as the user stops drawing. So, the conversion needs to be user triggered then I guess? Is that intuitive?
(iv) I wonder if you could leverage the device rotation to orientate rectangles :) .. no idea if any of that is visible in the browser though
hahaha, that's a nice one. Will definitely have a look whether that's posible. Not sure if it's actually useful, but it definitely sounds like fun :D
Just tried using IMageMonkey from a new iPad (entry level 6th gen 2018) with an Apple-pencil,
conclusion - very positive - it's a bit better than a PC/laptop + wacom, it's the best experience I've had with this tool so far.
general comments
(i) seems the site naturally prefers portrait mode.. most web-pages do; ->less scrolling up/down to see the 'done' button. a tablet handles this fine.
(ii) just like the wacom it's easier to attempt the harder tasks, the random mode is ok. But being portable you can use it relaxed on the sofa, casually. Perfect for this site use case.. "kill a bit of time in a vaguely constructive but relaxed way".
(iii) As text-entry is a tablet weakness, the existing split workflow is a virtue here - one user/session enters a batch of labels using their laptop keyboard, another user/session draws a bunch of outlines on their tablet+pen. (but I still think the unified workflow will be useful.. don't give up on that :) ).
(iv) as I suspected the 'modern look' of the UI does work fine on touchscreens (the buttons being vertically larger than in old UI's). No keyboard shortcuts of course by default.. everything is still useable from icons so thats great.
(v) I guess I should also have tried the site with a cheapo stylus on my older iPad2.. since it's not leveraging the pressure-sensitivity
(vi) I was also intersted in getting a galaxy tab-S4, that's got more precise pen tracking (no screen gap), whilst not being as expensive as the 'iPad pro'.
(viI) I had skipped many generations of tablets, having decided touch-interface limited them too much. But I know samsung was always doing s-pen versions of their tablets, and of course the windows 10 2-in-1's often have pen support.. (having used linux desktop & mac laptop I've been kind of missing out on these).
I gather android tablets have been dying out, squeezed between bigger phones and 2-in-1's (I like how Microsoft was forced to deliver true computers in the tablet form factor)
(v) the paint tools are extremely good with it (eg ProCreate) .. as per GIMP there's the idea of using channels or layers for annotation, that can be done offline too if I ever get around to writing an extractor of some sort (we could perhaps figure out a way to associate an image upload with a colour coded overlay) .. I dont imagine casual users doing that though. (GIMP has it's own XCF layer format; ProCreate seems to support writing a subset of PSD. a colour coded overlay could just be saved as a separate image associated by name of course)
suggestions
(i) not sure it's letting me change the default tool - it seems to stick on rectangle. Rectangle is certainly the best default overall (i.e. if you're about to click 20+ vertices, one extra icon change isn't so bad), but if the default switch works reliably thats better.
(ii) is it possible through Javascript/the browser to detect what device is being used ?
There is still "Screen Gap" parallax pen-error on the entry level iPad: this does limit the effective precision (I'd guess you could reliably&comfortably hit pixels on a 250x160 grid?) - but it's still much better than a finger.
I'd say the point size shown is fine for an active-stylus user (and of course desktop/laptop). What might be interesting is the option to make the points bigger for a finger touchscreen user or capacitive stylus user.
perhaps a precision estimate could be made based on the device, and stored with then annotations (eg mouse = maximum precision, pen=medium, finger = low)
(iii) "Lasso" - drawing continuous lines ? I tried this in my own experiment a little.. if you hold a finger/stylus (or mouse button) down whilst moving, imagine dropping a sequence of vertices i.e. one new vertex after the cursor has moved a set distance. A more advanced solution would be to draw an owe sampled lasso curve , then apply some reduction to the resulting point list until some threshold is reached (to keep the sharp direction changes etc)
(I suppose I should revisit the scribbles/smart mode you already have)
As it stands it's still very usable to just tap vertices out, but this kind of lasso draw tool would be the icing on the cake. (I hope it would be ok to just make it an enhancement of the same tool.. tap to add new vertex, draw to add vertex sequence) you might still be able to get an impression of how this works with a mouse
(iv) I wonder if you could leverage the device rotation to orientate rectangles :) .. no idea if any of that is visible in the browser though