Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Using Pencil as UI Designer for Corona
Started by bali.janos Apr 25 2018 07:43 AM

7 replies to this topic
pencil ui designer evolus pencil
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

bali.janos

[GLOBAL: userInfoPane.html]
bali.janos
  • Observer

  • 5 posts
  • Corona SDK

Hi!

 

I started using the Corona Sdk a few weeks ago. I found that it is great for developers, but a bit hard to make the deisng at the development phase.

 

So i made a little project to process of  output files of the free and open-source Pencil UI Designer.

 

Sourcecode is here.

 

Attached File  p03.png   154.52KB   4 downloads

 

Regards, Janos

p03.png



[TOPIC: post.html]
#2

sirmania

[GLOBAL: userInfoPane.html]
sirmania
  • Contributor

  • 131 posts
  • Corona SDK

That is fantastic! I love creating mock ups but havent found the ideal tool yet. Looking forward to trying this. Thanks :)

[TOPIC: post.html]
#3

bali.janos

[GLOBAL: userInfoPane.html]
bali.janos
  • Observer

  • 5 posts
  • Corona SDK

Thanks. I hope it is more than just one mockup maker. :)



[TOPIC: post.html]
#4

agramonte

[GLOBAL: userInfoPane.html]
agramonte
  • Contributor

  • 531 posts
  • Corona SDK

Looks good. 



[TOPIC: post.html]
#5

bali.janos

[GLOBAL: userInfoPane.html]
bali.janos
  • Observer

  • 5 posts
  • Corona SDK

Native objects will be represented as generic objects (TextField, TextBox, WebView, MapView etc.).
I tried to run the generated scene with some native objects on my phone.
The result was much better what i previously imagined...

Attached File  Screenshot_phone_small.png   113.49KB   1 downloads

 

 
And here is the design-time screenshot.

Attached File  pencil_sshot.png   153.21KB   1 downloads



[TOPIC: post.html]
#6

agramonte

[GLOBAL: userInfoPane.html]
agramonte
  • Contributor

  • 531 posts
  • Corona SDK

Do the UI elements on the menu actually work or are they just static images?



[TOPIC: post.html]
#7

bali.janos

[GLOBAL: userInfoPane.html]
bali.janos
  • Observer

  • 5 posts
  • Corona SDK

Do the UI elements on the menu actually work or are they just static images?

 
UI elements aka 'info' and the 'menu' elements on the top rectangle?
They are Material Icons (derived from display.newText). This object is not a standard sdk object.

Any design element can be used easily from generated lua code:

function scene:create(event)
  local sceneGroup = self.view
 
  -- render design elements
  local objects = pimp.getSceneObjects(event,sceneGroup)
  
  -- event to InfoButton
  objects["InfoButton"]:addEventListener( "touch", myEventHandler )
end

 

Implemented elements:

  • Rect (RoundedRect)
  • Circle
  • Text
  • Button
  • Spinner
  • Image
  • Switch (CheckBox,Radio)
  • Slider
  • ProgressBar
  • Tabbar
non standard element
  • MaterialIcon (newText with Material Icon font set)
  • MaterialTab (newTabbar with Material Icon font set)

 

Some native objects now under development:

  • TextField
  • TextBox
  • WebView
  • MapView


[TOPIC: post.html]
#8

bali.janos

[GLOBAL: userInfoPane.html]
bali.janos
  • Observer

  • 5 posts
  • Corona SDK

Development of the native object handling just finished.
Now the generated scene handles the native object hiding and showing on scene change.
 
Source code and example files can be found on Github
Feedbacks are welcome...


[topic_controls]
[/topic_controls]