Inspector UI redux
Add comment!August 28th, 2009
I recently made some changes to the inspector UI system in Overgrowth to make it more powerful and look cooler. To recap, the inspector is essentially a flexible dialog that pops up when the user is required to make some kind of choice.
The inspector was somewhat tricky to make, but what's cool about it is that now any dialog that we (or eventually modders) need is trivial to create. For example, David recently asked me to make some UI for his upcoming wind system. Instead of having to construct some UI from scratch, in literally a matter of minutes, I was able to commit this little guy:
A breezy dialog. Note the new theme from Iiro and sliders now can have an editable numeric field next to them, per GirlFlash's suggestion.
It's very easy to create a dialog. Using JavaScript, you simply pass an inspector window an array of objects, like so:
var items = [{
name: 'Windiness',
textfield: true,
content: {
min: 1,
value: 50,
max: 100
},
type: 'slider'
},
{
name: 'Fogginess',
textfield: true,
content: {
min: 1,
value: 50,
max: 100
},
type: 'slider'
},
{
name: 'Rain',
content: true,
type: 'checkbox'
},
{
name: 'Lightning',
content: true,
type: 'checkbox'
},
{
name: 'Wind Sounds',
content: [{
name: 'Light gust'
},
{
name: 'Heavy gust',
value: true
},
{
name: 'Summer breeze'
},
{
name: 'Stormy'
}],
type: 'multicheckbox'
}];
Then the inspector window creates the controls and such and presents it to the user. When the user chooses their values and presses "OK", the inspector serializes the result into a simple JavaScript object and passes it back, for instance {"Windiness":"50", "Fogginess":"50", "Rain":true, "Lightning":true, "Wind Sounds":["Heavy gust"]}. This can be overridden to return it in other ways, or even update live instead of when the user presses OK.
Here's another example. Previously, to create a new server, you had to use the Overgrowth console because we just didn't have any UI for it. Well, thanks to the inspector, with a tiny bit of code we have a pretty simple UI.
Note, those warning messages appear if you try to press OK without having filled in a required field. Here's a close up of the animated glowing effect, to draw attention to the field in question:
Finally, here is a screenshot of a full inspector window with all of the widgets I've created so far: full inspector window. Any controls I am missing?
