Creating a desktop environment style GUI

User avatar
KaVir
Posts: 86
Joined: Mon Feb 08, 2010 8:38 pm
Contact:

Creating a desktop environment style GUI

Post by KaVir »

Last night I decided to have another go at writing a Mudlet script, and (copying Vadi's fancy gauge stylesheet) was quickly able to come up with three energy bars:

Image

They work fine, but I had to change the margins in my settings to stop them drawing over the text. What I'd really like to do is define the size of the text window within the script itself, like MUSHclient's TextRectangle() function, so that I can draw a background image behind it to create a desktop environment style GUI, with space around the text window that I can use for maps, energy bars, icons and buttons.

I saw in another thread that Glass had done the same sort of thing, so it must be possible, but I can't find anything in the manual or from my thread searches - perhaps I'm just using the wrong keywords?

Can anyone help point me in the right direction? Any suggestions would be much appreciated!

User avatar
Heiko
Site Admin
Posts: 1548
Joined: Wed Mar 11, 2009 6:26 pm

Re: Creating a desktop environment style GUI

Post by Heiko »

There are functions to set the size of the top, left, right, top and bottom borders via scripts. This essentially limits the main console to the screen size - borders. You can then use the free screen space for your GUI stuff. You can layer labels to achieve any kind of visual complexity, but make sure that you use transparent images. Labels are stacked on top of each other in creation order. Also note that you must set the background color to true and chose a fully transparent background color in order to display images.

User avatar
Heiko
Site Admin
Posts: 1548
Joined: Wed Mar 11, 2009 6:26 pm

Re: Creating a desktop environment style GUI

Post by Heiko »

You should implement your GUI using our layout manager (Geyser). This will automatically size and resize all components appropriately.

User avatar
KaVir
Posts: 86
Joined: Mon Feb 08, 2010 8:38 pm
Contact:

Re: Creating a desktop environment style GUI

Post by KaVir »

Thanks for the quick response. Just to confirm I understand correctly, is this what you're saying I should do?

1. Define the text area using setBorderTop(), setBorderBottom(), etc.

2. Use createLabel() and setBackgroundImage() to cover the entire window with a textured image.

3. Use createLabel() and setBackgroundColor() to colour the (smaller) text area black.

Is there any way to specify tiled images in step 2? Or should it be done manually with a series of labels?

I'll check out Geyser, but a lot of the components I plan to use can't really be resized without losing quality. In my MUSHclient plugin I only resize the text window and the energy bars, and I was hoping to create a similar interface for Mudlet. The energy bars in the above screenshot are already based on the screen size.

User avatar
KaVir
Posts: 86
Joined: Mon Feb 08, 2010 8:38 pm
Contact:

Re: Creating a desktop environment style GUI

Post by KaVir »

The images always seemed to be drawn on top of the text, so I tried cutting out left/right/top/bottom sections and displaying them around the edge of the window - a little less convenient, but it seems to work pretty well. I'm only using static images at the moment, as I just wanted to see if it would work (and get a better feel for the scripting), but it should give you a rough idea of what I've got in mind:

Image

Now to see if I can get it drawing maps...

User avatar
Omit
Posts: 190
Joined: Sun Aug 01, 2010 10:54 pm
Location: Middle Earth
Contact:

Re: Creating a desktop environment style GUI

Post by Omit »

Check out my 2d map for Pre-8 post.... It will draw a map that you can embed into the main window. (assuming you are using mudlet to map)Link to the post

User avatar
Vadi
Posts: 4901
Joined: Sat Mar 14, 2009 3:13 pm

Re: Creating a desktop environment style GUI

Post by Vadi »

This looks better though, doesn't it? The scrollbar is placed beside the text.

User avatar
KaVir
Posts: 86
Joined: Mon Feb 08, 2010 8:38 pm
Contact:

Re: Creating a desktop environment style GUI

Post by KaVir »

Thanks for the link Omit, I saw your map before and it's very nice, but I'm not sure it would really be suitable for my mud.

However I've got my maps working now, using ATCP/MSDP, along with avatars of nearby things below the zoomed map (still need to add their energy bars and make them clickable).

Image

I'm still having some problems though, so any further help would be greatly appreciated. In particular:

1. The buildings on the zoomed (lower) map are supposed to have transparent backgrounds, but they're actually being displayed with white backgrounds. Is there an easy way to change this?

2. The avatars are supposed to be resized, so that you see rows of small avatars below the zoomed map, and when you click on one (to target it) you see the full-sized version on the bottom-left corner of the screen beside the combat icons. Right now it's just showing the top-left corner of the full-sized avatars, instead of shrinking them to fit. I tried resizeWindow(), but that didn't resize the image, just the window itself. The other option would be to provide two sets of avatars, but I'd rather avoid that if at all possible.

3. There's supposed to be a thin circle around the centre of the top map, to show which part of it the zoomed map represents. This isn't a huge issue when you're outdoors (as the circle is always in the centre anyway), but when you're in a dungeon the top map is static and the circle moves around, revealing more of the dungeon as you explore. On a related note, the zoomed map is supposed to have coloured dots to indicate your character, other players, mobs and objects. Is there some way to draw basic shapes, or would these need to be loaded as images?

4. Is there any way to customise the appearance of the scrollbar? Perhaps just make it a little darker, so it doesn't look so out of place with the rest of the interface?

User avatar
Vadi
Posts: 4901
Joined: Sat Mar 14, 2009 3:13 pm

Re: Creating a desktop environment style GUI

Post by Vadi »

1) Did you change the fillBackground property? (createLabel( name, posX, posY, width, height, fillBackground)), set it to 1

2) Not sure.

3) Can't draw shapes yet.

4) That's not exposed to Lua scripting yet.

User avatar
Heiko
Site Admin
Posts: 1548
Joined: Wed Mar 11, 2009 6:26 pm

Re: Creating a desktop environment style GUI

Post by Heiko »

You made quick progress!
1. You have to set a fully transparent background color for the label to display transparent images. (Look at my old Achaea compass demo (the green compass). This uses transparent images.

2. Resizing labels has been a common request and it might make it into 2.0, but I don't know if I find the time to do this until then, so you'll have to use 2 sets of image sizes for now.

3. The red circle issue can be solved by using a transparent circle via a label overlay. Mudlet doesn't have a low level drawing API at the moment, so layered labels are the only solution.

4. I'll try to add a function to change the scroll bar color. Actually, you can customize all of the Qt GUI elements via css, but I don't remember if this function still exists ( it did in some super early version of Mudlet).

Post Reply