Material UI (MUI) version 0.3.0

paul.cardwell · October 6, 2017, 1:52am

Hi,

Material-UI (mui) version 0.3.0 has been released. This version introduces a major change. It addresses the scaling issues people were having. It follows the config.lua width, height scaling and supports iPhone X or insets.

See the demo config.lua for settings. Overall width and height are scaled by 320x480 or 360x693 (iPhone X for instance). The coordinate system uses Corona’s internal one. Scaling is based on what it does. Which makes it fall in line with other Apps. In doing so the method “getScaleVal()” has been depreciated. Do not use “getScaleVal().” To use version 0.3.0, please adjust your widths, heights and positioning (x,y) of your App.

Quick summary…

Requires Corona SDK build 2017.3135 or greater.
A lot of internal changes.
Fixed newSelect() display.
Supports safe zone insets and iPhone X display area.
mui-data must be included in the top section of your scene file. It needs it for safeArea values. See menu.lua for example.

local muiData = require( “materialui.mui-data” )
Be sure if you are supporting iOS to…
For iOS devices, please add to you “plist”: UILaunchStoryboardName = “LaunchScreen”,
For iOS devices, copy the folder “LaunchScreen.storyboardc” to your project ONLY if it doesn’t already exist. If it exist skip this step!

To place a background in the safe zone be sure to look at the top of the menu.lua file for an example.

Video
[media]https://www.youtube.com/watch?v=c8p3DMA6PzU[/media]

How to Start
Visit project on GitHub:
https://github.com/arcadefx/material-ui

Blog Entry from CoronaLabs
https://coronalabs.com/blog/2017/01/18/new-extension-for-corona-apps-material-ui/

Online Documentation (formatted similar to Corona’s SDK documentation):
http://www.anedix.com/docs/mui/

More demos coming with data pagination, clock, picture viewer, etc. Improvements on going.

paul.cardwell · October 13, 2017, 10:19am

Material-UI (mui) version 0.3.1 has been released - 2017-10-13. If you are unaware of what MUI is see above thread.

Changes

Added insertRowsTableView() appends rows to an existing table view. Arguments are name of tableView and a list of entries. See documentation for newTableView with Helpers.
Added removeAllRowsFromTableView() remove all rows from an existing table view. Argument is the name of the tableView. See documentation for newTableView with Helpers.
Created a Pagination demo of sqlite database entries using the above methods. See http://www.anedix.com/fileshare/table-paginator.zip and look at file table-paginator.lua. Note it includes a small database abstraction layer I created. Feel free to use it for other things and it will be improved with caching, etc.
Updated demo for showing how to attach things to a tableView too. See http://www.anedix.com/fileshare/checklist.zip

Paginator screen shot:

paul.cardwell · January 26, 2018, 3:29am

Greetings,

I wanted to share that there “will be” changes coming that will really enhance the Material-UI library. Here is a glimpse of the coming changes.

Buttons (all buttons):

Support multiple states.
The following states are supported: ‘off’ (normal), ‘on’ (pressed/touching) or ‘disabled’ (non-functional).
Each state supports setting colors or changing the image for the button, calling a method and passing data to that method.
The callBack for successful “touch” will not be called if you ‘move’ away from the button and let go. Or move over another button you will not affect that other button’s events.
Supported visual representations are: text (material font icons), SVG (scalable vector graphics, single and multi-color), images (jpg, png).
SVG’s with a single color can be re-colored by setting the fillColor in the state for svg.
There is an order of precedence when specifying text, SVG or image. Order is SVG, Image and Text. If you specify text and SVG then SVG is used.
Helper method to set button to each state. Let’s say you ‘disabled’ the button. During execution of the App you can call a method to change the state of the button at any time.

Example usage with newIconButton(…):

&nbsp;&nbsp;&nbsp; local buttonMessage = function( event ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local callBackData = mui.getEventParameter(event, "muiTargetCallBackData") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if callBackData ~= nil then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print("Button message: "..callBackData.message) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp; mui.newIconButton({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parent = mui.getParent(), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name = "plus", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text = "help", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width = 25, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height = 25, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x = 30, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; y = 30, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font = mui.materialFont, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; state = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; value = "disabled", -- specify the state to be in when button is created &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; off = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; textColor = { 0.25, 0.75, 1, 1 }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callBack = buttonMessage, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callBackData = { message = "button is turned off" } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --[[-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; svg = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; path = "ic\_help\_48px.svg", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fillColor = { 0.25, 0.75, 1, 1 }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --]]-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; on = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; textColor = { 1, 0, 0, 1 }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callBack = buttonMessage, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callBackData = { message = "button is turned on" } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --[[-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; svg = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; path = "ic\_help\_48px.svg", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fillColor = { 1, 0, 0, 1 }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --]]-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; disabled = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; textColor = { 0.5, 0.5, 0.5, 1 }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callBack = buttonMessage, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callBackData = { message = "button is disabled" } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --[[-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; svg = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; path = "ic\_help\_48px.svg", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fillColor = { 0.5, 0.5, 0.5, 1 }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --]]-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callBack = mui.actionSwitchScene, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callBackData = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sceneDestination = "onboard", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sceneTransitionColor = { 0.08, 0.9, 0.31 } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; })

paul.cardwell · October 13, 2017, 10:19am

Material-UI (mui) version 0.3.1 has been released - 2017-10-13. If you are unaware of what MUI is see above thread.

Changes

Added insertRowsTableView() appends rows to an existing table view. Arguments are name of tableView and a list of entries. See documentation for newTableView with Helpers.
Added removeAllRowsFromTableView() remove all rows from an existing table view. Argument is the name of the tableView. See documentation for newTableView with Helpers.
Created a Pagination demo of sqlite database entries using the above methods. See http://www.anedix.com/fileshare/table-paginator.zip and look at file table-paginator.lua. Note it includes a small database abstraction layer I created. Feel free to use it for other things and it will be improved with caching, etc.
Updated demo for showing how to attach things to a tableView too. See http://www.anedix.com/fileshare/checklist.zip

Paginator screen shot:

redninjacat · June 27, 2018, 6:25pm

Paul,

Your pagination and TableView demos you posted a while back are no longer available. Would it be possible for you to post them again or elsewhere for me to access?

sidermaniac · July 10, 2018, 8:03pm

Hello:

I downloaded and played with the demo. It works great.

One small issue running menu.lua.

Click on the Go Scene button and then on that page click on to Search and type. The text box fore color is white and back color is also white while you are typing. This means you don’t see the text until you press enter.

Otherwise it looks very good.

Where should I ask technical questions about this? Do you prefer here or github?

I will post one here for now:

Concerning newCard, here is the sample code. It errors unless you give it some values for centerX and centerY so here I used dsiplay.contentCenter:

local topHeight = 100 local bottomHeight = 150 mui.newCard({ name = "demo-card", x = display.contentCenterX \* 0.7, y = display.contentCenterY, topHeight = topHeight, width = display.contentWidth \* 0.5, height = topHeight + bottomHeight, fillColorTop = {1, 1, 1, 1}, fillColorBottom = {0.22, 0.55, 0.23}, --strokeWidth = 1, --strokeColor = {0.2, 0.2, 0.2}, useShadow = true, --radius = 5, })

The card is displayed with the top part green and the bottom white. But the code clearly shows fillColorBottom = green…

Am I misunderstanding something?

paul.cardwell · January 26, 2018, 3:29am