在毅神的帮助下终于找了GPIO 0的位置了,图上的蓝框和绿框
这里附一份全尺寸的原图
当上存程序或者上存文件之前就要让GPIO 0接地,整个上存过程都要一直保持
首先是上存程序
然后再上存页面文件
终于官方版本的Arduino 1.6.12 + ESP8266 2.3.0 环境下也能完成开发工作了
这里是程序代码,注意这里和6楼的程序在页面文件名称上有些不同
- //8266 AP +ws wifi ssid=ESP8285xxxxxxxx pwd=ap20180422 访问 http://192.168.128.1/h5c_001.htm 可见网页
- //页面使用SPIFFS文件保存
- #include <ESP8266WiFi.h>
- #include <ESP8266WebServer.h>
- #include <FS.h> //文件系统库SPIFFS
- ESP8266WebServer server ( 80 );
- void handleNotFound() { //404页面
- String message = "File Not Found\n\n";
- message += "URI: ";
- message += server.uri();
- message += "\nMethod: ";
- message += ( server.method() == HTTP_GET ) ? "GET" : "POST";
- message += "\nArguments: ";
- message += server.args();
- message += "\n";
- for ( uint8_t i = 0; i < server.args(); i++ ) {
- message += " " + server.argName ( i ) + ": " + server.arg ( i ) + "\n";
- }
-
- server.send ( 404, "text/plain", message ); // 返回信息给浏览器(状态码,Content-type, 内容)
- }
- void ch_page() { //主页面
- if(SPIFFS.exists("/h5c_001.htm")){ //如果文件存在
- File file = SPIFFS.open("/h5c_001.htm", "r"); //打开文件
- size_t sent = server.streamFile(file, "text/html"); //发送内容
- file.close(); //关闭文件
- return;
- }
- else
- {
- handleNotFound(); //404
- }
- }
- void setup() {
- SPIFFS.begin();
-
- // 设置内网
- IPAddress softLocal(192,168,128,1);
- IPAddress softGateway(192,168,128,1);
- IPAddress softSubnet(255,255,255,0);
- WiFi.softAPConfig(softLocal, softGateway, softSubnet);
- String apName = ("ESP8285_"+(String)ESP.getChipId());
- const char *softAPName = apName.c_str();
- WiFi.softAP(softAPName, "ap20180422");
- IPAddress myIP = WiFi.softAPIP();
- //请求响应对象
- server.on ( "/inline", []() {server.send ( 200, "text/plain", "this works as well" );} );
- server.on ( "/h5c_001.htm", ch_page );
- server.onNotFound ( handleNotFound );
- server.begin();
- }
- void loop() {
- server.handleClient();
- }
复制代码
页面文件名称为h5c_001.htm,位置在程序代码目录下的data文件夹中。
至于页面功能就不要太重视了,反正就是个测试。
下面是页面文件代码
- <html>
- <head>
- <title>practice20180106</title>
-
- <style>
- canvas {
- cursor: pointer;
- border: 1px solid black;
- }
- </style>
-
-
- <script>
- function drawSomething() {
-
- var canvas;
- var context;
-
- canvas = document.getElementById("canvas");
- context = canvas.getContext("2d");
-
- // 清除画布,准备绘制 运行前要删除注释
- context.clearRect(0, 0, canvas.width, canvas.height);
- // 绘制圆圈
- context.beginPath();
- context.globalAlpha = 0.85;
- context.beginPath();
- context.arc(100, 100, 25, 0, Math.PI*2);
- context.fillStyle = "pink";
- context.strokeStyle = "black";
- context.lineWidth = 1;
- context.fill();
- context.stroke();
-
- // 绘制圆弧
- context.beginPath();
- context.globalAlpha = 0.85;
- context.beginPath();
- context.arc(150, 150, 80, Math.PI*1.3, Math.PI*1.5,false);
- context.fillStyle = "blue";
- context.strokeStyle = "black";
- context.lineWidth = 4;
- //context.fill();
- context.stroke();
-
-
- // 绘制新圆弧
- context.beginPath();
- context.globalAlpha = 1;
- context.beginPath();
- context.arc(1300, 910, 500,0, Math.PI*1.5);
- context.fillStyle = "blue";
- context.strokeStyle = "black";
- context.lineWidth = 2;
- //context.fill();
- context.stroke();
-
-
- // 绘制曲线
- context.beginPath();
- context.lineWidth = 3;
- context.strokeStyle = "#cd2828";
- //把笔移动到起点位置
- context.moveTo(0, 240);
- //创建变量,保存两个控制点以及曲线终点信息
- var control1_x = 0;
- var control1_y = 100;
- var control2_x = 333;
- var control2_y = 840;
- var endPointX = 333;
- var endPointY = 700;
- //绘制曲线
- context.bezierCurveTo(control1_x, control1_y, control2_x, control2_y, endPointX, endPointY);
- context.stroke();
- }
-
- function canvasClick(e) {
- var canvas;
- canvas = document.getElementById("canvas");
- // 取得画布上被单击的点
- var clickX = e.pageX - canvas.offsetLeft;
- var clickY = e.pageY - canvas.offsetTop;
-
- //显示坐标
- var context;
- context = canvas.getContext("2d");
- // 设置字体
- context.font = "Bold 20px Arial";
- // 设置对齐方式
- context.textAlign = "left";
- // 设置填充颜色
- context.fillStyle = "#008600";
- // 设置字体内容,以及在画布上的位置
- context.fillText("X="+clickX+"Y="+clickY, 100, 50);
- }
- </script>
-
- </head>
-
- <body>
-
- <canvas id="canvas" width="1000" height="700" onmousedown="canvasClick(event)">
- </canvas>
-
- <div>
- <button onclick="drawSomething()">make_round</button>
- </div>
-
- </body>
- </html>
复制代码
然后这里是完整的代码
所有都准备好了,那么接上锂电,打开开关,看看测试效果
至此SPIFFS文件功能也终于通过测试了,接下来应该就是期待已久的ADC了吧
|