主頁 >  其他 > 最簡單DIY基于ESP8266的智能彩燈③(在網頁用按鈕+滑動條+手機APP控制RGB燈)

最簡單DIY基于ESP8266的智能彩燈③(在網頁用按鈕+滑動條+手機APP控制RGB燈)

2021-08-17 08:46:01 其他

ESP8266和ESP32智能彩燈開發系列文章目錄

第一篇:最簡單DIY基于ESP8266的智能彩燈①(在網頁用按鈕點亮普通RGB燈)
第二篇:最簡單DIY基于ESP8266的智能彩燈②(在網頁用按鍵和滑動條控制RGB燈)
第三篇:最簡單DIY基于ESP8266的智能彩燈③(在網頁用按鈕+滑動條+手機APP控制RGB燈)


文章目錄

  • ESP8266和ESP32智能彩燈開發系列文章目錄
  • 前言
  • 一、最簡單DIY基于ESP8266的智能彩燈③(在網頁用按鈕+滑動條+手機APP控制RGB燈)是什么?
  • 二、使用步驟
    • 1.準備硬體
    • 2.搭建Arduino開發環境
    • 3.搭建Eclipse 安卓開發環境
    • 4.準備一份webserver原始碼
    • 5.修改webserver原始碼
    • 6.準備安卓手機發送http get請求的原始碼
    • 7.修改安卓手機發送http get請求的原始碼
  • 三、運行與除錯
  • 總結


前言

????daodanjishui物聯網核心原創技術之最簡單DIY基于ESP8266的智能彩燈③(在網頁用按鈕+滑動條+手機APP控制RGB燈),
????市面上有各種開源智能彩燈控制程式出售,但是有復雜的有簡單的,如果想快速入門用網頁按鍵+滾動條+手機app無線點亮普通RGB燈,這個方案會給你一個快捷高效的方案,


一、最簡單DIY基于ESP8266的智能彩燈③(在網頁用按鈕+滑動條+手機APP控制RGB燈)是什么?

????根據國內STM32芯片的價格已經飆到天價,把創作的重心放在國產芯片和國產軟體上,所以打算把壓箱底的物聯網控制的安卓APP原始碼奉獻給大家,總所周知安卓界面的開發是基于XML的,可能我以后也用不到了,準備轉戰開發國產鴻蒙作業系統生態開發,放棄安卓應用開發,因為我深信鴻蒙作業系統的UI界面是可以用JavaScript和Java開發的,今年4月17日上午十點左右,HarmonyOS開發者日在上海舉行,雖然我沒有參加,但是我知道這個物聯網時代真的到來了,
????利用手機瀏覽器顯示屏替代了單片機的OLED顯示屏,相比第二篇:最簡單DIY基于ESP8266的智能彩燈②(在網頁用按鍵和滑動條控制RGB燈)的功能,第三篇的功能在第二篇的基礎上,多增加了安卓手機app控制RGB彩燈,該方案的另一大特色是在ESP8266單片機通過高速wifi直接跟daodanjishui出品的安卓手機APP原始碼互動,不再使用任何瀏覽器,達到手機與單片機資料上傳和下載(截圖會有toast顯示單片機回傳的資料,一點都不假),這個功能跟我以前發布的javaweb服務器回傳的訊息是不一樣的,因為這次是嵌入式網關ESP8266回傳的資料,

優酷視頻演示效果:https://v.youku.com/v_show/id_XNTE0MDA1MzY1Mg==.html

直接看視頻

<iframe id="hdt6sPxD-1628934518206" src="https://player.youku.com/embed/XNTE0MDA1MzY1Mg==" allowfullscreen="true" data-mediaembed="youku"></iframe>

最簡單DIY基于ESP8266的智能彩燈③(手機APP控制RGB燈)

????ESP8266真正流行起來的時間要追溯到2018年,當時各大開源STM32開發板教程(包括正點原子,野火)都采用了外接ESP8266模塊無線上網的方式,不過技識訓不夠好,云服務器還沒有搭建成功,教程也沒有寫好,反而板載用的是ENC28J60以太網模塊接網線上網,或者是用好點的DM9000芯片接網線上網,這兩個有線的網卡都需要跑一個UIP或者是LWIP的協議才能上網,當時這兩個有線網卡的教程相當豐富!!!傭訓我當時我也入坑了這兩個有線網卡的程式,速度慢就不說了,還涉及一堆暫存器,指標,結構體,要用單片機另外的資源去控制這兩個網卡,現在都忘記怎么用了,總之走了彎路,而且當時開發板用無線上網的方案國內基本上是用高級單片機STM32的串口發送AT指令控制ESP8266的,其實這樣也浪費了ESP8266的資源,背誦了一大堆AT指令,到現在也忘記了,當時我還把正點原子關于ESP8266的帖子都看完去,也是識訓不大,頂多自主設計了一款空中滑鼠申請了一個軟體著作權之后就停滯不前了,
????真正讓我搗鼓ESP8266是這兩年時間內,當時用安信可公司提供的eclipse 的SDK去開發ESP8266太過于繁瑣,后面我才發現用arduino開發ESP8266就變得事半功倍了,不再需要AT指令了,取而代之的是Arduino隨叫隨到的開源庫供我使用,到目前為止我都一直在用Arduino開發環境去開發ESP8266和ESP32,現在市面上一些智能家居都是用的ESP8266來做的,成本低很多,我現在針對電路城網站做出的物聯網作品有:基于ESP32視頻監控機械臂系統(上位機和下位機)、ESP8266彩燈矩陣系統(上位機和下位機)、ESP32國產物聯網照相機系統(上位機和下位機)、ESP8266+Zigbee開源農業大棚監控系統(上位機和下位機)等等,打算都開源了,只不過寫教程比較花時間,代碼都已經寫好的,例如現在智能燈系列的如下圖所示:

????其實大家都知道,網上很多免費的開源專案代碼是不全的,比如什么智云,什么殼物聯網,什么法云,什么開發者平臺等等,還有某寶那些什么收費開源的開發板或者套件,它們對應的硬體套件也不貴,幾十塊就可以買到一套,某寶還有很多賣家互相抄襲資料互相攻擊,都說自己是原創的,誰又侵犯誰的權力,誰是原創的都不知道了,資料下載得越多越發現學習更困難,因為你不會辨別真偽,它們都有一個共同的特點:代碼不全,
????我曾經也為了圖個新鮮下載了某個云的SDK開發包開始學習物聯網控制技術,后面才發現入坑了,服務器的代碼根本沒有,就算你學會用了開源的手機APP控制設備,但是你的APP必須依賴人家的服務器,就像美國的GPS衛星,如果我們中國沒有北斗衛星,關鍵時候被掐脖子就玩完了,所以一般私人小型公司開發物聯網套件不會去用三大云機構的服務器的,都是自己自主開發的服務器的,產品價格也實惠,但是也有一個缺點,小公司生命脆弱,一旦倒閉了,云服務器就掛了,買的設備就成磚頭了,
????購買過我服務器代碼的買家都知道,我云服務器代碼雖然不大,但是全部是開源能運行的,我現在也在不斷完善自己的服務器代碼,有好幾種版本:包括JavaWeb服務器,Java后臺服務器,WebSocket服務器,Http服務器,ESP32嵌入式服務器,OpenWRT路由器服務器,Linux應用服務器等等,曾經害怕服務器開發到現在喜歡上服務器開發,源于自己對自己興趣愛好的堅持,很多人怕自己辛苦寫出來的代碼低價賣給別人,別人就復制了你的成果,關鍵的是自己有沒有核心競爭力,別人不斷模仿,自己卻不斷地超越上一次的成就,就像我的電路方案不會一下子把所有的功能寫完一樣,就像國產華為手機不會出一款頂級配置的終結者手機一樣,不管怎么樣,我都希望購買我電路方案的買家學到真正核心物聯網技術,

二、使用步驟

1.準備硬體

(1)購買ESP8266開發板:mini D1 wifi ESP-12F N ESP8266,

芯片包裝如下:

(2)購買普通RGB燈,這個到處都有賣的,

(3)購買一個普通的普通白光LED燈

2.搭建Arduino開發環境

(1)第一步下載Arduino IDE安裝,雙擊下一步,下一步,直到完成,建議不要中文路徑,

(2)下載ESP8266安裝包插件,這是最方便的,如果在Arduino里面搜索安裝,你會發現很慢,特別是在這個緊張的芯片之爭的關鍵時期下,按照這個網址去下載:https://www.arduino.cn/thread-76029-1-1.html

(3)雙擊(2)下載的三個包中的一個,我雙擊安裝的是第二個包,重啟Arduino就可以安裝好了,

安裝好之后你會發現開發板選項多了ESP8266這類的開發板,實在不行就找其他教程再試試了,沒有必要一步一步教這個開發環境搭建,

(4)打開我的工程:雙擊打開,

一看就知道ESP8266創建一個AP熱點供筆記本或者手機鏈接上去,沒有密碼的,
(5)配置開發板和串口資訊

注意選擇的是什么型號的開發板型號還有你自己開發板連上電腦之后是占用的是哪個串口號

(6)按照原始碼的IO口連接RGB燈和白色LED燈,再點擊下載
#define LAMP_PIN 16 //照明燈–D0–GPIO16,高電平觸發燈亮,所以燈的長端接GPIO16,短端接地

#define LAMP_PIN1 14 //R–D5
#define LAMP_PIN2 12 //G–D6
#define LAMP_PIN3 13 //B–D7


注意了燈的GND與單片機的GND相連,代碼中生成三路PWM波控制三個RGB管腳對應的燈絲發光,

下載完成即可運行程式了,

3.搭建Eclipse 安卓開發環境

搭建Eclipse安卓APP開發環境,這個在網上教程特別多,我就不細說了,但是需要注意了我的安卓工程原始碼是基于安卓系統4.3做的開發,所以版本問題買家自己解決,網上也有方案解決的,Android studio版本的代碼我沒有寫,如果要我寫,那么必須加價了,因為我懶得寫了!其實兩個IDE用哪個都無所謂,工具而已,核心的東西是編碼(使用工具的策略),下面是打開工程的截圖:

為什么說是最簡單的?因為的代碼量是同行最少的,

把編譯生成的目錄bin下面的apk檔案傳給手機打開如下:

4.準備一份webserver原始碼

因為要開發網頁點燈,必須使用到嵌入式網頁服務器,得益于Arduino的庫,在安裝好ESP8266開發環境之后,在Arduino IDE就有現成的原始碼供讀者使用,初學者可以通過下載IDE自帶的原始碼進行學習,這也是我一路走來的捷徑分享給大家了,
原始碼路徑如下圖所示:(選了第一個原始碼)

/*
   Copyright (c) 2015, Majenko Technologies
   All rights reserved.

   Redistribution and use in source and binary forms, with or without modification,
   are permitted provided that the following conditions are met:

 * * Redistributions of source code must retain the above copyright notice, this
     list of conditions and the following disclaimer.

 * * Redistributions in binary form must reproduce the above copyright notice, this
     list of conditions and the following disclaimer in the documentation and/or
     other materials provided with the distribution.

 * * Neither the name of Majenko Technologies nor the names of its
     contributors may be used to endorse or promote products derived from
     this software without specific prior written permission.

   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
   ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
   WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
   DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
   ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
   (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
   LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
   ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
   (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
   SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

#ifndef STASSID
#define STASSID "your-ssid"
#define STAPSK  "your-password"
#endif

const char *ssid = STASSID;
const char *password = STAPSK;

ESP8266WebServer server(80);

const int led = 13;

void handleRoot() {
  digitalWrite(led, 1);
  char temp[400];
  int sec = millis() / 1000;
  int min = sec / 60;
  int hr = min / 60;

  snprintf(temp, 400,

           "<html>\
  <head>\
    <meta http-equiv='refresh' content='5'/>\
    <title>ESP8266 Demo</title>\
    <style>\
      body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
    </style>\
  </head>\
  <body>\
    <h1>Hello from ESP8266!</h1>\
    <p>Uptime: %02d:%02d:%02d</p>\
    <img src=\"/test.svg\" />\
  </body>\
</html>",

           hr, min % 60, sec % 60
          );
  server.send(200, "text/html", temp);
  digitalWrite(led, 0);
}

void handleNotFound() {
  digitalWrite(led, 1);
  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);
  digitalWrite(led, 0);
}

void drawGraph() {
  String out;
  out.reserve(2600);
  char temp[70];
  out += "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"400\" height=\"150\">\n";
  out += "<rect width=\"400\" height=\"150\" fill=\"rgb(250, 230, 210)\" stroke-width=\"1\" stroke=\"rgb(0, 0, 0)\" />\n";
  out += "<g stroke=\"black\">\n";
  int y = rand() % 130;
  for (int x = 10; x < 390; x += 10) {
    int y2 = rand() % 130;
    sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"1\" />\n", x, 140 - y, x + 10, 140 - y2);
    out += temp;
    y = y2;
  }
  out += "</g>\n</svg>\n";

  server.send(200, "image/svg+xml", out);
}

void setup(void) {
  pinMode(led, OUTPUT);
  digitalWrite(led, 0);
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  }

  server.on("/", handleRoot);
  server.on("/test.svg", drawGraph);
  server.on("/inline", []() {
    server.send(200, "text/plain", "this works as well");
  });
  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
  MDNS.update();
}

5.修改webserver原始碼

總的來說修改的地方還是很多的,改到面目全非了加入了不少的內容,才能讓其功能完善,工程截圖:

關鍵接收網路請求的代碼,因為在網頁提交表單,單片機需要回應網頁的請求,這里我使用的字串轉化為整數的技巧將滾動條提交的表單轉化為整型數字,這也是我自己摸索出來的:

/*****************************************************
 * 函式名稱:HandleVal()
 * 函式說明:對客戶端請求回傳值處理
 * 引數說明:無
******************************************************/
void HandleVal()
{
    String wifis = webServer.arg("ssid"); //從JavaScript發送的資料中找ssid的值
    String wifip = webServer.arg("password"); //從JavaScript發送的資料中找password的值
    Serial.println(wifis);
    Serial.println(wifip);  //在這里處理接收到的資料
    if(wifis.equals("pwm")){     
      int i=wifip.toInt();//在此把wifip轉化成INT型數值,以備后續使用
       Serial.println(i);    
       analogWrite(LAMP_PIN, i); 
    }

     if(wifis.equals("r")){     
      int i=wifip.toInt();//在此把wifip轉化成INT型數值,以備后續使用
       Serial.println(wifis+" "+i);    
       analogWrite(LAMP_PIN1, i); 
     }else  if(wifis.equals("g")){     
      int i=wifip.toInt();//在此把wifip轉化成INT型數值,以備后續使用
       Serial.println(wifis+" "+i);    
       analogWrite(LAMP_PIN2, i);     
     }else if(wifis.equals("b")){     
      int i=wifip.toInt();//在此把wifip轉化成INT型數值,以備后續使用
       Serial.println(wifis+" "+i);    
       analogWrite(LAMP_PIN3, i); 
     }
   
    
    if(wifip.equals("on")){
         Serial.println("開燈");
         controlLamp(true);
      }else if(wifip.equals("off")){
         Serial.println("關燈");
          controlLamp(false);
      }else if(wifip.equals("data")){
         Serial.println("getdata");
          //在這里直接回傳資料給客戶端
      }
    String  cmd="ssid="+wifis+" password="+wifip+" is OK";  
    webServer.send(200, "text/plain", cmd);//在這里回傳資料給客戶端
}

詳細的原始碼請到最后面下載我工程原始碼,尊重原創,尊重勞動成果,

6.準備安卓手機發送http get請求的原始碼

因為必須要用手機發送get請求激發嵌入式服務器webserver完成提交表單的動作,所以需要一個原始碼,呵呵,

import java.io.IOException;
import java.io.InputStream;
import java.io.UnsupportedEncodingException;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;

import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.message.BasicNameValuePair;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
import com.itheima.httpclientlogin.R;

public class MainActivity extends Activity {

	private EditText et_username;
	private EditText et_password;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// [1]找到我們關心的控制元件
		
		et_username = (EditText) findViewById(R.id.et_username);
		et_password = (EditText) findViewById(R.id.et_password);

	}

	// 點擊按鈕 進行get方式提交資料
	public void click1(View v) {
		
		new Thread(){public void run() {
			try {
				String name = et_username.getText().toString().trim();
				String pwd = et_password.getText().toString().trim();
				//[2.1]定義get方式要提交的路徑    小細節 如果提交中文要對name 和 pwd 進行一個urlencode 編碼 
					String path = "http://192.168.11.73:8080/login/LoginServlet?username="+URLEncoder.encode(name, "utf-8")+"&password="+URLEncoder.encode(pwd, "utf-8")+"";
					
					//[3]獲取httpclient實體 
					DefaultHttpClient client = new DefaultHttpClient();
					//[3.1]準備get請求 定義 一個httpget實作 
					HttpGet get = new HttpGet(path);
					
					//[3.2]執行一個get請求  
					HttpResponse response = client.execute(get);
					
					//[4]獲取服務器回傳的狀態碼
					int code = response.getStatusLine().getStatusCode();
					if (code == 200) {
						//[5]獲取服務器回傳的資料   以流的形式回傳 
						InputStream inputStream = response.getEntity().getContent();
						
						//[6]把流轉換成字串
					    String content = StreamTools.readStream(inputStream);	
					
					    //[7]展示結果
						showToast(content);
					}
					
					
					
					
					
				} catch (Exception e) {
					e.printStackTrace();
				}
			
		};}.start();
		
		
		
	}

	// [1]點擊按鈕 進行post方式提交資料
	public void click2(View v) {

		
	new Thread(){public void run() {
			
			try {
				//[2]獲取用戶名和密碼 
				String name = et_username.getText().toString().trim();
				String pwd = et_password.getText().toString().trim();
				String path = "http://192.168.11.73:8080/login/LoginServlet";
				
				//[3]以httpClient 方式進行post 提交 
				DefaultHttpClient client = new DefaultHttpClient();
				//[3.1]準備post 請求 
				HttpPost post = new HttpPost(path);

				//[3.1.0]準備parameters 
				List<NameValuePair> lists = new ArrayList<NameValuePair>();
				//[3.1.1]準備 NameValuePair 實際上就是我們要提交的用戶名 和密碼  key是服務器key :username
				BasicNameValuePair nameValuePair = new BasicNameValuePair("username",name);
				BasicNameValuePair pwdValuePair = new BasicNameValuePair("password",pwd);
				//[3.1.3] 把nameValuePair  和 pwdValuePair  加入到集合中
				lists.add(nameValuePair);
				lists.add(pwdValuePair);
				
				//[3.1.3]準備entity
				UrlEncodedFormEntity entity = new UrlEncodedFormEntity(lists);
				
				//[3.2]準備post方式提交的正文   以物體形式準備 (鍵值對形式 )
				post.setEntity(entity);
				
				
				HttpResponse response = client.execute(post);
				//[4]獲取服務器回傳的狀態碼
				int code = response.getStatusLine().getStatusCode();
				if (code == 200) {
					//[5]獲取服務器回傳的資料   以流的形式回傳 
					InputStream inputStream = response.getEntity().getContent();
					
					//[6]把流轉換成字串
				    String content = StreamTools.readStream(inputStream);	
				    
				    //[7]展示結果
					showToast(content);
				}
				
			} catch (Exception e) {
				e.printStackTrace();
			}
			
			
			
			
			
		};}.start();
		
		
	}
	
	
	
	//封裝toast方法  該toast方法執行在主執行緒 
	public void showToast(final String content){
		runOnUiThread(new Runnable() {
			
			@Override
			public void run() {
				//該方法一定是執行主執行緒 
				Toast.makeText(getApplicationContext(), content, 1).show();
				
				
			}
		});
		
	}

}

7.修改安卓手機發送http get請求的原始碼

下面是我根據我ESP8266webserver嵌入式服務器私人定制的代碼,必須是原創才能成功,

//[2.1]定義get方式要提交的路徑    小細節 如果提交中文要對name 和 pwd 進行一個urlencode 編碼 
							String path = "http://"+URLEncoder.encode(ip, "utf-8")+":"+URLEncoder.encode(port, "utf-8")
								    +"/HandleVal?"
								    +"&ssid=daodanjishui"
								    +"&password=off"
								    +"&nocache="+new Date().getTime();//這個地址用戶點擊觸發查詢

需要全部完整的原始碼的話,請到最后鏈接去獲取工程原始碼,對如果需要Android studio IDE開發工具下的原始碼也可以聯系我,尊重原創,尊重勞動成果從你我做起,

三、運行與除錯

(1)用手機測驗軟體和硬體,ESP8266下載程式完成之后自動重啟,開啟了一個名字叫:DNSServer example的熱點沒有密碼,用手機wifi連上之后,在瀏覽器輸入192.168.4.1就會進入下面的主頁:

(2)開始測驗,點擊發送按鈕:send 就會看到紅色的字體,這是ESP8266給的反饋資訊,根據這個知道機器是否回應了你的請求,這個反饋不知道有多少人都調不出來,同時看到燈變化了,紅燈r亮度值是168,注意了,提交表單的時候頁面不會跳轉,市面上的軟體方案有百分之八十的都會跳轉,而我的沒有,不信你可以試試頁面上那個“提交表單指令測驗”,體驗一下跳轉頁面,所以我這個奇特的功能很容易改造為wifi遙控器,不過除錯的遇到的麻煩還不如直接下載我的方案了,如下所示:

(3)然后繼續紅綠藍三個燈絲合成組合的顏色效果,需要用手調節滑動條(這個滾動條在ESP8266里面實作不知道有多少人做不到,并且滾動的時候能實時回應和反饋回來,如果我設定下載門檻啊,人人都能有了):

最大的亮度是1024,最小亮度是0,相當于熄滅,最漂亮的顏色比例的如下圖所示(223行代碼,不知道能值多少錢呢?):


(4)打開app,輸入ESP8266的IP
操作app上的控制元件,發現單片機回傳資料給手機顯示出來了,如下圖所示:

黑色的toast顯示的“···is OK”是由單片機回傳的資料,不需要打開瀏覽器也可以回傳,代碼段如下:

最后放一張手機控制照明燈和RGB燈的效果圖:(開燈和關燈控制照明燈,滑動條控制RGB燈,照明燈開燈的時候有一個漸變亮度變大的程序,這樣適合人的眼睛過渡,不會一下子不適應,下載原始碼的讀者可以親自體驗一下,)


總結

????通過上面運行與除錯狀態良好,程式和硬體達到博文提出的要求,到此為止:瀏覽器網頁滾動條+手機app無線點亮普通RGB燈就結束了,

????如果是安裝開發環境出了問題,那么請大家仔細上網搜尋解決問題的方案;如果是懷疑我代碼寫錯了,那么是不可能的,代碼我自己寫,自己硬體測驗,如果有更多的需求請私下找我交流,我缺的不是技術,而是一個奇特的想法或者創意······

最后附上本博文代碼下載地址:https://www.cirmall.com/circuit/23949/
直接跳轉

轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/294292.html

標籤:其他

上一篇:c# 串口關閉死機

下一篇:物聯網平臺 ThingsBoard 3.3 發布

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 網閘典型架構簡述

    網閘架構一般分為兩種:三主機的三系統架構網閘和雙主機的2+1架構網閘。 三主機架構分別為內端機、外端機和仲裁機。三機無論從軟體和硬體上均各自獨立。首先從硬體上來看,三機都用各自獨立的主板、記憶體及存盤設備。從軟體上來看,三機有各自獨立的作業系統。這樣能達到完全的三機獨立。對于“2+1”系統,“2”分為 ......

    uj5u.com 2020-09-10 02:00:44 more
  • 如何從xshell上傳檔案到centos linux虛擬機里

    如何從xshell上傳檔案到centos linux虛擬機里及:虛擬機CentOs下執行 yum -y install lrzsz命令,出現錯誤:鏡像無法找到軟體包 前言 一、安裝lrzsz步驟 二、上傳檔案 三、遇到的問題及解決方案 總結 前言 提示:其實很簡單,往虛擬機上安裝一個上傳檔案的工具 ......

    uj5u.com 2020-09-10 02:00:47 more
  • 一、SQLMAP入門

    一、SQLMAP入門 1、判斷是否存在注入 sqlmap.py -u 網址/id=1 id=1不可缺少。當注入點后面的引數大于兩個時。需要加雙引號, sqlmap.py -u "網址/id=1&uid=1" 2、判斷文本中的請求是否存在注入 從文本中加載http請求,SQLMAP可以從一個文本檔案中 ......

    uj5u.com 2020-09-10 02:00:50 more
  • Metasploit 簡單使用教程

    metasploit 簡單使用教程 浩先生, 2020-08-28 16:18:25 分類專欄: kail 網路安全 linux 文章標簽: linux資訊安全 編輯 著作權 metasploit 使用教程 前言 一、Metasploit是什么? 二、準備作業 三、具體步驟 前言 Msfconsole ......

    uj5u.com 2020-09-10 02:00:53 more
  • 游戲逆向之驅動層與用戶層通訊

    驅動層代碼: #pragma once #include <ntifs.h> #define add_code CTL_CODE(FILE_DEVICE_UNKNOWN,0x800,METHOD_BUFFERED,FILE_ANY_ACCESS) /* 更多游戲逆向視頻www.yxfzedu.com ......

    uj5u.com 2020-09-10 02:00:56 more
  • 北斗電力時鐘(北斗授時服務器)讓網路資料更精準

    北斗電力時鐘(北斗授時服務器)讓網路資料更精準 北斗電力時鐘(北斗授時服務器)讓網路資料更精準 京準電子科技官微——ahjzsz 近幾年,資訊技術的得了快速發展,互聯網在逐漸普及,其在人們生活和生產中都得到了廣泛應用,并且取得了不錯的應用效果。計算機網路資訊在電力系統中的應用,一方面使電力系統的運行 ......

    uj5u.com 2020-09-10 02:01:03 more
  • 【CTF】CTFHub 技能樹 彩蛋 writeup

    ?碎碎念 CTFHub:https://www.ctfhub.com/ 筆者入門CTF時時剛開始刷的是bugku的舊平臺,后來才有了CTFHub。 感覺不論是網頁UI設計,還是題目質量,賽事跟蹤,工具軟體都做得很不錯。 而且因為獨到的金幣制度的確讓人有一種想去刷題賺金幣的感覺。 個人還是非常喜歡這個 ......

    uj5u.com 2020-09-10 02:04:05 more
  • 02windows基礎操作

    我學到了一下幾點 Windows系統目錄結構與滲透的作用 常見Windows的服務詳解 Windows埠詳解 常用的Windows注冊表詳解 hacker DOS命令詳解(net user / type /md /rd/ dir /cd /net use copy、批處理 等) 利用dos命令制作 ......

    uj5u.com 2020-09-10 02:04:18 more
  • 03.Linux基礎操作

    我學到了以下幾點 01Linux系統介紹02系統安裝,密碼啊破解03Linux常用命令04LAMP 01LINUX windows: win03 8 12 16 19 配置不繁瑣 Linux:redhat,centos(紅帽社區版),Ubuntu server,suse unix:金融機構,證券,銀 ......

    uj5u.com 2020-09-10 02:04:30 more
  • 05HTML

    01HTML介紹 02頭部標簽講解03基礎標簽講解04表單標簽講解 HTML前段語言 js1.了解代碼2.根據代碼 懂得挖掘漏洞 (POST注入/XSS漏洞上傳)3.黑帽seo 白帽seo 客戶網站被黑帽植入劫持代碼如何處理4.熟悉html表單 <html><head><title>TDK標題,描述 ......

    uj5u.com 2020-09-10 02:04:36 more
最新发布
  • 2023年最新微信小程式抓包教程

    01 開門見山 隔一個月發一篇文章,不過分。 首先回顧一下《微信系結手機號資料庫被脫庫事件》,我也是第一時間得知了這個訊息,然后跟蹤了整件事情的經過。下面是這起事件的相關截圖以及近日流出的一萬條資料樣本: 個人認為這件事也沒什么,還不如關注一下之前45億快遞資料查詢渠道疑似在近日復活的訊息。 訊息是 ......

    uj5u.com 2023-04-20 08:48:24 more
  • web3 產品介紹:metamask 錢包 使用最多的瀏覽器插件錢包

    Metamask錢包是一種基于區塊鏈技術的數字貨幣錢包,它允許用戶在安全、便捷的環境下管理自己的加密資產。Metamask錢包是以太坊生態系統中最流行的錢包之一,它具有易于使用、安全性高和功能強大等優點。 本文將詳細介紹Metamask錢包的功能和使用方法。 一、 Metamask錢包的功能 數字資 ......

    uj5u.com 2023-04-20 08:47:46 more
  • vulnhub_Earth

    前言 靶機地址->>>vulnhub_Earth 攻擊機ip:192.168.20.121 靶機ip:192.168.20.122 參考文章 https://www.cnblogs.com/Jing-X/archive/2022/04/03/16097695.html https://www.cnb ......

    uj5u.com 2023-04-20 07:46:20 more
  • 從4k到42k,軟體測驗工程師的漲薪史,給我看哭了

    清明節一過,盲猜大家已經無心上班,在數著日子準備過五一,但一想到銀行卡里的余額……瞬間心情就不美麗了。最近,2023年高校畢業生就業調查顯示,本科畢業月平均起薪為5825元。調查一出,便有很多同學表示自己又被平均了。看著這一資料,不免讓人想到前不久中國青年報的一項調查:近六成大學生認為畢業10年內會 ......

    uj5u.com 2023-04-20 07:44:00 more
  • 最新版本 Stable Diffusion 開源 AI 繪畫工具之中文自動提詞篇

    🎈 標簽生成器 由于輸入正向提示詞 prompt 和反向提示詞 negative prompt 都是使用英文,所以對學習母語的我們非常不友好 使用網址:https://tinygeeker.github.io/p/ai-prompt-generator 這個網址是為了讓大家在使用 AI 繪畫的時候 ......

    uj5u.com 2023-04-20 07:43:36 more
  • 漫談前端自動化測驗演進之路及測驗工具分析

    隨著前端技術的不斷發展和應用程式的日益復雜,前端自動化測驗也在不斷演進。隨著 Web 應用程式變得越來越復雜,自動化測驗的需求也越來越高。如今,自動化測驗已經成為 Web 應用程式開發程序中不可或缺的一部分,它們可以幫助開發人員更快地發現和修復錯誤,提高應用程式的性能和可靠性。 ......

    uj5u.com 2023-04-20 07:43:16 more
  • CANN開發實踐:4個DVPP記憶體問題的典型案例解讀

    摘要:由于DVPP媒體資料處理功能對存放輸入、輸出資料的記憶體有更高的要求(例如,記憶體首地址128位元組對齊),因此需呼叫專用的記憶體申請介面,那么本期就分享幾個關于DVPP記憶體問題的典型案例,并給出原因分析及解決方法。 本文分享自華為云社區《FAQ_DVPP記憶體問題案例》,作者:昇騰CANN。 DVPP ......

    uj5u.com 2023-04-20 07:43:03 more
  • msf學習

    msf學習 以kali自帶的msf為例 一、msf核心模塊與功能 msf模塊都放在/usr/share/metasploit-framework/modules目錄下 1、auxiliary 輔助模塊,輔助滲透(埠掃描、登錄密碼爆破、漏洞驗證等) 2、encoders 編碼器模塊,主要包含各種編碼 ......

    uj5u.com 2023-04-20 07:42:59 more
  • Halcon軟體安裝與界面簡介

    1. 下載Halcon17版本到到本地 2. 雙擊安裝包后 3. 步驟如下 1.2 Halcon軟體安裝 界面分為四大塊 1. Halcon的五個助手 1) 影像采集助手:與相機連接,設定相機引數,采集影像 2) 標定助手:九點標定或是其它的標定,生成標定檔案及內參外參,可以將像素單位轉換為長度單位 ......

    uj5u.com 2023-04-20 07:42:17 more
  • 在MacOS下使用Unity3D開發游戲

    第一次發博客,先發一下我的游戲開發環境吧。 去年2月份買了一臺MacBookPro2021 M1pro(以下簡稱mbp),這一年來一直在用mbp開發游戲。我大致分享一下我的開發工具以及使用體驗。 1、Unity 官網鏈接: https://unity.cn/releases 我一般使用的Apple ......

    uj5u.com 2023-04-20 07:40:19 more