<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>前端开发 on 牙刷刷的小站</title><link>https://www.tianhao.me/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/</link><description>Recent content in 前端开发 on 牙刷刷的小站</description><generator>Hugo -- gohugo.io</generator><language>zh-CN</language><copyright>牙刷刷</copyright><lastBuildDate>Sat, 12 Jul 2025 16:19:04 +0800</lastBuildDate><atom:link href="https://www.tianhao.me/tags/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/index.xml" rel="self" type="application/rss+xml"/><item><title>我的智能小助手 2.0：给"偷懒"摄影系统开了扇全景落地窗</title><link>https://www.tianhao.me/posts/rk-camera-capture-webui/</link><pubDate>Sat, 12 Jul 2025 16:19:04 +0800</pubDate><guid>https://www.tianhao.me/posts/rk-camera-capture-webui/</guid><description>&lt;img src="https://www.tianhao.me/img/avatar.png" alt="Featured image of post 我的智能小助手 2.0：给"偷懒"摄影系统开了扇全景落地窗" /&gt;&lt;p&gt;距离上次分享我的“偷懒”摄影系统已经有段时间了，那个会自己判断何时该拍照、何时该“摸鱼”的小家伙，已经默默地为我工作了很久。但随着时间的推移，一个新的“痛点”开始浮现：尽管它内部很智能，但与它交流的方式却很“原始”。&lt;/p&gt;&#10;&lt;p&gt;项目代码：https://github.com/AndroidOL/camera-capture/tree/main/web-ui&lt;/p&gt;&#10;&lt;h2 id="从命令行考古到指尖轻触一次体验的革命"&gt;从“命令行考古”到“指尖轻触”：一次体验的革命&#10;&lt;/h2&gt;&lt;p&gt;在过去，每一次与它的互动，都像是一场深入服务器内部的“数字考古”之旅。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;想看看昨天拍到了什么？请启动 SSH 客户端，连接服务器，用 &lt;code&gt;cd&lt;/code&gt; 和 &lt;code&gt;ls&lt;/code&gt; 命令在迷宫般的目录结构里穿行。&lt;/li&gt;&#10;&lt;li&gt;想调整拍摄的灵敏度参数？请用 Vim 或 Nano 修改配置文件，保存后再 &lt;code&gt;systemctl restart&lt;/code&gt;，祈祷没改错字符。&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;这种体验繁琐且充满距离感。我的智能助手，它的喜怒哀乐、它的工作成果，都被一层名为“命令行”的黑盒子包裹着。&lt;/p&gt;&#10;&lt;p&gt;于是，我为它开了一扇窗：一扇能让我窝在沙发上，用最直观、最优雅方式与它交流的&lt;strong&gt;全景落地窗&lt;/strong&gt; —— 一个专属的&lt;strong&gt;网页控制台&lt;/strong&gt;。&lt;/p&gt;&#10;&lt;p&gt;现在，一切都不同了：&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;打开浏览器，输入本地地址；&lt;/li&gt;&#10;&lt;li&gt;一个美观、强大的界面展现在眼前；&lt;/li&gt;&#10;&lt;li&gt;那个沉默的后台摄影师，拥有了鲜活的“面容”和灵巧的“双手”。&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;h3 id="它的组成"&gt;它的组成：&#10;&lt;/h3&gt;&lt;ul&gt;&#10;&lt;li&gt;&lt;strong&gt;眼睛&lt;/strong&gt;：实时监控窗口，无延迟。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;双手&lt;/strong&gt;：按钮菜单，一点即控。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;大脑&lt;/strong&gt;：复杂逻辑隐藏，美观又直观。&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;hr&gt;&#10;&lt;h2 id="网页控制台的四大超能力"&gt;网页控制台的四大“超能力”&#10;&lt;/h2&gt;&lt;h3 id="1-时光抽屉层级式的照片档案馆"&gt;1. 时光抽屉：层级式的照片档案馆&#10;&lt;/h3&gt;&lt;p&gt;灵感来自现实世界的“抽屉”。整个交互过程如同打开俄罗斯套娃般：&lt;/p&gt;&#10;&lt;ol&gt;&#10;&lt;li&gt;&lt;strong&gt;年度 / 月度&lt;/strong&gt;：查看所有有记录的月份。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;具体日期&lt;/strong&gt;：以预览图展示每一天。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;小时抽屉&lt;/strong&gt;：点击后看到 24 小时分布。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;分钟级照片&lt;/strong&gt;：深入找到具体照片。&lt;/li&gt;&#10;&lt;/ol&gt;&#10;&lt;p&gt;探索照片变得轻松、有趣、富有仪式感。&lt;/p&gt;&#10;&lt;hr&gt;&#10;&lt;h3 id="2-实况视窗永不眨眼的忠诚守望者"&gt;2. 实况视窗：永不眨眼的忠诚守望者&#10;&lt;/h3&gt;&lt;p&gt;点击“实时监控”，系统立刻进入守望状态。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&lt;strong&gt;心跳刷新&lt;/strong&gt;：前端每 2.5 秒请求一次画面，保持实时。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;智能重连&lt;/strong&gt;：摄像头掉线自动恢复。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;夜间模式&lt;/strong&gt;：环境变暗自动降亮，夜晚不刺眼。&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;hr&gt;&#10;&lt;h3 id="3-时光隧道私人定制的纪录片生成器"&gt;3. 时光隧道：私人定制的纪录片生成器&#10;&lt;/h3&gt;&lt;p&gt;“照片轮播”模式是我最爱的功能。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;选择任意日期范围（如“2025 樱花季”）；&lt;/li&gt;&#10;&lt;li&gt;系统串联该时段所有照片，生成动态影片。&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;特点：&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&lt;strong&gt;幻灯片模式&lt;/strong&gt;：按时间顺序排列。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;过渡效果&lt;/strong&gt;：淡入淡出自然切换。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;时间字幕&lt;/strong&gt;：底部自动显示拍摄时间。&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&#10; &lt;blockquote&gt;&#10; &lt;p&gt;🎞️ 我就用它回顾了樱花从花苞到飘落的全过程，感动与震撼并存。&lt;/p&gt;&#10;&#10; &lt;/blockquote&gt;&#10;&lt;hr&gt;&#10;&lt;h3 id="4-明眸善睐体贴入微的智能主题"&gt;4. 明眸善睐：体贴入微的智能主题&#10;&lt;/h3&gt;&lt;p&gt;我是夜猫子，因此加入了主题切换功能：&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&lt;strong&gt;日间模式&lt;/strong&gt;：蓝白配色，清爽。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;暗夜模式&lt;/strong&gt;：墨黑 + 绛红，护眼不扰人。&lt;/li&gt;&#10;&lt;li&gt;&lt;strong&gt;自动记忆&lt;/strong&gt;：会记住你上次用的主题。&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;就像一个懂你的老朋友。&lt;/p&gt;&#10;&lt;hr&gt;&#10;&lt;h2 id="开发中的小剧场让系统更人性化的瞬间"&gt;开发中的小剧场：让系统更“人性化”的瞬间&#10;&lt;/h2&gt;&lt;h3 id="午夜惊魂记"&gt;午夜惊魂记&#10;&lt;/h3&gt;&lt;p&gt;某次深夜调试实时监控，画面疯狂刷新！&#10;原来我写成了 &lt;code&gt;250ms&lt;/code&gt; 而不是 &lt;code&gt;2500ms&lt;/code&gt;，摄像头差点变“机关枪”。&lt;/p&gt;&#10;&lt;h3 id="命名的灾难"&gt;命名的灾难&#10;&lt;/h3&gt;&lt;p&gt;最初 API 叫 &lt;code&gt;get_image_list&lt;/code&gt;，我自己隔了段时间也完全看不懂。&lt;/p&gt;&#10;&lt;hr&gt;&#10;&lt;h2 id="生活的新视角科技融入日常"&gt;生活的新视角：科技融入日常&#10;&lt;/h2&gt;&lt;p&gt;网页控制台让摄影系统真正融入我的生活：&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;☕ &lt;strong&gt;清晨咖啡时间&lt;/strong&gt;：配延时画面唤醒一天；&lt;/li&gt;&#10;&lt;li&gt;🌱 &lt;strong&gt;植物生长日记&lt;/strong&gt;：每周定期用“时光隧道”回顾变化；&lt;/li&gt;&#10;&lt;li&gt;🖼️ &lt;strong&gt;家庭时光机&lt;/strong&gt;：家庭聚会时投屏播放美好回忆。&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;hr&gt;&#10;&lt;h2 id="给创造者的邀请函"&gt;给创造者的邀请函&#10;&lt;/h2&gt;&lt;p&gt;打造这个系统，其实不难：&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;span class="lnt"&gt;2&#10;&lt;/span&gt;&lt;span class="lnt"&gt;3&#10;&lt;/span&gt;&lt;span class="lnt"&gt;4&#10;&lt;/span&gt;&lt;span class="lnt"&gt;5&#10;&lt;/span&gt;&lt;span class="lnt"&gt;6&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# ----- 基础装备 -----&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 硬件：树莓派 / 任意 Linux 设备 + 摄像头&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 图像分析：Python + OpenCV&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 前端界面：HTML + JavaScript + CSS&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;# 后端服务：PHP&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;每个模块都像一块乐高积木，你可以自由组合、修改、扩展。&lt;/p&gt;&#10;&lt;hr&gt;&#10;&#10; &lt;blockquote&gt;&#10; &lt;p&gt;技术的温度，在于我们如何用它去记录和照亮生活。期待你也能为生活打开一扇独特的“时光之窗”。&lt;/p&gt;&#10;&#10; &lt;/blockquote&gt;&#10;</description></item></channel></rss>