This forum is a read-only archive of the Gammon Software forum (2000–2026). No new posts can be made. Search the archive.

MiniWindows [House of Ghouls]

Posted by Darwin on Sat 09 Aug 2008 07:16 AM — 32 posts, 123,845 views.

Darwin USA #0
This is just to show the progress I've been making with these miniwindows. These are listed in order of creation.

This is the first version of a status bar.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_MUSHclient_statusbars.png

Wider and across the bottom somewhat.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG-MUSHclient-StatusBar.png

Basics of a compass. This one only lights up the obvious exits.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_Compass.png
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_Compass_2.png

Now able to move the text output window, the statusbar is a bit taller with some more information displayed on it. Compass window lights up obvious exits, has tool-tip for each lit up direction and is clickable to move in that direction.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_01.png

First draft of a 'Who is Online' window. Window features hotspots across player names that will show level, name and title within a tool-tip pop-up.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_02.png

First draft of adding window decorations, first applied to the 'Who is Online' window, adds a small button in a title bar that will roll-up or roll-down the window. Two screen shots are combined here to display rolled up and rolled down. The window has been moved to the right of the text output window a little.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_Who_Window_BOTH.png

Applying window decorations to both the Compass window and Who window. Rollup button is functional on both windows. Both rolled down in this image.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_03.png

Same as previous but both rolled up in this image.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_04.png

More info added to the tool-tip pop-up for the Who window.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_05.png

Added clickable border regions to the window decorations. Windows can be clicked on their edges to be moved around on the screen.
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_06.png

I'd appreciate any constructive criticism or suggestions for improvements. What I'm doing is creating a function that windows are handed to and then window decorations are applied. I will be attempting to add scroll bars in some manner to these decorations.

Comments?

On a side note, perhaps we should have a Wini-windows topic in the MUSHclient forum. I'm sure these will become very interesting.

Edit: Added descriptions for the images.
Amended on Sat 09 Aug 2008 09:32 AM by Darwin
Nick Gammon Australia Forum Administrator #1
They look great! It is good to see someone taking the ideas presented and turning them into something concrete. Your plugins have a different "look and feel" to the ones I did, which is exactly what you want. If each MUD has its own flavour of windows effectively they can make a distinct "look" for themselves.

I see you used the "?" idea on your compass window - I presume that is for configuring. I was thinking that from the players' perspective, if you let them change things like the colour, font, and position, they feel more in control of their individual experience, and thus more empowered.

The status bars with text over them look good. I think in time we will probably move towards more subtle colour schemes, although I am probably the worst offender when it comes to wanting to "show off" all the different colours. ;)

If you are making a lot of plugins consider using the "plugin installer" plugin I wrote a little while back (http://www.gammon.com.au/forum/?id=8767) - that lets you release new plugins and have them pretty-much auto-install.

Quote:

perhaps we should have a Wini-windows topic in the MUSHclient forum


Good idea - I have done that and moved the relevant posts into it.

Darwin USA #2
Quote:
I see you used the "?" idea on your compass window - I presume that is for configuring.

No, that's actually for one of those "Somewhere" exits that players can happen across. It won't enter a direction if clicked and neither will the "None" exit, but all the others will will as long as they're lit up.

Quote:
I think in time we will probably move towards more subtle colour schemes

The colors I'm using now are really on there to show that stuff is working correctly. I highly doubt they will remain in the finished product.
Darwin USA #3
http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_06.png

Here I've added the ability to move a window around the screen by clicking on the decoration border to move left, up, right or down. This adds a little more work, but I'll be cutting that down soon.
Nick Gammon Australia Forum Administrator #4
Well you have shown it can be done. Bear in mind my remarks that the docking idea was supposed to automate the window positioning, so once you let people move them you have to work out what to do if they move a window, and then resize their main window.
Darwin USA #5
The way I have it working is that when the window is created, it inherits a metatable to load left and top offsets, then when one of the border 'move window' areas are clicked, it will either add or subtract 1 from the offset.

-- table to keep track of window movements
WinMove = {}
WinMove.prototype = { MoveLeft = 0, MoveUp = 0 }
WinMove.mt = {}
WinMove.mt.__index = function(table, key)
    return WinMove.prototype[key]
end

Window = {}

-- default values if none supplied
Window.prototype = {
    Name = tostring(os.time()),
    Left = 0,
    Top = 0,
    Width = 0,
    Height = 0,
    Position = 6,
    Flags = 0,
    BackgroundColour = ColourNameToRGB("slategray"),
    }

Window.mt = {}
Window.mt.__index = function(table, key)
    return Window.prototype[key]
end

function Window.new( win )
    setmetatable(win, Window.mt)
    -- if the table doesn't exits, this window has not been created before
    if WinMove[win.Name] == nil then
        WinMove[win.Name] = {}
        setmetatable(WinMove[win.Name], WinMove.mt)
    end

    -- create window with default or provided values
    WindowCreate ( win.Name, win.Left, win.Top, win.Width, win.Height, win.Position, win.Flags, win.BackgroundColour )

    return win
end

-- calculate window's new left position if it has been moved
function Window.left( win, original_left, move_width )
    return original_left + (move_width * WinMove[win].MoveLeft)
end

-- calculate window's new top position if it has been moved
function Window.top( win, original_top, move_height )
    return original_top + (move_height * WinMove[win].MoveUp)
end

Darwin USA #6
Next is the window decorations and redisplaying of windows if they've been moved.

-- table to put all the windows in, called when decoration hotspots are clicked
Show = {}

-- function to add window decorations: 
-- title bar, rollup/rolldown button and click-to-move borders
function Window.decorate(name, title, pos, font)
    if name == nil then	return end -- no window, don't try anything
    -- set default values
    title = title or ""
    pos = pos or 0
    font = font or "f" -- this assumes a default "f" font is defined
    -- cap should always be either "Rollup" or "Rolldown"
    cap = WinStatus[name] or "Rollup"
 
    -- get info on provided font and window
    FontHeight      = WindowFontInfo(name, font, 1)
    FontWidth       = WindowTextWidth(name, font, title, false)
    WinLeft         = WindowInfo(name, 1)  -- 1: Left (from WindowCreate)
    WinTop          = WindowInfo(name, 2)  -- 2: Top (from WindowCreate)
    WinWidth        = WindowInfo(name, 3)  -- 3: Width
    WinHeight       = WindowInfo(name, 4)  -- 4: Height
    WinShow         = WindowInfo(name, 5)  -- 5: Show flag
    WinVisible      = WindowInfo(name, 6)  -- 6: Is it hidden right now?
    WinLayout       = WindowInfo(name, 7)  -- 7: Layout position code
    WinFlags        = WindowInfo(name, 8)  -- 8: Flags
    WinBackground   = WindowInfo(name, 9)  -- 9: Background colour
    WinWhereLeft    = WindowInfo(name, 10) -- 10: Where it is right now: left
    WinWhereTop     = WindowInfo(name, 11) -- 11: Where it is right now: top
    WinWhereRight   = WindowInfo(name, 12) -- 12: Where it is right now: right
    WinWhereBottom  = WindowInfo(name, 13) -- 13: Where it is right now: bottom 

    -- create title bar gradient
    WindowGradient (name, 0, 0, WinWidth, FontHeight,
                ColourNameToRGB ("blue"), 
                ColourNameToRGB ("lightblue"), 
                1)  -- left to right

    -- display window title
    if title ~= "" then -- it has a title
        if pos == 0 then -- left justify title
            WindowText( name, font, title, 5 , 0, 0, 0, ColourNameToRGB("orange"), false)
        elseif pos == 1 then -- center title between button and left
            WindowText( name, font, title, ((WinWidth-FontHeight)-FontWidth)/2, 0, 0, 0, ColourNameToRGB("orange"), false)
        elseif pos == 2 then -- right justify - left of button
            WindowText( name, font, title, WinWidth-(FontWidth+FontHeight+4), 0, 0, 0, ColourNameToRGB("orange"), false)
        else -- got some unsupported value, default to left justify
            WindowText( name, font, title, 5 , 0, 0, 0, ColourNameToRGB("orange"), false)
        end
    end


    -- create rollup/down button and hotspot for it
    WindowRectOp( name, 5, (WinWidth-FontHeight)-3, 3, -3, FontHeight-3, 5, 15 + 0x0800)
    WindowAddHotspot(name, name..":"..cap, (WinWidth-FontHeight)-4, 4, -4, FontHeight-4, "", "", "", "", "decoration_mouseup", cap.." Window", 1, 0)	

    -- draw window border
    WindowLine( name, 0, 0, 0, 0-WinHeight, ColourNameToRGB("white"), 0, 3)
    WindowLine( name, 0, 0, 0-WinWidth, WinHeight, ColourNameToRGB("white"), 0, 3)
    WindowLine( name, 0, WinHeight, WinWidth, WinHeight, ColourNameToRGB("white"), 0, 3)
    WindowLine( name, WinWidth, 0, WinWidth, WinHeight, ColourNameToRGB("white"), 0, 3)
    WindowLine( name, 0, FontHeight, 0, FontHeight, ColourNameToRGB("white"), 0, 2)

    -- create 'move window' hotspot areas
	-- creates hotspot id with window name and action to take
    WindowAddHotspot(name, name..":MoveLeft", 0,5,5,-5, "", "", "", "", "decoration_mouseup", "Move Window Left", 1, 0)
    WindowAddHotspot(name, name..":MoveRight", WinWidth-5,5,0,-5, "", "", "", "", "decoration_mouseup", "Move Window Right", 1, 0)
    WindowAddHotspot(name, name..":MoveUp", 0,0,WinWidth-5,5, "", "", "", "", "decoration_mouseup", "Move Window Up", 1, 0)
    WindowAddHotspot(name, name..":MoveDown", 5,WinHeight-5,WinWidth-5,0, "", "", "", "", "decoration_mouseup", "Move Window Down", 1, 0)

end

function decoration_mouseup(flags, hotspot_id)
    -- parse out the window name and action to take
    Win, action	= string.match(hotspot_id, "^([%a_]+):(%a+)")

    if action == "Rollup" then
        WinStatus[Win] = "Rolldown"
    elseif action == "Rolldown" then
        WinStatus[Win] = "Rollup"
    elseif action == "MoveUp" then
        WinMove[Win].MoveUp = WinMove[Win].MoveUp - 1
    elseif action == "MoveLeft" then
        WinMove[Win].MoveLeft = WinMove[Win].MoveLeft - 1
    elseif action == "MoveDown" then
        WinMove[Win].MoveUp = WinMove[Win].MoveUp + 1
    elseif action == "MoveRight" then
        WinMove[Win].MoveLeft = WinMove[Win].MoveLeft + 1
    end
    -- redraw the window by recreating it
    Show[Win]()
end

Darwin USA #7
Here is how I display the compass window.
-- initialize exits table with color and text to display
exits = {
    ["up"]        = {c=0, t="Up"},
    ["north"]     = {c=0,t="North"},
    ["west"]      = {c=0,t="West"},
    ["east"]      = {c=0,t="East"},
    ["south"]     = {c=0,t="South"},
    ["down"]      = {c=0,t="Down"},
    ["northeast"] = {c=0,t="NE"},
    ["northwest"] = {c=0,t="NW"},
    ["southeast"] = {c=0,t="SE"},
    ["southwest"] = {c=0,t="SW"},
    ["somewhere"] = {c=0,t="?"},
    ["none"]      = {c=0,t="None"}
    }

-- Compass window
function Show.HoG_Compass_Window()
    win = "HoG_Compass_Window"
    WinStatus[win] = WinStatus[win] or "Rollup"
    -- reset all exits
    for k,v in pairs(exits) do
        v.c = ColourNameToRGB("black")
        v.show = false
    end
    -- create temp window to get font information
    Window.new{ Name=win }
    WindowFont (win, "f", "Courier New", 8, false, false, false, false)
    WindowFont (win, "F", "Courier New", 8, true, false, false, false)
    height = WindowFontInfo (win, "f", 1)
    leading = WindowFontInfo (win, "f", 4)
    fheight = WindowFontInfo (win, "f", 1)
    fwidth = WindowTextWidth(win, "f", " ")

    winheight = height -- rolled up height
    if WinStatus[win] == "Rollup" then
        winheight = 123 -- rolled down height
    end
    
    -- original window positions
    window_left = 15 + (GetInfo(213) * 80)
    window_top = 0
    window_width = 150
    window_height = winheight
    
    -- recreate window with supplied left, top, width and height
    Window.new { Name=win,
        -- calculate new top and left position if moved
        Top=Window.top(win, window_top, 10),
        Left=Window.left(win, window_left, 10),
        Width=window_width,
        Height=window_height,
        Flags=2,
        BackgroundColour=ColourNameToRGB("slategray")
        }

    -- var.EXITS contains string like "north south east west" captured from
    -- either the exit line or some other location
    for w in string.gmatch(var.EXITS, "%a+") do
        -- for each direction found, color it white, 
        -- set bold font and set show to true
        exits[w]["c"] = ColourNameToRGB("white")
        exits[w]["f"] = "F"
        exits[w]["show"] = true
    end
    
    -- begin creating compass text/links
    i = 0 -- var to hold top position of line
    width = WindowTextWidth(win, "F", "?")
    WindowText(win, "F", "?", 144-width, height+((height-leading)*i),0,0,exits["somewhere"].c, false) 
    left = 144-width
    top = height+((height-leading)*i)
    right = left + width
    bottom = top + height
    if exits["somewhere"].show == true then
        WindowAddHotspot(win, "somewhere", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Hidden exit", 1, 0)
    end
    i = i+1.25

Continued...
Darwin USA #8 
    WindowRectOp( win, 2,3,height*2,-3,height*-1,ColourNameToRGB("brown"))
    WindowRectOp( win, 1,3,height*2,-3,height*-1, ColourNameToRGB("black"))
    
    width = WindowTextWidth(win, "F", "Up")
    WindowText(win, "F", "Up", 5, height+((height-leading)*i),0,0,exits["up"].c, false)
    left = 5
    top = height+((height-leading)*i)
    right = left + width
    bottom = top + height
    if exits["up"].show == true then
        WindowAddHotspot(win, "up", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Move Up", 1, 0)
    end

    width = WindowTextWidth(win, "F", "North")
    WindowText(win, "F", "North", (144-width)/2, height+((height-leading)*i),0,0,exits["north"].c, false)
    left = (144-width)/2
    top = height+((height-leading)*i)
    right = left + width
    bottom = top + height
    if exits["north"].show == true then
        WindowAddHotspot(win, "north", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Move North", 1, 0)
    end
    i = i+1
    
    width1 = WindowTextWidth(win, "F", "NW")
    width2 = WindowTextWidth(win, "f", "  |  ")
    width3 = WindowTextWidth(win, "F", "NE")
    width = (144 - (width1 + width2 + width3))/2
    WindowText(win, "F", "NW", width, height+((height-leading)*i),0,0,exits["northwest"].c, false)
    left = width
    top = height+((height-leading)*i)
    right = left + width1
    bottom = top + height
    if exits["northwest"].show == true then
        WindowAddHotspot(win, "northwest", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Move Northwest", 1, 0)
    end
    WindowText(win, "f", "  |  ", width+width1, height+((height-leading)*i),0,0,0,false)
    WindowText(win, "F", "NE", width+width1+width2, height+((height-leading)*i),0,0,exits["northeast"].c, false) 
    left = width+width1+width2
    top = height+((height-leading)*i)
    right = left + width3
    bottom = top + height
    if exits["northeast"].show == true then
        WindowAddHotspot(win, "northeast", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Move Northeast", 1, 0)
    end
    i = i+1
    
    width = WindowTextWidth(win, "f", "\ | /")
    WindowText(win, "f", "\ | /", (144-width)/2, height+((height-leading)*i),0,0,0, false) 
    i = i+1
    
    width1 = WindowTextWidth(win, "F", "West")
    width2 = WindowTextWidth(win, "f", "<--+-->")
    width3 = WindowTextWidth(win, "F", "East")
    width = (144 - (width1 + width2 + width3))/2
    WindowText(win, "F", "West", width, height+((height-leading)*i),0,0,exits["west"].c, false)
    left = width
    top = height+((height-leading)*i)
    right = left + width1
    bottom = top + height
    if exits["west"].show == true then
        WindowAddHotspot(win, "west", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Move West", 1, 0)	
    end
    WindowText(win, "f", "<--+-->", width+width1, height+((height-leading)*i),0,0,0,false)
    WindowText(win, "F", "East", width+width1+width2, height+((height-leading)*i),0,0,exits["east"].c, false) 
    left = width+width1+width2
    top = height+((height-leading)*i)
    right = left + width3
    bottom = top + height
    if exits["east"].show == true then
        WindowAddHotspot(win, "east", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Move East", 1, 0)	
    end
    i = i+1

Continued...
Darwin USA #9 
    width = WindowTextWidth(win, "f", "/ | \")
    WindowText(win, "f", "/ | \", (144-width)/2, height+((height-leading)*i),0,0,0, false) 
    i = i+1
    
    width1 = WindowTextWidth(win, "F", "SW")
    width2 = WindowTextWidth(win, "f", "  |  ")
    width3 = WindowTextWidth(win, "F", "SE")
    width = (144 - (width1 + width2 + width3))/2
    WindowText(win, "F", "SW", width, height+((height-leading)*i),0,0,exits["southwest"].c, false)
    left = width
    top = height+((height-leading)*i)
    right = left + width1
    bottom = top + height
    if exits["southwest"].show == true then
        WindowAddHotspot(win, "southwest", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Move Southwest", 1, 0)	
    end
    WindowText(win, "f", "  |  ", width+width1, height+((height-leading)*i),0,0,0,false)
    WindowText(win, "F", "SE", width+width1+width2, height+((height-leading)*i),0,0,exits["southeast"].c, false) 
    left = width+width1+width2
    top = height+((height-leading)*i)
    right = left + width3
    bottom = top + height
    if exits["southeast"].show == true then
        WindowAddHotspot(win, "southeast", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Move Southeast", 1, 0)
    end
    i = i+1
    
    width = WindowTextWidth(win, "F", "South")
    WindowText(win, "F", "South", (144-width)/2, height+((height-leading)*i),0,0,exits["south"].c, false)
    left = (144-width)/2
    top = height+((height-leading)*i)
    right = left + width
    bottom = top + height
    if exits["south"].show == true then
        WindowAddHotspot(win, "south", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Move South", 1, 0)
    end
    width = WindowTextWidth(win, "F", "down")
    WindowText(win, "F", "Down", 144-width, height+((height-leading)*i),0,0,exits["down"].c, false)
    left = 144-width
    top = height+((height-leading)*i)
    right = left + width
    bottom = top + height
    if exits["down"].show == true then
        WindowAddHotspot(win, "down", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Move Down", 1, 0)
    end
    i = i+1.25
    
    WindowText(win, "F", "None", 5, height+((height-leading)*i),0,0,exits["none"].c, false)
    left = width+width1+width2
    top = height+((height-leading)*i)
    right = left + width
    bottom = top + height
    if exits["none"].show == true then
        WindowAddHotspot(win, "none", left, top, right, bottom, 
            "compass_mouseover", "compass_cancelmouseover", "compass_mousedown", "compass_cancelmousedown", "compass_mouseup", 
            "Nowhere to go", 1, 0)	
    end

    -- finally, add the decoration, supplying a window title of "Exits"
    -- text position 1 for centered and the bold font "F"
    Window.decorate(win, "Exits", 1, "F")
    -- display the final result
    WindowShow(win, true)
end

-- mouseover and mousedown were used for testing 
-- so they don't do anything important ATM
function compass_mouseover(flags, hotspot_id)
    exits[hotspot_id].mouseover = true
end
function compass_cancelmouseover(flags, hotspot_id)
    exits[hotspot_id].mouseover = false
end
function compass_mousedown(flags, hotspot_id)
        exits[hotspot_id].mousedown = true
end
function compass_cancelmousedown(flags, hotspot_id)
    exits[hotspot_id].mousedown = false
end
-- direction was clicked
function compass_mouseup(flags, hotspot_id)
    -- if not black and not somewhere or none the send the direction
    if  exits[hotspot_id]["c"] > 0 and 
            hotspot_id ~= "somewhere" and 
            hotspot_id ~= "none" 
        then
            Send(hotspot_id)
    end
end

Darwin USA #10
I hope that's detailed enough to demonstrate moving the windows around. I (now) know there's a better way to keep track of text positions so I'll be cleaning that code up when I get back to it.

My first goal was to make it work, and it does. Next I'll clean up the code and then I'll try to make it look better.
Darwin USA #11
Quote:
Bear in mind my remarks that the docking idea was supposed to automate the window positioning, so once you let people move them you have to work out what to do if they move a window, and then resize their main window.


These windows are set with the 'use absolute position' flag so that they don't snap to any pre-defined position and can be moved around. I'm not sure what you mean by 'work out what to do'

I currently have two of these movable windows and resizing the window doesn't do anything to their positions. They're movable so if someone decides they really need to resize the main window then they can also move the miniwindows wherever they desire.
Nick Gammon Australia Forum Administrator #12
What I meant was, in the earlier attempt to hive off data to extra "dummy" world windows, I found it to be a pain if I decided to make my world window larger, because then all the other windows had to be resized or moved out of the way.

By making your windows have an absolute position, you introduce the same concern - whether or not it is a big worry may be a matter for the individual.

Say you have 5 miniwindows with absolute positions, and they decide to make their world window larger (using a larger font perhaps), now they have to reposition all 5.

Using the docking approach, they windows "stick to" the side of the main window, and you don't have to do anything if you resize.


Darwin USA #13
From my limited testing, having 5 windows with docked positions wouldn't be ideal for resizing the main window either, unless they were docked in all different positions. If the window becomes too small in width or height, then it may force some miniwindows to not be drawn.

I tested that using an example you posted where you created 5 or 6 100x100 different colored windows set right center top-bottom. If the window sizes were increased to force an overlap, one of the windows would vanish. They would also vanish if the height of the window became too small.

I would prefer to not auto-position the windows to prevent random-esque windows from vanishing from the screen. At least this way, the user can (re)position the window if necessary before and/or after resizing the main window.
Darwin USA #14
Quick update on my progress. I started making the chats window in this image. I now have one fixed-positioned window (status bar) and three movable mini-windows that can roll up into its title bar or roll down from it. The roll up/down button is a little larger now.

Planned improvements include adding a way to stretch (or resize) a movable mini-window and add a scroll bar control to the chat window.

http://i171.photobucket.com/albums/u302/bin_recycled/HoG_GUI_07.png
Nick Gammon Australia Forum Administrator #15
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.

Darwin USA #16
Thanks, those numbers do look better with commas in them. :)
David Haley USA #17
Looking good, Darwin. This is a great use of a great feature. :-)

/me is happy to see all this.
Darwin USA #18
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
Nick Gammon Australia Forum Administrator #19
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
Worstje Netherlands #20
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.
Darwin USA #21
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
Amended on Wed 13 Aug 2008 01:41 AM by Darwin
Worstje Netherlands #22
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
Nick Gammon Australia Forum Administrator #23
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
Darwin USA #24
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
Nick Gammon Australia Forum Administrator #25

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.

Darwin USA #26
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.
Nick Gammon Australia Forum Administrator #27
Ah that looks better. And I fixed the typo, thanks for that.
Scarn #28
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.
Darwin USA #29
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
Amended on Wed 27 Aug 2008 10:44 PM by Darwin
Scarn #30

local hp_perc = math.ceil((var.HP_CUR/var.HP_MAX) * 100)

status = left = 3


local hp_right = left + math.ceil(barwidth*(hp_perc*.01))


status = Window.gradient3( 6, hp_right, top, left+barwidth, bottom,ColourNameToRGB("midnightblue"),ColourNameToRGB("indigo"), ColourNameToRGB("mediumorchid"))


status = Window.gradient3( 6, left, top, hp_right, bottom,ColourNameToRGB("maroon"),ColourNameToRGB("red"), ColourNameToRGB("lightcoral"))


status = WindowRectOp (6, 5, left - 1, top - 1, left + barwidth + 1, bottom + 1, 5, 15)


status = Window.textshadow( 6, "f","HP: " .. var.HP_CUR .. "/" .. var.HP_MAX .. ("..hp_perc.."%)", left + 4, top, left+barwidth, bottom, ColourNameToRGB("white"), ColourNameToRGB("black"))

end



When I fire this the following error pops up, can't see its source though...


Error number: -2146827282
Event: Execution of line 19 column 43
Description: Expected ')'

Line in error:

status = Window.textshadow( 6, "f","HP: " .. var.HP_CUR .. "/" .. var.HP_MAX .. ("..hp_perc.."%)", left + 4, top, left+barwidth, bottom, ColourNameToRGB("white"), ColourNameToRGB("black"))
Called by: Immediate execution
Darwin USA #31
Window.gradient3 doesn't return any values so there's no need for the "status = " part for those lines.

It seems you're missing a double-quote in your line.

You have:
Quote:
status = Window.textshadow( 6, "f",
"HP: " .. var.HP_CUR .. "/" .. var.HP_MAX .. ("..hp_perc.."%)", 
left + 4, top, left+barwidth, bottom, 
ColourNameToRGB("white"), ColourNameToRGB("black"))


Which should be:
status = Window.textshadow( 6, "f",
"HP: " .. var.HP_CUR .. "/" .. var.HP_MAX .. "("..hp_perc.."%)", 
left + 4, top, left+barwidth, bottom, 
ColourNameToRGB("white"), ColourNameToRGB("black"))


You get the error because you have a left parenthesis that is not enclosed in quotes so it is expecting a right parenthesis to accompany it.