←  APIs and Utilities

ComputerCraft | Programmable Computers for Minecraft

»

Titanium - Graphical User Interface (GUI)...

Poll: Titanium

How much do you like Titanium?

You cannot see the results of the poll until you have voted. Please login and cast your vote to see the results of this poll.

Do you think you will use Titanium when stable?

You cannot see the results of the poll until you have voted. Please login and cast your vote to see the results of this poll.

Are you willing to beta test in the future?

You cannot see the results of the poll until you have voted. Please login and cast your vote to see the results of this poll.
Vote Guests cannot vote

hbomb79's Photo hbomb79 14 Oct 2016

Titanium

Latest version: v0.1.0-beta.1 (changelog). View docs

See here for information regarding NEW developer tools

Well, I know what you are thinking, another substandard GUI framework. Not so fa--. Yeah, you are likely correct. I would appreciate if you would hear me out though.

Firstly, before I get going I would like to extend an invitation to my Gitter room

Titanium is an 'advanced' GUI framework written in OOP, using a comprehensive custom class engine. It is focused on usability and extensibility. As a result, classes provide static methods to adjust the way the function on a global scale. Titanium uses 'nodes' to display information. A node is, a button, dropdown, text input, scroll container, etc...

To speed up your development, Titanium makes use of a feature named TML (Titanium Markup Language). This XML like language allows you to define your application layout without touching any Lua (example), then simply import it to parse the file and get going. Theme files are also in use (example), they use the same syntax as TML files and allow you to define appearance rules to nodes with certain IDs or classes (or all nodes of a certain type).

Node Queries

Dynamic Values

I could go on for a while, so here is a list of what Titanium currently offers:
- A fleshed out custom class system (single inheritance, mixins, constructor configuration, statics, instance keys, super access, etc)
- TML
- Theme files
- Button
- Checkbox
- Container (no scrolling)
- ScrollContainer (...scrolling)
- ContextMenu
- Dropdown
- Image
- Input (single line, text)
- Label (single line of text)
- PageContainer and Pages (allows quick, easy switching of the application layout)
- Pane (solid block of colour)
- RadioButton
- TextContainer
- EditableTextContainer
- Terminal (allows emulation of term programs)
- Node queries
- Animations with over 40 different easing functions
- Windows (documentation pending)
- DynamicValues (pretty damn awesome, tutorials coming soon)
- Native monitor support (Projector)
- Event binding (for example, assign callbacks (as many as you want) to a certain event: application:on(event, function))
- TabbedPageContainer New!
- DialogWindow New!


Here is a GIF showing the example application. Want to get a more up to date preview? Download it, do it!
Posted Image

Download, Installation and Documentation
This website is still in development, but contains a lot of helpful class documentation (automatically updated), guides and information regarding the installation of Titanium.

The Titanium packager is helpful for users creating projects with Titanium, it will automatically download and start Titanium, as well as creating your custom classes (if any). It is the easiest way to get started.

If you would rather download Titanium manually, TPM can be used -- or you can build the source directly.

Lets wrap this up
I am open to ideas and merge requests, and as such feel free to fork the repo. If you find an issue please submit it through GitLab if you can and it isn't a duplicate issue.

This code is licensed under MIT. Feel free to use Titanium builds in any of your projects (credit would be nice, but not required when only using the build file). Let me know of any cool stuff you make.
If you use the Titanium source in your project, the license must remain with the code and be kept intact.

For an alpha project, I think most would agree this is not too bad. Hopefully, this will become a competitor to the more popular frameworks on the forums.
More sophisticated download/install options will exist upon official release.

If you got this far, thank you for reading - seriously. I look forward to reading your responses. Like Titanium? Don't hesitate to show your support in the GitLab repo (star) or up vote this topic.
Edited by hbomb79, 23 October 2017 - 05:01 AM.
Quote

minebuild02's Photo minebuild02 14 Oct 2016

Man, this. Is. AWESOME!
Too bad I can't use this for Tesseract, it is aimed at overall compatibility after all.
Quote

hbomb79's Photo hbomb79 14 Oct 2016

View Postminebuild02, on 14 October 2016 - 09:17 AM, said:

Too bad I can't use this for Tesseract, it is aimed at overall compatibility after all.

Titanium is trying to be as flexible as possible. Only one file needs to be loaded to get it going, and from their all your buffers are automatically handled and drawn efficiently. I am not familiar with Tesseract, so the problem with using Titanium might be obvious. If there is something I can do to help Titanium fit your needs, be sure to let me know.
Edited by Hbomb_79, 14 October 2016 - 10:15 AM.
Quote

blunty666's Photo blunty666 14 Oct 2016

This looks really good! I've tried a few times to make some kind of GUI framework but never managed to get very far...

The example application you've written helps to detail how it works, but as always some more detailed documentation would help a lot.

I've been creating something that needs a decent GUI, so have a few questions:
1) How does Titanium handle monitors?
2) Can you create nodes / canvases dynamically, 'on the fly', or do they always need to be done though the .tml files?
Quote

hbomb79's Photo hbomb79 14 Oct 2016

Thanks for the compliment, once Titanium is out of alpha my focus will shift from creating new features to fixing and documenting current features. This will be available on the GitLab wiki (not yet created).

1) Titanium currently has no built in support for monitors. I have never really used them to much extent, and I have a feeling it wouldn't be simple. I will think about some elegant ways an application could be run on a monitor instead of the terminal. The `Application` instance already allows resizing, so in theory you could create a custom class (extends Application) that converts monitor events into mouse events, and just redirect the canvas (term.redirect) before and after draw. That way, the program would appear and work on the monitor. May have undesired side effects, but if this feature does get implemented it may be something like that (use of term.redirect before drawing, etc)

2) Titanium nodes can be added on the fly, in the GitLab repo `src/classes/nodes` contains the nodes currently available. Simply instantiate the class with some arguments to create a node, and then add it to the application using (with respect to the example application) `Manager:addNode( NodeInstanceGoesHere )`.

local Manager = Application()
Manager:addNode( Button( "Hello World", 2, 2, 13 ):set{ backgroundColour = colours.red, id = "exampleButton" } ) --# text, X, Y, width
--# This would work for any nodes used in TML (all in the nodes directory). Eg: Input, ScrollContainer, Image, Dropdown, Label

That button can be targeted in theme files using its ID instantly, just as if it were added via TML (TML simply parses the file and adds the nodes the same way)
Edited by Hbomb_79, 14 October 2016 - 11:40 AM.
Quote

H4X0RZ's Photo H4X0RZ 14 Oct 2016

Awesome, as always!

I remember how I tested a really old version of this and helped you with finding bugs. Ahhh, how long ago was that? XD
Edited by H4X0RZ, 14 October 2016 - 11:46 AM.
Quote

hbomb79's Photo hbomb79 14 Oct 2016

View PostH4X0RZ, on 14 October 2016 - 11:45 AM, said:

Awesome, as always!
Thanks!

View PostH4X0RZ, on 14 October 2016 - 11:45 AM, said:

I remember how I tested a really old version of this and helped you with finding bugs. Ahhh, how long ago was that? XD

Haha yeah, that must have been 'DynaCode'. What a mess. Titanium was my 'remake' of that botched attempt. I think it has come a long way.
Quote

blunty666's Photo blunty666 14 Oct 2016

Ah ok, I might have a go at implementing for monitors this weekend. Does Titanium use 'mouse_up' events as well, or just 'mouse_click'?

Like you say, the easiest way might be to have an appication class for each monitor (in it's own coroutine), then an event handler on top that changes the monitor events to mouse ones, which passes them to the correct application and redirects the term at the same time.

Only had chance to have a quick look at the type of nodes, is there one that can be used to display a list?
Quote

hbomb79's Photo hbomb79 14 Oct 2016

View Postblunty666, on 14 October 2016 - 11:56 AM, said:

Does Titanium use 'mouse_up' events as well, or just 'mouse_click'?
Yup

View Postblunty666, on 14 October 2016 - 11:56 AM, said:

Like you say, the easiest way might be to have an appication class for each monitor (in it's own coroutine), then an event handler on top that changes the monitor events to mouse ones, which passes them to the correct application and redirects the term at the same time.
If the content of each monitor is the same, it maybe best to use one Application instance, but use a custom draw function to iterate over each monitor. This way, only one application is running and catching the events and all monitors will be synced up with each other (using multiple applications will mean the content will differ between monitors too). Take a look at some of the classes to get the basic idea of how the system works if you aren't familiar with OOP (or this particular implementation of OOP). This method would require no use of coroutines.

View Postblunty666, on 14 October 2016 - 11:56 AM, said:

Only had chance to have a quick look at the type of nodes, is there one that can be used to display a list?

No, not really. It would be best right now to use a ScrollContainer and dynamically populate it with values.
Edited by Hbomb_79, 14 October 2016 - 12:02 PM.
Quote

H4X0RZ's Photo H4X0RZ 14 Oct 2016

About the monitor thing: what about adding a "monitor node" which allows you to put some stuff on a monitor? Granted, it's always nice to have programs which work both on monitors and a computer itself but it would also be nice to "enhance" the space you can write your app on. You could also add the ability to define the monitor size, type, etc.
Quote

Wilma456's Photo Wilma456 14 Oct 2016

This looks Awesome! But I have a few Questions:

1) Can you make a better Documentention with more Examples? You only have one example that show all posibilities, but if you want strt with this Framework, its better to have one example for each feature.

2) If have seen, theres a function called addThread. It is possible to make multitasking with this function?

3)If is possible to chnage the folders of this. Because I need /bin for my OS.
Edited by Wilma456, 14 October 2016 - 02:58 PM.
Quote

thecrimulo's Photo thecrimulo 14 Oct 2016

Okay I don't usually comment of showcase posts but this is plain awesome.

It has a lot of features and I love the UI, but overall, my preferred thing was TML.
TML reminded me of XAML, this Microsoft's thing to make applications using XML-like syntax, and I don't know why but
I feel that when this is stable I might use it a lot. The whole idea of using markup language and then adding its functionalities
is plainly great and I don't know how anyone has come up with something like this before.

I can't wait for the release!
Nice thing
~Dael
Quote

hbomb79's Photo hbomb79 14 Oct 2016

View PostH4X0RZ, on 14 October 2016 - 12:23 PM, said:

About the monitor thing: what about adding a "monitor node" which allows you to put some stuff on a monitor? Granted, it's always nice to have programs which work both on monitors and a computer itself but it would also be nice to "enhance" the space you can write your app on. You could also add the ability to define the monitor size, type, etc.

Yeah, I actually like that idea. It might take a bit of messing around in terms of the monitor events, but it wouldn't be too hard at all. I guess, instead of drawing itself to the application it would draw straight to the term (using TermCanvas, much like Application). Not sure about optimization and such, but the screen would still only change when something changes in the application.

View PostWilma456, on 14 October 2016 - 01:47 PM, said:

This looks Awesome! But I have a few Questions:

1) Can you make a better Documentention with more Examples? You only have one example that show all posibilities, but if you want strt with this Framework, its better to have one example for each feature.

2) If have seen, theres a function called addThread. It is possible to make multitasking with this function?

3)If is possible to chnage the folders of this. Because I need /bin for my OS.

Thanks for the compliment!

1) I am planning on writing comprehensive documentation when Titanium leaves alpha and enters beta (which, should be soon).

2) Yes, it's purpose is to function as a coroutine manager, allowing you to add/remove threads on the fly. The terminal node uses this.

3) Yeah, only one file is needed to get Titanium loaded and it can be wherever you like.

View Postthecrimulo, on 14 October 2016 - 06:21 PM, said:

Okay I don't usually comment of showcase posts but this is plain awesome.
Haha, thank you for showing your support!

View Postthecrimulo, on 14 October 2016 - 06:21 PM, said:

I feel that when this is stable I might use it a lot.
I better hurry up then!
Quote

hbomb79's Photo hbomb79 15 Oct 2016

View PostWilma456, on 14 October 2016 - 01:47 PM, said:

Can you make a better Documentention with more Examples?

View Postblunty666, on 14 October 2016 - 11:27 AM, said:

The example application you've written helps to detail how it works, but as always some more detailed documentation would help a lot.

I edited the OP to include a link to the GitLab wiki. It is still very early stages though.

Edit: The wiki is coming along well. Fully documented Node and Button so far along with some pages explaining basic application development.
Edited by Hbomb_79, 16 October 2016 - 10:04 AM.
Quote

FrancisOwer's Photo FrancisOwer 18 Oct 2016

Tonight I have been working on rewriting the LuaHUD manual for COAL. I was also planning soon to take the current language docs and HTML-ify them for the website.

So perhaps we should collaborate on this?
Quote

hbomb79's Photo hbomb79 19 Oct 2016

Titanium packager has been the focus of some updates recently. Many changes have been made, amongst them are some important ones:
  • VFS can be disabled
  • A range of exclusion options can be used to exclude certain paths from extraction, VFS inclusion, class loading, or the entire packager
  • The help menu has had a facelift and is a lot easier to read when run via ComputerCraft
  • Steps have been taken to resolve issue 34
  • When the source is minified, the output file is also minified (as in, the code to load the package is minified - not just the packaged files)
Note: If the VFS is disabled, the init file the package is told to run must be extractable - otherwise the package has no other way to access it.

View PostFrancisOwer, on 18 October 2016 - 01:09 PM, said:

Tonight I have been working on rewriting the LuaHUD manual for COAL. I was also planning soon to take the current language docs and HTML-ify them for the website.

So perhaps we should collaborate on this?

I am a little confused as to what collaborating with you on this would entail. I am not familiar with LuaHUD/COAL and have only written websites from scratch, not converted some arbitrary format to HTML. I might be able to help with more information.
Edited by Hbomb_79, 19 October 2016 - 11:05 PM.
Quote

H4X0RZ's Photo H4X0RZ 22 Oct 2016

Is it possible to create our own nodes?
If that's possible this would feel so much like React (currently my favourite "native mobile" and front-end framework) IMO.
Quote

hbomb79's Photo hbomb79 22 Oct 2016

View PostH4X0RZ, on 22 October 2016 - 01:24 AM, said:

Is it possible to create our own nodes?
If that's possible this would feel so much like React (currently my favourite "native mobile" and front-end framework) IMO.

Absolutely! Titanium is extensible, and as such you can create your own classes (any that you want, not just nodes) and use them. As long as the class extends node in some way, the class will function like any other node in Titanium and be definable inside of TML and target-able via Theme files. For example, 'Button' extends 'Node', and 'ScrollContainer' extends 'Container' which extends 'Node'. It doesn't matter how layers deep the node is, as long as it extends 'Node' somewhere.

The Titanium packager should be used when using custom classes, as it allows you to define your class source files and load them automatically. This means they are loaded via Titanium's class system, compiled and made available to the environment. Without using the packager, you would have to load and compile the classes manually, which is just a pain.

If you want to see an example, Plexus is a project I have been using Titanium for - it is sort of a test program. It uses custom nodes, they extend 'Button' which extends 'Node' which means they work just like any other nodes. Plexus is packaged using the Titanium Packager, meaning the class files are automatically loaded and the program is started inside of one file (uses a virtual file system).

Titanium's default nodes are also a good place to start when learning how to implement basic functionality, Button is a straightforward one. Let me know if you need anything else, or hop into Gitter.
Edited by Hbomb_79, 22 October 2016 - 02:39 AM.
Quote

hbomb79's Photo hbomb79 29 Oct 2016

In an effort to make using Titanium even easier, an installer now exists for those who either cannot, or would rather not download the build files manually.

Titanium now offers a manager, which can install and keep Titanium up to date for you. The source is available on GitLab

To allow easier installation via ComputerCraft, a pastebin fetcher exists

Edit: This information has also been added to the OP post.
Edit 2: The old argument system sucked, so I recreated it with flags instead. See here for more information


This system should no longer be used - please refer to OP post (under download section) to learn about the TPM installer, or just get it now:

pastebin run 5B9k1jZg --# Downloads TPM to 'tpm', pass an argument to define a custom location
tpm help --# Show the in program help
tpm install Titanium --dest <shortcutPath>

Edited by Hbomb_79, 04 November 2016 - 08:44 AM.
Quote

Androthia's Photo Androthia 03 Nov 2016

When I install via Titanium manager, it says download, then decoding, then goes black. Uhmmm....ok?
Quote