Migrate first blog post
After Width: | Height: | Size: 117 KiB |
After Width: | Height: | Size: 103 KiB |
After Width: | Height: | Size: 186 KiB |
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 175 KiB |
After Width: | Height: | Size: 180 KiB |
After Width: | Height: | Size: 125 KiB |
After Width: | Height: | Size: 139 KiB |
After Width: | Height: | Size: 172 KiB |
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
slug: making-a-wifi-enabled-smart-air-humidifier
|
||||||
|
title: "DIY Smart Appliance: Making a WiFi-enabled smart air humidifier from a regular one"
|
||||||
|
tags: [smart home, DIY, ESP8266, ESPHome, humidifier, Wemos D1 mini, WiFi]
|
||||||
|
---
|
||||||
|
|
||||||
|
So there was a simple air humidifier… Actually, this post is a good example of how to make your regular boring home appliance a little smarter. The main part of my humidifier will be the Wemos (or Lolin) D1 mini board based on the ESP8266 WiFi chip.
|
||||||
|
|
||||||
|
<!-- truncate -->
|
||||||
|
|
||||||
|
My air humidifier has no automatic turn on and off, no timers, only a regulator that also works like a switch. The idea is to make it WiFi-friendly and work with Home Assistant through MQTT.
|
||||||
|
|
||||||
|
Actually, I was pretty lucky with this device because there are other models of it with built-in sensors, screens, and other stuff so the hardware was prepared to connect additional modules. But we don’t want to measure humidity inside the humidifier right? So the sensor will be a separate part of the system.
|
||||||
|
|
||||||
|
## Teardown
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
So it has an AC/DC power supply. Now we need to find 5v power line for our additions. All internal parts are powered with 12V DC so we need a step down module. In my case there was an empty 12V connector right on the factory board:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## Assembling
|
||||||
|
|
||||||
|
So we will connect there a regulated power down module and set it up to a 5V output:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
Now the main hardware. It is a Wemos D1 Mini ESP8266-based board (well almost because in my case it is a no-name copy of it, don’t buy it please) and a beautiful relay brick from Itead Studio:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
Connect it all together. Wemos D1 mini can be powered with stable 5V DC power connected to its 5V pin:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
Now we need to unsolder the wires from a factory button or switch and connect it to our relay:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
The last step will be gluing all new parts inside our device. Don’t repeat my mistake and glue the WiFi board with micro-USB port pointing outside of the humidifier, not inside it:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## Improvements
|
||||||
|
|
||||||
|
The final version of my humidifier also checks the state of the factory switch and reports the state to [MQTT binary sensor](https://www.home-assistant.io/integrations/binary_sensor.mqtt) in Home Assistant. Here is a final diagram of this project:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
The software was also improved. There was [WiFiManager for ESP8266](https://github.com/tzapu/WiFiManager) boards added to make it possible to configure WiFi and MQTT settings without flashing the board.
|
||||||
|
|
||||||
|
## The code
|
||||||
|
|
||||||
|
The old code was missing long time ago.
|
||||||
|
|
||||||
|
## Home Assistant
|
||||||
|
|
||||||
|
An example of MQTT platform switch configuration in Home Assistant for humidifier:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
switch:
|
||||||
|
– platform: mqtt
|
||||||
|
name: "Humidifier"
|
||||||
|
state_topic: "edwin/humidifier/state"
|
||||||
|
command_topic: "edwin/humidifier/power"
|
||||||
|
state_on: "on"
|
||||||
|
state_off: "off"
|
||||||
|
payload_on: "1"
|
||||||
|
payload_off: "0"
|
||||||
|
```
|
||||||
|
|
||||||
|
## ESPHome migration
|
||||||
|
|
||||||
|
And finally here is a YAML configuration of my humidifier after it was migrated to [ESPHome](https://esphome.io):
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
esphome:
|
||||||
|
name: humidifier
|
||||||
|
platform: ESP8266
|
||||||
|
board: d1_mini
|
||||||
|
|
||||||
|
wifi:
|
||||||
|
ssid: "****"
|
||||||
|
password: "************"
|
||||||
|
|
||||||
|
# Enable fallback hotspot (captive portal) in case wifi connection fails
|
||||||
|
ap:
|
||||||
|
ssid: "Edwin Humidifier"
|
||||||
|
password: "************"
|
||||||
|
|
||||||
|
captive_portal:
|
||||||
|
|
||||||
|
# Enable logging
|
||||||
|
logger:
|
||||||
|
|
||||||
|
# Enable Home Assistant API
|
||||||
|
api:
|
||||||
|
password: "************"
|
||||||
|
|
||||||
|
ota:
|
||||||
|
password: "************"
|
||||||
|
|
||||||
|
switch:
|
||||||
|
- platform: gpio
|
||||||
|
name: "Humidifier"
|
||||||
|
pin: D1
|
||||||
|
restore_mode: ALWAYS_OFF
|
||||||
|
|
||||||
|
binary_sensor:
|
||||||
|
- platform: gpio
|
||||||
|
name: "Humidifier state"
|
||||||
|
pin:
|
||||||
|
number: D5
|
||||||
|
mode: INPUT
|
||||||
|
```
|
@ -1,12 +0,0 @@
|
|||||||
---
|
|
||||||
slug: first-blog-post
|
|
||||||
title: First Blog Post
|
|
||||||
authors: [slorber, yangshun]
|
|
||||||
tags: [hola, docusaurus]
|
|
||||||
---
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet...
|
|
||||||
|
|
||||||
<!-- truncate -->
|
|
||||||
|
|
||||||
...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
@ -1,44 +0,0 @@
|
|||||||
---
|
|
||||||
slug: long-blog-post
|
|
||||||
title: Long Blog Post
|
|
||||||
authors: yangshun
|
|
||||||
tags: [hello, docusaurus]
|
|
||||||
---
|
|
||||||
|
|
||||||
This is the summary of a very long blog post,
|
|
||||||
|
|
||||||
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
|
|
||||||
|
|
||||||
<!-- truncate -->
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
|
@ -1,24 +0,0 @@
|
|||||||
---
|
|
||||||
slug: mdx-blog-post
|
|
||||||
title: MDX Blog Post
|
|
||||||
authors: [slorber]
|
|
||||||
tags: [docusaurus]
|
|
||||||
---
|
|
||||||
|
|
||||||
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
|
|
||||||
|
|
||||||
:::tip
|
|
||||||
|
|
||||||
Use the power of React to create interactive blog posts.
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
{/* truncate */}
|
|
||||||
|
|
||||||
For example, use JSX to create an interactive button:
|
|
||||||
|
|
||||||
```js
|
|
||||||
<button onClick={() => alert('button clicked!')}>Click me!</button>
|
|
||||||
```
|
|
||||||
|
|
||||||
<button onClick={() => alert('button clicked!')}>Click me!</button>
|
|
Before Width: | Height: | Size: 94 KiB |
@ -1,29 +0,0 @@
|
|||||||
---
|
|
||||||
slug: welcome
|
|
||||||
title: Welcome
|
|
||||||
authors: [slorber, yangshun]
|
|
||||||
tags: [facebook, hello, docusaurus]
|
|
||||||
---
|
|
||||||
|
|
||||||
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
|
|
||||||
|
|
||||||
Here are a few tips you might find useful.
|
|
||||||
|
|
||||||
<!-- truncate -->
|
|
||||||
|
|
||||||
Simply add Markdown files (or folders) to the `blog` directory.
|
|
||||||
|
|
||||||
Regular blog authors can be added to `authors.yml`.
|
|
||||||
|
|
||||||
The blog post date can be extracted from filenames, such as:
|
|
||||||
|
|
||||||
- `2019-05-30-welcome.md`
|
|
||||||
- `2019-05-30-welcome/index.md`
|
|
||||||
|
|
||||||
A blog post folder can be convenient to co-locate blog post images:
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
The blog supports tags as well!
|
|
||||||
|
|
||||||
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
|
|
@ -1,23 +0,0 @@
|
|||||||
yangshun:
|
|
||||||
name: Yangshun Tay
|
|
||||||
title: Front End Engineer @ Facebook
|
|
||||||
url: https://github.com/yangshun
|
|
||||||
image_url: https://github.com/yangshun.png
|
|
||||||
page: true
|
|
||||||
socials:
|
|
||||||
x: yangshunz
|
|
||||||
github: yangshun
|
|
||||||
|
|
||||||
slorber:
|
|
||||||
name: Sébastien Lorber
|
|
||||||
title: Docusaurus maintainer
|
|
||||||
url: https://sebastienlorber.com
|
|
||||||
image_url: https://github.com/slorber.png
|
|
||||||
page:
|
|
||||||
# customize the url of the author page at /blog/authors/<permalink>
|
|
||||||
permalink: '/all-sebastien-lorber-articles'
|
|
||||||
socials:
|
|
||||||
x: sebastienlorber
|
|
||||||
linkedin: sebastienlorber
|
|
||||||
github: slorber
|
|
||||||
newsletter: https://thisweekinreact.com
|
|
@ -1,19 +0,0 @@
|
|||||||
facebook:
|
|
||||||
label: Facebook
|
|
||||||
permalink: /facebook
|
|
||||||
description: Facebook tag description
|
|
||||||
|
|
||||||
hello:
|
|
||||||
label: Hello
|
|
||||||
permalink: /hello
|
|
||||||
description: Hello tag description
|
|
||||||
|
|
||||||
docusaurus:
|
|
||||||
label: Docusaurus
|
|
||||||
permalink: /docusaurus
|
|
||||||
description: Docusaurus tag description
|
|
||||||
|
|
||||||
hola:
|
|
||||||
label: Hola
|
|
||||||
permalink: /hola
|
|
||||||
description: Hola tag description
|
|
@ -2,46 +2,8 @@
|
|||||||
sidebar_position: 1
|
sidebar_position: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
# Tutorial Intro
|
# What is it?
|
||||||
|
|
||||||
Let's discover **Docusaurus in less than 5 minutes**.
|
This is my project of publicly available documentation of my home servers and services.
|
||||||
|
|
||||||
## Getting Started
|
Working on it...
|
||||||
|
|
||||||
Get started by **creating a new site**.
|
|
||||||
|
|
||||||
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
|
|
||||||
|
|
||||||
### What you'll need
|
|
||||||
|
|
||||||
- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
|
|
||||||
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
|
|
||||||
|
|
||||||
## Generate a new site
|
|
||||||
|
|
||||||
Generate a new Docusaurus site using the **classic template**.
|
|
||||||
|
|
||||||
The classic template will automatically be added to your project after you run the command:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm init docusaurus@latest my-website classic
|
|
||||||
```
|
|
||||||
|
|
||||||
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
|
|
||||||
|
|
||||||
The command also installs all necessary dependencies you need to run Docusaurus.
|
|
||||||
|
|
||||||
## Start your site
|
|
||||||
|
|
||||||
Run the development server:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd my-website
|
|
||||||
npm run start
|
|
||||||
```
|
|
||||||
|
|
||||||
The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
|
|
||||||
|
|
||||||
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
|
|
||||||
|
|
||||||
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
|
|
@ -9,7 +9,7 @@ const FeatureList = [
|
|||||||
Svg: require('@site/static/img/homelab.svg').default,
|
Svg: require('@site/static/img/homelab.svg').default,
|
||||||
description: (
|
description: (
|
||||||
<>
|
<>
|
||||||
Here I'm trying my best in documenting my self-hosted journey.
|
Here I'm trying my best in documenting my home servers and services.
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|