Geyser UI Template

[Akaya]

This template can be used as a quick-start for a Geyser UI. Each widget has its name displayed for ease of use.
The gauges are useless until you attach them to a value, whether it be health, mana, etc.
The template includes the CSSMan script created by Vadi and found here. It is used to alter individual pieces of the stylesheet.

Nothing about this template is MUD specific which makes it a great starting point for any UI.

Here's a short guide to help you get started:

The Geyser Template includes an assortment of labels you can use as containers for your UI elements. These labels have their respective names printed on them. GUI.Box1 for example. Use these names when scripting to refer to the labels.

Here is an example of how to display text on GUI.Box4:

Code: [show] | [select all] lua

GUI.Box4:echo(“Hello World!”)

The Geyser Template includes four gauges at the bottom that can be used to track anything you'd like but are named GUI.Health, GUI.Mana, GUI.Endrance and GUI.Willpower by default. Use these names when scripting to refer to the gauges.

Here is an example of how the GUI.Health gauge can be set:

Code: [show] | [select all] lua

GUI.Health:setValue(50, 100)

The Geyser Template includes twelve labels at the top you can use for icons (GUI.Icon#).

Here is an example of how GUI.Icon1 can be clicked to kick a goblin:

Code: [show] | [select all] lua

GUI.Icon1:setClickCallback(“kick”, “goblin”)
function kick(target)
  send(“kick “..target)
end

The Geyser Template has a dark purple background by default. The background stylesheet is stored as GUI.BackgroundCSS and can be referred to as such when scripting. The Geyser Template has four borders named GUI.Top, GUI.Bottom, GUI.Left and GUI.Right which all share this stylesheet.

Here is an example of how to change the entire background to a dark red:

Code: [show] | [select all] lua

--first we set the background-color in the stylesheet to a dark red
GUI.BackgroundCSS:set(“background-color”,”rgb(50,0,0)”)
--then we need to apply the stylesheet to each border
GUI.Top:setStyleSheet(GUI.BackgroundCSS:getCSS())
GUI.Bottom:setStyleSheet(GUI.BackgroundCSS:getCSS())
GUI.Left:setStyleSheet(GUI.BackgroundCSS:getCSS())
GUI.Right:setStyleSheet(GUI.BackgroundCSS:getCSS())

As you can see in the above example, we can add “CSS” to the end of our names to update the CSS manager and again to set the stylesheet.

We can use this method to set other values as well. Here's an example of how to change the border of GUI.Box7 to a thick, dotted yellow line:

Code: [show] | [select all] lua

--Since GUI.Boxes all share a common stylesheet like borders, we'll
--want to create a new stylesheet so we can change just GUI.Box7
--Let's call it GUI.Box7CSS
GUI.Box7CSS = CSSMan.new(GUI.BoxCSS:getCSS())
--Now we can set the values of GUI.Box7CSS
GUI.Box7CSS:set(“border-width”, “3px”)
GUI.Box7CSS:set(“border-style”, “dotted”)
GUI.Box7CSS:set(“border-color”, “yellow”)
--And finally set the stylesheet using GUI.Box7CSS
GUI.Box7:setStyleSheet(GUI.Box7CSS:getCSS())

A great place for the Mudlet mapper widget is GUI.Box1. Here's an example of how to place it in your GUI with a nice border:

Code: [show] | [select all] lua

GUI.Map_Container = Geyser.Container:new({
name = "GUI.Map_Container",
x = 0, y = 0,
width = "100%",
height = "100%",
},GUI.Box1)

GUI.Mapper = Geyser.Mapper:new({
name = "GUI.Mapper",
x = 20, y = 20,
width = GUI.Map_Container:get_width()-40,
height = GUI.Map_Container:get_height()-40,
},GUI.Map_Container)

--the map's default background color is black, so lets blend it in...
GUI.Box1CSS = CSSMan.new(GUI.BoxCSS:getCSS())
GUI.Box1CSS:set("background-color", "black")
GUI.Box1:setStyleSheet(GUI.Box1CSS:getCSS())

[/b]
Install using the Package Manager!

Template.zip

(1.9 KiB) Downloaded 5973 times

[icesteruk]

Ah, Thats cool..!!

Guess it's for 'any size monitor' ?

[Akaya]

Yep.

[Belgarath]

Great release, Akaya. I will most definitely look into this.

[icesteruk]

The picture attached is what I've done so far..

Only one issue I seem to be having is the 'size' my screen is 1366x768 and the window for the game seems to get overlapped.. granted its not that big of an issue as im only on a small laptop.. (ive restructed the left side to me smaller then what the template above did )

[Akaya]

I made the default size of the main console 50% of the main window and each side at 25%. Bottom and top are 10%. Changing the values in the Background script will alter these. Easy enough to do. Seems like you already got it down You can also try adjusting the word wrap of the main window in-game or in Mudlet Settings.

Glad you're enjoying it. Looks great! Love the affliction colors! Keep up the great work, icesteruk. You seem to be learning a lot lately.

[icesteruk]

I can post that script if you want it? I use it for most stuff... the "Enemy!" will be the same and that box below that affliction will be turned into peoples name... I use different colors depending on if they're ally/friend/ooc friend or enemies..

really unsure what to do with the top buttons... as can you use TEXT as it? or does it have to be graphics?

[Akaya]

I can post that script if you want it?

I always encourage posting your work. It opens the door for improvement.

really unsure what to do with the top buttons... as can you use TEXT as it? or does it have to be graphics?

You can definitely add text to it. Just change the name display echo's to whatever you want. In the past, I've used such icons as clickable abilities with cooldown timers. If you also notice, I included 12 icons by default to represet each F key making them perfect for macros.

[icesteruk]

Aye, I was going to put them as my on/off buttons.. changing from green (on) to red(off). but I dont fancy uing graphics as that'll mean sending out them graphics with my system too heh

[Akaya]

Adding images to your package is a matter of getting the image paths correct. Include your images in a zip file. When the user installs the zip via the Package Manager, the images will be unzipped to getMudletHomeDir(). I do something like this set images up in my stylesheets:

Code: [show] | [select all] lua

mylabel:setStyleSheet([[
  border-image: url("]]..getMudletHomeDir():gsub("\\","/")..[[/myimage.png");
]])

The gsub() with getMudletHomeDir() is done for Windows users so your scripts can remain cross platform.