Dashboards & iOS Devices

Moderators: adafruit_support_bill, adafruit

Forum rules
If you're posting code, please make sure your code does not include your Adafruit IO Active Key or WiFi network credentials.
Locked
User avatar
gallaugher
 
Posts: 267
Joined: Tue Aug 14, 2018 12:42 pm

Dashboards & iOS Devices

Post by gallaugher »

I've been using Dashboards for Adafruit IO work. I'm currently having our students build robots & it wasn't until I tried to pull up the Adafruit IO Dashboard on an iPad and iPhone that I realized there seems to be some sort of problem. It looks like the web pages on these devices (I've tried Chrome & Safari) aren't properly sending commands from momentary buttons. The browser on a laptop works fine, but the mobile version with touch-interface is not reliable. Is there a way around this? I'd really love for students to use a web-based dashboard via mobile device to control their bots. I've tried this both with iOS Safari and iOS Chrome & on both an iPhone 14 Pro & an iPad Pro. Thanks!
The approach I'm using are four buttons configured on a common feed (move_feed) like this:
Image

And code looks like this - again, works perfectly with laptop browsers, just not iOS devices:

Code: Select all

def message(client, topic, message):
    # The bulk of your code to respond to MQTT will be here, NOT in while True:
    print(f"topic: {topic}, message: {message}")
    if topic == move_feed: # robot directions
        if message == "0":
            # stop both servos
            move_servo(0.0, 0.0)
        elif message == "forward":
            move_servo(1.0, 1.0)
        elif message == "backward":
            move_servo(-1.0, -1.0)
        elif message == "left":
            move_servo(-1.0, 1.0)
        elif message == "right":
            move_servo(1.0, -1.0)
Attachments
block setting.png
block setting.png (173.85 KiB) Viewed 182 times

User avatar
jwcooper
 
Posts: 1004
Joined: Tue May 01, 2012 9:08 pm

Re: Dashboards & iOS Devices

Post by jwcooper »

Is this in the preview view only?

I just tested one of my dashboards on iOS 16 and the momentary button was sending reliably the on and off positions with touch enabled events and with 'forward' and 0 has release value.

User avatar
gallaugher
 
Posts: 267
Joined: Tue Aug 14, 2018 12:42 pm

Re: Dashboards & iOS Devices

Post by gallaugher »

So sorry, I'm not sure I know what "Preview" means. Some of the feed info is definitely not sending from the iOS device. I am detecting pressed and sending a message like "forward", which I expect is sent right away, then I expect the released message "0" to be sent upon release.
I know iOS devices default to "touch up inside" as when an even "fires". Not sure how this would impact things in a browser, but if I were building an app, the event would not fire until the button was released using standard iOS UI. Again, no problem with desktop.
Sometimes the events from mobile don't even seem to be received from the feed. For example, I can see two forwards in a row, but only one "0".

User avatar
gallaugher
 
Posts: 267
Joined: Tue Aug 14, 2018 12:42 pm

Re: Dashboards & iOS Devices

Post by gallaugher »

And to be clear, the buttons for "play sounds" are working. It seems that the button press down event isn't happening when the button is first pressed & held, which is what I'm trying to do moving the robot. What I can get happen with desktop browsers is:
Press and hold the button. When I detect the press event has happened, I turn on continuous rotation servos to move in that direction. When the button is released (I see a "0"), then I set servos to move at throttle 0.0.
So if you are testing the button - tap & event happens, you'll likely see that. This is how my sound play works. But the robot setup - press event on, hold while pressing - release when off - seems to be a problem.

User avatar
gallaugher
 
Posts: 267
Joined: Tue Aug 14, 2018 12:42 pm

Re: Dashboards & iOS Devices

Post by gallaugher »

OK this seems to be the issue:
- iOS devices "fire" the button event when "Touch Up Inside" occurs, which is when a release happens. So this renders unworkable the strategy of using "press" event for one thing as long as the button is held down (for example, activate a CR servo), then using a "release" event for the a related event (e.g. set the servos to throttle 0.0). Curiously, the two events happen so quickly that sometimes the feed shows up with the release button ahead of the press button.
I've got a kludgy work-around. I've set both events to the same thing (e.g. "forward"), and I have created a "stop" button that I use to trigger stops. Not ideal, but this definitely offers robot control where as the prior code was unworkable.
Related: It would be great to be able to turn off one of these events. Right now a button press sends 2x the events - a press & release. This doubles the event rate & increases the likelihood one will hit a throttle. And since press/depress don't really work as separate events for mobile, it makes sense to offer an option to disable these.
Finally - on mobile I find that even in landscape mode on an iPad, the dashboard doesn't seem to layout as expected. Here are some screenshots:
Normal Desktop layout on laptop, as expected:
desktop dashboard.png
desktop dashboard.png (89.77 KiB) Viewed 164 times
But here is an iPad in landscape mode where the buttons should be able to fit:
desktop dashboard.png
desktop dashboard.png (89.77 KiB) Viewed 164 times
iPhone is even worse - it'd be great to be able to make the buttons smaller so they might fit.
desktop dashboard.png
desktop dashboard.png (89.77 KiB) Viewed 164 times
Attachments
iphone buttons.png
iphone buttons.png (163.37 KiB) Viewed 164 times
iPad scrolled down.png
iPad scrolled down.png (177.99 KiB) Viewed 164 times

User avatar
jwcooper
 
Posts: 1004
Joined: Tue May 01, 2012 9:08 pm

Re: Dashboards & iOS Devices

Post by jwcooper »

I'm testing a fix for the momentary button today. I would expect the fix to go out today as well, if it fixes the issue.

Regarding layouts, if you shrink the width of your browser while editing a layout, you can see there are various sizes. Each size is independently set. You can customize the layout for SM/MD/LG size dashboards. It's a bit confusing, and not well documented, but without it we had a lot of issues where we would do a best-guess layout for phones, and it just wasn't great. We still do the best-guess, but it's not always what folks want (so now you can customize exactly).

User avatar
jwcooper
 
Posts: 1004
Joined: Tue May 01, 2012 9:08 pm

Re: Dashboards & iOS Devices

Post by jwcooper »

The momentary button should be fixed for touch input devices. If you hold it down, the button won't fire the release event until you lift off of it.

Thanks for reporting!

Locked
Forum rules
If you're posting code, please make sure your code does not include your Adafruit IO Active Key or WiFi network credentials.

Return to “Internet of Things: Adafruit IO and Wippersnapper”