[{"data":1,"prerenderedAt":75},["ShallowReactive",2],{"content:\u002Farticles:8442":3},{"item":4,"md":17,"html":18,"menu":19,"excerpt":30,"related":31},{"title":5,"len":6,"tags":7,"id":11,"time":12,"modifyTime":13,"encrypt":14,"showComments":15,"customSlug":16},"树莓派桌面小屏",1678,[8,9,10],"树莓派","vue","python",8442,1645457432535,1685333435027,false,true,"",null,"\u003Ch1 data-marked-line=\"1\">\u003Csup class=\"fake-head\" id=\"%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA\">效果展示\u003C\u002Fa>\u003C\u002Fh1>\u003Cp data-marked-line=\"2\">  最近用\u003Ca href=\"https:\u002F\u002Fwww.electronjs.org\u002F\" target=\"_blank\">electron\u003C\u002Fa>做了一个应用，用于在树莓派小屏上显示一些实时信息。主要是想学习使用\u003Ccode>electron\u003C\u002Fcode>。涉及到的工具：\u003Ccode>electron\u003C\u002Fcode>, \u003Ccode>vue3\u003C\u002Fcode>, \u003Ccode>vite\u003C\u002Fcode>, \u003Ccode>flask\u003C\u002Fcode>, \u003Ccode>websocket\u003C\u002Fcode>。\n  这是实际效果，买的树莓派屏幕很烂\u003Cimg src=\"\u002Fsticker\u002Faru\u002F27.png\" alt=\"sticker\"\u002F>：\n\u003Cspan class=\"image-container\">\u003Cimg data-viewer alt=\"截图\" title=\"截图\" style=\"width: 60% !important;\" src=\"https:\u002F\u002Fr2-blog.yunyuyuan.net\u002FvtAkb4EpZYBVQge.gif\"\u002F>\u003Csmall class=\"desc\">截图\u003C\u002Fsmall>\u003C\u002Fspan>\n\u003Cspan class=\"image-container\">\u003Cimg data-viewer alt=\"实机\" title=\"实机\" style=\"width: 60% !important;\" src=\"https:\u002F\u002Fr2-blog.yunyuyuan.net\u002FUjdWZH3yB9mNJPG.jpg\"\u002F>\u003Csmall class=\"desc\">实机\u003C\u002Fsmall>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch1 data-marked-line=\"7\">\u003Csup class=\"fake-head\" id=\"%E5%88%B6%E4%BD%9C%E8%BF%87%E7%A8%8B\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E5%88%B6%E4%BD%9C%E8%BF%87%E7%A8%8B\">制作过程\u003C\u002Fa>\u003C\u002Fh1>\u003Col data-marked-line=\"8\">\n\u003Cli>第一步当然是做一个可拆卸可调节的支架，之前买的热熔胶派上用场：\n\u003Cspan class=\"image-container\">\u003Cimg data-viewer alt=\"自制支架\" title=\"自制支架\" style=\"width: 60% !important;\" src=\"https:\u002F\u002Fr2-blog.yunyuyuan.net\u002FwPlcFQjX7JB2HEy.jpg\"\u002F>\u003Csmall class=\"desc\">自制支架\u003C\u002Fsmall>\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>起一个electron项目，按照网上的教程，很简单，基本就是改一下\u003Ccode>package.json\u003C\u002Fcode>和\u003Ccode>electron.js\u003C\u002Fcode>。\u003C\u002Fli>\n\u003Cli>前后端代码也挺简单，开源在github: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyunyuyuan\u002Fpi-desktop\" target=\"_blank\">\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyunyuyuan\u002Fpi-desktop\">https:\u002F\u002Fgithub.com\u002Fyunyuyuan\u002Fpi-desktop\u003C\u002Fa>\u003C\u002Fa>。有一个ignore掉的配置文件\u003Ccode>.\u002Fconfig.json\u003C\u002Fcode>如下：\u003Cpre data-marked-line=\"12\" data-lang=\"json\" data-shiki>\u003Ccode class=\"language-json\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-dark:#E06C75\">    \"host\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"127.0.0.1\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-dark:#E06C75\">    \"port\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">9876\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-dark:#E06C75\">    \"caiyun_token\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"彩云api的token\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-dark:#E06C75\">    \"todo-pwd\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"密码，与todo list加密密码一致\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-dark:#E06C75\">    \"gh_token\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"github token用于获取todolist\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fli>\n\u003Cli>主要是如何把前后端都跑起来，我找到了个\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F32158738\u002Fpython-on-electron-framework\" target=\"_blank\">方法\u003C\u002Fa>，在nodejs里运行python子进程，实测不行，我也没仔细研究。看到\u003Cem>package.json\u003C\u002Fem> 里\u003Ccode>electron:dev\u003C\u002Fcode>有一个\u003Ccode>concurrently -k "cross-env BROWSER=none yarn dev" "yarn electron"\u003C\u002Fcode>貌似是运行多个进程，于是我把它改成\u003Ccode>concurrently -k "py\u002Fvenv\u002Fbin\u002Fpython py\u002Fmain.py" "cross-env BROWSER=none yarn dev" "yarn electron"\u003C\u002Fcode>，先运行python后端，再运行前端，可以正常运行。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch1 data-marked-line=\"24\">\u003Csup class=\"fake-head\" id=\"%E5%85%B6%E4%BB%96\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E5%85%B6%E4%BB%96\">其他\u003C\u002Fa>\u003C\u002Fh1>\u003Cul data-marked-line=\"25\">\n\u003Cli>cpu和ram信息使用\u003Ca href=\"https:\u002F\u002Fpypi.org\u002Fproject\u002Fpyembedded\u002F\" target=\"_blank\">pyembedded\u003C\u002Fa>获取，websocket传输，1秒更新一次。\u003C\u002Fli>\n\u003Cli>天气查询用的\u003Ca href=\"https:\u002F\u002Fopen.caiyunapp.com\u002F\" target=\"_blank\">彩云api\u003C\u002Fa>，5分钟更新一次。\u003C\u002Fli>\n\u003Cli>待办事项还是用的github api，我专门用react写了一个网页\u003Ca href=\"https:\u002F\u002Finfo.yunyuyuan.net\u002F\" target=\"_blank\">\u003Ca href=\"https:\u002F\u002Finfo.yunyuyuan.net\u002F\">https:\u002F\u002Finfo.yunyuyuan.net\u002F\u003C\u002Fa>\u003C\u002Fa>去更新待办，树莓派每间隔一分钟获取一次最新待办，其实这里可以用github action，配合frp打洞（我有一台云服务器），实现更新待办后自动触发树莓派更新，不用轮询，就放个todo在那后面做吧\u003Cimg src=\"\u002Fsticker\u002Faru\u002F39.png\" alt=\"sticker\"\u002F>。\u003C\u002Fli>\n\u003Cli>Todo list是用\u003Ca href=\"https:\u002F\u002Fcryptojs.gitbook.io\u002Fdocs\u002F\" target=\"_blank\">cryptojs\u003C\u002Fa>加密的，虽然存在github上，但无需担心泄露。\u003C\u002Fli>\n\u003C\u002Ful>\n",[20,24,27],{"size":21,"text":22,"url":23},"big","效果展示","%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA",{"size":21,"text":25,"url":26},"制作过程","%E5%88%B6%E4%BD%9C%E8%BF%87%E7%A8%8B",{"size":21,"text":28,"url":29},"其他","%E5%85%B6%E4%BB%96","效果展示 最近用electron做了一个应用，用于在树莓派小屏上显示一些实时信息。主要是想学习使用electron。涉及到的工具：electron, vue3, vite, flask, websocket。 这是实际效果，买的树莓派屏幕很烂 ： ![截图[60% x ]](https:\u002F\u002Fr2-b…",[32,42,53,60,67],{"item":33,"count":41},{"title":34,"len":35,"tags":36,"id":38,"time":39,"modifyTime":40,"encrypt":14,"showComments":15,"customSlug":16},"树莓派监控摄像头制作",1673,[8,10,37],"前端",1010,1669896775319,1679559691141,2,{"item":43,"count":52},{"title":44,"len":45,"tags":46,"id":48,"time":49,"modifyTime":50,"showComments":15,"encrypt":14,"customSlug":51},"关于本站的重构 (又双叒叕重构了)",1503,[37,9,47],"杂谈",8500,1741528184917,1759579038298,"about-renovate",1,{"item":54,"count":52},{"title":55,"len":56,"tags":57,"id":58,"time":59,"modifyTime":59,"encrypt":14,"showComments":15,"customSlug":16},"vue3用于管理axios异步请求一致性的功能函数",3227,[9,37],9820,1725014139074,{"item":61,"count":52},{"title":62,"len":63,"tags":64,"id":65,"time":66,"modifyTime":66,"encrypt":14,"showComments":15,"customSlug":16},"Nuxt3创建SSE server以及client的简明教程",1905,[37,9],5449,1720261091923,{"item":68,"count":52},{"title":69,"len":70,"tags":71,"id":72,"time":73,"modifyTime":74,"showComments":15,"encrypt":14,"customSlug":16},"自动推送epic免费游戏到邮箱\u002FGotify",2054,[10],5888,1680683109285,1745297217637,1793351209915]