Click here to Skip to main content
Click here to Skip to main content

WebConfig - your wireless router has it, now you can too

, 20 Oct 2009 MIT
Rate this:
Please Sign up or sign in to vote.
Use a web browser to configure your application.

Introduction

If you own a wireless router or set-top box, you probably know about the W.A.P. (web admin page) used to configure it.

Besides embedded systems, web interfaces also come in handy for server applications (such as auto-builders) where you want more security than VNC, dynamically generated forms that look good, and debug tools for real-time simulation like games. Adding an HTTP server to your application means you can control it with a web browser through a network connection.

Form Design

The way I usually organize my web interface is with a navigation sidebar on the left and a form on the right. The form is a simple table with label and input columns.

Game designers want instant feedback so I use onclick and onchange to auto-submit certain forms. Each form is a collection of inputs that are related, such as "Debug" or "Camera".

Using the Code

Adding an input in the code is brief, so it can be removed later before shipping. The input is named by the form and label. Lambda expressions are used to get and set the value.

string name = "david";
bool showStats = false;
int choice = 2;
int fun = 50;

new WebConfig.InputText("debug/name", () => name, (val) => name = val);
new WebConfig.InputBool("debug/show stats", () => showStats, 
                       (val) => showStats = val);
new WebConfig.InputSelect("debug/choose", () => choice, 
   (val) => choice = val).SetOptions("now", "later", "never");
new WebConfig.InputSliderInt("debug/fun", () => fun, (val) => { fun = val; });

new WebConfig.InputButton("debug/Capture Screen", (val) => CaptureScreen());
new WebConfig.InputLink("debug/View Screen", "Screen.JPG");


int numRequested = 10;
int BallRadius = 10;
float BallSpeed = 1;
new WebConfig.InputSliderInt("game/Number of Balls",
  () => numRequested, (val) => { numRequested = val; StartAnimation(); });
new WebConfig.InputSliderInt("game/Ball Radius",
  () => BallRadius, (val) => { BallRadius = val; }).SetRange(0, 20, 0);
new WebConfig.InputSliderFloat("game/Speed Factor",
  () => BallSpeed, (val) => { BallSpeed = val; }).SetRange(0.1f, 2, 1);

bool showPos = false;
int choice = 1;
new WebConfig.InputBool("game/show pos", () => showPos, (val) => showPos = val);
new WebConfig.InputSelect("game/choose", () => choice, 
   (val) => choice = val).SetOptions("now", "later", "never");

Vec3 BallColor = new Vec3(0, 1, 0);
new WebConfig.InputSliderFloat("game/Color.Red",
  () => BallColor.x, (val) => { BallColor.x = val; }).SetRange(0, 1, 1);
new WebConfig.InputSliderFloat("game/Color.Green",
  () => BallColor.y, (val) => { BallColor.y = val; }).SetRange(0, 1, 1);
new WebConfig.InputSliderFloat("game/Color.Blue",
  () => BallColor.z, (val) => { BallColor.z = val; }).SetRange(0, 1, 1);

Sliders can be int or float with decimal places, forms can be set to auto-save and auto-submit, and buttons and links can be used to perform actions and show resource files.

Sample Application

To demonstrate WebConfig, I used a bouncing ball simulation. WebConfig inputs configure various simulation parameters in real-time. Change the number of balls and see the animation change accordingly.

Going Forward

Embedded systems are normally written in C++. I leave the port to the reader. The port is straightforward, if not trivial. I avoided threads and heavy reliance on .NET interfaces.

A useful feature for embedded systems and server applications would be a secure password form.

Compatibility

I tested on Firefox 3.0 and IE 8.0; notice they look a little different.

Credits

It would have taken a lot longer to write this article without:

License

This article, along with any associated source code and files, is licensed under The MIT License

Share

About the Author

milkplus
Software Developer Buzz Monkey Software
United States United States
David McClurg is a game programmer from Oregon, USA. He is currently interested in C#, xna for zune, and steering behaviors. When not coding, David enjoys tennis, kayaking, and botany.

Comments and Discussions

 
Generalre automatic redirection PinmemberAjay Kale New10-Sep-10 5:23 
GeneralRe: re automatic redirection Pinmembermilkplus10-Sep-10 8:19 
GeneralC++ port Pinmembermilkplus3-Jan-10 17:10 
GeneralExcellent! PinmemberBit-Smacker3-Dec-09 11:16 
QuestionHow to get the adminpage? PinmemberLegoMindstorms29-Oct-09 11:59 
AnswerRe: How to get the adminpage? Pinmembermilkplus29-Oct-09 12:52 
GeneralRe: How to get the adminpage? PinmemberLegoMindstorms30-Oct-09 6:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 20 Oct 2009
Article Copyright 2009 by milkplus
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid