797 posts
Posted 18 August 2015 - 11:53 PM
Flare is a UI library I've been working on for some time now. It's OOP based, meaning you create objects and manipulate the object itself rather than calling some other function with a label or ID.
When I say extensive, I'm referring to its large selection of UI elements you can use, and it's *amazing* animation library. When I say extendible, I'm referring to its easy to use internal API and ability to create your own objects (although undocumented atm). It's also unbelievably quick, quicker than I ever imagined in fact. I've been testing on a CCLite emulator with 101x35 resolution, and have never noticed any lag. However, what really showed it off is when I was testing the UITerminal element. I ran Flare inside itself 9 times, so that's flare in flare in flare in flare in flare in flare in flare in flare in flare in flare, and the lag was barely noticeable. On a normal computer, you'd run out of screen space before you noticed any lag.
So, let's get started. What does Flare actually do?
It's really easy to make a Flare application. Below is a small example:
Line 2 is the same as doing this, by the way:
What does this look like?
Simple right? You may have noticed I used '0' instead of '1' for the coordinates? Flare's coordinate system is 0-based instead of 1-based, unlike computercraft. This is mainly to make internal things easier, but also offers a slight performance benefit.
Now, buttons are meant to be clicked, and that's just as easy to do. Following from the previous example, you can do this:
This will change the button colour every time you click it. You should be aware that buttons are clever about drawing when you're holding them. They automatically lighten or darken their colour (depending on the colour) when you're holding them, giving the appearance of flashing when you click them, so the button colour when holding will always look ok even if you change its default colour.
Now, what about animation? I mentioned animation earlier. Instead of making the button change colour, let's make it move to and from 0 and 20 pixels across, animated in .3 seconds (the default animation time of all elements):
Surely it can't be that simple!? It is. You can also animate width and internal offset (think of containers that scroll) like this.
Now, to exit this application, right now, we have to terminate it (hold ctrl-t for a horribly long time). Wouldn't it be better to press ctrl-shift-x and have it stop?
The first parameter is the identifier of the shortcut. You can use that to change the shortcut combo or function later on.
Flare does a lot more than just buttons, for example, it can run a shell inside a resizeable and moveable window with about 20 lines of code. Refer to the UITerminal and UIWindow documentation to get an idea of how to do this.
If you're not sold yet, take a look at the demo - a showcase of most of the default elements in Flare (I'm lazy and didn't quite finish it, so it's missing a few):
pastebin get T9ADyKrk FlareDemo
You can download Flare like this (the demo does it automatically):
pastebin run SD25GhYf
Before using Flare, it's worth taking a look at the documentation.
Some things you should know:
Flare applications must be in a folder. When you build them, it turns the folder into a single file that can be run on any computer just fine (it will automatically download Flare too!)
Flare is sadly anchored to the 'Flare' folder… you can't install it anywhere else.
There is documentation included in the Flare install. Read through 'Flare/docs', starting with 'Getting Started.txt' for more information.
When I say extensive, I'm referring to its large selection of UI elements you can use, and it's *amazing* animation library. When I say extendible, I'm referring to its easy to use internal API and ability to create your own objects (although undocumented atm). It's also unbelievably quick, quicker than I ever imagined in fact. I've been testing on a CCLite emulator with 101x35 resolution, and have never noticed any lag. However, what really showed it off is when I was testing the UITerminal element. I ran Flare inside itself 9 times, so that's flare in flare in flare in flare in flare in flare in flare in flare in flare in flare, and the lag was barely noticeable. On a normal computer, you'd run out of screen space before you noticed any lag.
Spoiler
So, let's get started. What does Flare actually do?
It's really easy to make a Flare application. Below is a small example:
require "UIButton"
local button = application.view:addChild( UIButton( 0, 0, 20, 5, "Hello world!" ) )
button.colour = colours.cyan
button.textColour = colours.white
Line 2 is the same as doing this, by the way:
local button = UIButton( 0, 0, 20, 5, "Hello world!" )
application.view:addChild( button )
What does this look like?
Simple right? You may have noticed I used '0' instead of '1' for the coordinates? Flare's coordinate system is 0-based instead of 1-based, unlike computercraft. This is mainly to make internal things easier, but also offers a slight performance benefit.
Now, buttons are meant to be clicked, and that's just as easy to do. Following from the previous example, you can do this:
function button:onClick()
self.colour = 2 ^ math.random( 0, 15 )
end
This will change the button colour every time you click it. You should be aware that buttons are clever about drawing when you're holding them. They automatically lighten or darken their colour (depending on the colour) when you're holding them, giving the appearance of flashing when you click them, so the button colour when holding will always look ok even if you change its default colour.
Now, what about animation? I mentioned animation earlier. Instead of making the button change colour, let's make it move to and from 0 and 20 pixels across, animated in .3 seconds (the default animation time of all elements):
local state = false
function button:onClick()
self.animatedX = state and 0 or 20
state = not state
end
Surely it can't be that simple!? It is. You can also animate width and internal offset (think of containers that scroll) like this.
Now, to exit this application, right now, we have to terminate it (hold ctrl-t for a horribly long time). Wouldn't it be better to press ctrl-shift-x and have it stop?
application.view:createShortcut( "stop, please", "ctrl-shift-x", function()
application:stop()
end )
The first parameter is the identifier of the shortcut. You can use that to change the shortcut combo or function later on.
Flare does a lot more than just buttons, for example, it can run a shell inside a resizeable and moveable window with about 20 lines of code. Refer to the UITerminal and UIWindow documentation to get an idea of how to do this.
If you're not sold yet, take a look at the demo - a showcase of most of the default elements in Flare (I'm lazy and didn't quite finish it, so it's missing a few):
pastebin get T9ADyKrk FlareDemo
You can download Flare like this (the demo does it automatically):
pastebin run SD25GhYf
Before using Flare, it's worth taking a look at the documentation.
Some things you should know:
Flare applications must be in a folder. When you build them, it turns the folder into a single file that can be run on any computer just fine (it will automatically download Flare too!)
Flare is sadly anchored to the 'Flare' folder… you can't install it anywhere else.
There is documentation included in the Flare install. Read through 'Flare/docs', starting with 'Getting Started.txt' for more information.
Edited on 22 August 2015 - 09:51 AM
