Chat UI - A UI toolkit for the vanilla chat box


#1

Edit: Chat UI is no longer work in progress!

It has been released, you can find the Ore post here: https://ore.spongepowered.org/simon816/Chat-UI
and the corresponding forum post:

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.

Screenshot

Private Messages

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

Screenshot

The otherplayer 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:
Screenshot

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

Screenshot

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:
Screenshot
(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: https://github.com/simon816/TabbedChat

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:



Book based Menu GUI with Shop
Holograms - Easily create floating texts!
Chat UI - A User Interface library and plugin for creating GUIs in the chat box
Sponge pagination service - format text into table-like structure
PermissionsEx premade config [REQUEST]
#2

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


#3

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


#4

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.


#5

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?


#6

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


#7

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


#8

Mind=blown, that's just amazing...


#9

I'm getting carried away...


#10

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


#11

Are you imagining region resizing / faction map?


#12

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).


#13

I doubt this would be very useful, but here's a text editor


#14

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

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


#15

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


#16

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


#17

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


#18

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


#19

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


#20

So I used the unicode braille block...


Edit: Oh, and GIF support