JS开发es8266板子，搞着玩-MAX7219模块远程显示led字符串

JS开发es8266板子，搞着玩-MAX7219模块

板子为 esp8266 这里接了两个8x8 Led.Matrix

espjs

https://www.espruino.com/

请添加图片描述

我是看了,这个文章发现js可以开发esp板子的就尝试了下远程点灯，挺有意思就买了很多模块慢慢尝试

代码

在这里插入图片描述

这里我把wifi模块又包了一层


var wifi = require('Wifi');function connent(WIFI_NAME, WIFI_OPTIONS, onSuccess, onError) {console.log('connenting...');wifi.on('connected', function () {wifi.getIP((err, info) => {if (err !== null) {console.log('wifi getIp err', err);onError && onError(err)throw err;}onSuccess && onSuccess(info);console.log(info.ip, 'connected');})})wifi.connect(WIFI_NAME, WIFI_OPTIONS, err => {if (err !== null) {onError && onError(err)throw err;}})
}exports.connent = connent

// index.js
var http = require('http');// wifi 名
var WIFI_NAME = "xxx";
// wifi 密码
var WIFI_OPTIONS = {password: "xxx"
}const SPI2 = new SPI();
var disp1 = require("modules/MAX7219.js");// 我这里插在看D4 D5 D3 想看怎么接的可以去看 https://www.espruino.com/MAX7219SPI2.setup({ mosi: NodeMCU.D4, sck: NodeMCU.D5 });
var disp = disp1.connect(SPI2, NodeMCU.D3, 2);var g = Graphics.createArrayBuffer(16, 8, 1); // Create graphicsg.flip = function () { disp.raw(g.buffer); }; // To send to the displayfunction drawLed(c) {g.clear()g.drawString(c, g.getWidth() - g.stringWidth(c), 1);g.flip(); // update what's on the display
}function startServer(){var PORT = 2000;http.createServer(httpServerCallBack).listen(PORT);
}function httpServerCallBack(req,res){var URL = url.parse(req.url,true)if(req.method== 'POST' && URL.pathname == '/led'){var data = ''req.on('data',(chunk)=>{data +=chunk;});req.on('end',()=>{var params = JSON.parse(data);drawLed(params.string)res.end('ok')})}
}require('utils/wifi.js').connent(WIFI_NAME,WIFI_OPTIONS,function(){startServer()
})

modules/MAX7219.js 可以用espjs module add 模块名来添加，我是可能网速原因？去手动下了个
在这里插入图片描述
然后推送代码到设备并且重启

我是用的电脑开的热点可以看到ip 也可以用espjs的dev模式 espjs dev

在这里插入图片描述

前端页面

页面比较简单，这里我在开发环境用了代理，不然就要用nginx了，毕竟本地玩的话开发环境开代理舒服


vite.config,jsexport default defineConfig({plugins: [vue()],server:{proxy:{'/api': {target: 'http://上面获取的ip地址:2000',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
})

// 页面这里我把定时丢前端了也可以做个命令让终端定时

<script setup>
import { ref, watch } from 'vue'
import axios from 'axios'defineProps({msg: String,
})const count = ref(0);
const value = ref('');const push = (data)=>{axios.post('api/led',{string: data})
}const done = ()=>{console.log(value.value)if(value.value.length>4){console.error('不能超过4个字符串')return}push(value.value)
}let timer = undefinedconst time = () => {
timer=  setInterval(()=>{count.value++;},1000)
}const timesClear = () => {clearTimeout(timer)
}watch(count,v=>{push(`${v}`)
})
</script><template><input v-model="value" /><button @click="done()">确定</button><div><button @click="time()">计时</button><button @click="timesClear()">清除计时</button></div>
</template><style scoped>
.read-the-docs {color: #888;
}
</style>