Whats Your Gui Look like?

Post Reply
Ferseth
Posts: 1
Joined: Wed Aug 22, 2012 7:11 am

Re: Whats Your Gui Look like?

Post by Ferseth »

GAhh I forgot the password for Ricktava! But as proof Im him look at the last Gui of his and in the top part it says Ferseth Etienne Le'Murzen-Sparrow thats me IG msg me and Ill tell you it is me! kthx
Anyways Here is an update to my last Gui(mostly because I got a better monitor and the old one wouldn't fit right anymore)

Same as before concept wise but I think this looks much cleaner
New Intro.PNG
This time instead of using the same pic for the IG background I used one that goes well with the first (Cyrene Clock tower theme)
New IGplus.PNG

User avatar
kevutian
Posts: 217
Joined: Fri Aug 20, 2010 8:18 pm
Location: United Kingdom
Contact:

Re: Whats Your Gui Look like?

Post by kevutian »

That's pretty sick.

Loving that..

User avatar
Akaya
Posts: 414
Joined: Thu Apr 19, 2012 1:36 am

Re: Whats Your Gui Look like?

Post by Akaya »

First UI I started working on. I used Mudlet's API only. No framework.
Click to view UI

I spent hours and hours on the UI above and wanted to share it with everyone but wasn't able to for it wasn't "universal" or it wouldn't fit on everyone's screen the same. So I looked into frameworks. One that would allow images to be stretched and shrunk to fit the user's screen width/height. I found Vyzor. And with it, a whole new set of API to learn. I spent a few weeks tinkering with the new framework and this was my first result:
Click to view UI

I believe I posted this a few posts back. I was still working on it. It's pretty much complete at this point and I use it as my main profile when playing. It's "universal" and can be shared with all whom want to go through the process of setting it up. As I grow more comfortable with the Vyzor framework, I've tinkered around with some new profiles. The following is a profile I created to mess around with affliction trackers and how they could be created with Vyzor:
Click to view UI

I don't really play with this UI. Just for testing. Has 3 different potential ways to track afflictions. A miniconsole, a grid that fills with icons, and a tower of afflictions that stack up when recieved/lost (thanks to those that helped me with the completion of that). The next UI is what I'm currently working on:
Click to view UI

This one only has a few elements at the moment, but my big idea with this UI is to have a tab of sorts you can click and a display screen will appear that can show a bit more information about your character. Like SCORE turned into a UI. This will be done via adjusting Vyzor's Border Frames (in this case the right border frame). A small static tab (frame) will be displayed on the right side of the screen. When clicked, the Vyzor.Right border will be resized and the "SCORE display" will be shown (another frame). When the tab is clicked again, the frame is hidden and the border is put back to its original position. This will give the appearance of a pull down menu or an inventory-type screen.

Anyways. I hope this post encourages a lot of people out there to attempt creating their own UI's. It's a very rewarding experience!

User avatar
Akaya
Posts: 414
Joined: Thu Apr 19, 2012 1:36 am

Re: Whats Your Gui Look like?

Post by Akaya »

So I've completed the previous idea I spoke of as far as having clickable tabs on the side of the screen that will pop up with an inventory/status/journal-type screen.

Image

The tabs are just a bunch of labels arranged with the Vyzor.Box() function to align them vertically. When clicked, the following is executed:
Code: [show] | [select all] lua
function clicky(arg)
	imagePath = getMudletHomeDir():gsub( "\\", "/" ) .. "/AkayanImages/"
	if clicked == 0 then
		clicked = 1
		journal:Show()
		Vyzor.Options.Borders = {Top = 0, Bottom = .08, Left = .45, Right = .5}
		tab_back:Resize(.05,1)
		tab_back:Move(.95,0)
		journal:Remove( Vyzor.Border )
		journal:Add( Vyzor.Border( 0, Vyzor.BorderStyle.None,
			Vyzor.Brush( Vyzor.Image( imagePath .. "journal.png" ))))
	elseif clicked == 1 then
		clicked = 0
		journal:Hide()
		Vyzor.Options.Borders = {Top = 0, Bottom = .08, Left = .45, Right = .025}
		tab_back:Resize( 1, 1 )
		tab_back:Move( 0, 0 )
	end
	Vyzor.HUD:Draw()
end
So when the "Aliases" tab is clicked, the Vyzor.Right.Border (in this case) is adjusted and the 'journal' frame is given a different image. Thus, the following is displayed (or whatever you want really. In this instance, I just have a premade .png image that I can easily update outside of Mudlet. But you can use whatever you want. Your map, affliction tracker, chat box, etc.):

Image

Figured this could be great for those without a lot of screen space that still want a fancy UI but don't have room. You could just have a bunch of tabs on the side of your screen that will display each component of your UI when clicked. No room for a map, chat box, AND affliction tracker? You can easily arrange your screen to toggle just the components you'd need at the moment.

User avatar
Akaya
Posts: 414
Joined: Thu Apr 19, 2012 1:36 am

Re: Whats Your Gui Look like?

Post by Akaya »

Hmm... So it seems when I have the mudlet mapper widget displayed, resizing the Vyzor Borders is given an extreme lag. Any ideas why this happens or how the lag can be avoided?

Delrayne
Posts: 159
Joined: Tue Jun 07, 2011 7:07 pm
Contact:

Re: Whats Your Gui Look like?

Post by Delrayne »

Re-rendering the map has always slowed down the resize process for some reason.

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

Re: Whats Your Gui Look like?

Post by Vadi »

Well rather resizing it, not re-rendering. The map is rendered every time the picture changes, and that's very quick as you notice :)

I think re-sizing the widget at the moment does some unnecessary operations such as reloading the map data and rebuilding it, but I am not certain about it.

Caled
Posts: 403
Joined: Thu Apr 09, 2009 4:45 am

Re: Whats Your Gui Look like?

Post by Caled »

Vadi wrote:Well rather resizing it, not re-rendering. The map is rendered every time the picture changes, and that's very quick as you notice :)

I think re-sizing the widget at the moment does some unnecessary operations such as reloading the map data and rebuilding it, but I am not certain about it.
Right.
Unfortunately, any time Vyzor.HUD:Draw()is called, whatever it is that causes the slow-down occurs. I experimented with using the Draw() function directly on the frames I want to resize (in the instances when I am only adjusting specific portions of my gui rather than the entire thing) but with mixed success. This was expected as Oneymus does say it is not meant to be used like that, but I tried anyway.

In the end, I gave up. I really wanted some dynamic action bar resizing (something like raid frames in an MMO) but due to scarce screen real-estate I must choose the size of each target/ally frame based on the number of people I am trying to display, rather than picking a tiny size all the time.

Now I am building with Geyser instead. It is more difficult to handle window resizing etc, though I've found that copying Oneymus's idea of border frames helps a lot.

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

Re: Whats Your Gui Look like?

Post by Vadi »

One possible idea I had for this, before this is improved in Mudlet itself, is that the framework could set a timer on resizing and do the resize only after a bit of time after the last resize event - for example:
Code: [show] | [select all] lua
if resizing the killTimer(resizing) end
resizing = tempTimer(.5, function() resize_mapper() end)
This would help mitigate this problem to a large degree, I think. Depending on the WM you are using, it might or might not be resizing the window realtime as you are moving it (some just show an outline), and when it's doing that, it's generating umpteen events as the window is being dragged - all compounding together.

This case only addresses dynamic resizing however, which is not as often as the "command line is two lines high" resize now. This workaround will not help in that case - but being able to mark the mapper with non-resize property in the framework would.

Just some ideas, might be relevant or not.

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

Re: Whats Your Gui Look like?

Post by Oneymus »

When Vyzor is resizing, I set a flag that prevents it from trying to resize more than once at a time. It would crash horribly otherwise.

Vyzor could respond to various state changes better. If I find myself so motivated, I may take a look at it. Expect nothing soon; even if I were to start on it immediately, it'd require a lot of changes.

Post Reply