Orion Custom Gumps Findings

Discussion about the technical aspects of scripting. Ask about all issues involving your freelance projects here.
Post Reply
MagicUser
Elder Scribe
Posts: 174
Joined: Mon Nov 03, 2014 2:24 pm
Location: PST

Orion Custom Gumps Findings

Post by MagicUser »

Orion has some awesome features. Its biggest drawback (and its a big one) is its lack of resources. A lot of the features can be sussed out by using them and then seeing the results. Not so much with gumps and custom gumps are no exception. I suppose at least with regular gumps you can record what you did to see how to access it in a script setting. Not so much with custom gumps. Having figured out how to make a working custom gump in Orion, I thought I would share some of my findings.
Example of Overall custom Gump functionality explored
Example of Overall custom Gump functionality explored
customGump.jpg (58.79 KiB) Viewed 3516 times
Before I get into it, a huge shout out to ZeeeQi for getting me on the right track for understanding the mechanics of Orion's custom gumps.

I should probably also preface that I have made several graphical user interfaces for college classes (Java and Python) and even for EasyUO so I may take things as simpler than they actually are. Please feel free to add or ask for clarification.

I dislike using text input for GUIs. Input testing is a nightmare for everyone, besides often times it is more convenient for the user to use a slider, checkbox, dropdown, etc. Unfortunately, for any custom gump pieces you have to list a used graphic. That means that you have to iterate through the graphics till you find a good fit. The sliders were much too complex for me to deal with this technique, but here are the other graphics I found worked well:
CheckBox
(unchecked): 0x00D2
unchecked.jpg
unchecked.jpg (997 Bytes) Viewed 3516 times
(checked): 0x00D3
checked.jpg
checked.jpg (1.02 KiB) Viewed 3516 times
ComboBox
(closed): 0x90
closed.jpg
closed.jpg (2.55 KiB) Viewed 3516 times
(open): 0x90
Shown in message below.

Button
(default): 0x00F9
Shown in message below.
(selected): 0x00F7
Shown in message below.
(pressed): 0x00F8
Showen in message below.

In Orion you must have 3 things to have the custom gump function.
You must have the script that created the custom gump selected when you want to update anything on the gump.
You need something that "makes a selection in the gump." The only thing that I found that has that listed as a parameter is the Button. In that case, you must click the button whenever you wish to update the gump.
You need a call back function that may run independently (you'll need globals) of the script whenever you press the button.

From within the call back function there are 3 important types information retrieving functions.
ReturnCode - The serial of what triggered the call back function. (0 - closed the gump; serial chosen - Okay buttons).
responses (e.g. Checks) - A list of serials or serials/index of all the SET input boxes. Meaning for checkboxes it only shows the boxes that are checked (not the ones that aren't). For the other one's it returns a list of PairIntInts. The Index is the serial and the Value is the item selected. For ComboBoxes you have to use the value as an index for the list that was used to generate.
response (e.g. CheckBox) - The value that a gump input is holding (for a serial). For a checkbox its true if its checked and false if its not. For combobox its the index of the list given that was selected. For text its the text.

Hope this helps people who are interested in trying to get into guis in Orion, but have so far been unable to. Again feel free to ask me questions, correct me, or add to what I have said. I tend to be pretty busy once the school term starts, but I will do my best.
Respectfully,
Paroxysmus ILV Master Spellcaster
MagicUser
Elder Scribe
Posts: 174
Joined: Mon Nov 03, 2014 2:24 pm
Location: PST

Re: Orion Custom Gumps Findings

Post by MagicUser »

Graphic demo for open ComboBox
Graphic demo for open ComboBox
open.jpg (6.17 KiB) Viewed 3514 times
Graphic demo for default Button
Graphic demo for default Button
default.jpg (2.31 KiB) Viewed 3514 times
Graphic demo for selected Button
Graphic demo for selected Button
selected.jpg (2.2 KiB) Viewed 3514 times
Graphic demo for pressed Button
Graphic demo for pressed Button
pressed.jpg (2.33 KiB) Viewed 3514 times
Respectfully,
Paroxysmus ILV Master Spellcaster
PierreDole
Novice Scribe
Posts: 8
Joined: Sat Sep 12, 2015 3:59 pm

Re: Orion Custom Gumps Findings

Post by PierreDole »

For custom gumps, grab ClassicUO and write a plugin. You'll have full access to gumps (read/write), network packets (read/write) and of course all ingame informations and player control. Or putting this in other words: you can customise the client as you want.
MagicUser
Elder Scribe
Posts: 174
Joined: Mon Nov 03, 2014 2:24 pm
Location: PST

Re: Orion Custom Gumps Findings

Post by MagicUser »

PierreDole wrote:
Mon Sep 20, 2021 3:39 am
For custom gumps, grab ClassicUO and write a plugin. You'll have full access to gumps (read/write), network packets (read/write) and of course all ingame informations and player control. Or putting this in other words: you can customise the client as you want.
That isn't in Orion though.
Respectfully,
Paroxysmus ILV Master Spellcaster
davethemage
Grandmaster Scribe
Posts: 89
Joined: Sun Aug 09, 2020 2:13 pm

Re: Orion Custom Gumps Findings

Post by davethemage »

Never looked at custom gumps before. If i do this will be some nice information to use. Thanks for posting!
IGN: Edwin Roach
MagicUser
Elder Scribe
Posts: 174
Joined: Mon Nov 03, 2014 2:24 pm
Location: PST

Re: Orion Custom Gumps Findings

Post by MagicUser »

Lejind said it'd be nice to have a basic script just to demo what I was talking about. As I said I could do, here is a demo script below. I've included an image as well. Its a stripped down version of mine (to show the basics). Let me know if there is anything I can further explain.

Demo Shows
  • Background
  • Titles
  • CheckBox
  • ComboBox with decreasing numbers
  • Text with limited input
  • Button
  • Some Helper functions
  • Some General Gump Setup
guiDemo.jpg
guiDemo.jpg (16.11 KiB) Viewed 3320 times
I also took the liberty of including a method to see the output. Rather than in game text.
outputForDemogui.jpg
outputForDemogui.jpg (9.35 KiB) Viewed 3320 times

Code: Select all

function main() {	
	maxWidth = 115;
	maxHeight = 220;
	textBoxHeight = 20;
	borderWidth = 5;
	windowX = 5;
	windowY = 5;
	
	//Higher numbers at the top.
	numOps = [];
	for (var i = 50; i >= 0; i--) {
		numOps.push(i);
	}
	
	serialIndex = 0;
	
	checkBoxIndices = [];
	checkBoxes = [true];
	checkBoxParamIndex = 0;
	checkBoxGlobals = ['on'];
	
	comboBoxIndices = [];
	listsUsed = [numOps];
	comboBoxes = [40];
	comboBoxParamIndex = 0;
	comboBoxGlobals = ['val'];
	
	textIndices = [];
	texts = ['I like to eat pie.'];
	textParamIndex = 0;
	textGlobals = ['text'];
	
	customGump = Orion.CreateCustomGump(serialIndex++);
	customGump.Clear();
	customGump.SetCallback('writeValues');
	currentX = 0;
	currentY = 0;
	
	customGump.SetX(windowX);
	customGump.SetY(windowY);
	customGump.Update();
	
	//Background.
	gumpSetup();
	
	//Check Boxes
	setCheckBoxDemoGump(checkBoxes[checkBoxParamIndex++]);
	
	//Combo Boxes
	setComboBoxDemoGump(comboBoxes[comboBoxParamIndex++]);
	
	//text
	setTextDemoGump(texts[textParamIndex++]);
	
	//Button
	setButtonDemoGump();
	
	Shared.AddVar('serial', serialIndex);
	
	Shared.AddArray('checkBoxIndices', checkBoxIndices);
	Shared.AddArray('checkBoxes', checkBoxes);
	Shared.AddArray('checkBoxGlobals', checkBoxGlobals);
	
	Shared.AddArray('comboBoxIndices', comboBoxIndices);
	Shared.AddArray('listsUsed', listsUsed);
	Shared.AddArray('comboBoxes', comboBoxes);
	Shared.AddArray('comboBoxGlobals', comboBoxGlobals);
	
	Shared.AddArray('textIndices', textIndices);
	Shared.AddArray('texts', texts);
	Shared.AddArray('textGlobals', textGlobals);
	
	customGump.Update();
}

//Callback function.
function writeValues() {
	if (isInArray([0, Shared.GetVar('updateButtonSerial')], CustomGumpResponse.Serial())[0]) {
		TextWindow.Clear();
		
		for (var i = 0; i < Shared.GetArray('checkBoxIndices').length; i++) {
			write(Shared.GetArray('checkBoxGlobals')[i] + ': ' + CustomGumpResponse.CheckBox(Shared.GetArray('checkBoxIndices')[i]));
		}
		
		for (var i = 0; i < Shared.GetArray('comboBoxIndices').length; i++) {
			write(Shared.GetArray('comboBoxGlobals')[i] + ': ' + Shared.GetArray('listsUsed')[i][CustomGumpResponse.ComboBox(Shared.GetArray('comboBoxIndices')[i])]);
		}
		
		for (var i = 0; i < Shared.GetArray('textIndices').length; i++) {
			write(Shared.GetArray('textGlobals')[i] + ': ' + CustomGumpResponse.Text(Shared.GetArray('textIndices')[i]));
		}
	}
}

//Setup (Don't need to be in functions.
function gumpSetup() {
	customGump.SetNoMove(false);
	customGump.SetNoClose(false);
	boxBorder(customGump, currentX, currentY, maxWidth, maxHeight, '#FFFFE0', borderWidth);
	//Top.
	boxBorder(customGump, currentX, currentY, maxWidth, textBoxHeight, '#FFFF00', borderWidth);
	currentX += borderWidth;
	//Top Text.
	customGump.AddText(maxWidth * 1/16, 0, '0', "Paro's Demo GUI");
	
	currentY += textBoxHeight;
}

function setCheckBoxDemoGump(on) {
	textBox("Check Box Demo", 'static');
	currentY += textBoxHeight;
	
	checkBox('Check Box', on);
	
	currentY += textBoxHeight * 1.5;
	customGump.Update();
}

function setComboBoxDemoGump(nums) {
	textBox("Combo Box Demo", 'static');
	currentY += textBoxHeight;
	
	comboBox(numOps, nums, 40);
	
	currentY += textBoxHeight * 1.5;
	customGump.Update();
}

function setTextDemoGump(text) {
	textBox("Text Demo", 'static');
	currentY += textBoxHeight;
	
	textBox(text, 'entry');
	
	currentY += textBoxHeight * 1.5;
	customGump.Update();
}

function setButtonDemoGump() {
	textBox("Button Demo", 'static');
	currentY += textBoxHeight;
	
	Shared.AddVar('updateButtonSerial', serialIndex);
	customGump.AddButton(serialIndex++, currentX, currentY, '0x00F9', '0x00F7', '0x00F8', '0');
}

//Helper functions.
function textBox(text, mode) {
	if (mode == 'static') {
		customGump.AddText(currentX, currentY, 'black', text);
	}
	else if (mode == 'entry') {
		textIndices.push(serialIndex);
		
		customGump.AddTextEntry(serialIndex++, currentX, currentY, 'black', text, 110, textBoxHeight, 18);
	}
}

function checkBox(text, state) {
	checkBoxIndices.push(serialIndex);
	
	customGump.AddCheckbox(serialIndex++, currentX, currentY, '0x00D2', '0x00D2', '0x00D3', Number(state), 'black', text);
}

function comboBox(items, value, width) {
	comboBoxIndices.push(serialIndex);
	
	customGump.AddComboBox(serialIndex++, currentX, currentY, '0x90', 0, '0x90', width, 0);
	
	for (var i = 0; i < items.length; i++) {
		customGump.AddComboBoxText(items[i], '38', value == items[i]);
	}
}

function boxBorder(customGump, x, y, width, height, color, borderWidth) {
	customGump.AddColoredPolygone(x, y, width, height, color);
	customGump.AddColoredPolygone(x, y, width, height, '#FFEFD5', 1, borderWidth, 1);
}
	
function write(message) {
	TextWindow.Open();
	TextWindow.Print(message);
}
	
function isInArray(array, item) {
	found = false;
	
	var i = 0;
	while(!found && i < array.length) {
		if (array[i] == item)
			found = true;
		else
			i++;
	}
	
	return [found, i];
}
Respectfully,
Paroxysmus ILV Master Spellcaster
Post Reply