WIP - outline for pinecil homeassistant / ble article

assets/sass/overrides.scss

@@ -16,3 +16,51 @@ div.footer {
 .panel-default h4 a, h5 a {
 	color: $primary-color;
 }
+
+figure.inline {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  width: 90%;
+}
+
+figure.inline-40 {
+  display: inline-flex;
+  height: auto;
+  width: 40%;
+}
+
+figure.inline-60 {
+  display: inline-flex;
+  height: auto;
+  width: 60%;
+}
+
+figure.inline-80 {
+  display: inline-flex;
+  height: auto;
+  width: 80%;
+}
+
+figure.right {
+  float: right;
+}
+
+figure.left {
+  float: left;
+}
+
+figure > img {
+  display: inline-flex;
+  width: 90%;
+}
+
+.clearfix {
+  overflow: auto;
+}
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
+}

content/posts/smarthome-soldering-iron-pinecil-homeassistant-esphome/index.md

@@ -15,9 +15,14 @@ Pinecil's firmware (IronOS), and am spending my weekends playing around with
 Bluetooth Low Energy (BLE) and Home Assistant to automatically turn on my fan
 when I start tinkering at my desk, lest my lungs die from the fumes.
 
+<p>
+
+{{< figure src="pinecil-esp32.jpg" alt="ESP-WROOM-32 Development MCU with a Pinecil v2 leaning on it" class="inline-40 left" >}}
+
 By popular demand, I'm writing a blog post about the Pinecil, how to flash the
 latest firmware, and then what you can (currently) do with bidirectional
 communication to your soldering iron.
+</p>
 
 We'll also go over two Pinecil community projects offering in-browser
 experiences (PineSam and Joric's 'Pinecil'), and lastly some instructions on
@@ -74,6 +79,8 @@ and development on the BLE stack on the main tree in the last few months and the
 developers have been making sure the BLE features are ready before they are
 released to a much larger audience.
 
+{{< figure src="blisp-flash.png" alt="Flashing the Pinecilv2 with blisp CLI" class="" >}}
+
 Once v2.21 is released, binaries can be retrieved from the
 [IronOS Releases](https://github.com/Ralim/IronOS/releases) page.
 
@@ -83,7 +90,7 @@ These steps assume you have a compiled version of `blisp` in your system path,
 either by installing from my COPR, or compiling on your own using the
 instructions in the repository.
 
-1. Find the latest sucessful actions run on the blisp repo
+1. Find the latest sucessful actions run on the ironos repo
    [here](https://github.com/Ralim/IronOS/actions/workflows/push.yml?query=branch%3Adev+event%3Apush).
 2. Download the `Pinecilv2_multi-lang` binary for that run, and unzip it
 3. Plug your Pinecil into your computer while holding down the 'Minus' (-)
@@ -121,23 +128,24 @@ Pinecil. It's is a Python and Vue-based application that has to have a server
 component running locally--along with a machine that has bluetooth. You can find
 the source code for PineSAM on [GitHub](https://github.com/builder555/PineSAM/).
 
-< insert pic of PineSAM ui >
+{{< figure src="pinesam.png" alt="PineSAM UI" class="inline" >}}
 
 Another project is a more simple web UI that uses in-browser Bluetooth support
 (currently only really well supported in Chromium/Firefox, and even then it's
 not universal or without bugs. This UI shows a nice graph of your Pinecil's
 temperature and power supply information, but is limited to devices supporting
-WebBLE, and also is unable to change settings on the device. You can also find
+WebBLE, and also is only able to change the set point (temperature) on the
-the source code for Joric UI on [GitHub](https://github.com/joric/pinecil).
+device. You can also find the source code for Joric UI on
+[GitHub](https://github.com/joric/pinecil).
 
-< insert pic of Joric UI>
+{{< figure src="joric-ui.png" alt="Joric's UI" class="inline-60 right" >}}
 
 PineSAM allows the user to not only see the live temperature, wattage, and
 voltage of their device but change the settings and temperatures at a click.
 Uniquely, it allows users to set temperature presets for one-click changes
 between temperatures--for example to switch between leaded and unleaded solder.
 
-< insert pic of PineSAM on Mobile >
+{{< figure src="pinesam-mobile.png" alt="Screenshot of PineSAM UI on Mobile device" class="inline-40 left" >}}
 
 The PineSAM project is working to integrate a "Work" screen which takes
 inspiration from Joric's UI. Due to this, it's likely these two projects will
@@ -158,6 +166,8 @@ No setup needed! Just browse to
 compatible browser. I've personally tested Firefox and Chromium on Fedora 37,
 but I know others have got it working on Windows and MacOS, too.
 
+As with PineSAM, feel free to come to chat for help and support.
+
 ## Home Assistant Setup with ESPHome
 
 If Home Assistant (HASS) is more your speed, read on below. Be warned to get
@@ -172,6 +182,8 @@ control your ESP8266/ESP32 using just YAML configurations. In this section, I'll
 walk though how to setup an ESP32 with will show you how to create a smart
 soldering iron using Pinecil with Home Assistant and ESPHome.
 
+{{< figure src="hass-soldering.png" alt="Home Assistant Soldering UI" class="inline" >}}
+
 To make this work, we'll use an
 [ESPHome configuration file]((https://github.com/TomW1605/esphome_pinecilv2_ble/blob/main/esphome_pinecilv2_ble.yaml))
 put together by Pine64 community member TomW1605. Thank you again, Tom!
@@ -205,8 +217,8 @@ put together by Pine64 community member TomW1605. Thank you again, Tom!
    iron.
    - An example dashboard can be found at
      https://gist.github.com/NeilHanlon/83d6e2cdc6eb83cb205b617f80c2a7c3
-
+   - It uses the 'mini-graph-card' and 'auto-entities' integrations from HACS
-< insert pic of dashboard >
+  {{< gist neilhanlon 83d6e2cdc6eb83cb205b617f80c2a7c3 >}}
 
 Now that you've got that setup, you should start to see data coming in about
 your Pinecil's settings! Go on and automate thy solder.