Lil' Vivid-gui shot.

Community Forums/Showcase/Lil' Vivid-gui shot.

AntonyWells(Posted 2004) [#1]


V1.0 free with update 2, no additional charges for future versions either.

The look is 100% customizeble, via styles. Each style can also specify sounds for the gui, when specific events occur.
Here's the code it took to set up the look seen above.
The alpha is dynamic, and changes according to where you're working. (modes too. can have a solid/non textured gui if you wish)

Global style_Default=style_create()
style_texture(style_default,back)
style_pressSound(style_default,"gui_dat\but7.wav")
style_clickSound(style_default,"gui_dat\but3.wav")
style_activeSound(style_default,"gui_dat\warn1.wav")
style_motionSound(style_default,"gui_dat\move2.wav")
style_doubleClickSound(style_default,"gui_dat\but4.wav")


(I.e ease of use is a big priority.)

The code to create the above was,

Include "Includes\VividGL_Lite.bb"
Graphics_Init(640,480,32,1)  ;-- [ Setup full screen display
Graphics_Setbuffer Graphics_Back() ;-- [ Set our backbuffer.
Include "Includes\vgui.bb" ;include the optional gui module.'

;load a background for this little demo.
Os_Back=Texture_Load("Example_Media\osBack.bmp")
If Not os_back RuntimeError "Could not load Os_Back1.jpg, check you have the latest freeimage.dll"
Texture_Blend os_back,3 ;additive blending.
Texture_Filter os_back,1 ;linear filtering. all we need for this.
back=Texture_Load("example_media\back1.bmp")
Texture_Blend back,1 ;combined blending
Texture_Filter back,1 ;linear filtering
Texture_Scale back,0.1,1,1 ;scale the texture. 

fol=gui_folderView(20,20,400,300,style_default,"Test") ;gui manages it for you.
win=gui_window("Hey botch",100,320,100,100,style_default)
scop=gui_window("Nothing",40,40,250,240,style_default)
gui_setStatus scop,"Testing Nothing but me"
gui_setStatus fol,"Nothing going on here" ;set window status

test=gui_list() ;create new gui list. (Allows you to have multiple uis in action at once)
gui_listAdd( test,fol)
fol=gui_folderView(20,20,400,300,style_default,"Test")
gui_listAdd( test,fol)
fol=gui_folderView(20,20,400,300,style_default,"Test")
gui_listAdd( test,fol)
gui_listAdd(test,win)
gui_listAdd(test,scop) ;only need to add TOP level of the gui element.
style_texture(style_default,back) ;add texture to the default style, we're using.

While Not KeyDown(1)
Render_Cls(True)
	gui_updateList(test) ;this one function handles everything for you.
	Texture_Activate os_back,0
	Render_Begin()
	Render_Color(40,40,40,1)
		Render_QuadFast( 0,0,GraphicsWidth(),GraphicsHeight())
	Render_End()
	Unlock_2D()
	Texture_Pop()
	
	For j=1 To gui_eventCount() ;We just respond to events
		Select gui_eventId(j)
			Case event_GadgetPressed
				gadget=event_gadget(j)
				If gadget=QuitGadget ;for example
				     End
			  EndIf
			Case Event_GadgetClicked
	
			Case Event_GadgetIn
		   Case Event_FilePicked
		   	file$=Event_File() ;doubled click on a file.
			
		End Select
	Next ;and there more events, to handle all siturations.  you simply use what you need.
	gui_ClearEvents()
	gui_renderList(test) ;renders the gui list provided. can have multiple lists.
	Render_Flip(False)
Wend


I'll release a exe (In this thread only) shortly, for anyone interested.


Erroneouss(Posted 2004) [#2]
wohhhhhhhhhh....
that thing looks sweet!


Picklesworth(Posted 2004) [#3]
Yay!
Keep in mind that there's a lot of weirdos who like to delete stuff on treeviews and such, even if you don't know why, k?
Looks nice - I think your screenie looks a bit bad though, maybe give a better example of how the alpha works with a nearly opaque window, rather than all mostly transparent :)
(Even though I know how it can look, I just like pictures.)


AntonyWells(Posted 2004) [#4]
Yeah, it's very modular by design. You can use gui_Free or gui_FreeAttached to delete already created elements, built in or otherwise.

Here's a shot without the noisy background. Also demonstrates the Gui_Image() gadget, that lets you use an actual vivid texture(At any size).

Also shows how you can manually scale the alpha(6x in this case, on the window image) to make any one gadget in paticular completely solid, or just a bit more solid. The window image is a texture created in vivid, and update once per frame with texture_Grab..simple to use still.




AdrianT(Posted 2004) [#5]
the glowing text effect on transparent windows is kind of cool :) Don't like backgrounds much so I much prefer the above.

Would look sweet in an elite type game where you get to access a computer to communicate with other players and NPC's etc.


AntonyWells(Posted 2004) [#6]
Kind of a side effect more than a design feature tbh, it's modulated in atm. Will most likely switch to regular masked text though, it's a little too...dale winton atm.(The text)

As for elite..hell yeah, mapped onto the 3d dashboard..total immersion. I'd prefer to think of it as red dwarf 10 - the game. tho ;)


xmlspy(Posted 2004) [#7]
Nice, looks very interesting.


jfk EO-11110(Posted 2004) [#8]
I must confess, that's pretty cool.


Damien Sturdy(Posted 2004) [#9]
looks ACE..


Lol at the Dale Winton quote :D


N(Posted 2004) [#10]
Looks like it works fine. Programmer art is icky.


AntonyWells(Posted 2004) [#11]
That's like walking up to edward scissor hands and cracking your knuckles that is. My 'art' is...not art. let's leave it at that :)

Thanks for the feedback everyone.
Any suggestions btw? Gadgets/anything in paticular you guys would find useful?(Even if you don't plan on buying vivid, a good idea is a good idea.)


N(Posted 2004) [#12]
Since you asked, I'll just lay out a list of gadgets that most people would use extensively:

Spinner
Listbox (looks like you got a form of that in now)
Treeview
Tabstrip
Toolbar
Menubar
Context Menu

'Fraid those're the only ones I can think of off the top of my head. (Literally, I found pieces of paper with those written on them up there.)


AntonyWells(Posted 2004) [#13]
Yeah, all pretty vital. though spinner is lost on me. I have a vague idea..but..?


RifRaf(Posted 2004) [#14]
looks very nice. keep it up


N(Posted 2004) [#15]
Antony: A spinner is basically a numeric-input only textbox with little up and down buttons on the side that increment or decrement the value of the text box by some stepping value.

I'd take a picture for you, but being on my parent's PC, I can't do much at the moment.


AntonyWells(Posted 2004) [#16]
Oh those, I know what you mean. Just never heard 'em called by their real name. (Or more likely I did and forgot.)


N(Posted 2004) [#17]
Can't blame you- I didn't know what anything was called 'til I started messing with the form designer in VCPP 6.


AntonyWells(Posted 2004) [#18]
Yeah, winAPi is still a api too far as far as I'm concerned. never touched it.

Shot of the viewer. Open been working on this for a bit.

[img http:\\www.excess.eclipse.co.uk/VividGui3.JPG]

Only just started on this, after wrapping up most of the core functionality of the gui. Gui will be ready for update 2. The viewer will be out a few days later.

The viewer will be freeware, for non vivid owners too. You can display 3d in it, and I'll throw in some nice fx for the high end cards.


Red Ocktober(Posted 2004) [#19]
Ant... i still get this darn "UserLib Not Found" error on one of my machines...

dx 8.1 Radeon9200 WinXP...

do i need an upgraded version of OpenGl or something?

--Mike


AntonyWells(Posted 2004) [#20]
it's nothing to do with opengl. It's a missing .dll, which means you've not got something installed which vivid relies on.

Future versions of the .dlls being compiled in generic cross platform compatible GCC, so wait for the updated demos is the best advice I can offer. Not long now.


Red Ocktober(Posted 2004) [#21]
okay... strange though... as it runs on one of the other machines with no problem.

similar config (except video card and dx9c)

--Mike


N(Posted 2004) [#22]
Is there any way I can fiddle with the GUI graphics without buying Vivid? 0_o

I feel like doing something similar to Eniretu and the HL2 UI. (You could distribute it with Vivid so users could have something to use without having to make their own)

Like, just upload an exe that has some image templates that I can modify and I'm set.

Oh, and one other suggestion for a gadget: Rollout- look at F-UI 3D or Eniretu for an example of those. You'll have to do some hunting for the latter of the two.


AntonyWells(Posted 2004) [#23]
I saw your eniretu lib, and I liked the look of it from what I can recall. (it had a greenish xp like skin right? knowing me i'm remembering windows default skin.)

Anyway, how do you piece together your skins? I had initially wanted to do 9 piece skins(I.e so they could be heavily stylized yet still dynamic), but it's single piece presently, because of no good skins around, and working with an artist who sees them as an evil greater than satanic rituals(I think.).
if you wanna try something like that, that'll be cool. no point messing with the single skin gfx, i'm ditching that, even if I just supply my own generic(Read ugly) skin :)

Anyway, before I ramble you into a coma, i'll send an .exe out or something in a day or so if you want to try that. Use the addy in your profile?


N(Posted 2004) [#24]
I can form a skin in various ways. Stre (the green one) worked with a single PNG per gadget (e.g., Dialog.png for the backgrounds of windows and their titlebars, spinner.png for spinners, button.png for guess what, etc.), Eniretu used a single texture containing all the gadget textures (one 64*64 block for each gadget or so with the text graphics on the bottom taking up a 256*256 segment).

I prefer the per-gadget method of skinning so I don't have to worry about UV coordinates too much.

Anyhow, yeah, just use the address in my profile.


AntonyWells(Posted 2004) [#25]
Ah, well we're not really on about the same thing.

By skin, I mean 9 seperate images, which can be seperate textures. These 9 textures form the 'chunk' of a body. 9 = the outter parts, and the ninth the centre.

0= Top left (Only ever blitted once.
1 = Top part (Is blitted to fit the length of the gadget- width Of corner pieces * 2)
and so on for each 'side'


So this way, you can say still have buttons of any size, yet still look like they were hand-drawn to that size(As they don't have to be square and symetrical(sp?)).
A search for Voax on blitzcoder(my last gui before going 3d)
may show what I mean...doubt it has media with it still tho..
so single image icons overlaid(Which can be done anyway, gui_image gadget) arn't really going to be used apart from a few arrow/file icons.


N(Posted 2004) [#26]
Well what I did was create quads and UV them so that the center and edges (not corners) were the only things that stretched (hence why this works). The corners were usually a 16*16 pixel block on the texture (each, obviously, in the corner they represented) and the center was typically a 32*32 block (in the center, obviously).

Maybe look at the Eniretu source/graphics to see what I mean.


AntonyWells(Posted 2004) [#27]
Yeah I know what you mean now. Wasn't an option back when I did voax(In b2d), but yeah, vivid has clamped/repeating textures so that way won't be a problem.


VIP3R(Posted 2004) [#28]
You've obviously been working hard on all this Vivid stuff and it looks very impressive.

Considering all the 'constructive?' abuse you've received along the way I just wanted to say...
I take my hat off to thee Antony, not many people can take that and turn it into something good. Respect.


AntonyWells(Posted 2004) [#29]
Thanks Viper. It's been an intresting journey, to put it lightly. :)


AntonyWells(Posted 2004) [#30]


Little shot of mod4x lighting, 2 lights, 1 green, 1 red.

Source used,

Include "Includes\VividGL_Lite.bb"
Graphics_Init(512,512,32,2)  ;-- [ Setup screen
Graphics_Setbuffer Graphics_Back() ;-- [ Set our backbuffer.

cam=Camera_Create()
Entity_Position cam,0,5,-20

cube=IO_LoadVGL("Example_Media\SmallCar.vgl",11,11,11)
JeepTex=Texture_Load("Example_Media\Jeep1.png")
Texture_Blend jeepTex,2

Entity_Texture cube,jeeptex
Texture_ColorScale jeepTex,4
Entity_Color cube,128,128,128
Entity_ColorMode cube,ColorMode_Color
Entity_CullMode cube,CullMode_Disabled
entity_GenNormals(cube)
Entity_Compile(cube,compile_agp)
Entity_Point cam,cube

test=Light_Create (1,1)
Light_Ambient test,0,0,0
Light_Diffuse test,255,0,0

shock=Light_Create(1,1)
Light_Ambient shock,0,0,0
Light_Diffuse shock,0,128,128
Entity_Position shock,30,0,-40
Entity_Position test,0,0,-40
Update_Lights()

Entity_Scale Cube,1,1,1 

While Not KeyDown(1)
	Render_Cls(True)
	Entity_Render cube
	Entity_Turn cube,MouseYSpeed(),MouseXSpeed(),0
	MoveMouse 320,240
	FlushMouse
	Text_Out(1,1,fps,0,0)
	Render_Flip(False)
Wend
End