Chat UI - A UI toolkit for the vanilla chat box

Edit: Chat UI is no longer work in progress!

It has been released, you can find the Ore post here: simon816 / Chat UI
and the corresponding forum post:
Chat UI - A User Interface library and plugin for creating GUIs in the chat box

Quick links

Demo

Demo gif

Old Post

Edit: a lot of new thing have been created since the initial post.
Here is a more up-to-date description. More can be found on the readme.

Chat UI

A User Interface Toolkit for drawing GUIs in the Vanilla Minecraft chat box.
Written using the Sponge API, compatible with versions 4.x and current 5.0.0 snapshots.

Early access downloads on the Releases page!

Features

This plugin allows players to perform tasks using a graphically based interface as opposed to the traditonal command based interface.

Player List

This screen uses the TableUI to list all players on the server. If you have the admin permisson, you can kick and ban players directly from this list.

Private Messages

From the player list, click ‘Message’ to start a private message with that player.

ss+(2016-09-11+at+03.07.19)

The other player will see this before clicking on the tab:
Screenshot
Where ‘(1)’ is the number of unread messages.

Configuation Editor

Only accessible if you have the admin permission.
The configuration editor is another use of TableUI.
It allows navigating through a key:value based config file (uses configurate’s ConfigurationNode).
There are two types of values: simple and complex.
A simple value is either a number, boolean or a string. A complex value is a list or a map.
To open a complex value, click on it and it will navigate to that node. Keep track of the current path by observing the ‘breadcrumb’ at the top. Click on any part of a breadcrumb to go back to that node.

To edit a simple value, clicking on the value will highlight that row. You can type in chat the new value of the node, or click again on the value to prompt the value in chat.
Example screen:

New nodes can be created by clicking the [New] button.

Here, you enter the name of the key in chat. Then click on the type of value, and optionally enter the value afterwards.

Canvas

The canvas tab defines a drawing context (similar to JavaScript’s 2D canvas context).
Shapes an images can be drawn on the canvas. The context is a x*y plane of ‘pixels’ that can be set to different colors.
There are two types of drawing contexts: ‘block’ and ‘braille’. Block uses a unicode block character to form a grid, while braille uses the unicode braille characters to form a grid of smaller pixels.
Sine wave example using block context:
ss+(2016-09-11+at+03.24.42)
(Note: The black empty characters are support characters, I’ve yet to find an invisible 9x9 character.

Animations are also possible by using SpongeAPI’s scheduler to push updates to the client if the tab is active.

Permissions

Currently only one permission is defined, the admin permission.

Admin Permission: chatui.admin

Old Old Post

This is a concept I have come up with: Interacting with the game and chatting to players by using the chat interface.

At the moment it is just very basic but I can see this can expand to become as versatile as the chest inventory style of interface.

Source code now available: GitHub - simon816/ChatUI: A User Interface library and plugin for creating GUIs in Minecraft's chat box

I tried to get it to work with the pagination service but with the API as it is now I would have to implement the entire pagination system as opposed to just provide a wrapper around it. Services can now be wrapped

Here’s a rough demo:


30 Likes

@simon816
This looks incredible!
Very unique and awesome idea. I could see using this for my server (If i had one, xD).

2 Likes

This will likely break scrolling for people, any chance of adding a scrollbar?

1 Like

That was one of the things that I would like to add.
You won’t be able to use page up/down or mouse scroll but I can add buttons to navigate up and down.

Chat space is precious though.

If I were making this I’d use the very bottom line as a status bar, marking unread pm’s / notifications. then a single line of seperators before chat buffer. and use the top as the menu since you need to press t to click on chat anyway it will auto expand and give you the menu, out of the way the rest of the time.

What does it look like in forced unicorncode mode?

1 Like

I’m really looking foreword to this awesome plugin! No more chat room commands, just a simple click to join C:

drawRect(5, 5, 10, 10, TextColors.WHITE);
drawRect(6, 6, 9, 9, TextColors.RED);
drawRect(7, 8, 15, 10, TextColors.BLUE);
drawCircle(20, 12, 4, TextColors.GREEN);

OK I cheated on the circle because cba to figure out how to draw circles

1 Like

Mind=blown, that’s just amazing…

I’m getting carried away…

4e2ac25469816cdd4bfa8ccc200e99aeb3b09567

8 Likes

:open_mouth:
How? How is this wonder possible? Great work is an understatement…

5 Likes

Are you imagining region resizing / faction map?

Ooh now there’s an idea :smile:

I’m not really sure what applications this would be used for, I just like experimenting with what is possible and what I can make the game do, this time with chat.

I think I will release this as an API for other plugins to build on top of, but also provide some out-of-the-box functionality too (like private chat).

2 Likes

I doubt this would be very useful, but here’s a text editor
581d7760db8a56d2248c92b24aa57d0396d7339b

8 Likes

But… but… I made a text editor… A much worse editor…

GG! You have truly mastered the way of the chat.

1 Like

Source code now available if anyone’s interested https://github.com/simon816/TabbedChat

1 Like

I’ve been posting a lot of gifs recently, but that’s because I’ve been experimenting
Here’s another
0379693209e020742bbb8698f6cd5a3785329028

3 Likes

I can’t even do that math yet… (It’s a sine waves, yes?)
Incredibly awesome… Again. :slight_smile:

1 Like

You will expose this cool text editor and other things in an api to be used in plugins, am I right?

Yes, it will be have a public API. You can get a flavour for the current design by looking at the source code

2 Likes

So I used the unicode braille block…
ab32fa8061034c2669d5bcd26f1155c70df89871

Edit: Oh, and GIF support
79e3e421d99d052a63515381642a2dea716a87bc

5 Likes