How can I check if the device is a touch device or a mouse device?
Using kIsWeb is not sufficient because if using web version of the app on a mobile device kIsWeb returns true, but I need it to return false because it is a touch device.
Checking the platform doesn't work either because if using web version of the app on an iOS device for example returns false for iOS platform check.
Use case - I have two different types of video players for my app. One is suitable for touch devices (you tap to show and hide controls) and one is suitable for mouse devices (controls show when you mouse into the player and hide when you mouse out).
Youtube has the same idea. If I use the youtube app or website on my iPhone I get touch controls. If I use the youtube app or website on my iPad Pro I get touch controls. If I use the youtube website on my Mac I get mouse controls at all screen sizes (even mobile screen sizes).
So I guess I really just need to know platform on the web. I can get platform if not on the web.
Great question #jwasher! I had the same issue - a touch and swipe based UI that was great as a native mobile app, great as an single page web app (SPA) on mobile web browsers, but that was weird and clunky for mouse based interactions when the SPA was used in a desktop web browser.
The solution I have settled on is to wrap sensitive widgets in a MouseRegion (https://api.flutter.dev/flutter/widgets/MouseRegion-class.html) to detect mouse activity at runtime, then reacting by augmenting the UI with buttons to provide a mouse focussed way of triggering actions previously only linked to touch triggers.
You could use this to "mouse-enable" individual widgets, or you could wrap the whole app in a MouseRegion, trip a state field when activity was detected then rebuild the widget tree in a substantially different way for point and click users.
This strategy may incur some minor complexity/CPU overhead on devices that will never have a mouse attached (like a smartphone), but the solution will be more flexible than a build or configuration time capability determination. If a user starts the app on a tablet, then puts it in a stand and attaches a bluetooth mouse - it will react appropriately.
A device isn't "a mouse device" or "a pointer device". Events have an input type--see Pointer event.kind--but not the whole device. A laptop can have a touch screen, and a tablet can have a stylus or external mouse; an app running in those environments can receive both types of event.
Without knowing what you are trying to accomplish with this classification, is hard to advise on how to accomplish it. Trying to style your UI based on a guess of the primary interaction mode, for instance, is a completely different problem than reacting to a mouse event differently than a touch event.
Related
In Flutter, I would like to know if the device has any functionality built into the OS for navigating back. Or in other words, if the user can trigger navigation without having an actual button within the app.
For example, an iPhone 7 does not have a physical back button or a swipe-back gesture. If the app doesn't have it's own way to navigate, the user can get stuck.
On the contrary, most modern devices have some way of going back built into the system, like a physical/virtual back button or a swipe-back gesture.
Can I distinguish between these types of devices?
From what I have seen it is only IOS that do this, so it can be done with:
if (Platform.isIOS){
#show backButton();
}
But I have not seen a package or function that specifically lets you know this information. Keep me in the loop if you find anything
I am building an app that uses frontal camera to track where user is looking at the screen. When user blinks, smartphone registers that as a tap. Currently it works "inside" my app. I have a few dots around the screen, when i look at one of them and blink, it changes color.
But how can I make it work on the home screen/with other apps? Say if user looked at the facebook app, blinked, it would open.
I was thinking of a pop up window like Skype. I could design it as a cursor and it would be displayed above the home screen and all apps. But if i would blink(tap) it would perform an action inside that popup/widget and not click "through" it.
Are there any codes that can make my app interact with other apps. Maybe Accessibility services?
There is a similar app that can create a mouse on the homescreen, when user waves his hand (no physical touch) it registers that as a tap. How can I recreate that?
Picture attached...
Picture
I work on a fullscreen iphone web application using gestures like tap, drag and swipes over the entire webpage. Minimal-ui was the best solution found for this kind of project.
According to Apple Specifications:
The minimal-ui viewport property is no longer supported in iOS 8.
What is the new way to simulate the old minimal-ui behavior?
Here is some information on telling iOS that a webpage is webapp-compatible so users can save it to their home screens and use it as if it were a separate app, with absolutely no safari controls visible.
From the apple developer docs:
A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.
...
On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen.
...
Your web application can link to other built-in iOS apps by creating a link with a special URL. Available functionality includes calling a phone number, sending an SMS or iMessage, and opening a YouTube video in its native app if it is installed.
This would enable you to completely hide the safari navigation AND link to other built-in functionality such as placing a phone call or composing an SMS.
I want to know whether the open laszlo mouse down events will be converted to touch events while compiling it in mobile format.
Yes, at least on iPad. I tested this myself on an iPad2 running the OpenLaszlo 4.9.0 in HTML5 (aka DHTML) mode of my application last year for R&D purposes and the following were confirmed to work:
1) Touching a button on the screen in the application in OpenLaszlo HTML5 mode properly triggered the onclick event of the button.
2) Drag and drop with your finger on a touch screen in OpenLaszlo HTML5 mode has the same result as dragging and dropping with the mouse on a non-touch screen system.
Note: This was only tested on the iPad2, it was not tested on Android, Windows Phone, Blackberry, etc.
Flash is not relevant for mobile (since Flash Player has just been removed from Google Play store), but Adobe AIR for Android and iOS is an option, if you want to build native applications. In that case, you have to start capturing the touch events using the ActionScript3 API.
My team is developing a HTML5 web application with Edge and JavaScript. We need to support touch devices also, but we've bumped into a problem:
How can we simulate a rollover or mouse-over event on a touch device?
Any idea is welcome, not necessarily a code example.
This is an ergonomic problem, not a technical one.
And the short answer is : you cant :)
Put simply, all the rollover actions on a standard device must be rethink with click actions.
For exemple, a rollover top navigation menu on a touch screen device must work with clicks on the menu instead of roll over actions.
At least this is what we do for multi-support web applications...