A quick Vyzor demo

Share your scripts and packages with other Mudlet users.
Post Reply
User avatar
Oneymus
Posts: 321
Joined: Thu Sep 17, 2009 5:24 am

A quick Vyzor demo

Post by Oneymus »

Here's a peek at what I've been working on. It's a GUI framework. This is its third iteration; it began long before Geyser, and was incredibly different (and very messy). This third iteration wraps around Qt's Stylesheet capabilities, providing a more OO-like interface.

Right now, it dynamically tracks (and/or sets) border sizes, giving you built-in Frames (basic Vyzor containers) that resize automatically. The left and right borders in this demo are set by grabbing the width of the main console, and dividing the remaining window space. The top and right borders are set to 10% of the window space.

Unfortunately, the web-based screencast applications I found have horrible framerate, so it's jumpy. I assure you, it's much faster in real-time. I'll give both links, in case they work differently for people.

You'll also see the top image shrink to fit the available space, and a tiled background image. They are the same .png.

Cast 1
Cast 2

Let me know what you think. And, as always, I appreciate any ideas anyone has. What would you like a GUI framework to handle?

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

Re: A quick Vyzor demo

Post by Vadi »

Looks nice. What are you plans for this? Geyser has some shortcomings that I'd like to see addressed, but I don't know where are you planning to go with this.

User avatar
Oneymus
Posts: 321
Joined: Thu Sep 17, 2009 5:24 am

Re: A quick Vyzor demo

Post by Oneymus »

Well, what are those shortcomings? If I can address them, I will.

Right now, GUI's are composed of Frames. You then add Components to those frames to give them content. Components correspond to Stylesheet properties. Frames contain other Frames (and there will be optional bounding per Frame), and child Frames respect the Qt box model (content space).

On startup, I create the four border Frames, which users have access to. There is also a fifth Frame (the HUD), which covers the whole window (does not create a label, because covering the main console with a label is bad).

All Frames can be positioned and sized using percentages or pixel coordinates (always relative to parent Frame).

Some of the syntax is still a little verbose (in particular accessing the border Frames), but this is the script I used to create the demo:
Code: [show] | [select all] lua
local border = Vyzor.Border(
	10,
	Vyzor.BorderStyle.Groove,
	Vyzor.Brush( Vyzor.Color( Vyzor.ColorMode.Name, "white" ) )
)
local margin = Vyzor.Margin( 5 )
local padding = Vyzor.Padding( 5 )
local green = Vyzor.Brush( Vyzor.Color( Vyzor.ColorMode.Name, "green" ) )
local background = Vyzor.Background( green )
local image = Vyzor.Image( [[C:/Users/Administrator/.config/mudlet/profiles/Midkemia Online/Vyzor/eq_light.png]],
	 Vyzor.Alignment.Center )
local img_back = Vyzor.Background( image )

Vyzor.HUD.Frames["VyzorTop"]:Add( border )
Vyzor.HUD.Frames["VyzorTop"]:Add( margin )
Vyzor.HUD.Frames["VyzorTop"]:Add( padding )
Vyzor.HUD.Frames["VyzorTop"]:Add( image )

Vyzor.HUD.Frames["VyzorBottom"]:Add( border )
Vyzor.HUD.Frames["VyzorBottom"]:Add( margin )
Vyzor.HUD.Frames["VyzorBottom"]:Add( padding )
Vyzor.HUD.Frames["VyzorBottom"]:Add( background )

Vyzor.HUD.Frames["VyzorRight"]:Add( border )
Vyzor.HUD.Frames["VyzorRight"]:Add( margin )
Vyzor.HUD.Frames["VyzorRight"]:Add( padding )
Vyzor.HUD.Frames["VyzorRight"]:Add( img_back )

Vyzor.HUD.Frames["VyzorLeft"]:Add( border )
Vyzor.HUD.Frames["VyzorLeft"]:Add( margin )
Vyzor.HUD.Frames["VyzorLeft"]:Add( padding )

Vyzor.HUD:Draw()

User avatar
Oneymus
Posts: 321
Joined: Thu Sep 17, 2009 5:24 am

Re: A quick Vyzor demo

Post by Oneymus »

I'm still working on the project, and am hoping to hear what those shortcomings are that Vadi mentioned.

I would also like to gather some feedback from others with any sort of interest, whether they just want an easy means of placing gauges, or they want to develop full-scale GUI's like KaViR.

I have a few bugs and kinks to work out, then I should be able to release it for testing. It would be helpful to have feedback sooner rather than later, so I can plan ahead.

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

Re: A quick Vyzor demo

Post by Vadi »

Oh -- sorry, I forgot to post earlier!

Calculatable dimensions: http://forums.mudlet.org/viewtopic.php? ... 1333#p5005

Another problem I have is that Geyser elements are static, which when displaying a list of data, is hard to manage - you have to pre-set the containers size, and if your label overflows it, not much you can do. Unlike in HTML, for example, where the container can not have a set size and resize as necessary. Not sure how can this be solved though.

User avatar
Oneymus
Posts: 321
Joined: Thu Sep 17, 2009 5:24 am

Re: A quick Vyzor demo

Post by Oneymus »

Something like calc is possible, though not directly. By making multiple Frames, you can maintain static (relative) positions and dynamic sizes. Negative Size values subtract from the parent (so -50 height would be 50 pixels shorter than the parent Frame). Negative Position values count from the right and bottom sides of the parent Frame (-50 X would be 50 pixels inward from the right edge).

Any values between 1 and 0 are considered to be percentages. This means to have something at 1 pixel, it must be 1.1. Unfortunate, but .5 is far easier than parsing "50%".

As for the resizing list, I'm hesitant to implement that. Are the lists necessarily Labels? Are the lists text in the Labels? Perhaps they are MiniConsoles? It is doable in each of those implementations, to be sure. But should this be standard behaviour? I suppose it would be possible to add in an option, like I have done with Bounding (<frame>.IsBounding = true). I do plan on implementing Geyser's dynamically adjusting boxes; this would be very similar in theory, perhaps, though it could present other conflicts (expanding beyond parent Frames, do we push other Frames out of the way?, what if the parent Frame is Bounding?).

Currently, everything in Vyzor can be dynamic. It resizes on the sysWindowResize event. Using border images, it's possible to have -every- element resize dynamically (border images scale to the dimensions of the Label). This allows for easily distributed GUI's; for instance, KaViR's GUI enforces a client size, which might not work for, say, netbooks.

I've rambled. =\

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

Re: A quick Vyzor demo

Post by Vadi »

You could take the parsing off Geyser, I suppose? I do like how I'm able to give it values in a variety of ways. I'll seriously try this out soon[1], the most appealing feature of a framework for me actually is it's long-term support.

[1] beefing up http://wiki.mudlet.org/index.php?title= ... _Functions at the moment with all functions

Darmir
Posts: 226
Joined: Sun May 01, 2011 6:51 pm
Contact:

Re: A quick Vyzor demo

Post by Darmir »

Oneymus,
I am interested in this framework too. One shortcoming with Geyser I found is that when you create a container you can't give it a scroll-bar. Are you writing this in C++.

User avatar
Oneymus
Posts: 321
Joined: Thu Sep 17, 2009 5:24 am

Re: A quick Vyzor demo

Post by Oneymus »

Afraid not. This is just a Lua script (complex thought it may be), so I won't be able to implement anything like scroll bars.

Post Reply