Jump to content




Flare - The extensive, extendable UI library.


42 replies to this topic

#1 Exerro

  • Members
  • 801 posts

Posted 18 August 2015 - 10: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.

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?
Posted Image

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 by awsumben13, 22 August 2015 - 10:51 AM.


#2 Lyqyd

    Lua Liquidator

  • Moderators
  • 8,465 posts

Posted 19 August 2015 - 12:10 AM

Obfuscated downloads are not allowed. Please provide a plain-text installer instead.

#3 Exerro

  • Members
  • 801 posts

Posted 19 August 2015 - 07:20 AM

Both the installer and packager just stripped newlines from the packages to make it a bit easier to read. Literally this:
:gsub( "\\\n", "\\n" )
(replacing actual newlines with '\n' so each file went on one line.)

I've removed that and edited back in the pastebin links. Hopefully this counts as un-obfuscated now? I wonder what would happen if I wrote every file of Flare on one line, would that count as obfuscated :blink:? I mean it's not like it's impossible to see what the code did in Flare from that installer.

#4 MKlegoman357

  • Members
  • 1,170 posts
  • LocationKaunas, Lithuania

Posted 19 August 2015 - 10:13 AM

I wouldn't call that code obfuscated either, but IMO something like multi-file installers and programs packed into one file packages should have a place to view each individual file, like GitHub.

Anyway, this looks really nice! +1 :)

#5 CrazedProgrammer

  • Members
  • 495 posts
  • LocationWageningen, The Netherlands

Posted 19 August 2015 - 10:30 AM

Nice!
Could you please put the documentation on Github?
It is very annoying to have no online documentation.

#6 Exerro

  • Members
  • 801 posts

Posted 19 August 2015 - 10:51 AM

GitHub doesn't seem to work for me. Whenever I try and do... anything... I get this:
Posted Image

If I ever manage to get it to work, I will upload everything straight away, but for now you're stuck with the docs that come with Flare I'm afraid.

Edit: Woo! Got it to work. The documentation is here, and I'll upgrade it to markdown at some point so it looks a bit nicer.

Edited by awsumben13, 19 August 2015 - 10:59 AM.


#7 LeDark Lua

  • Members
  • 369 posts
  • LocationLeLua

Posted 19 August 2015 - 03:02 PM

Just awesome. Animating and stuff. This looks freaking awesome. +1 to you.

#8 FUNCTION MAN!

  • Members
  • 292 posts

Posted 19 August 2015 - 04:00 PM

View Postawsumben13, on 19 August 2015 - 10:51 AM, said:

GitHub doesn't seem to work for me. Whenever I try and do... anything... I get this:
Posted Image

If I ever manage to get it to work, I will upload everything straight away, but for now you're stuck with the docs that come with Flare I'm afraid.

Edit: Woo! Got it to work. The documentation is here, and I'll upgrade it to markdown at some point so it looks a bit nicer.

I'll mark it down for you.

#9 Exerro

  • Members
  • 801 posts

Posted 19 August 2015 - 04:09 PM

View PostDr. Poof, on 19 August 2015 - 04:00 PM, said:

I'll mark it down for you.

Thanks, but beat you to it.

View PostCrazedProgrammer, on 19 August 2015 - 10:30 AM, said:

Nice!
Could you please put the documentation on Github?
It is very annoying to have no online documentation.

Yup, here they are.

#10 Lyqyd

    Lua Liquidator

  • Moderators
  • 8,465 posts

Posted 19 August 2015 - 05:28 PM

View Postawsumben13, on 19 August 2015 - 07:20 AM, said:

Both the installer and packager just stripped newlines from the packages to make it a bit easier to read. Literally this:
:gsub( "\\\n", "\\n" )
(replacing actual newlines with '\n' so each file went on one line.)

I've removed that and edited back in the pastebin links. Hopefully this counts as un-obfuscated now? I wonder what would happen if I wrote every file of Flare on one line, would that count as obfuscated :blink:/>? I mean it's not like it's impossible to see what the code did in Flare from that installer.

I'll give you the same reply I gave to the other person who asked a question about your packager:

Lyqyd, on 19 August 2015 - 05:55 AM, said:

The installation data is encoded in a way that makes it significantly more difficult to read than the extracted file would be. Given the way it's packaged (a serialized flat table), the encoding is entirely unnecessary, and therefore could only serve to obfuscate the code. Just use block quotes and leave the newlines and tab characters alone. It'd be an extremely simple change to your packaging tool, and would actually cause the file size to be smaller.

I'd have a hard time believing that you'd actually written a non-trivial program on just one line, rather than writing it normally and then stripping newlines. :P

#11 Exerro

  • Members
  • 801 posts

Posted 19 August 2015 - 06:18 PM

Yeah, true, and looking over the code again I see that it was pretty impossible to read, the "\n"s throughout made it look... well, you saw it. Would it be ok to include minified and non-minified versions of it all? I just took a look at the size of everything and got a nasty shock.

#12 Lyqyd

    Lua Liquidator

  • Moderators
  • 8,465 posts

Posted 19 August 2015 - 06:47 PM

I'm not sure what you mean by minified, since in this case your packager adds characters to the overall length of the files. Obfuscated downloads aren't allowed even with plaintext versions available, since it's too hard to verify that the obfuscated version hasn't had anything added to it by the obfuscation tool.

#13 FUNCTION MAN!

  • Members
  • 292 posts

Posted 19 August 2015 - 07:15 PM

View PostLyqyd, on 19 August 2015 - 12:10 AM, said:

Obfuscated downloads are not allowed. Please provide a plain-text installer instead.

Why? Are you trying to get people with many libraries to make their PCs fill up faster?

#14 Lignum

  • Members
  • 558 posts

Posted 19 August 2015 - 07:23 PM

View Postawsumben13, on 19 August 2015 - 10:51 AM, said:

GitHub doesn't seem to work for me. Whenever I try and do... anything... I get this:
Posted Image

If I ever manage to get it to work, I will upload everything straight away, but for now you're stuck with the docs that come with Flare I'm afraid.

Edit: Woo! Got it to work. The documentation is here, and I'll upgrade it to markdown at some point so it looks a bit nicer.

You should try out git itself instead of GitHub's client. If you're familiar with using a CLI, Git won't be as much of a conundrum to deal with. This should help you get started quickly.

Back on topic:
This looks great! I have yet to experiment with it, but it seems like a worthy competitor to Bedrock, which is (sadly) rare around here.

#15 Exerro

  • Members
  • 801 posts

Posted 19 August 2015 - 07:27 PM

My packager didn't actually add any characters, it replaced a slash followed by a newline with a slash followed by an 'n'. Anyway, by minified, I mean using an actual Lua minifier tool (parsing and rebuilding the whole Lua file, removing un-needed whitespace, making local names smaller). Its entire purpose is to make the source code smaller while still being executable.

What I just finished: -f and -c in build arguments - you can include the Flare files (only ones you use) with -f so Flare doesn't need to be downloaded at all, and you can minify your project using -c to reduce its filesize to about 2/3 of what it was (using the demo as an example, 137kb to 90kb with pretty much all of Flare included).

Still not entirely sure what the take is on minified downloads as certain programs I've seen on here have a minified version, so be prepared to remove links to minified downloads if you use the -c flag and distribute that build.

Edit, ninja'd :ph34r: I'm quite the opposite of familiar with CLI, couldn't even manage to find the path for 'git' in cmd and ended up using Windows PowerShell from the GitHub client to fix the issue (the issue is fixed by the way, it was some weird login thing).

Edited by awsumben13, 19 August 2015 - 07:29 PM.


#16 TheOddByte

    Lazy Coder

  • Members
  • 1,607 posts
  • LocationSweden

Posted 19 August 2015 - 08:51 PM

I gotta say, this is extremely well made, and I love to see all the future stuff that you're going to add as well, I fell in love with the animations as soon as I saw them, they're smooth and just look really nice.

And I noticed something that may or may not have been intentional, but when selecting text with the mouse in the "TextInput" tab, it doesn't automatically scroll to continue selecting text to the right, well technically it selects the text, but it just doesn't scroll further so you can't really see everything that you're selecting.
And I don't think it should de-select the text when you're using the scrollbar using the mouse( left mouse button for example ).

#17 Lyqyd

    Lua Liquidator

  • Moderators
  • 8,465 posts

Posted 19 August 2015 - 09:23 PM

View PostDr. Poof, on 19 August 2015 - 07:15 PM, said:

Why? Are you trying to get people with many libraries to make their PCs fill up faster?

Yep, that's definitely it. Evil ol' admin trying to fill up your hard drive. Totally unrelated to trying to protect users from malicious code.

View Postawsumben13, on 19 August 2015 - 07:27 PM, said:

My packager didn't actually add any characters, it replaced a slash followed by a newline with a slash followed by an 'n'. Anyway, by minified, I mean using an actual Lua minifier tool (parsing and rebuilding the whole Lua file, removing un-needed whitespace, making local names smaller). Its entire purpose is to make the source code smaller while still being executable.

What I just finished: -f and -c in build arguments - you can include the Flare files (only ones you use) with -f so Flare doesn't need to be downloaded at all, and you can minify your project using -c to reduce its filesize to about 2/3 of what it was (using the demo as an example, 137kb to 90kb with pretty much all of Flare included).

Still not entirely sure what the take is on minified downloads as certain programs I've seen on here have a minified version, so be prepared to remove links to minified downloads if you use the -c flag and distribute that build.

Edit, ninja'd :ph34r:/> I'm quite the opposite of familiar with CLI, couldn't even manage to find the path for 'git' in cmd and ended up using Windows PowerShell from the GitHub client to fix the issue (the issue is fixed by the way, it was some weird login thing).

Minified alternative downloads would probably be less problematic if they're posted as alternative downloads. The bigger issue is when the primary/authoritative download is obfuscated. There's a difference between "Here's the download, and here's a minified version if you're neurotic about disk space" and "Here's the obfuscated download (oh, and here's a plain text version that might or might not be the same code, to keep the staff happy)."

#18 HPWebcamAble

  • Members
  • 933 posts
  • LocationWeb Development

Posted 19 August 2015 - 10:27 PM

View PostLyqyd, on 19 August 2015 - 06:47 PM, said:

I'm not sure what you mean by minified...

You must have heard of Lua Minifier? No? Ok
https://mothereff.in/lua-minifier

#19 Lyqyd

    Lua Liquidator

  • Moderators
  • 8,465 posts

Posted 19 August 2015 - 10:37 PM

Oh, I know what minification is, there just had only been mention of a packager previously, so I assumed it was a reference to the packaging tool and was confused because it does not minify. It has since been clarified, but thanks.

#20 cyanisaac

  • Members
  • 369 posts
  • LocationSan Diego, CA

Posted 20 August 2015 - 01:41 AM

you mods sure do hate any form of obsfucation/minification, I can't help but feel like not many people would intentionally create something to sabotage users.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users