NodeMcu部分
1.init.lua
該部分使用到了httpServer，了解具體內(nèi)容點(diǎn)擊項(xiàng)目地址下載httpServer.lua即可尚镰。
station_cfg={}
station_cfg.ssid="wifi"
station_cfg.pwd="xiaog123"
local color = {r = 0, b = 0, g = 0}
num = 12 --燈珠數(shù)量
ws2812.init()
wifi.setmode(wifi.STATION)
wifi.sta.config(station_cfg)
wifi.sta.connect()
tmr.alarm(1, 2000, tmr.ALARM_AUTO, function()
if wifi.sta.getip() == nil then
print('Waiting for IP ...')
else
print('IP is ' .. wifi.sta.getip())
tmr.stop(1)
end
end)
--寫出rbg的值
function ws2812Config(v)
buffer = ws2812.newBuffer(num, 3)
buffer:fill(v.b, v.r, v.g)
ws2812.write(buffer)
end
ws2812Config(color)
wifi.sta.autoconnect(1)
dofile('httpServer.lua')
httpServer:listen(80)
-- 從請(qǐng)求中取出rbg寫出
httpServer:use('/config',function(req, res)
color.r = req.query.r
color.b = req.query.b
color.g = req.query.g
ws2812Config(color)
print(buffer:get(1))
res:send('{"status": "ok"}')
end)
2.Html
由于NodeMcu內(nèi)存比較小故第三方cdn加速的js和css
<html>
<head>
<title>ColorLight</title>
<meta charset="utf-8">
<link rel="stylesheet">
</head>
<body>
<div id="app">
<div class="block">
<el-color-picker @active-change="activeChange" @change="onChange" color-format="rgb"
v-model="color"></el-color-picker>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.0.0-alpha.2/index.js"></script>
<script>
var vm = {
data() {
return {
color: 'rgb(0, 0, 0)',
rbg: {
r: 0,
b: 0,
g: 0
},
fullscreenLoading: false
}
},
methods: {
// onChange 顏色修改回調(diào)函數(shù)
onChange(color) {
var index = 0;
var rbgArr = new Array();
color.replace(/\d+/g, function () {
rbgArr[index] = arguments[0]; // 分解出rgb顏色的值
index++;
return arguments[0] * 2;
})
this.rbg.r = rbgArr[0];
this.rbg.b = rbgArr[1];
this.rbg.g = rbgArr[2];
$.get("/config", this.rbg); //將rbg的值通過ajax發(fā)送至httpServer
},
// activeChange 顏色改變事件阀圾，el-color-picker 組件被修改顏色時(shí)會(huì)回調(diào)該函數(shù)2.
// 可根據(jù)需求自行修改實(shí)時(shí)改變顏色
activeChange(color) {
console.log(color);
}
}
};
var Ctor = Vue.extend(vm)
new Ctor().$mount('#app')
</script>
</body>
</html>
上傳部分
1.將html代碼保存為index.html
2.保存lua代碼為init.lua
3.下載httpServer.lua
將以上文件上傳至NodeMcu
硬件部分
1.NodeMcu x1
2.ws2812 x1
軟件部分
ESPlorer
