Web Config-您的无线路由器拥有它,现在您也可以（译文）

原文地址：https://www.codeproject.com/Articles/43136/WebConfig-your-wireless-router-has-it-now-you-can

原文作者：milkplus

译文由本站 robot-v1.0 翻译

前言

Use a web browser to configure your application.

使用网络浏览器配置您的应用程序.

• 下载源代码24.7 KB(Download source code - 24.7 KB)
• 下载演示-19.7 KB(Download demo - 19.7 KB)

介绍(Introduction)

如果您拥有无线路由器或机顶盒,则可能了解W.A.P. (网络管理页面)用于配置它.(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.) 除了嵌入式系统之外,Web界面对于服务器应用程序(例如自动生成器)也很方便,在服务器应用程序中,您需要比VNC更高的安全性,看上去动态良好的动态生成的表单以及用于实时模拟游戏(例如游戏)的调试工具.在应用程序中添加HTTP服务器意味着您可以通过网络连接使用Web浏览器对其进行控制.(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)

我通常组织Web界面的方式是在左侧的导航侧栏和在右侧的表单.该表格是带有标签和输入列的简单表格.(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 自动提交某些表格.每种形式都是相关输入的集合,例如" Debug"或" Camera".(to auto-submit certain forms. Each form is a collection of inputs that are related, such as “Debug” or “Camera”.)

使用代码(Using the Code)

在代码中添加输入内容很简短,因此可以在发货前将其删除.输入由表单和标签命名. Lambda表达式用于获取和设置值.(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)

为了演示WebConfig,我使用了弹跳球模拟. WebConfig输入实时配置各种模拟参数.更改球数,并查看动画的相应变化.(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)

嵌入式系统通常用C ++编写.我将端口留给读者.该端口很简单,即使不是很简单.我避免使用线程并严重依赖.NET接口.(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)

我在Firefox 3.0和IE 8.0上进行了测试;注意它们看起来有些不同.(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:)

• Carpe DHTML滑块(Carpe DHTML slider)
• HTTP骨架服务器(HTTP Skeleton Server)
• 球动画(Ball Animation)

许可

本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。