Which event is fired when releasing a HTML input range (slider) on touch device? - html

In my Angular 2 app I use a plain vanilla HTML5 input type "range" to provide the user a simple slider component.
<input type="range" [min]="x" [max]="y" (mouseup)="onReleased()" />
I need to know when the user released the slider. Releasing means that using a mouse the dragging is finished and the mouse button has been released. For that purpose I hook into the OnMouseUp event. However, this does not apply in case I use a touch device.
On my tablet I can drag the slider aroun, but when releasing it with my finger the event is no fired.
I know, this is not a mouse, but what event is equivalent to on mouse up and works on touch devices?

The answer to your question would appear to be the touchend event.
I assume there is a way to make the slider a touch surface within the wider Touch Events Web API

Related

Follow move/resize events with HTML5 video?

When resizing a video and/or moving its position on the page, is there anyway to detect this using events? Or do I need to setup a timer and keep track of size and position changes manually?
Only the window object has a native onresize event, so you'll need to do your own detection, possibly in the way you mentioned. Instead of a timer you could also hook into mouse events and do the resize test on mouse up or similar events.
Source: developer.mozilla.org

Redirecting Swing mouse events

I am trying to make it possible to display and interact with Java Swing components on top of a Java3D canvas. I am displaying the components by painting a transparent JPanel to a buffered image, and then painting that buffer over the canvas using J3DGraphics2D.
What I can't figure out is how to forward mouse events to the swing components in the JPanel.
I want all keyboard and mouse events on the Canvas3D to be dispatched to the JPanel, and then fall back through to the Canvas3D if they aren't captured by any swing components (e.g. the mouse isn't over any of them).
I tried calling Container.dispatchEvent(AWTEvent), but it doesn't successfully dispatch the events to the proper components, even when for example the mouse cursor is right over a button in the Container.
Does anyone know a way to do this? It should be possible.
At long last, I figured it out! It's already been done -- use JCanvas3D and a JLayeredPane. This is the opposite approach to rendering the Swing components in postRender()-- JCanvas3D renders into an offscreen buffer, and then paints to the screen with AWT, creating a lightweight canvas that interacts properly with components in the JLayeredPane, even if they are transparent.
One thing to watch out for -- JCanvas3D redirects all input to the offscreen Canvas3D, but at first my Orbiter didn't work like it had with a heavyweight Canvas3D. All you have to do is add mouse & key listeners to the JCanvas3D, because AWT won't even deliver those events if there are no listeners registered for them.

ActionScript / AIR - MouseEvent Limitations on Touch Enabled Devices?

If mouse events are used instead of touch events on touch enabled devices, does that limit "touch" input to one touch at a time?
If a mouse down event is currently in progress, will a following mouse down event simply not register or cancel the previous?
How are mouse events, historically used as single control pointers on desktop systems, handled on touch enabled devices capable of several simultaneous touch points?
Event classes have a clone() function typically used to fire multiple events, so I'm assuming MouseEvent is not limited. However, my goal is to actually limit my application to one touch at a time (exclusive touch), but I'm not sure if this will be automatically handled with the use of mouse events.
Mouse events are handled in the same manner on both single-touch and multi-touch devices. If you only want single-touch, use the MouseEvent events and if you want multi-touch use the TouchEvent events. You can use the Multitouch.supportsTouchEvents property to determine touch support.

Adobe AIR: touch screen doesn't trigger mouse down event correctly

i have designed a gaming kiosk app in as3
i am using it on a Sony vaio l pc (like hp's touchsmarts) in windows 7
the app doesn't need any multi-touch gestures (only single touch clicks and drags) so i am using mouse events
everything is fine (including mouse click and move events) except that a single touch to the screen (with no move) doesn't fire a mouse down. it is fired only after a small move of the finger
outside the app, on my desktop, i see that the small windows 7 cursor jumps immediately to where a finger is placed, meaning this issue isn't a hardware or a windows problem but rather how internally the flash app receives "translated" touch-to-mouse events from the os.
for example, in a windows Solitaire game, a simple touch to the screen immediately highlights the touched card.
in my app, a button will change to the down state only if i touch it and also move my finger slightly (click events - down and up - are triggered fine)
shouldn't the MOUSE_DOWN event trigger exactly like how a TOUCH_BEGIN would in the new touchevent class?
any ideas?
I encountered the same problem.
Setting the Multitouch.inputMode property to MultitouchInputMode.TOUCH_POINT (the default value is MultitouchInputMode.GESTURE) appears to make the MOUSE_DOWN event dispatch when the user touches the screen and not when they touch and move or touch and release.
If the cursor moves when they touch, then I assume the OS is just registering this as a MOUSE_MOVE and not a MOUSE_DOWN. Since it's a touchscreen, you could just consider MOUSE_MOVE a click since the user probably isn't actually dragging their finger around creating a real MOUSE_MOVE event.
Well, if they are actually dragging their finger around for stuff then you could assume a MOUSE_MOVE that suddenly places the cursor on a button (with no prior MOUSE_MOVE i.e. dragging), it's a MOUSE_DOWN.
Just bought a new touchscreen and encountered the problem again.
So the solution is to set Multitouch.inputMode to MultitouchInputMode.TOUCH_POINT by writing anywhere in your code:
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
Notice, that it does not work when testing by Ctrl+Enter in Flash Editor (at least in CC 2015). So, for example, you need to open .SWF separately in Flash Player.
EDIT: But it does work in Debug mode! (Ctrl+Shift+Enter)

Key press issue in ActionScript 3

I'm creating a DDR-like game for an assignment and my keyboard seems to respond and trace it, but only if I press on the screen with the mouse first.
How can I get rid of that and just have it respond right away?
right_mc is the arrow that's moving
ArrowRight_mc is the arrow at the top
perfect_mc should pop up briefly
and so should a glowing arrow where it hits.
Here is what I have so far:
if(rightDown){
trace("right arrow");
if(right_mc){
if(right_mc.y >= ArrowRight_mc.y){
perfect_mc.visible = true;
glowRight_mc.visible = true;
}
}
}
This has been a long standing issue for Flash developers. Flash needs keyboard focus before it can detect keyboard events.
The problem is that the browser does not give focus to the SWF until the user clicks somewhere inside the SWF. This does make sense though. I don't want the web page I am on to lose focus just because there is a flash movie embedded somewhere. This is a security feature, to stop things like Flash banner ads being silent key loggers. However there are some instances that it makes sense to force the focus e.g. a Flash game where its the only thing on the HTML page.
Usually the best thing to do is have start menu screen with a "play" button. This forces the user to click on the SWF without even knowing about this "focus issue".
There is more info at the Adobe Technote - Giving keyboard focus to an embedded Flash movie.
***EDIT****
Whether the Flash has focus or not, only affects keyboard events. It will not affect code from running, movieclips from playing, or sounds/video from playing.
The issue here is that the embedded SWF file does not have focus when the screen first loads. You can assign focus to it using JavaScript but in my experience, this does not always work 100% of the time because of variations in the way browsers interpret JS. What a lot of people do is have a big START button following the load of the game so that players have to click on the SWF to begin playing. Some sites, even use JS to detect when the game has lost focus and will pause the game and alert the user.
I suppose I haven't exactly answered your question because I'm not that great at JavaScript but I hope this points you in the right direction.
In response to your comment...
I'm unclear on something. If you have to click to start the song then you've already clicked on the SWF and you should be getting keyboard events, right? So if you're having to click to start then click again, maybe you need to make sure your mouse listener is at the root of your display list.
// in your document class / main AS file...
this.stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
Or perhaps you need to poll for input during an EnterFrame loop rather than listen for key events.
I know what you mean. You have a specific object on the stage that needs focus before keyboard events will trigger. I'm having the same issues with a game here. A sprite needs to move with the keyboard arrows but the container needs focus so it will respond. I'm just setting the object I want to move to be tabEnabled as my requirements are only for accessibility purposes so tabbing to the object first will give it keyboard control.