feat(web): first gesture-recognizer host page 🐵#6878
feat(web): first gesture-recognizer host page 🐵#6878jahorton merged 26 commits intofeat/web/gesture-recognizer-mainfrom
Conversation
User Test ResultsTest specification and instructions
Test Artifacts
|
Let's just put this under web/testing/gesture-recognizer. Then you'll get CI for free. |
I thought about doing that... but then there's the matter of the module's build artifact. Or should I 'copy' that over to Web's build folder as part of the module's build? |
Yeah, this is an ongoing complexity of putting some of web's modules under common. In some ways, it's redundant having some things under /common/web -- /web is shared between four platforms already (just like /core is shared between three, soon four), but only ever as a built artifact and never (currently) as independent modules... I am not sure of the cleanest way to tidy this up:
In any case, we don't want to do either of those things at this point -- we've done enough shuffling of folders for 16.0. So for now, copying build artifacts out to the /web build path seems like a reasonable solution. |
The problem there is one major proposal we have on the future roadmap - the idea of reusing Web's OSK in the desktop platforms. At that point, OSK code will need to live in Then, because the OSK includes the predictive-text banner, that means, at minimum, needing access to the
I know we'd rather "cross that bridge when we come to it" - and noting the quote part below, we'll still do that - but what would you expect us to do in this regard should we succeed in fully modularizing the OSK and reusing it for the desktop versions of Keyman?
👍 |
fab5a1f to
39d4a75
Compare
b0f6fcb to
9db2da6
Compare
…at/web/gesture-recognizer-rigging
…at/web/gesture-recognizer-rigging
…at/web/gesture-recognizer-rigging
…at/web/gesture-recognizer-rigging
…at/web/gesture-recognizer-rigging
|
New host-page feature! Due to an update for the previous PR in this chain, this page can now facilitate selection of different safe-zone modes. The "very generous" mode, in particular, may come in quite handy for safe-zone oriented user tests on touch devices. In retrospect, it looks like I never updated the original screenshots after adding the first level of safe-zone visualization. For comparison, the old, fixed setting is now called "double-spaced": The true KeymanEngine for Web defaults are quite tight to the device borders, which is probably good for real, physical devices... but not so much for emulated setups like this. |
| background-color: whitesmoke; | ||
| } | ||
|
|
||
| .safe-zone-color { |
There was a problem hiding this comment.
'-color' is a bit of a misnomer.
|
@bharanidharanj @keymanapp-test-bot retest TEST_3_2_1_MULTITOUCH |
|
mcdurdin
left a comment
There was a problem hiding this comment.
A little late, but these comments were pending on this PR
| let screenX = coord.x - document.body.scrollLeft; | ||
| let screenY = coord.y - document.body.scrollTop; |
There was a problem hiding this comment.
| let screenX = coord.x - document.body.scrollLeft; | |
| let screenY = coord.y - document.body.scrollTop; | |
| const screenX = coord.x - document.body.scrollLeft; | |
| const screenY = coord.y - document.body.scrollTop; |
| @@ -0,0 +1,105 @@ | |||
| <html> | |||
There was a problem hiding this comment.
| <html> | |
| <!DOCTYPE html> | |
| <html> |
| @@ -0,0 +1,105 @@ | |||
| <html> | |||
| <head> | |||
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |||
There was a problem hiding this comment.
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <meta charset="utf-8" /> |




Ah, the joys of CSS.
Rather than attempt to gerry-rig KMW itself to allow testing of intermediate states of the new module, a better strategy is to create a page that can host it directly. It's then all the better if we can give that page configuration options that will allow us to test the module's behavior under different conditions.
Presenting: the initial host page!
Each radio button may be used to select one of several configurations for the module to use for further interactions on the page. That little "legend" there corresponds to certain configuration "zones", and the page-default above directly corresponds to the standard config used by KMW for its touch OSKs.
Of course, it'd help to test this on touch devices too, right? Well, after some further CSS tweaking...
Don't worry, it'll layout just fine for constrained-width mobile devices. Unless you go really constrained, anyway.
Showcased above is a markedly different configuration. The gray box indicates the area corresponding to a base OSK, while the beige corresponds to a subkey menu. (If the gray part makes thing look "too busy", it's a simple change on my end to remove it - or perhaps, add a deactivation option.) Here, the blue "roaming behavior" range corresponds to a hypothetical roaming range that might be utilized to address #1025 and #1886.
Lest you think I spent too much time playing with CSS... most of the colored elements there, themselves, can be nigh-directly used as part of the module's configuration. The module will automatically use each element's current layout for input processing - so this allows easy live configuration "hotswapping", which is fantastic for demonstration purposes. (We can use the bounding boxes for the elements themselves at runtime as the boundaries / "zone" definitions for the engine.)
There is a new test page added to Web's testing index: see the "Standalone gesture recognizer" link. I also reorganized the index; it's gotten a bit cluttered, and we probably want to list the pages in an approximate order of relevancy.
User Testing
All testing should be done on the specialized Web testing page currently labeled "Stand-alone gesture recognition" - the same page seen in the screenshots above.
Each of these tests will mention a specific "configuration" (set of buttons to select) to use. To keep confusion down, the test names will generally use an identifier based on the numerical position of its configuration's enabled buttons.
I will use the words "touch" and "touchpoint" throughout the tests below. Many of these tests may be done by mouse instead; interpret them as "click" and "cursor location" as needed.
TEST_1-1-1_SIMPLE: (No device restrictions) Test with a standard "KMW in mobile browser" configuration:
state: start. If it does not exist, FAIL this test.state: end. If it does not exist, FAIL this test.state: cancel. If it exists, FAIL this test.TEST_1-1-1_SAFE_ZONE: (No device restrictions) Test with a standard "KMW in mobile browser" configuration:
state: start. If it does not exist, FAIL this test.state: end. Do not fail this test, either way.state: cancel. If it does not exist, FAIL this test.TEST_1-1-1_SAFE_PROXIMITY: (No device restrictions) Test with a standard "KMW in mobile browser" configuration:
state: start. If it does not exist, FAIL this test.state: end. If it does not exist, FAIL this test.state: cancel. If it exists, FAIL this test.TEST_2_1_1_TOP_BORDER: (No device restrictions) Test with a standard "mobile-app keyboard" configuration:
state: start. If it does not exist, FAIL this test.state: end. Do not fail this test, either way.state: cancel. If it does not exist, FAIL this test.TEST_2_1_1_SIDE_BORDER: (No device restrictions) Test with a standard "mobile-app keyboard" configuration:
state: start. If it does not exist, FAIL this test.state: end. Do not fail this test, either way.state: cancel. If it does not exist, FAIL this test.TEST_2_3_2_ROAMING: (No device restrictions) Test using a app-hosted keyboard-style popup-key-like configuration:
state: start. If it does not exist, FAIL this test.state: end. If it does not exist, FAIL this test.state: cancel. If it exists, FAIL this test.TEST_2_3_2_CANCEL: (No device restrictions) Test using a app-hosted keyboard-style popup-key-like configuration:
state: start. If it does not exist, FAIL this test.state: end. Do not fail this test, either way.state: cancel. If it does not exist, FAIL this test.TEST_4_3_2_SAFE_ZONE: (No device restrictions) Test using a desktop-style popup-key-like configuration:
state: start. If it does not exist, FAIL this test.state: end. Do not fail this test, either way.state: cancel. If it does not exist, FAIL this test.TEST_3_2_1_MULTITOUCH: Required: a PHYSICAL device with a touchscreen
state: start. If it does not exist, FAIL this test.identifiervalue - this is for touchpoint A.state: end. If it does not exist, FAIL this test.identifiervalue as touchpoint A.state: cancel.state: cancelentry whatsoever, FAIL this test.state: endentry after all of thestate: cancelentries.