MaxGUI.stylesheet

BlitzMax Forums/MaxGUI Module/MaxGUI.stylesheet

Scaremonger

(Posted 2013) [#1]

Current version: VERSION 1.20.

I have implemented a MaxGUI stylesheet/skin module which may be of use to others.

It is still a very early version but being a part of my current project I will be developing it further so comments, suggestions and bug reports are all welcome ;)

The module source can be downloaded from Sourceforge and I have started a wiki for documentation.

You will need to compile it (see wiki) and there is an example in the source directory.

Objects can be styled by element, name or class (Stored in .extra) and can have different setting by platform. These styles can be loaded from a file, a string or incbin; Their format is similar to CSS.

MaxGUI elements:
button, canvas, checkbox, combobox, listbox, htmlview, label, menuitem, node, panel, progbar, radio, scrollbar, stepper, tabber, textarea, textfield, toolbar, toolwindow, trackbar, treeview, window.

Style declarations:
* background-color: <color>;
* background-image: <none> | <image>; (Only works on panels)
* border: none|solid|threed; (Windows Only)
* bottom: N(px);
* color: <color>;
* enabled: <true>|<false>
* height: N(px);
* left: N(px);
* opacity: 0.0 to 1.0;
* position:<position>;
* right: N(px);
* top: N(px);
* visibility: hidden|visible
* width: N(px);

Colors can be:
* #rrggbb
* Color name;
* Operating system defaults
* none

Position can be center,align or relative and can be applied in three ways:
* <all>
* <vertical>,<horizontal>
* <top>,<right>,<bottom>,<left>

Example Stylesheet

/// MaxGUI Stylesheet Example
//  BLUE SKIN
/
button		{
	background-color:#043650;
	border:solid;
	color:#21adea;
	opacity:0.5;
}
canvas		{
	background-color:#ffffff;
	border:solid;
}
checkbox {
	background-color:none;
	border:none;
	color:#21adea;
}
combobox	{
	background-color:#43a8dc;
	border:solid;
	color:#043650;
	opacity:0.5;
}
htmlview	{}
label		{
	color:#21adea;
}
listbox		{
	background-color:#43a8dc;
	border:solid;
	color:#043650;
	opacity:0.5;
}
menuitem	{}
node		{}
panel		{
	background-color:#030c1b;
	border:solid;
	color:#043650;
	opacity:0.5;
}
progbar		{
	background-color:#43a8dc;
	border:solid;
	color:#043650;
	opacity:0.5;
}
radio {
	background-color:none;
	border:none;
	color:#21adea;
}
slider 		{
	background-color:#43a8dc;
	border:solid;
	color:#043650;
	opacity:0.5;
}
tabber		{}
textarea	{
	background-color:#43a8dc;
	border:solid;
	color:#043650;
	opacity:0.5;
}
textfield 	{
	background-color:#43a8dc;
	border:solid;
	color:#043650;
	opacity:0.5;
}
toolbar		{}
treeview	{}
window		{
	background-color:#061939;
}

Known bugs:
* background-color:none; fails with some releases of MaxGUI and is currently disabled.

Screenshots
Screen shots are available here.

Kryzon

(Posted 2013) [#2]

This is interesting.
Can you post screenshots of how it looks?

Grisu

(Posted 2013) [#3]

Sounds interesting. So it can be used with any existing MaxGUI project?

degac

(Posted 2013) [#4]

Hi

I tried to compile the module but I get

gadget.RemoveColor()

not found.

This method is not 'standard' in maxgui (or at least in mine version...)
Did you miss something?

Scaremonger

(Posted 2013) [#5]

@Kryzon: I have posted some screenshots on SF here. They are taken from the three buttons on the Example application.

Scaremonger

(Posted 2013) [#6]

@Grisu: Yes you can add it to an existing project easily.

You would need to comment out existing formatting code and create a stylesheet. Add the skin with an incbin statement to your code, then simply call:

Stylesheet.load( "incbin::skin.txt", window )

@degac: Thats odd. Maybe it's a MaxGui version problem, I'm using version 1.48 on Windows to develop it.

This line supports background-color:none; so is not essential at the moment. If you comment out that line or replace the line with RemoveGadgetColor( gadget ). I will work it out for the next release.

I have uploaded revision 1.1b to Sourceforge with this line commented out.

degac

(Posted 2013) [#7]

Ok, thanks, I'll try with the latest version (of MaxGUI) on Sourceforge (1.41b)

Scaremonger

(Posted 2013) [#8]

22 Oct 2013; Version 1.20 uploaded to Sourceforge.

Changes to styles:
* Split 'slider' class into 'stepper', 'trackbar' and 'scrollbar' elements.
* background-image:none;
* background-image:<image>;
* Added 16 HTML 4.01 standard colour names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, And yellow.

Examples:
* Updated example skins with new property values..

Module:
* Redesigned ApplyStyle()
* Added ColourName()
* Functions within type are in alphabetical order!
* Several bug fixes.

Hezkore

(Posted 2014) [#9]

I like it!
However "GADGET_COMBOBOX" gets set to width 1px whenever a new style is applied.