Javascript 网络编程，简单但适用于机器人项目
构建一个基于Arduino的机器人，由网页控制。构建是Arduino UNO和Adafruit CC3000 wifi板 连接端很好！Arduino连接到家庭调制解调器，我的笔记本电脑也连接到家庭调制解调器 机器人的内部IP为192.168.1.7，当我从浏览器192.168.1.7/forward转到链接时，机器人会移动 但问题是，我想设置网页上的所有按钮并向其添加CSS，我想在按下按钮时控制机器人 这将是最适合我的方法Javascript 网络编程，简单但适用于机器人项目,javascript,html,css,arduino,Javascript,Html,Css,Arduino,构建一个基于Arduino的机器人，由网页控制。构建是Arduino UNO和Adafruit CC3000 wifi板 连接端很好！Arduino连接到家庭调制解调器，我的笔记本电脑也连接到家庭调制解调器 机器人的内部IP为192.168.1.7，当我从浏览器192.168.1.7/forward转到链接时，机器人会移动 但问题是，我想设置网页上的所有按钮并向其添加CSS，我想在按下按钮时控制机器人 这将是最适合我的方法 #include <Adafruit_CC3000.h> #
#include <Adafruit_CC3000.h>
#include <ccspi.h>
#include <SPI.h>
#include "utility/debug.h"
#include "utility/socket.h"
#include <avr/wdt.h>
//#include <stdlib.h>
const int IN1=4;
const int IN2=2;
const int IN3=7;
const int IN4=8;
char input;
// These are the interrupt and control pins
#define ADAFRUIT_CC3000_IRQ 3 // MUST be an interrupt pin!
// These can be any two pins
#define ADAFRUIT_CC3000_VBAT 5
#define ADAFRUIT_CC3000_CS 10
// Use hardware SPI for the remaining pins
// On an UNO, SCK = 13, MISO = 12, and MOSI = 11
Adafruit_CC3000 cc3000 = Adafruit_CC3000(ADAFRUIT_CC3000_CS,
ADAFRUIT_CC3000_IRQ, ADAFRUIT_CC3000_VBAT,
SPI_CLOCK_DIV2);
// you can change this clock speed
#define WLAN_SSID "aa" // cannot be longer than 32 characters!
#define WLAN_PASS "00"
// Security can be WLAN_SEC_UNSEC, WLAN_SEC_WEP, WLAN_SEC_WPA or
WLAN_SEC_WPA2
#define WLAN_SECURITY WLAN_SEC_WPA2
#define LISTEN_PORT 80
Adafruit_CC3000_Server httpServer(LISTEN_PORT);
String readString;
void setup()
{
pinMode( IN1 ,OUTPUT);// Right Motor 1st wire
pinMode( IN2 ,OUTPUT);// Right Motor 2nd wire
pinMode( IN3 ,OUTPUT);// left Motor 1st wire
pinMode( IN4 ,OUTPUT);// left Motor 2nd wire
Serial.begin(115200);
Serial.println(F("Hello, CC3000!\n"));
//Serial.print("Free RAM: "); Serial.println(getFreeRam(), DEC);
Serial.println(F("\nInitializing..."));
if (!cc3000.begin())
{
Serial.println(F("Couldn't begin()! Check your wiring?"));
while(1);
}
Serial.print(F("\nAttempting to connect to "));
Serial.println(WLAN_SSID);
if (!cc3000.connectToAP(WLAN_SSID, WLAN_PASS, WLAN_SECURITY)) {
Serial.println(F("Failed!"));
while(1);
}
Serial.println(F("Connected!"));
Serial.println(F("Request DHCP"));
while (!cc3000.checkDHCP())
{
delay(100); // ToDo: Insert a DHCP timeout!
}
// Display the IP address DNS, Gateway, etc.
while (! displayConnectionDetails()) {
delay(1000);
}
// Start listening for connections
httpServer.begin();
Serial.println(F("Listening for connections..."));
wdt_enable(WDTO_4S);
}
void loop() {
// Try to get a client which is connected.
Adafruit_CC3000_ClientRef client = httpServer.available();
if (client)
{
delay(5);
Serial.println(F("Client connected."));
// Process this request until it completes or times out.
// An HTTP request ends with a blank line
boolean currentLineIsBlank = true;
while (client.connected())
{
if (client.available())
{
char c = client.read();
//Serial.write(c);
if (readString.length() < 100) {
readString += c;
Serial.print(c);
}
if (c == '\n' && currentLineIsBlank) {
client.println(F("HTTP/1.1 200 OK"));
client.println("Access-Control-Allow-Origin: *");
// client.println("HTTP/1.1 200 OK");
client.println("Connection: Keep-Alive");
client.println("Content-Type: text/html");
client.println();
client.println("<!DOCTYPE HTML>");
//send the HTML stuff
client.println(F("<html><head><title>Randi Control Panel</title><style type=\"text/css\">"));
client.println(F("body { font-family: sans-serif }"));
/*
client.println("h1 { font-size: 14pt; }");
client.println("p { font-size: 10pt; }");
client.println("a { color: #2020FF; }");
client.println("</style>");
client.println("</head><body text=\"#A0A0A0\" bgcolor=\"#080808\">");
*/
client.println(F("<h1>Randi Controls</h1><br/>"));
client.println(F("<form method=\"link\" action=\"/forward\"><input type=\"submit\" value=\"Go!\"></form>"));
client.println(F("<form method=\"link\" action=\"/backward\"><input type=\"submit\" value=\"Reverse!\"></form>"));
client.println("<form method=\"link\" action=\"/stop\"><input type=\"submit\" value=\"Stop\"></form>");
client.println(F("<form method=\"link\" action=\"/Fleft\"><input type=\"submit\" value=\"Front Left\"></form>"));
client.println(F("<form method=\"link\" action=\"/Fright\"><input type=\"submit\" value=\"Front Right\"></form>"));
client.println(F("<form method=\"link\" action=\"/Bleft\"><input type=\"submit\" value=\"Back Left\"></form>"));
client.println(F("<form method=\"link\" action=\"/Bright\"><input type=\"submit\" value=\"Back Right\"></form>"));
client.println(F("<br/>"));
client.println(F("</body></html>"));
client.println();
break;
}
if (c == '\n') {
// You're starting a new line.
currentLineIsBlank = true;
}
else if (c != '\r') {
// You've gotten a character on the current line.
currentLineIsBlank = false;
}
}
}
// Give the web browser time to receive the data.
process(client);
readString = "";
}
}
void process (Adafruit_CC3000_ClientRef client)
{
if(readString.length() > 0){
if (readString.indexOf("/forward") > 0)
{
// put your main code here, to run repeatedly:
/*if (Serial.available()) {
// read the most recent character
*/
// input = Serial.read();
// switch based on the character
// switch(input){
// case 'F':
// forward
analogWrite(IN1,0);
analogWrite(IN2,255);
analogWrite(IN3,255);
analogWrite(IN4,0);
//break;
}
else if (readString.indexOf("/backward") > 0)
{
// case 'B': // backwards
// v=Serial.read();
analogWrite(IN1,200);
analogWrite(IN2,0);
analogWrite(IN3,0);
analogWrite(IN4,200);
// break;
}
// case 'S': // stop
else if (readString.indexOf("/stop") > 0)
{
analogWrite(IN1,0);
analogWrite(IN2,0);
analogWrite(IN3,0);
analogWrite(IN4,0);
// break;
}
// case 'L': // left
else if (readString.indexOf("/left") > 0)
{
analogWrite(IN1,0);
analogWrite(IN2,150);
analogWrite(IN3,0);
analogWrite(IN4,200);
}
// break;
// case 'R': // right
else if (readString.indexOf("/right") > 0)
{
analogWrite(IN1,150);
analogWrite(IN2,LOW);
analogWrite(IN3,200);
analogWrite(IN4,LOW);
}// break;
// default: // if character not recognized then stop
else if (readString.indexOf("/stop") > 0)
{
analogWrite(IN1, 0);
analogWrite(IN3, 0);
// break;
}
}}
// Tries to read the IP address and other connection details
bool displayConnectionDetails(void)
{
uint32_t ipAddress, netmask, gateway, dhcpserv, dnsserv;
if(!cc3000.getIPAddress(&ipAddress, &netmask, &gateway, &dhcpserv,
&dnsserv))
{
Serial.println(F("Unable to retrieve the IP Address!\r\n"));
return false;
}
else
{
Serial.print(F("\nIP Addr: ")); cc3000.printIPdotsRev(ipAddress);
Serial.print(F("\nNetmask: ")); cc3000.printIPdotsRev(netmask);
Serial.print(F("\nGateway: ")); cc3000.printIPdotsRev(gateway);
Serial.print(F("\nDHCPsrv: ")); cc3000.printIPdotsRev(dhcpserv);
Serial.print(F("\nDNSserv: ")); cc3000.printIPdotsRev(dnsserv);
Serial.println();
return true;
}
}
#包括
#包括
#包括
#包括“utility/debug.h”
#包括“公用设施/插座.h”
#包括
//#包括
常量int IN1=4；
常数int IN2=2；
常数int IN3=7；
常数int IN4=8；
字符输入；
//这些是中断和控制引脚
#定义ADAFRUIT_CC3000_IRQ 3//必须是中断引脚！
//这些可以是任意两个针脚
#定义ADAFRUIT_CC3000_VBAT 5
#定义ADAFRUIT_CC3000_CS 10
//对其余引脚使用硬件SPI
//在UNO上，SCK=13，MISO=12，MOSI=11
Adafruit_CC3000 CC3000=Adafruit_CC3000（Adafruit_CC3000_CS，
ADAFRUIT_CC3000_IRQ、ADAFRUIT_CC3000_VBAT、，
SPI_CLOCK_DIV2）；
//你可以改变这个时钟的速度
#定义WLAN_SSID“aa”//不能超过32个字符！
#定义WLAN_PASS“00”
//安全性可以是WLAN_secu_UNSEC、WLAN_secu_WEP、WLAN_secu WPA或
无线局域网安全WPA2
#定义WLAN_安全WLAN_SEC_WPA2
#定义监听端口80
Adafruit_CC3000_服务器httpServer（侦听_端口）；
字符串读取字符串；
无效设置（）
{
pinMode（输入1，输出）；//右电机第一线
pinMode（输入2，输出）；//右电机第二线
pinMode（IN3，输出）；//左电机第一线
pinMode（IN4，输出）；//左电机第二线
序列号开始（115200）；
Serial.println（F（“你好，CC3000！\n”）；
//Serial.print（“空闲内存”）；Serial.println（getFreeRam（），DEC）；
Serial.println（F（“\n初始化…”））；
如果（！cc3000.begin（））
{
Serial.println（F（“无法开始（）！检查接线？”）；
而(1),；
}
Serial.print（F（“\n尝试连接”）；
Serial.println（WLAN_SSID）；
如果（！cc3000.connectToAP（WLAN_SSID、WLAN_PASS、WLAN_SECURITY））{
Serial.println（F（“Failed！”）；
而(1),；
}
Serial.println（F（“Connected！”）；
Serial.println（F（“请求DHCP”））；
而（！cc3000.checkDHCP（））
{
延迟（100）；//ToDo:插入DHCP超时！
}
//显示IP地址DNS、网关等。
而（！displayConnectionDetails（））{
延迟（1000）；
}
//开始监听连接
httpServer.begin（）；
Serial.println（F（“侦听连接…”）；
wdt_启用（WDTO_4S）；
}
void循环（）{
//尝试获取已连接的客户端。
Adafruit_CC3000_ClientRef client=httpServer.available（）；
如果（客户）
{
延误（5）；
Serial.println（F（“客户端连接”）；
//处理此请求，直到其完成或超时。
//HTTP请求以一个空行结束
布尔currentLineIsBlank=true；
while（client.connected（））
{
if（client.available（））
{
char c=client.read（）；
//串行写入（c）；
if（readString.length（）<100）{
readString+=c；
连续打印（c）；
}
如果（c='\n'&¤tLineIsBlank）{
client.println（F（“HTTP/1.1200ok”）；
client.println（“访问控制允许源：”；
//client.println（“HTTP/1.1200ok”）；
client.println（“连接：保持活动”）；
client.println（“内容类型：text/html”）；
client.println（）；
客户。println（“”）；
//发送HTML内容
client.println（F（“Randi控制面板”）；
println（F（“body{font-family:sans-serif}”）；
/*
println（“h1{font size:14pt；}”）；
println（“p{font size:10pt；}”）；
println（“a{color:#2020FF；}”）；
客户。println（“”）；
客户。println（“”）；
*/
client.println（F（“Randi Controls
”）；
客户。打印号（F）（“”）；
客户。打印号（F）（“”）；
客户。println（“”）；
客户。打印号（F）（“”）；
客户。打印号（F）（“”）；
客户。打印号（F）（“”）；
客户。打印号（F）（“”）；
client.println（F（“
”）；
客户。打印号（F）（“”）；
client.println（）；
打破
}
如果（c=='\n'）{
//你在开一条新的生产线。
currentLineIsBlank=true；
}
如果（c！='\r'），则为else{
//当前行中有一个角色。
currentLineIsBlank=false；
}
}
}
//为web浏览器提供接收数据的时间。
过程（客户）；
readString=“”；
}
}
无效流程（Adafruit\u CC3000\u客户）
{
if（readString.length（）>0）{
if（readString.indexOf（“/forward”）>0
{
//将主代码放在此处，以便重复运行：
/*if（Serial.available（））{
//阅读最近的字符
*/
//输入=Serial.read（）；
//基于角色的切换
//开关（输入）{
//案例“F”：
//前进
模拟写入（IN1,0）；
模拟写入（2255）；
模拟写入（IN3255）；
模拟写入（IN4,0）；
//中断；
}
else if（readString.indexOf（“/backward”）>0）
{
//案例“B”：//向后
//v=串行读取（）；
类比写作（1200年）；
模拟写入（IN2,0）；
模拟写入（IN3,0）；
模拟写入（IN4200）；
//中断；
}
//案例'S'：//停止
else if（readString.indexOf（“/stop”）>0）
{
模拟写入（IN1,0）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shaeens Bot</title>
<script>
var URL='http://192.168.1.7/';
function command(dir)
{
var x=document.getElementById('frm');
frm.src=URL+dir;
}
</script>
</head>
<body>
<button onclick="command('forward')">Forward</button>
<button onclick="command('left')">Left</button>
<button onclick="command('right')">Right</button>
<button onclick="command('stop')">Stop</button>
<iframe src="" id="frm" style="display:none;"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Roberto Novelo</title>
<script>
//Non jQuery AJAX Lib (0.4 kb) to avoid using an iframe and make it easier to read the server response...
function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};
var URL='http://192.168.1.7/'; //Or whatever IP
function commandResponse(data)
{
//Get a command response from the robot code.
}
function readState(data)
{
//Polling function to read your robot's state (position, moving, etc)...
}
function readCam(data)
{
//decode image data and show it somewhere on the html
}
function command(dir)
{
microAjax(URL+dir, commandResponse);
}
setInterval(function()
{
microAjax(URL+"currentState", readState);
}, 500);
setInterval(function()
{
microAjax(URL+"cam", readCam);
}, 500);
</script>
</head>
<body>
<button onclick="command('forward')">Forward</button>
<button onclick="command('left')">Left</button>
<button onclick="command('right')">Right</button>
<button onclick="command('stop')">Stop</button>
</body>
</html>
void process (Adafruit_CC3000_ClientRef client)
{
if(readString.length() > 0)
{
if (readString.indexOf("/currentState") > 0)
{
if(1==moving)
{
client.println(F("Moving"));
}
//Exec remaining code...