Register forum user name Search FAQ

Gammon Forum

Notice: Any messages purporting to come from this site telling you that your password has expired, or that you need to verify your details, confirm your email, resolve issues, making threats, or asking for money, are spam. We do not email users with any such messages. If you have lost your password you can obtain a new one by using the password reset link.

Due to spam on this forum, all posts now need moderator approval.

Entire forum ➜ MUSHclient ➜ Miniwindows ➜ MiniWindows [House of Ghouls]

MiniWindows [House of Ghouls]

It is now over 60 days since the last post. This thread is closed. Refresh page

Pages: 1 2 3

Posted by

Nick Gammon Australia (23,158 posts) Bio Forum Administrator

Date

Reply #15 on Sun 10 Aug 2008 06:33 AM (UTC)

Message

Hmm - I knew those gradients would come in handy! :)

And I see your progress bars now have a sort-of 3D cylindrical look, very nice.

Perhaps put commas in the numbers (especially the bank and gold amounts)? There is a function to do that in commas.lua that comes with MUSHclient.

- Nick Gammon

www.gammon.com.au, www.mushclient.com

Posted by

Darwin USA (125 posts) Bio

Date

Reply #16 on Sun 10 Aug 2008 07:51 AM (UTC)

Message

Thanks, those numbers do look better with commas in them. :)

Posted by

David Haley USA (3,881 posts) Bio

Date

Reply #17 on Sun 10 Aug 2008 08:27 PM (UTC)

Message

Looking good, Darwin. This is a great use of a great feature. :-)

/me is happy to see all this.

David Haley aka Ksilyan
Head Programmer,
Legends of the Darkstone

http://david.the-haleys.org

Posted by

Darwin USA (125 posts) Bio

Date

Reply #18 on Mon 11 Aug 2008 07:51 PM (UTC)

Message

I've been playing around with gradients and have created a 4 colour gradient bar. This image has two sets, the TNL bar on the top set was changed from red, orange, yellow, white to red, blue, green and yellow to better show where each gradient is. I did add a vertical line to make it easier to pinpoint where the actual percentage is represented.

http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_Gradients_01.png

Posted by

Nick Gammon Australia (23,158 posts) Bio Forum Administrator

Date

Reply #19 on Mon 11 Aug 2008 10:12 PM (UTC)

Message

Looks good (don't forget the commas!).

Some of that text is hard to read, see this post I just wrote about how to XOR text onto the gauge to make it more readable:

http://www.gammon.com.au/forum/?id=8870

- Nick Gammon

www.gammon.com.au, www.mushclient.com

Posted by

Worstje Netherlands (899 posts) Bio

Date

Reply #20 on Tue 12 Aug 2008 07:18 AM (UTC)

Message

Could you share a snippet of code on how you made your gradient? I like Nick's example, but I kind of like your style too, but I've not really been succesful in recreating it.

Posted by Darwin USA (125 posts) Bio

Date

Reply #21 on Wed 13 Aug 2008 01:39 AM (UTC)

Amended on Wed 13 Aug 2008 01:41 AM (UTC) by Darwin

Message

Basically, you supply this function with the window you want the gradient on along with the rectangle coordinates you want it drawn in. After that, you supply the colors. Colour1 through Colour4 are the gradient colors and Colour5 is the mark color. If you're curious, I used Colour instead of Color to fit with the rest of the functions in MUSHclient.

You would use this sometime after creating the window and usually before showing it.

I hope this is commented enough.

function Window.gradient( win, left, top, right, bottom, middle, colour1, colour2, colour3, colour4, colour5 )
        -- load values or create defaults
	Win = win or ""
	Left = left or 0
	Top = top or 0
	Right = right or 0
	Bottom = bottom or 0

        -- gradient 1, first colour
	Colour1 = colour1 or ColourNameToRGB("darkred")

        -- gradient 1, second colour; gradient 2, first colour
	Colour2 = colour2 or ColourNameToRGB("red")

        -- gradient 2, second colour; gradient 3, first colour
	Colour3 = colour3 or ColourNameToRGB("lightcoral")

        -- gradient 3, second colour
	Colour4 = colour4 or ColourNameToRGB("silver")

        -- Mark colour
	Colour5 = colour5 or ColourNameToRGB("black")

	Middle = math.min(middle or 50, 94) -- value between 1 and 100
                                            -- but need room for gradient, so 94
	Width = Right - Left
	Height = Bottom - Top

	-- this is the actual position of Middle
        -- uses original value middle
	Mark = Left+math.ceil(Width*(middle or 100)*.01)

        -- figure out where the middle is
	MidWidth = math.ceil(Width * 0.05)
        -- Middle is 5% of the overall length
	MidLeft = Left + math.ceil((math.max((Middle-5),0)*0.01)*Width)
	MidRight = MidLeft+MidWidth

        -- knowing where the middle is, you can place the other two
        -- on either side of it and fill out the given rect values
	WindowGradient (Win, Left, Top, MidLeft, Bottom, Colour1, Colour2, 1)
	WindowGradient (Win, MidLeft, Top, MidRight, Bottom, Colour2, Colour3, 1)
	WindowGradient (Win, MidRight, Top, Right, Bottom, Colour3, Colour4, 1)

        -- draw 'middle' line
	WindowLine( Win, Mark, Top, Mark, Bottom, Colour5, 0, 1)
end

Posted by

Worstje Netherlands (899 posts) Bio

Date

Reply #22 on Wed 13 Aug 2008 09:17 AM (UTC)

Message

It's commented plenty, thanks. And yay for the british english!

I just got lost at the math with the colour-switching parts, which while it isn't that difficult, is nothing you should do when you're half asleep. :D

Posted by

Nick Gammon Australia (23,158 posts) Bio Forum Administrator

Date

Reply #23 on Wed 13 Aug 2008 09:41 AM (UTC)

Message

You realize, I suppose, that Darwin is one of the capital cities of Australia, thus it is fitting he uses the Australian spelling.

http://en.wikipedia.org/wiki/Darwin,_Northern_Territory

- Nick Gammon

www.gammon.com.au, www.mushclient.com

Posted by

Darwin USA (125 posts) Bio

Date

Reply #24 on Wed 13 Aug 2008 11:08 PM (UTC)

Message

I tried out the XOR-ing the text over the gradients, however I had changed the colors of the gradients, and the gradients themselves, before doing so, so the result wasn't that great. The inverted text over the gradients gives it that hard-on-the-eyes blue-on-red appearance. I think I'm going to stick with white text over the gradients for now, until something better is discovered.

Image here without (top) and with (bottom) text blending.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_Gradients_02.png

Posted by

Nick Gammon Australia (23,158 posts) Bio Forum Administrator

Date

Reply #25 on Thu 14 Aug 2008 (UTC)

Message

Yes, the XOR doesn't look that great does it? You can try different colours for the text in the XOR idea (other than white) - that could give better results.

Or, try this, a shadow:

See the other post I mentioned about the XOR, full details are there.

- Nick Gammon

www.gammon.com.au, www.mushclient.com

Posted by

Darwin USA (125 posts) Bio

Date

Reply #26 on Thu 14 Aug 2008 12:46 AM (UTC)

Message

Yeah, the shadowing makes it look better.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_Gradients_03.png

Your example has a typo in it, probably from copy/paste.

Quote:
font_ascent = WindowFontInfo (wint, "f", 2)

You used 'wint' without creating it first.

Posted by

Nick Gammon Australia (23,158 posts) Bio Forum Administrator

Date

Reply #27 on Thu 14 Aug 2008 01:46 AM (UTC)

Message

Ah that looks better. And I fixed the typo, thanks for that.

- Nick Gammon

www.gammon.com.au, www.mushclient.com

Posted by

Scarn (47 posts) Bio

Date

Reply #28 on Wed 27 Aug 2008 08:09 PM (UTC)

Message

Hey Darwin, awesome client there. Possibilities with these miniwindows seem to be endless.
Would you be able to paste the script and trigger for your Health/Mana etc.. window.
I have a health bar in my INFOBAR but cannot figure out how to get it within a miniwindow.

Would be appreciated, Scarn.

Posted by Darwin USA (125 posts) Bio

Date

Reply #29 on Wed 27 Aug 2008 10:38 PM (UTC)

Amended on Wed 27 Aug 2008 10:44 PM (UTC) by Darwin

Message

All that stuff is pretty much a mess right now. My prompt trigger is very custom and wouldn't be of much use to you unless you have all those same options available to you.

Basically, I have current and max values saved to variables. Then I use 2 sets of 4 gradients to create the 3D-ish graphs and use the text shadowing method to place the text over that.

This code is written in Lua.

Here's some bits of that code:

  -- HP bar graph
	local hp_perc = math.ceil((var.HP_CUR/var.HP_MAX) * 100)

	left = 3

        -- barwidth is width in pixels, defined earlier in the script
	local hp_right = left + math.ceil(barwidth*(hp_perc*.01))

        -- see below for Window.gradient3 function
        -- This gradient is the "background" colour
	Window.gradient3( win, hp_right, top, left+barwidth, bottom, 
                          ColourNameToRGB("midnightblue"), 
                          ColourNameToRGB("indigo"), 
                          ColourNameToRGB("mediumorchid"))

        -- This gradient is the "foreground" colour, actual percentage of HP
	Window.gradient3( win, left, top, hp_right, bottom,
                          ColourNameToRGB("maroon"), 
                          ColourNameToRGB("red"), 
                          ColourNameToRGB("lightcoral"))

        -- draw a frame around it. not necessary
	WindowRectOp (win, 5, left - 1, top - 1, left + barwidth + 1, bottom + 1, 5, 15) 

        -- add shadowed text. See below for Window.textshadow function
	Window.textshadow( win, "f", 
                          "HP: " .. var.HP_CUR .. "/" .. var.HP_MAX .. ("..hp_perc.."%)", 
                          left + 4, top, left+barwidth, bottom, 
                          ColourNameToRGB("white"), 
                          ColourNameToRGB("black") )

Window.gradient3 function. This creates a 3D-ish-style rounded horizontal bar graph. I use 2 of these to create a foreground graph and background "empty" graph.

function Window.gradient3( win, left, top, right, bottom, colour1, colour2, colour3 )

	local Win = win or ""
	local Left = left or 0
	local Top = top or 0
	local Right = right or 0
	local Bottom = bottom or 0
	local Colour1 = colour1 or ColourNameToRGB("black")
	local Colour2 = colour2 or ColourNameToRGB("gray")
	local Colour3 = colour3 or ColourNameToRGB("silver")
	
	local Width = Right - Left
	local Height = Bottom - Top
	
	WindowGradient (Win, Left,	Top, 				Right, Top+math.ceil(Height*.25), 	Colour1, Colour2, 2)
	WindowGradient (Win, Left, 	Top+math.ceil(Height*.25), 	Right, Top+math.ceil(Height*.50), 	Colour2, Colour3, 2)
	WindowGradient (Win, Left, 	Top+math.ceil(Height*.50), 	Right, Top+math.ceil(Height*.75), 	Colour3, Colour2, 2)
	WindowGradient (Win, Left, 	Top+math.ceil(Height*.75), 	Right, Bottom, 			Colour2, Colour1, 2)

end

Window.textshadow function. This function is pretty much the same thing Nick demonstrated in another thread. I put the code into a function so it could be reused and added options for supplied colours and defaults if they were not supplied. It doesn't have any error trapping if something is not supplied, which will probably be added later.

function Window.textshadow( win, font, msg, left, top, right, bottom, colour, bgcolour )

	local Colour = colour or ColourNameToRGB("white")
	local BGColour = bgcolour or ColourNameToRGB("darkgray")

	WindowText (win, font, msg, left + 1, top + 1,
			  0, 0, BGColour, false)

	local ret = WindowText (win, font, msg, left, top,
			  0, 0, Colour, false)

	return ret -- return 'right' from top layer text
end

The dates and times for posts above are shown in Universal Co-ordinated Time (UTC).

To show them in your local time you can join the forum, and then set the 'time correction' field in your profile to the number of hours difference between your location and UTC time.

92,470 views.

This is page 2, subject is 3 pages long: 1 2 3

It is now over 60 days since the last post. This thread is closed. Refresh page

Go to topic: Search the forum

Information and images on this site are licensed under the Creative Commons Attribution 3.0 Australia License unless stated otherwise.