Author Topic: Button text clipped on iOS  (Read 795 times)

RBerteig

  • RFduino Newbie
  • *
  • Posts: 12
  • Karma: +0/-0
  • Engineer and Magician
    • View Profile
Button text clipped on iOS
« on: November 11, 2016, 04:21:42 PM »
I developed a demo with an Android (Nexus 5, specifically) but its user has an iPhone (6S I believe). After some troubles with using PNG images reliably, I switched to buttons marked A, B, C, D, and Z. Good enough for a demo. All looked and worked great on my Android. The intended user just sent be a screen shot from his iPhone where the button labels are placed off-center and cropped to the point that you'd have to know what the button said.

The attached PNG shows screen shots from both phones scaled down to match and placed side by side.

The buttons are drawn like this:

Code: [Select]
void ui()
{
  // ...
  SimbleeForMobile.beginScreen(darkgray);
  uint16_t y0 = 0;
  if (SimbleeForMobile.remoteDeviceType == REMOTE_DEVICE_OS_IOS) {
    // leave room at top for iOS status and controls
    y0 = 60;
  }
 
  // ...
  btn1 = SimbleeForMobile.drawButton( 25, y0+155, 35, "A", WHITE);
  btn2 = SimbleeForMobile.drawButton( 65, y0+155, 35, "B", WHITE);
  btn3 = SimbleeForMobile.drawButton(105, y0+155, 35, "C", WHITE);
  btn4 = SimbleeForMobile.drawButton(145, y0+155, 35, "D", WHITE);
  btn5 = SimbleeForMobile.drawButton( 260, y0+155, 35, "Z", WHITE);
  // ...
}

I suspect I could undo the clipping by changing the button width to something wider than 35 pixels. But how was I supposed to know that when it displays just fine in Android without having an iOS for testing?

I thought a big selling point of the SimbleeForMobile was to provide a reasonably simple platform agnostic experience.

It runs. But making it look good in both places is still more work than it ought to be.

robomaniac

  • RFduino Newbie
  • *
  • Posts: 9
  • Karma: +0/-0
  • I love electronics, robots and FPV drone racing
    • View Profile
Re: Button text clipped on iOS
« Reply #1 on: November 29, 2016, 06:46:18 PM »
try not to "hard" code your button coordinate.

Try using
Code: [Select]
SimbleeForMobile.screenWidth
SimbleeForMobile.screenHeight

You can now divide the screen width by the number of button you have. You can even calculate the proper button width. It will automatically adjust to any phone.

If you plan to come out with a device that use the simblee, you need to have android and iphone to test. Get some coworker to test for you.
I also believe there is still some bug in the android version of simblee. I also had weird behavior when I tested with android.


RBerteig

  • RFduino Newbie
  • *
  • Posts: 12
  • Karma: +0/-0
  • Engineer and Magician
    • View Profile
Re: Button text clipped on iOS
« Reply #2 on: December 01, 2016, 02:20:11 PM »
Quote
You can even calculate the proper button width. It will automatically adjust to any phone.

Look at the screen shots. The buttons have generous width on Android, and the single letters are centered. On iOS, the letter starts at the center of the button, and is cropped off almost immediately.

I could have calculated that button width as screenWidth/10, and that would not have made a difference to the crappy rendering on iOS.

I can't find a documented API to learn the actual display width of a string, or how wide to make a button. And for this sort of dashboard application I should not have to.

For that matter, nothing documents the size of the built-in color wheel graphic, so using it as I did seems to be a bit of a crap shoot. Moreover, on Android it seems to scale to fit the space left on the screen, while on iOS it is cropped at the screen bottom.

No one would ship the For Mobile app as their interface to a commercial product. I don't see that as being its market. It is, however, a decent idea for how to get a quick, cheap, and usable dashboard interface to a one-off piece of hardware whether that is a demonstration as part of design of a real product or a hobbyist's toy.

As such, it seems reasonable to demand that it do a better job of trying to just get along with what the firmware asked for. Doing a better job of fitting text into a button is a good example.

Providing some simpler screen layout idioms would also be lovely.

So would automatically avoiding the bands at the top (iOS) and bottom (Android) which are customarily used by the OS itself. Not being an iOS user, I was shocked to find controls that I placed at the top of the screen were located on top of system status displays and buttons on iOS. The app simply should not do that by default.

It's mission is not to be an immersive experience app. It is a dashboard browser for controls.


flurin4

  • RFduino Newbie
  • *
  • Posts: 16
  • Karma: +0/-0
    • View Profile
Re: Button text clipped on iOS
« Reply #3 on: December 02, 2016, 02:46:19 AM »
Hi RBerteig,

while I agree with robomaniac that encoding the positions of elements based on screen size would help, I don't think this is the major problem you are facing.
It could address the cropping of the color wheel on the iOS screen, if you place it at "screenHeight-100" or something like that, so it definitely won't go out of the screen.

Closer to your problem of non-centered text in the buttons, I agree that there should be a feature for the Buttons to select the size automatically depending on the size of the text, and then to center the text accordingly.
Maybe a function override on the side of the SimbleeForMobile Library would permit this?

Lets see wether developers at RFDigital chime in on this, or give us feedback, and otherwise we might want to write them asking directly for this feature.

(To an admin, maybe move this thread to the SFM category?)
« Last Edit: December 02, 2016, 02:52:20 AM by flurin4 »

RBerteig

  • RFduino Newbie
  • *
  • Posts: 12
  • Karma: +0/-0
  • Engineer and Magician
    • View Profile
Re: Button text clipped on iOS
« Reply #4 on: December 02, 2016, 12:16:42 PM »
It could address the cropping of the color wheel on the iOS screen, if you place it at "screenHeight-100" or something like that, so it definitely won't go out of the screen.

That would work if its size were documented. It isn't. And on Android, I observed that the color wheel was scaled to avoid cropping, so that it was not possible to place it freely on screen without it filling unexpected space. I discovered that while trying to measure its size by moving it closer to the edges. From the screenshot I posted, you can see that on iOS it is cropped at the bottom, so it is not being scaled there.

Quote
Closer to your problem of non-centered text in the buttons, I agree that there should be a feature for the Buttons to select the size automatically depending on the size of the text, and then to center the text accordingly.
Maybe a function override on the side of the SimbleeForMobile Library would permit this?

The existing three overrides of drawButton() allow freedom to specify color and button type. The "button height is automatically calculated" as is typical, but the "width can be specified, to aid in alignment". Setting width isn't very useful if the dimensions of the font aren't known. And screen layout is made much more difficult by the automatic calculation of height, since there's apparently no way to discover what height was calculated.

Quote
Lets see wether developers at RFDigital chime in on this, or give us feedback, and otherwise we might want to write them asking directly for this feature.

(To an admin, maybe move this thread to the SFM category?)

The original bug report is the cropped button text, which is clearly wrong in iOS and right in Android.

The issues with sizes of font and UI elements are universal, and probably should get their own thread.