NodeMcu部分
1.init.lua
该部分使用到了httpServer，了解具体内容点击项目地址下载httpServer.lua即可。
station_cfg={}
station_cfg.ssid="wifi"
station_cfg.pwd="xiaog123"
local color = {r = 0, b = 0, g = 0}
num = 12 --灯珠数量
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)
-- 从请求中取出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内存比较小故第三方cdn加速的js和css
<html>
<head>
<title>ColorLight</title>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/element-ui/2.0.0-alpha.2/theme-chalk/index.css" 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 颜色修改回调函数
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发送至httpServer
},
// activeChange 颜色改变事件，el-color-picker 组件被修改颜色时会回调该函数2.
// 可根据需求自行修改实时改变颜色
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
