search

steffest / DPaint-js

Webbased image editor, modeled after the legendary Deluxe Paint with a focus on retro Amiga file formats: read and write Amiga icon files and IFF ILBM images
https://www.stef.be/dpaint/
MIT License
481 stars 28 forks source link

Touch affordances #12

Open stuaxo opened 1 year ago

stuaxo commented 1 year ago

Had a quick play on an Android phone and wonder how touch affordances could work.

There's a question of when to enable them, I'm not sure if there are APIs that help find the size of the screen, which might help.

In the case of sliders for instance, having a larger UI for it that appears when you touch the screen could be one place to start.

steffest commented 1 year ago

Yeah... for small screen devices we need a completely different UI. I implemented the "bare minimum" for now and kind of ignored all the rest until the feature set is complete.

stuaxo commented 1 year ago

I was surprised at how usable some of it is TBH. It's definitely possible to press the larger icons, though maybe two columns of them isn't ideal.

You're right that piecemeal isn't ideal... this is a bit of fluffy ticket anyway :)

stuaxo commented 1 year ago

For reference here's a phone screenshot (smaller, in reality):

Screenshot_20230603-130603

fccfc5d245c commented 2 months ago

I can use it on a phone with the current UI size, what I find fustrating (and I don't know if it's a bug, that's why I'm sharing) is that I can't touch-drag to move the slider or color selector on the Color side-pane . I mean: I have to touch the exact spot where the color I want is, if I touch and drag, I drag the whole panels group.

This could be solved by adding HSB sliders below the pane, as all the other sliders I've tried work fine.

stuaxo commented 2 months ago

In portrait orientation it might make sense for the icons to be along the bottom (especially on a phone as that's nearer your thumbs).

Touch is definitely a bit more than button size and placement, but this might help as an incremental improvement.