Implementing UI based on iOS 7+ / Google Material (?)

paul.cardwell · August 11, 2016, 11:43pm

Changes in release and a screen shot of “Open Dialog” which uses sprite sheet for on/off states.

Image buttons. These can be specified using a single image or two images (sprite sheet) for on/off states. See menu.lua and look for “Open Dialog” for an example. See project wiki too https://github.com/arcadefx/material-ui/wiki/Buttons for more information. The sprite sheets are those from Corona SDK and uses display.newImage() with the sheet and index of image to use.

Also working on newer button animation and starting on themes. The below uses newNavBar(), newRoundedRectButton() and attachToNavBar(). “attachToNavBar()” can attach buttons and other mui widgets to the navigation bars.

Download the above example: http://www.anedix.com/fileshare/buttons-example.zip

View example video here: https://youtu.be/ZgdS6kIFnss

paul.cardwell · August 15, 2016, 7:16pm

Changes in release:

Added support for display.newImage() and display.newImageRect() via wrappers. See mui-image.lua for options. For an example usage see http://www.anedix.com/fileshare/login-form.zip and below is a screen shot of it.
Added “value” to both newTextField and newTextBox properties. This allows pulling the information later in another method. Example: local email = mui.getWidgetProperty(“textfield_email”, “value”)
Added “value” to all user input fields, buttons, toolbars, slide panels, tile panels, etc. Use getWidgetProperty() to get the value for the widget name.
Fixed a bug in newRoundedRect() where it left a white outline on buttons that did not use a shadow gradient.
Other fixes.

paul.cardwell · August 17, 2016, 3:07am

Added

Shadow support to newRectButton(), newRoundedRectButton() and newCircleButton. Can specify to use shadow, set size of shadow and opacity of shadow.
“shadow” property to the above widget types and use mui.getWidgetProperty(“widget_name”, “shadow”) to get the shadow.

paul.cardwell · August 19, 2016, 7:40pm

Changes in release:

Added new Documentation website for the library documentation. I borrowed ideas from the Corona SDK documentation flow. It’s mobile compatible.
Bug fixes.

paul.cardwell · August 22, 2016, 8:50pm

Changes in release:

Added new method newProgressCircle(). Creates an animated progress circle. Updated API docs for it.

paul.cardwell · January 7, 2017, 12:03am

Changes: [0.1.49] - 2017-01-06

Added “useTimeOut” parameter to newToast(…) method. useTimeOut is boolean. This is used to automatically timeout and close the toast notification. It defaults to “true” and if no “timeOut” in microseconds is specified it defaults to 2000 or 2 seconds.
Added “timeOut” parameter to newToast(…) method. timeOut is in microseconds. This is used to automatically timeout and close the toast notification.

…and more changes on the way.

Online documentation:

http://www.anedix.com/docs/mui/

GitHub resource:

https://github.com/arcadefx/material-ui

paul.cardwell · January 9, 2017, 5:04am

[0.1.50] - 2017-01-08

Added

Method “newSnackBar” for creating snack bar and action button text. These flow up from the bottom. Like “Removed Msgs UNDO” and it times out after 3 seconds. Use “timeOut” to specify timeout in microseconds.
See picture below for example. The dark button near bottom with “UNDO” in name.

Change

Fixed all “parent” group/scene paramater for all controls. The demo is updated using a parent for all buttons. Click “coffee cup” to see all the controls slide up (snack bar).
Fixed case issue in build.settings for “CoronaWindowMovesWhenKeyboardApp” (iOS)

paul.cardwell · January 9, 2017, 10:14pm

@doubledashdesign I am working on your request.

[0.1.51] - 2017-01-09

Added

‘headerImage’ parameter to newSlidePanel() method. It will fit the image to the menu header dimensions.

See header image for title bar area below…

paul.cardwell · January 9, 2017, 11:42pm

[0.1.52 and 0.1.53] - 2017-01-09

Added

‘iconImage’ parameter to “newSlidePanel(…)” method. It will fit the image to the font size dimensions. This is so it will look correct. See demo and “list {}” for an example.
‘iconImage’ parameter to "newToolbar(…)" method. It will fit the image to the font size dimensions. This is so it will look correct. See demo and “list {}” for an example.

See example of Menu using new Icon Images:

paul.cardwell · January 12, 2017, 1:08am

[0.1.55] - 2017-01-11

Added

‘iconColor’ parameter to newToolbar(…) list {} options. Specify color in on state per icon.
‘iconColorOff’ parameter to newToolbar(…) list {} options. Specify color in off state per icon.
‘iconColor’ parameter to newSlidePanel(…) list {} options. Specify color in on state per icon.
‘iconColorOff’ parameter to newSlidePanel(…) list {} options. Specify color in off state per icon.

Fixed

Color bugs in newSlidePanel(…) and newToolbar(…) methods.

See a mix of icon images, icon symbols with multi-colors and basic colors. The multi-colors are “Location Information” and the first “To-do” in the newSlidePanel(…) example shown here:

paul.cardwell · August 27, 2016, 9:20pm

Coming soon progress arc method based on time and percentage. Special thanks to horacebury for mathlib.

Example video:

https://youtu.be/ISoU91exIpM

paul.cardwell · August 30, 2016, 12:13pm

Changes in release:

Added newProgressArc() method to draw a time based progress arc. It uses a background and foreground color combination. The progress indicator text in percent can be hidden.
Bug fixes.
Special thanks and credit to horacebury for mathlib.
Will update this thread with example source.

TheGiant · January 19, 2017, 1:55pm

Hello,

Can you please give me an example on how to hide the newSlidePanel by pressing a menu item.

Ans also how to keep that item selected (with gray color).

Thanks in advance.

paul.cardwell · January 19, 2017, 2:51pm

@TheGiant, will do and I just added individual ‘callBacks’ per menu item. This way you can either use a single callBack or per menu item callBack if desired. I will get these additions in place and update the repo and report back here.

paul.cardwell · January 19, 2017, 4:00pm

[0.1.59] - 2017-01-19

Added

‘closeSlidePanel()’ method to close a newSlidePanel() widget by name. This is now the default action if used the built-in callBack. You may call this in your own callBacks. This will close and release the menu from memory.

Example: mui.closeSlidePanel(“slidepanel-demo”)

‘callBack’ parameter added to each menu item. If used this callBack will be called instead of the parent callBack for the entire newSlidePanel() widget.
‘callBackData’ parameter added to each menu item. if used the data will be passed to the callBack being used.
Documentation updated to match and demo updated to use these.

@TheGiant and I will be addressing your requests too.

paul.cardwell · January 19, 2017, 4:40pm

[0.1.60] - 2017-01-19

Added

‘hideSlidePanel()’ method to hide a newSlidePanel() widget by name. This can be used in your callBacks. This keeps the slide panel in memory and hides it.
‘showSlidePanel()’ method to show a newSlidePanel() widget by name. This can be used in your callBacks. This uses the slide panel in memory and shows it.

See menu.lua for example.

@TheGiant. I will look into the other request to keep the menu item selected.

TheGiant · January 19, 2017, 7:22pm

@paul.cardwell

Thank you very much!

Perfect implementation.

paul.cardwell · January 20, 2017, 5:15pm

Changes

[0.1.61] - 2017-01-20

Added

‘iconImage’ parameter to newTileGrid() list options. Allows a tile to use an image (jpg/png) instead of icon font text.
‘fontIsScaled’ parameter to newTileGrid(). Defaults to true. If true scale the font to fit the width of the tile. If false let the user define the font to any size.
‘fontSize’ parameter to newTileGrid(). Sets the overall font size for icon and text.
‘parent’ parameter to newTileGrid(). If used it will place the newTileGrid widget into the group/parent.

See “iconImage” in use in the pic below (first row, middle tile):

paul.cardwell · January 25, 2017, 4:17am

Changes

[0.1.63] - 2017-01-24

Added

‘trimFakeTextAt’ parameter to newTextField() and newTextBox() options. Trim the text displayed when not editing to 1…Number and add “…” on end.
‘textFieldFontSize’ parameter to newTextField() options. Sets font size used in text field.
‘textBoxFontSize’ parameter to newTextBox() options. Sets font size used in text box.
‘fontSize’ parameter to both newTextField() and newTextBox() to set the label size.

Fixed

Font size of textboxes were really small. Now it sets the font and the size appropriately.

paul.cardwell · January 27, 2017, 2:32pm

[0.1.66] - 2017-01-27

Added

MaterialIcons-Regular.otf font file to support older devices. This is partially implemented but required now for installation. Be sure to copy it to the same folder where “MaterialIcons-Regular.ttf” resides.
‘isFontIcon’ a boolean for newIconButton, newCircleButton, newToolbarButton, basically where there is an Icon this is needed. Backwards compatibility included. Use “isFontIcon” in the options for the methods and if true it will use the codepoint for the Material icon font.

Changes

fixed issues with fonts and Material design font.
many bug fixes and now supports Android KitKat 4.4.4 - Nougat 7.x. Android Icecream and Jelly Bean should work. However, anything older than Android 4.x is “not” supported at this time. I need more research for Android versions < 4.