Titanium - Graphical User Interface (GUI)...
hbomb79 14 Oct 2016
Titanium
Latest version: v0.1.0-beta.1 (changelog). View docsSee 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!
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.
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.
Too bad I can't use this for Tesseract, it is aimed at overall compatibility after all.
hbomb79 14 Oct 2016
minebuild02, 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.
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?
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?
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 )`.
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.
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.
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.
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.
hbomb79 14 Oct 2016
H4X0RZ, on 14 October 2016 - 11:45 AM, said:
Awesome, as always!
H4X0RZ, 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.
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?
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?
hbomb79 14 Oct 2016
blunty666, on 14 October 2016 - 11:56 AM, said:
Does Titanium use 'mouse_up' events as well, or just 'mouse_click'?
blunty666, 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.
blunty666, 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.
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.
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.
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.
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
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
hbomb79 14 Oct 2016
H4X0RZ, 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.
Wilma456, 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.
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.
thecrimulo, on 14 October 2016 - 06:21 PM, said:
Okay I don't usually comment of showcase posts but this is plain awesome.
thecrimulo, on 14 October 2016 - 06:21 PM, said:
I feel that when this is stable I might use it a lot.
hbomb79 15 Oct 2016
Wilma456, on 14 October 2016 - 01:47 PM, said:
Can you make a better Documentention with more Examples?
blunty666, 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.
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?
So perhaps we should collaborate on this?
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:
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.
- 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)
FrancisOwer, 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?
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.
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.
If that's possible this would feel so much like React (currently my favourite "native mobile" and front-end framework) IMO.
hbomb79 22 Oct 2016
H4X0RZ, 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.
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.
hbomb79 29 Oct 2016
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.
Androthia 03 Nov 2016
When I install via Titanium manager, it says download, then decoding, then goes black. Uhmmm....ok?