HTML: Possible to get keyboard event data without a keyboard event? - html

In order to get the keyboard state we can listen to "keydown" event but is it possible to interrogate the keyboard without an event? Something like window.keyState.shiftkey?

In 2018 I'm investigating the same thing: (re-)initialisation on acquisition of focus.
Initialisation (determination of system state) is required when the application starts. It is required every time the application recovers focus after losing it to another application, because state like NumLock can change while the application does not have focus.
As the question notes, this information can be obtains from event objects.
There doesn't appear to be any way to request this information.
This requires a change to browsers. In my opinion a low impact solution
for this and parallel situations is a general mechanism for requesting a "null event" of a specified type, eg
var ke = window.requestEvent("keyboard");
var me = window.requestEvent("mouse");
var te = window.requestEvent("haptic");
Since a keyboard/mouse/touch event is not actually occurring, the field that would otherwise quantify the event (key code, mouse position etc) should be null.
This API should not be a breaking change for event handlers, since it doesn't actually trigger an event, it's a function that returns an event object. It's completely new so there is no legacy code, and it can be extended without change simply by defining more event class strings. No new data structures are defined.
If I knew how to submit a change request to the pertinent browser standards committee, this seems to me like a very tight, robust, compatible solution to several problems. I'm recording this here as a sort of message in a bottle, in the hope that one day it will be seen by someone who can act on it.

Related

Using state machine to validate a form field

This is my first take on a state machine and got a bit confused about the possible states that i can define while implementing the subject matter.
P.s. (this question is about how to infer states from a problem and not about how to actually implementing it in code. I know and have used xstate lib).
Scenario is simple, a password field with few validation rules.
The states i came up with are
default ( when the form loads or reset button is pressed)
filled ( should this even be a state ?)
valid ( date is present with all rules satisfied)
invalid (data is there but not meeting the rules )
Error message is displayed based on the current state.
For example, in default state, user didn't enter any data yet, so logical it is invalid state.
But we do not want to show errors to the user right away after opening the form (that will be horrible ux, right ?)
So I added a state specifically for that purpose.
Is this right?
Can it be further simplied or is there a state i am missing?
Secondly, there seems to be arbitrary states
Like
validating
submitting
Should these also be in the mix of states?
They look like states to me though.
Lastly, can we say
submitted is also a state ?
invalid after submitted due to error in API call ( maybe API team added a new rule we didn't know).
Million dollar questions are,
am i even thinking in the right direction to implement validation this way?
is there any state i am missing or overdoing?
You've probably already solved this, but just in case somebody else comes across this question and could use some pointers - I found the trick was to keep in mind that even simple elements have often multiple states in parallel, e.g. a button can be disabled and show a loading spinner at the same time, a menu can be open and fetching data, an avatar can be showing a placeholder and fetching an image at the same time etc.
for your example I'd look at it like this:
Field level
If you think in terms of a password field, it actually has multiple parallel states at the same time:
Interaction
Validity
Visibility
All three states exist at the same time and have multiple child states
Interaction
this should probably mirror the default input events and have matching state events (e.g. onChange -> set to changed):
blurred
focussed
changed
...
Validity
probably just two states, potentially three if you need asynchronous validation (e.g. if you need to check if an email already exists). For a password field you'd just use:
valid
invalid
validating (optional)
Visibility
straight forward:
visible
hidden
Form level
You probably end up with two main states with multiple child states:
form
error
Form
Idle
Editing
Validating
Submitting
Error
That could translate into an alert which you show when e.g. an account already exists or the login details can't be verified:
Inactive
Active
Your form state machine would basically handle the input, validation, submission, and form errors, and just communicate the state to individual field machines (field error messages etc). Alternatively, you could pass the validation rules to the field machines and they can execute the field-level validation on i.e. change events. Things like visibility have nothing to do with the form, so you'd manage the state in the field state machine.
I think you were on the right track, you were just thinking a bit too sequential and not considering parallel states. It's just a matter of taking a step back, looking at the form and thinking about everything that can change in it from a UI point of view.

Web speech API stops listening after some time passes without input

I'm using the web speech API but once a bit of time passes by (a minute or 2) without any vocal input, it stops listening entirely. I know this because I have it log its parsed text to the console, however, it stops doing this when I do not talk for a minute or two.
Is there any way to fix this?
You can listen to the end event and then restart the recognition on the SpeechRecognition object.
You should use a boolean flag for deciding (in the onend event handler), when to restart the recognition (and when not to restart).
You could use the other recognition-related events for this.
E.g. Chrome triggers the following event handlers when recognition is started:
1. onstart
2. onaudiostart
(only if sound / speech is detected)
3. onsoundstart
4. onspeechstart
If no sound speech is detected, only the first 2 will be triggered, and then, after some timeout, the corresponding end events (in reverse order).
A simple solution for this could probably be to listen for the end event and restart the recognition
recognition.addEventListener('end', recognition.start);
recognition.addEventListener('end', () => recognition.start()) works but Chrome browser seems to obstrruct the continuity by generating a pop-up to Allow or Block the microphone every 5-7 seconds.

Windows 8 phone save state

I am quite new to windows 8 phone and I don't know all the life cycle methods and when what is called.
My problem is the following: I have a page that loads some data from the disk and when the user exits the program ( or suspends ) the data should be saved. As far as I can tell Page doesn't have an OnSuspending method only someOnNavigatingFrom, but those are not called when you just exit the program. So I read that I should use the OnSuspending in my App.xaml.cs, but this class doesn't have this data and also shouldn't have it, maybe only for OnSuspending. But I don't know how to get the data from my page in the OnSuspending method.
The OnSuspending event is quite fragile and you cannot expect it to run and save the state for a long time. But it depends on how long it would take for you to save. It doesn't even get triggered when you hit the home key while closing the app. If you really want an easy way. Just register a background task. While your app is in the background, the state can be saved and when you open the app again things are in place.
There are certain constraints With Background task as well, you cant do heavy lifting etc...here's a link you could use.
https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh977056.aspx
Implement an observer pattern (i.e. pub/sub) for your view-models to subscribe to in the event that your app is being suspended.
Your app handles the suspended event. As a result, publish a message for your view-models to respond to within your app's method handler for the suspended event.
You can use an EventAggregator or MessageBus (that I wrote).

box.com TAG_ITEM_CREATE event

In the box docs, it states that the event TAG_ITEM_CREATE occurs when 'A Tag was added to a file or folder'. Is there any way to find out which folder/file the tag was added to ,without iterating them all?
If you're fetching events for a Box enterprise you can have Box perform server-side filtering of events. However, when fetching events for a standard Box account you must do the filtering in your application. The next_stream_position parameter can be used to set a lower time bound for the events that you receive, which can significantly reduce the amount of metadata that you have to sort through.
EDIT: Answering questions from comment.
Q: Not sure how filtering events helps me work out which folder has been tagged?
The event object that's returned to you will look like this:
{
"next_stream_position":1348790499819,
"entries":[
{
"event_type":"TAG_ITEM_CREATE",
"source":{
"type":"folder",
"id":"11446498",
... more event info ...
}
},
... more events ...
]
}
In your application you can look for those events whose event_type is TAG_ITEM_CREATE. You can then use the source to determine which particular resource was tagged.
Q: Are you saying that I can ask for all folders changed since a given TAG_ITEM_CREATE event?
No. Think of the 'next_stream_position` property as a proxy for a timestamp. You can use it to tell Box, "Tell me about all the events that occurred after this 'position' in time." But this will still give you all types of events that occurred. You'll have to select the events of interest in your application.
This is one of the big differences in the Enterprise- and User-facing APIs. In an Enterprise you can tell Box, "I want info on all the TAG_ITEM_CREATE events that occurred in the Enterprise between yesterday and today." In the User-facing API the best you can tell Box is effectively, "I want info on all events that occurred in this User's box since yesterday."

Stream Position Returned By Box API Cannot Be Used To Track Events

Thanks for your reply for my question: Is this a bug of Box API v2 when getting events
This is a new problem related to this. The problem is that I cannot reliably use the next_stream_position I got from previous calls to track events.
Given this scenario:
Given the following two GET HTTP queries:
1. GET https://api.box.com/2.0/events?stream_position=1336039062458
This one returns the JSON file which contains one file entry of myfile.pdf and the next stream position = 1336039062934
2. GET https://api.box.com/2.0/events?stream_position=1336039062934
This call uses the stream position I got from the first call. However, it returns the JSON contains the exactly same file entry of myfile.pdf with the first call.
I think if the first call gives a stream position, it should be used as a mark for that exact time (say: TIme A). If I use that stream position in subsequent queries, no events before "Time A" should be returned.
Is this a bug? Or did I use the API in the wrong way?
Many thanks.
Box’s /events endpoint is focused on delivering to you a highly reliable list of all the events relevant to your Box account. Events are registered against a time-sequenced list we call the stream_position. When you hit the /events API and pass in a stream_position we respond to you with the events that happened slightly before that stream position, up to the current stream_position, or the chunk_size, whichever is lesser. Due to timing lag and our preference to make sure you don’t miss some event, you may receive duplicate events when you call the /events API. You may also receive events that look like they are ‘before’ events that you’ve already received. Our philosophy is that it is better for you to know what has happened, than to be in the dark and miss something important.
Box events currently give you a window roughly 5 seconds into the past, so that you don't miss some event.
We have considered just delaying the events we send you by about 5 seconds and de-duplicating the events on our side, but at this point we've turned the dial more towards real-time. Let us know if you'd prefer a fully de-duped stream, that was slower.
For now, (in beta) if you write your client to check for duplicate events, and discard them, that will be best. We are about to add an event_id to the payload so you can de-duplicate on that. Until then, you'll have to look at a bunch of fields, depending on the event type... It's probably more challenging that it is worth.
In order to help you be able to figure out if an event is a duplicate, we have now added to each event an event_id that will be unique. It is our intention that the event_id will allow you to de-duplicate the responses you receive from subsequent GET /events calls.
You can see this reflected in the updated documentation here, including example payloads.