Page 1 of 33

Vyzor, UI Manager for Mudlet

Posted: Sun Jan 08, 2012 1:38 pm
by Oneymus
For more information on Vyzor, please see the wiki.

To download the latest version of Vyzor, go to Github.

For any help or questions, feel free to send me a PM, start a new thread, or add on to this one.

If you would like my assistance in developing a full GUI, send me a PM and we'll talk.

Re: Vyzor, UI Manager for Mudlet [Beta?]

Posted: Mon Jan 09, 2012 3:49 am
by Vadi
Looks nice. I'd recommend brushing up the test aliases (one references a function that doesn't exist anymore, another uses an image with a hard-coded location) and adding some basic examples that people can start to tinker with :)

Re: Vyzor, UI Manager for Mudlet [Beta?]

Posted: Mon Jan 09, 2012 6:10 am
by Darmir
Well I installed it and tested the frame then I tried the aliases and most didn't work. I then uninstalled the package and restarted mudlet and I still get the frame created by the package and it won't go away. I should have done this in a blank profile now my achaea profile is messed up.

Re: Vyzor, UI Manager for Mudlet [Beta?]

Posted: Mon Jan 09, 2012 6:37 am
by Vadi
Just adjust your borders in Mudlet settings - though yes, I'd recommend playing with it first on a blank profile.

Re: Vyzor, UI Manager for Mudlet [Beta?]

Posted: Mon Jan 09, 2012 1:23 pm
by Oneymus
Hrm... I'll take a look at the aliases. I tested them in a blank profile. It should be mentioned, however, that I use an image in my testing that no one else would have. You must supply your own image. Perhaps, for testing purposes, I'll add one to the package.

Also, Vadi ran into an issue with the package.path bit. I ran into no issues with a clean profile, though I know part of his problem was improper use of the backslash, which fails on Linux. Simple oversight on my part. These issues will be fixed, as per his suggestions.

Darmir, if you had more specific reasons for the aliases's failures, I'd be more than happy to fix them. If you feel up for it, grab some error messages for me. Thanks.

Re: Vyzor, UI Manager for Mudlet [Beta?]

Posted: Tue Jan 10, 2012 11:48 pm
by Heiko
This sounds very nice. What is the difference between Vyzor and Geyser? It would nice if you could explain the major features of Vyzor and compare it to Geyser. Thanks.

Re: Vyzor, UI Manager for Mudlet [Beta?]

Posted: Wed Jan 11, 2012 12:36 am
by Oneymus
Updated the .mpackage to include Vadi's suggested changes. All aliases were tested, and I found no errors; if you do encounter errors, please get the message for me.

As far as I can tell, Vyzor is capable of everything Geyser can do, excepting shortcut classes added by users (gauges, VBox/HBox, ...). Vyzor CAN do those things, but there are no handy-dandy built-in classes (yet).

The primary difference between Vyzor and Geyser has to do with how Vyzor handles Frames (which Geyser and Mudlet call Labels). Vyzor adds another layer of abstraction between Mudlet and the user, especially in how a Frame (Label) is filled with content. Where Geyser wraps the various Mudlet GUI functions, and exposes them to the user through an OO interface, Vyzor is instead built on an object-oriented abstraction of Qt's Stylesheet properties.

Instead of calling something like...
Code: [show] | [select all] lua
-- Geyser
someLabel:setBackgroundImage(someImage)
... you would create (and potentially reuse) various Component objects in Vyzor.
Code: [show] | [select all] lua
-- Vyzor
someImage = Vyzor.Image( "someUrl" )
someBackground = Vyzor.Background(someImage)
someFrame:Add(someBackground)
It is more verbose, yes, but it's not simply a more roundabout way to call setBackgroundImage. In fact, Vyzor uses very little of the Mudlet API; it uses setLabelStyleSheet to fill content. By providing an interface for Qt's Stylesheets, we have access to far more power than Mudlet's native API can provide. For example...
Code: [show] | [select all] lua
-- Maybe we want a tiled background...
tiledBackground = Vyzor.Background( someImage, nil, Vyzor.Repeat.RepeatXY )

-- Or maybe a single image, centered.
centerBackground = Vyzor.Background( someImage, Vyzor.Alignment.Center )
Perhaps you've develop an awesome GUI that you want to share with your friends, but everyone's using differently sized monitors. I have 1920x1200, but one of my friends is on a netbook, and someone else is using an old school 800x600 CRT beast. With the normal Mudlet API, it'd be prohibitively difficult to make a GUI that would work for all of them. With Geyser, it becomes easier.

With Vyzor, however, everything can be sized relative to the size of the client. Images, too. Qt is able to stretch border images, meaning you don't have to make a number of copies of the same image with different sizes.
Code: [show] | [select all] lua
stretchImage = Vyzor.Border( nil, nil, someImage )
Vyzor creates and maintains four Border Frames, which will always be the size of the spaces surrounding the main console (this size can also be changed in Vyzor.Options.Borders). So, if we have a fancy logo we want in the upper left corner of the screen, and we want it to always be 10% of the Mudlet window, we might do this...
Code: [show] | [select all] lua
-- This means we have a border above the console whose height is 10% of the screen.
Vyzor.Options.Borders.Top = 0.1

logoImage = Vyzor.Image( "filepath" )
-- This creates an image that will be stretched as necessary.
logoBorder = Vyzor.Border( nil, nil, logoImage )

-- Here we create a Frame to hold our content.
-- Arguments: name, x, y, width, height.
-- We've said we want it to be positioned in the upper left corner of its PARENT.
-- We've said we want it to be 10% of the parent's width, and 100% of the parent's height.
logoFrame = Vyzor.Frame( "logo", 0, 0, 0.1, 1 )
-- Add some content; in this case, our Border Component.
logoFrame:Add( logoBorder )

-- Now, we add it Vyzor's Top Border Frame.
Vyzor.HUD.Frames["VyzorTop"]:Add( logoFrame )

-- And to make it appear...
Vyzor.Draw()
It is my belief that Vyzor has the power to do more than Geyser, though Geyser is, in some ways, easier to use. In truth, Geyser and naked Mudlet Labels have access to setLabelStylesheet. But having it all packaged and exposed, with an object-oriented interface, makes it easier. If not for anyone else but me.

Re: Vyzor, UI Manager for Mudlet [Beta?]

Posted: Wed Jan 11, 2012 12:40 am
by Vadi
In the big picture, Vyzor aims to be a complete manager of your UI, while Geyser is suitable for making stand-alone widgets, so to speak. Vyzor seems to do a better job at managing the relationships of widgets to each other on the screen as well (however Geyser does have containers to assist with this).

Re: Vyzor, UI Manager for Mudlet [Beta?]

Posted: Wed Jan 11, 2012 2:20 am
by Oneymus
Another small update, because I am dumb. Hurp.

Re: Vyzor, UI Manager for Mudlet [Beta?]

Posted: Wed Jan 18, 2012 8:35 am
by Oneymus
Big update for Vyzor. Now supports MiniConsoles and the Map. Also added a Gauge container for fancy gauge handling.

MiniConsoles can handle dynamic word wrap or dynamic font size (or dynamic neither). I especially like the font size option.

Gauges come with a global function that can be called at any time (like a stat update event, for example) that will update all Vyzor Gauges. Gauges can also be created with four options from a GaugeFill Enum: LeftRight, RightLeft, TopBottom, BottomTop.

With this update, I believe (though I'd be happy to be proven wrong) that Vyzor at least matches Geyser in functionality.