Lexin Gong

自建房网络与智能家居规划方案

2026-05-18T00:00:00+00:00

房子从动工到现在两年多了，第一年土建，第二年装修，现在硬装快收尾了。

面积不算小，单靠一个家用路由器肯定扛不住。而且现在的 IoT 设备越来越多，摄像头又涉及到隐私，随便塞一个网段里总觉得不太放心。所以这次干脆从 VLAN 开始规划，把可信设备、智能家居、安防监控和访客网络隔离开来，顺便把每个房间的智能开关和窗帘电机也一并安排上。

下面是整个方案，从网络拓扑到设备清单到费用，能想到的都写上了。另外还有一个 AI 生成的可视化版本，看着更直观。

VLAN 划分

VLAN	名称	子网	用途
V10	管理网络	10.10.10.0/24	交换机、AP、网关管理界面
V20	可信网络	10.20.20.0/24	电脑、电视、手机、房间网口、旁路由、中枢网关
V30	智能家居	10.30.30.0/24	米家 WiFi 设备（音箱、扫地机等 IoT）
V40	安防监控	10.40.40.0/24	摄像头 ×4 + NVR（禁止外网）
V50	访客网络	10.50.50.0/24	来客 WiFi，完全隔离

WiFi SSID

SSID	VLAN	说明
Home	V20	家庭可信设备
IoT	V30	米家智能家居 WiFi 设备
Guest	V50	访客 WiFi

一楼 (1F)

RG-EG210G-P-EV2 — 企业网关 · 8 LAN口(PoE) + 2 WAN口

端口	连接	备注
WAN①	上联 2F 交换机	Trunk All
WAN②	备用	—
LAN①	吸顶AP ①	Trunk · 多SSID
LAN②	吸顶AP ②	Trunk · 多SSID
LAN③	TP-LINK TL-SG1005D	5口千兆·贴电视背面 → 电视 + PS5 + 中枢网关①
LAN④	空闲	IPTV备用
LAN⑤	靠墙备用网口	AP下方·电视移动备用位
LAN⑥	房间网口 ①	—
LAN⑦	房间网口 ②	—
LAN⑧	GL.iNET MT3000	旁路由·TV/PS5手动设网关走翻墙

1F 客厅 · 中枢网关① + 小交换机

中枢网关①：小米 ZSWG01CM · 放电视背面 · DC圆孔电源(5V/1A)
下挂设备：TP-LINK TL-SG1005D 5口千兆交换机(¥89·贴电视背面) → 电视 + PS5 + 中枢网关①

⬇️ Trunk All VLANs · 预埋网线

二楼 (2F)

RG-ES218GC-P — 16口千兆 PoE 交换机 + 2 SFP光口 · 已用 13 口 + 备用 3 口

端口	连接	备注
上联	← 1F 网关	Trunk All
P①	吸顶AP ①	Trunk · 多SSID
P②	吸顶AP ②	Trunk · 多SSID
P③	摄像头 ①	PoE · V40
P④	摄像头 ②	PoE · V40
P⑤	摄像头 ③	PoE · V40
P⑥	摄像头 ④	PoE · V40
P⑦	衣帽间	V20
P⑧	主卧	V20
P⑨	小孩房 ①	V20
P⑩	小孩房 ②	V20
P⑪	书房 → NVR	V40
P⑫	书房网口 ②	V20
P⑬	中枢网关②	弱电箱旁公共区域·3D打印PoE支架贴墙·PoE供电
P⑭⑮⑯	空闲备用 ×3	—

2F 弱电箱旁 · 中枢网关②

中枢网关②：小米 ZSWG01CM · 位置：弱电箱旁公共区域（楼层正中间，蓝牙Mesh 2.0覆盖最佳）
安装方式：3D打印PoE支架贴墙(¥34) · PoE分离器转DC供电 · 短网线从弱电箱穿出
覆盖范围：衣帽间→主卧→书房→弱电箱→过道→小孩房×2，总长22m，蓝牙Mesh 2.0每设备中继

书房 · NVR + 显示器

DS-7808N-Q1（无PoE）· VLAN 40 · ← 书房网线① ← 2F交换机 → 显示器
硬盘：翻新 4TB 监控盘 · 摄像头与NVR同VLAN，完全隔离

防火墙规则

规则	方向	说明
✅	V20 可信 → 全部	手机/电脑可控制智能家居、查看摄像头、管理网络
✅	中枢网关 IP → V30	单独放行 mDNS 中继，允许发现和控制 WiFi IoT 设备
❌	V30 IoT → V20/40	IoT 设备不能访问可信网络和摄像头，只能上网 + 同 VLAN
❌	V40 监控 → 外网	摄像头禁止访问外网，仅与 NVR 同 VLAN 互通
❌	V50 访客 → 全部内网	访客只能上网，不能访问任何内网设备
🏠	断网可用	中枢网关×2 本地控制蓝牙Mesh 2.0设备，不受外网影响

安防费用汇总

项目	型号	价格
摄像头 ×4	DS-2CD1245-LA · ¥195 × 4	¥780
NVR 录像机	DS-7808N-Q1（无PoE）	¥395
监控硬盘	翻新 4TB	¥750
2F 交换机（升级）	RG-ES218GC-P 16口千兆PoE + 2SFP光口	¥1,196
1F 小交换机	TP-LINK TL-SG1005D 5口千兆	¥89
旁路由	GL.iNET MT3000	¥499
2F 中枢网关配件	3D打印PoE支架(贴墙)	¥34
1F 交换机	—	不需要 ✅
NVR PoE 口	—	不需要（省 ¥87）✅

安防总计（不含交换机）：¥1,925
额外配件合计：¥622（小交换机 ¥89 + 旁路由 ¥499 + PoE支架 ¥34）

智能家居设备清单

领普 E3 Pro + 平头熊 + 米家

一楼 (1F)

房间	智能开关 (领普 E3 Pro)	窗帘电机 (平头熊)	音箱	其他
玄关	E3 Pro 4键 ×1 ¥70 — 玄关灯+过厅灯+离家模式+全关/回家	—	—	人体传感器 ×1
客厅	E3 Pro 4键 ×1 ¥70 — 主灯+氛围灯+阳台灯+窗帘	平头熊 ×1 南落地窗	小爱音箱Pro ×1 红外遥控电视/空调	—
餐厅	E3 Pro 3键 ×1 ¥70 — 主灯+餐边灯+窗帘	平头熊 ×1 南窗	—	—
厨房	E3 Pro 单键 ×1 ¥50 — 主灯	—	—	—
公卫	E3 Pro 2键 ×1 ¥60 — 主灯+排风扇	—	—	人体传感器 ×1
麻将室	E3 Pro 4键 ×1 ¥70 — 主灯+灯2+窗帘+场景	平头熊 ×2 北窗+西窗	—	—
卧室1（客房）	E3 Pro 单键 ×1 ¥50 — 主灯（吸顶灯）	窗帘盒已预留电源，电机后续可加	—	—
卧室2（长辈房）	E3 Pro 2键 ×1 ¥60 — 主灯+床头灯	窗帘盒已预留电源，电机后续可加	—	—
卧室2 内卫	E3 Pro 2键 ×1 ¥60 — 主灯+排风扇	—	—	—

二楼 (2F)

房间	智能开关 (领普 E3 Pro)	窗帘电机 (平头熊)	音箱	其他
起居室	E3 Pro 2键 ×1 ¥60 — 主灯+氛围灯	—	小爱音箱 ×1 标准版	—
主卧	E3 Pro 4键 ×1 ¥70 — 主灯+床头灯+夜灯+窗帘	平头熊 ×1 南落地窗(建议双轨)	小爱音箱闹钟版 ×1	—
衣帽间	E3 Pro 单键 ×1 ¥50 — 主灯	窗帘盒已预留电源，电机后续可加	—	人体传感器 ×1
主卫	E3 Pro 3键 ×1 ¥70 — 主灯+镜前灯+窗帘	平头熊 ×1 卫生间窗	—	—
书房	E3 Pro 2键 ×1 ¥60 — 主灯+台灯	窗帘盒已预留电源，电机后续可加	—	—
小孩房1	E3 Pro 3键 ×1 ¥70 — 主灯+床头灯+窗帘	平头熊 ×1 北窗	—	—
小孩房2	E3 Pro 3键 ×1 ¥70 — 主灯+床头灯+窗帘	平头熊 ×2 南飘窗+西窗	—	—
公卫	E3 Pro 单键 ×1 ¥50 — 主灯	—	—	人体传感器 ×1

设备数量汇总

类别	数量	价格
智能开关 · 领普 E3 Pro	单键×4 + 2键×5 + 3键×4 + 4键×4 = 17个	¥1,060
窗帘电机 · 平头熊	1F 4个 + 2F 3-4个，共 7-8 个，已有 4 个，补购 3-4 个	¥450-800
小爱音箱	Pro×1 + 闹钟版×1 + 标准版×1	¥500
中枢网关	小米 ZSWG01CM ×2	¥500
人体传感器	×5（玄关+公卫×2+衣帽间+客厅）	¥150

首批必装（不含窗帘电机补购）：¥2,210（开关¥1,060 + 网关¥500 + 音箱¥500 + 传感器¥150）
窗帘电机补购（分期加）：¥450-800
智能家居全部到位：¥2,660-3,010

⚠️ 施工提醒： 中枢网关①放1F客厅电视背面，中枢网关②放2F弱电箱旁公共区域（3D打印PoE支架贴墙）

Creating Custom Stickers/Avatars from Your Webcam - Part 1

2024-03-04T00:00:00+00:00

I’ve just made my new project, Poker Face, available as open-source. This project is crafted with Elixir and Phoenix LiveView. Its core features allow you to:

Transform your webcam feed into stickers or avatars.
Pose questions about the camera images to GPT.

Check out the introduction video here: In this blog series, I’ll guide you through every detail of the implementation. Welcome to Part 1.

In this very first part, we’ll tackle a couple of key steps:

Opening the camera and capturing the video frame.
Sending the frame to a LiveView process and interfacing it with Gemini or OpenAI.

Initial Project

Let’s kick things off with setting up the project. Navigate to your desired directory and create a new phoenix project:

mix phx.new poker_face

From the outset, my goal was to build this entire project in LiveView. I proceeded by adding face_live.ex and face_live.html.heex, then configuring the router to point to this LiveView component.

defmodule PokerFaceWeb.FaceLive do
  use PokerFaceWeb, :live_view

  @impl true
  def mount(_prams, _session, socket) do
    {:ok, assign(socket, :photo_info, nil)}
  end
end

<div>
  <.header>
    Poker Face
    <:subtitle></:subtitle>
  </.header>
  <div class="grid grid-cols-2 gap-x-2">
    <div id="user_photo" class="rounded shadow-lg p-2 flex flex-col gap-y-2" phx-hook="Camera">
      <button
        id="startCamera"
        class="p-4 w-full h-full disabled:cursor-not-allowed"
      >
        <p class="select-none flex items-center gap-2">
          <.icon name="hero-camera" />Take a photo with your webcam
        </p>
      </button>
      <div class="flex flex-col gap-y-2">
        <video id="video" class="hidden" playsinline autoplay></video>
        <img id="photo" />

        <div id="buttonGroup" class="hidden flex flex-col gap-y-2 justify-center">
          <button
            id="takePhoto"
            class="rounded-full py-2 border border-black hover:bg-black hover:text-white"
          >
            Take Photo
          </button>
          <button
            id="stopCamera"
            class="rounded-full py-2 border border-black hover:bg-black hover:text-white"
          >
            Cancel
          </button>
        </div>
        <canvas id="canvas" class="hidden"></canvas>
      </div>
    </div>
    <div id="poker_photo" class="rounded shadow-lg p-2">
      <p class="text-center text-lg"><%= @photo_info %></p>
    </div>
  </div>
</div>

defmodule PokerFaceWeb.Router do
  use PokerFaceWeb, :router

  ...

  scope "/", PokerFaceWeb do
    pipe_through :browser

    live "/", FaceLive
  end

  ...

Once you run mix phx.server, your page should like this:

The variable @photo_info is designated to display the responses from GPT/Gemini once we’ve sent an video frame to be analyzed.

Webcam

Now, let’s delve into the webcam functionality. To be honest, webcams were somewhat foreign to me. So, I turned to GPT for assistance on how to implement it, and it provided a solid, functional code example. All I had to do was integrate the JavaScript into a Phoenix Hook.

Add this code to app.js with any necessary modifications:

let Hooks = {}

Hooks.Camera = {
  mounted() {
    const startCamera = document.getElementById('startCamera');
    const video = document.getElementById('video');
    const takePhoto = document.getElementById('takePhoto');
    const stopCamera = document.getElementById('stopCamera');
    const canvas = document.getElementById('canvas');
    const buttonGroup = document.getElementById('buttonGroup');
    const photo = document.getElementById("photo");
    let stream = null;

    // Start the camera when button is clicked
    startCamera.addEventListener('click', async () => {
      stream = await navigator.mediaDevices.getUserMedia({ video: true });
      video.srcObject = stream;
      video.classList.remove('hidden');
      buttonGroup.classList.remove('hidden');
      startCamera.classList.add('hidden');
      photo.src = "";
    });

    // Take a photo
    takePhoto.addEventListener('click', () => {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0);
      const imageDataURL = canvas.toDataURL('image/png');
      photo.src = imageDataURL;

      // push to the back-end and interact with Gemini/GPT
      this.pushEvent("new_photo", { photo: imageDataURL })

      // buttonGroup.classList.add('hidden');
      // startCamera.classList.remove('hidden');
      // video.classList.add('hidden');
      // video.srcObject = null;
    });

    // Stop the camera
    stopCamera.addEventListener('click', () => {
      if (stream) {
        stream.getTracks().forEach(track => track.stop());
      }
      buttonGroup.classList.add('hidden');
      startCamera.classList.remove('hidden');
      video.classList.add('hidden');
      video.srcObject = null;
      photo.src = "";
    });
  }
}

By clicking the camera button, the camera will activate: Cool, it works. GPT is great!

Click the ‘Take Photo’ button though, and you’ll bump into an error. Currently, when this button is clicked, an event named new_photo is dispatched to the backend, for which the handling is not yet implemented. Let’s proceed with that.

LiveView process

Edit face_live.ex and add these functions:

...

  @impl true
  def handle_event("new_photo", %{"photo" => photo}, socket) do
    send(self(), {:anaylse, photo})
    {:noreply, socket}
  end

  @impl true
  def handle_info({:anaylse, photo}, socket) do
    {:ok, text} = Gemini.analyze_image(photo)

    socket =
      socket
      |> assign(:photo_info, text)

    {:noreply, socket}
  end

...

Instead of OpenAI gpt, We implement Gemini API first, Let’s add a gemini.ex:

defmodule PokerFace.Gemini do
  @vision_uri "https://generativelanguage.googleapis.com/v1beta/models/gemini-pro-vision:generateContent"

  def analyze_image("data:image/png;base64," <> image_data) do
    prompt = """
      What's is he/she/it doing?
    """

    body = %{
      contents: [
        %{
          parts: [
            %{text: prompt},
            %{inlineData: %{mimeType: "image/png", data: image_data}}
          ]
        }
      ]
    }

    resp =
      Req.post!(@vision_uri <> "?key=#{System.get_env("GOOGLE_AI_API_KEY")}",
        json: body,
        receive_timeout: 60_000,
        connect_options: [protocols: [:http1]]
      )

    text =
      resp.body["candidates"]
      |> List.first()
      |> Map.get("content")
      |> Map.get("parts")
      |> List.first()
      |> Map.get("text")

    {:ok, text}
  end
end

In order to utilize Gemini, you must obtain your personal API key from Google AI. Once acquired and configured as an environment variable, you’ll possess a functional AI-powered image analyzer.

Although Gemini responds correctly, the photo captured becomes non-persistent on the current page. So, we need to make some fix and an OpenAI version could also be integrated. I’ll not show the code here. But you can check all the code changes We should make today.

At the end of these modifications, we are equipped with a fully operational camera AI image analyzer!

Managing Elixir's main branch with asdf

2024-01-10T00:00:00+00:00

I’ve always used asdf to manage Elixir versions, and I’ve also had a persistent need to run projects or experiments with the latest code from the Elixir repo (main branch). Installing the main branch is quite simple:

Clone the Elixir code and build it locally:

git clone https://github.com/elixir-lang/elixir.git /path/to/elixir
cd /path/to/elixir && make

Create a symlink in the asdf installs directory and switch to the main version:

ln -s /path/to/elixir ~/.asdf/installs/elixir/main
asdf reshim elixir main
asdf shell elixir main | asdf global elixir main

Verify:

$ asdf list elixir
  1.15.7-otp-26
  1.16.0-otp-26
 *main

Daily update:
```
cd /path/to/elixir && git pull && make
```

You can write the above update commands to a script and run it periodically to ensure you’re always using the latest version of the main branch.
If running make directly throws compilation errors, you need to delete the previous build artifacts before rebuilding:
```
cd /path/to/elixir
make clean && make
```
Using the main branch can be somewhat unstable as it’s still under development.

在安卓手机上安装 Elixir

2019-07-25T00:00:00+00:00

记录一下在安卓手机上安装 Elixir 的过程。

在手机上安装 Termux 应用
开启 SSH 服务（非必须, 开 ssh 只是为了便于 PC 端访问操作手机，比在手机上打字方便）
- 安装相关包
```
  apt update
  apt upgrade
  pkg install openssh
  pkg install net-tools
```
- 设置密码并开启 ssh
```
  # 设置一个密码
  passwd
  # 开启服务
  sshd
```
- 查看手机 ip
```
  ifconfig
```

安装 Elixir

从 PC 端登录手机

  # 确保手机和 PC 处在同一网络，用上一步获取的安卓手机 ip 登录
  # 拷贝公钥到安卓手机(需输入前面设置的密码)
  ssh-copy-id -p 8022 -i your_public_key_file andriod_ip
  # 登录
  ssh -p 8022 android_ip

安装相关包 (PC 端登录之后，就可以开始正式的安装步骤了)
```
  pkg install unzip
  pkg install erlang
```

安装 Elixir, 参考 https://github.com/hexpm/bob#elixir-builds 确定好 elixir 和 erlang otp 版本, 这里以 elixir 1.9.1 otp 22 为例:

  mkdir elixir
  cd elixir
  # wget https://repo.hex.pm/builds/elixir/{REF}-otp-{OTP_MAJOR_VERSION}.zip
  wget https://repo.hex.pm/builds/elixir/v1.9.1-otp-22.zip
  unzip v1.9.1-otp-22.zip
  rm v1.9.1-otp-22.zip

设置 PATH, 保存到 bashrc

  vi .bashrc
  export PATH=$PATH:$HOME/elixir/bin

验证

elixir -v
#> Erlang/OTP 22 [erts-10.4.4] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1]
#>
#> Elixir 1.9.1 (compiled with Erlang/OTP 22)

Mac 下临时显示隐藏的文件和文件夹

2013-12-21T00:00:00+00:00

今天遇到一个问题, 在使用 Github 的 Mac 客户端的时候, 想直接导入已经 clone 到本地的 repo, 但是这个 repo 目录是一个以 . 为开头的格式命名的隐藏目录, 在打开的文件选择窗口里面是无法看到的。

以前我一般是打开终端输入如下命令:

defaults write com.apple.finder AppleShowAllFiles TRUE; killall Finder

这条命令有一个不便利的地方就是执行之后系统就会一直显示那些隐藏文件，往往等你操作完之后，你又需要把值重新设置回去:

defaults write com.apple.finder AppleShowAllFiles FALSE; killall Finder

今天才发现，原来在选择文件的时候, 只需要按下 Command + Shift + . 组合键就可以临时地显示隐藏文件了。当然这不仅仅适用于这一个软件，Mac 下所有软件的文件选择窗口都是可以这么做的。

参考: http://www.tekrevue.com/tip/how-to-temporarily-see-hidden-files-folders-in-mac-os-x/

Rails 使用 mongoDB 和 Slim

2012-11-24T00:00:00+00:00

预言中的世界末日都要来了，期待的 Ruby 2.0 和 Rails 4.0 都还没发布。那我就来看看怎么集成 mongoDB 和 Slim 到一个 Rails 工程。

安装 mongoDB 数据库

brew install mongodb 安装好之后，可以把 mongo 的服务设为开机启动，或者在需要的时候手动 mongod 开启。

新建 Rails 工程

rails new projectname --skip-test-unit --skip-active-record --skip-bundle

因为使用 mongoDB 并打算使用 minitest 所以会在创建工程的时候 skip 掉不必要的东西。

修改 Gemfile

在 Gemfile 里面添加以下几句之后执行 bundle install

gem 'slim-rails'
gem 'mongoid'
group :test, :development do
  gem 'minitest-rails'
end

生成数据库配置和 minitest helper 文件

rails generate mongoid:config
rails generate mini_test:install

Slim 页面

把 application.html.erb 转换成 slim 格式，可以使用 html2slim 或者自己手动修改。参见我改好的版本

使用

现在就可以使用 rails g model | controller 等等命令了，默认生成的 view 文件都会是 slim 格式，model 都会自动 include mongoid 的 class。enjoy it!