MobGUI Icon Buttons - Enhancement Suggestion - Almost 1.0

[robl]

While mocking up a new UI for a project, I came across a couple UI items that I couldn't quite emulate in the new plug-in.

First, for iOS 7 there are occasions when an icon button is used without a text label. For example, a toolbar or sometimes in the Navbar. Look at the iOS Mail app on an iPhone and open a message. On the bottom of the screen is the toolbar, small icons without labels. Also, at the top of the screen, you have 2 icon buttons with up / down arrow heads. With the current MobGUI Icon Buttons, I can set the label's text to empty. However, the vertical space still exists for the label below the icon. If I try to resize the button, the icon isn't centered vertically. With a transparent background, it's not too much of a problem, but if you check "show background" or "gradient", it's visually incorrect. As a work around, I edit the group of the button and remove the label / center the icon. However, it would be nice to have this as an automated option in the plug-in, as it would be a common need.

Second, similar to the last item, there are situations where a button with an icon placed horizontally to the left of the label is used. Specifically in the Nav Bar,it's common to see a left pointing arrow head with a label on the right, i.e. "< Back" that functions as a single touchable UI element. I can work around this too by editing the group and re-arranging the icon and label position, but I'd think it would be a welcome enhancement to the plug-in.

UPDATE:
I noticed the Vertical Tweak and tried to use that to move the icon a bit lower, but it doesn't seem to allow me to lower the icon to center it. I can enter a negative value and raise it from its default, but not lower it. What about a minor change to the vertical tweak and add a horizontal tweak to accommodate both of the above scenarios?

R/ Robert

[splash21]

Hi, Robert. Yes - we need more button options - it will happen There were problems getting the fonts to show up in LiveCode. Then a problem where they were getting cut off at their baseline on Retina (?). After much font tweaking, they worked at all sizes in LiveCode. The vertical tweak is there specifically (docs updated soon) for when you use images - they don't always sit as high as the text icons and the tweak allows you to reposition then upwards so you can mix buttons using the fonts and buttons using images. I'm not sure why positive values don't work, it just sets the text shift value in the field.

The suggestions are great - keep them coming!

Thanks

[Youks]

Hi John GREAT Job!! I have noticed a bug on a card while you setup Option buttons and an individual button in the card when you trigger the individual button it will trigger too one option button !
Have you noticed that ? Is this a bug you were referring to while uploading almost V1.0?

Thx! Keep up!!

[splash21]

Youks, I was just about to look at that bug then realised that I just never updated the android theme. The plugin can fix itself...

From the main palette with the stack details (click on the MobGUI icon at the top left if you're on another palette);
select 'android' from the theme list, then click the 'Reset current theme' button.

Fixed Now switching to the android theme does not force the 'Behave as an option button' flag back on.
If you have created any other themes based on the android theme, just do the same with them.

(That reset button copies all the default control scripts and behavior scripts in to the current theme within the plugin)

UPDATE - I just retested and that fix doesn't work after all It seems that you still have to unset the 'Behave as an option button' after the first time you switch theme. After that, I can switch back and forth and it works OK. I know what the fix is, so will throw it in for the next update.

[splash21]

While mocking up a new UI for a project, I came across a couple UI items that I couldn't quite emulate in the new plug-in.......

I'm thinking that if the icon button has a few extra options then that will meet most of the immediate requirements;

• Position the icon to the left
• Position icon to the right
• Icon only

This should also allow creating layouts like we see in the iOS settings screen - a button (icon left + label) then a switch....
The icons can already be a different color than the text and we can load images as well, so this should be quite flexible.

I'm having a look at it just now..

[robl]

While mocking up a new UI for a project, I came across a couple UI items that I couldn't quite emulate in the new plug-in.......

I'm thinking that if the icon button has a few extra options then that will meet most of the immediate requirements;

• Position the icon to the left
• Position icon to the right
• Icon only

This should also allow creating layouts like we see in the iOS settings screen - a button (icon left + label) then a switch....
The icons can already be a different color than the text and we can load images as well, so this should be quite flexible.

I'm having a look at it just now..

I think that would work nicely and cover most usage scenarios. Thanks, John.

[Youks]

Hi John, it looks like the bug happens only while using iOS7 theme. So far with the Android theme the bug does not appear.

Rgds

[splash21]

The icon button improvements have been added, so I'll test it properly tomorrow and - all going well, update the docs and release V1.0. The button bug mentioned above (seen in the video) has been fixed as well.

The icon button can now;

• Position icon to top, left or right
• Show or hide the text label

You can also use the buttons as labels with icons (like the iOS settings screen) by setting the disabled property using LC's property inspector.

[robl]

The icon button improvements have been added, so I'll test it properly tomorrow and - all going well, update the docs and release V1.0. The button bug mentioned above (seen in the video) has been fixed as well.

The icon button can now;

• Position icon to top, left or right
• Show or hide the text label

You can also use the buttons as labels with icons (like the iOS settings screen) by setting the disabled property using LC's property inspector.

This is fantastic news! Thanks, John. (I'll start piling on suggestions for version 1.1 the day after. )

[njt]

Thanks for reviving this software you wrote up. I've been waiting for the themes that livecode said they were going to be putting in, but I guess since you're around they're putting it on the back burner (also considering the amount they promote you )

That said, will we be alerted when it reaches 1.0 by an email or something? Or do we need to check this forum for the news...?

[splash21]

Hi, njt - I've been updating the forum and sending occasional tweets. I'll look at setting up an email alert - there are quite a few users signed up to the web site who have ticked the news box - I never realised it would be a popular option!