jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-25 10:17:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'current' into next

Browse Source
This commit is contained in:
Franck Nijhof 2023-02-22 18:31:05 +01:00
commit 1362579ccb
No known key found for this signature in database
GPG Key ID: D62583BA8AB11CA3
21 changed files with 446 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Gemfile.lock
View File

@ -94,10 +94,10 @@ GEM
ruby2_keywords (0.0.5)
safe_yaml (1.0.5)
sass (3.4.25)
sass-embedded (1.58.2)
sass-embedded (1.58.3)
google-protobuf (~> 3.21)
rake (>= 10.0.0)
sass-embedded (1.58.2-x64-mingw32)
sass-embedded (1.58.3-x64-mingw32)
google-protobuf (~> 3.21)
sass-globbing (1.1.5)
sass (>= 3.1)
@ -113,7 +113,7 @@ GEM
stringex (2.8.5)
terminal-table (3.0.2)
unicode-display_width (>= 1.1.1, < 3)
tilt (2.0.11)
tilt (2.1.0)
tzinfo (2.0.6)
concurrent-ruby (~> 1.0)
tzinfo-data (1.2022.7)

78
sass/custom/_landingpage.scss
View File

@ -5,26 +5,31 @@ $ha__primary_color: #03a9f4;
#landingpage {
$landingpage__hero_height: 670px;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
.site-header {
.grid-wrapper {
max-width: 1100px !important;
padding: 0 25px !important;
}
}
.grid-wrapper {
max-width: 1500px;
padding: 0;
width: 100%;
}
.page-content {
overflow-x: hidden;
}
.banner {
height: $landingpage__hero_height;
margin-bottom: 16px;
margin-top: -42px;
width: 100%;
text-align: center;
.title {
position: relative;
width: 550px;
@ -37,11 +42,13 @@ $ha__primary_color: #03a9f4;
color: #ffffff;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
bottom: 226px;
svg {
stroke: $ha__primary_color;
}
}
.wide {
position: relative;
width: 700px;
@ -50,6 +57,7 @@ $ha__primary_color: #03a9f4;
line-height: 52px;
bottom: 390px;
}
img {
width: 100%;
object-fit: cover;
@ -66,6 +74,7 @@ $ha__primary_color: #03a9f4;
position: absolute;
bottom: 8px;
}
.right {
position: absolute;
right: 8px;
@ -175,6 +184,7 @@ $ha__primary_color: #03a9f4;
.title {
margin-bottom: 4px;
}
.button {
font-size: small;
font-weight: 600;
@ -199,6 +209,7 @@ $ha__primary_color: #03a9f4;
.section-content:nth-child(even) {
background-color: #F5F5F5;
.section-inner:nth-child(odd) {
flex-direction: row-reverse;
}
@ -263,6 +274,7 @@ $ha__primary_color: #03a9f4;
width: 100%;
text-align: right;
}
.banner-overlay-price {
width: calc(100% - 6px);
text-align: right;
@ -314,6 +326,7 @@ $ha__primary_color: #03a9f4;
}
}
}
.banner-overlay-button {
background-color: $ha__primary_color;
margin-top: 12px;
@ -323,24 +336,27 @@ $ha__primary_color: #03a9f4;
display: flex;
cursor: pointer;
text-transform: capitalize;
font-weight: 900;
font-size: 18px;
color: #ffffff;
div {
margin: auto;
font-weight: 900;
font-size: 18px;
color: #ffffff;
}
}
.banner-overlay-button.disabled {
background-color: #bdbdbd;
cursor: initial;
}
}
.below-button {
margin-top: 8px;
text-align: center;
font-size: .8em;
}
}
.banner-overlay-disclaimer {
font-size: 12px;
line-height: 14px;
@ -355,9 +371,11 @@ $ha__primary_color: #03a9f4;
display: grid;
gap: 32px;
grid-template-columns: repeat(2, 1fr);
.item {
display: grid;
text-align: center;
span:nth-of-type(1) {
color: rgba(0, 0, 0, 0.87);
font-size: 24px;
@ -367,12 +385,14 @@ $ha__primary_color: #03a9f4;
opacity: 0.66;
text-transform: uppercase;
}
span:nth-of-type(2) {
color: rgba(0, 0, 0, 0.87);
font-size: 48px;
letter-spacing: -2px;
line-height: 56px;
}
span:nth-of-type(3) {
color: rgba(0, 0, 0, 0.87);
font-size: 14px;
@ -400,6 +420,7 @@ $ha__primary_color: #03a9f4;
z-index: 0;
}
}
.vision-content {
z-index: 1;
position: relative;
@ -411,6 +432,7 @@ $ha__primary_color: #03a9f4;
line-height: 80px;
color: $landingpage__deep_color;
}
.vision-statement {
font-size: 18px;
line-height: 21px;
@ -434,6 +456,7 @@ $ha__primary_color: #03a9f4;
line-height: 56px;
font-weight: bold;
}
.vision-block-content {
font-size: 18px;
line-height: 133%;
@ -442,6 +465,7 @@ $ha__primary_color: #03a9f4;
}
}
}
.mood {
text-align: center;
margin-bottom: 32px;
@ -508,6 +532,7 @@ $ha__primary_color: #03a9f4;
}
}
}
.outline {
display: flex;
place-self: flex-end;
@ -585,6 +610,7 @@ $ha__primary_color: #03a9f4;
text-transform: uppercase;
opacity: 0.4;
}
.spec-content {
grid-column: 2 / span 4;
font-weight: bold;
@ -600,6 +626,7 @@ $ha__primary_color: #03a9f4;
li {
margin-bottom: 0;
}
li::marker {
content: "- ";
}
@ -607,6 +634,7 @@ $ha__primary_color: #03a9f4;
}
}
}
.specifications-form-factor {
grid-column: 4 / span 2;
@ -636,6 +664,7 @@ $ha__primary_color: #03a9f4;
.sff-width {
grid-column: 1 / span 2;
}
svg#zen {
grid-column: 1;
height: 100px;
@ -672,6 +701,7 @@ $ha__primary_color: #03a9f4;
margin-top: -24px;
}
}
img {
box-shadow: none;
border: 0;
@ -679,6 +709,7 @@ $ha__primary_color: #03a9f4;
}
}
}
.faq-list {
margin: 0 72px;
}
@ -716,6 +747,10 @@ $ha__primary_color: #03a9f4;
}
}
}
.material-card>p:last-child {
margin-bottom: 0;
}
}
.fab {
@ -827,9 +862,11 @@ $ha__primary_color: #03a9f4;
grid-row: 1 / span 2;
margin-right: 8px;
}
div:nth-of-type(2) {
grid-column: 2;
}
div:nth-of-type(3) {
grid-column: 2;
color: darkslategrey;
@ -837,6 +874,7 @@ $ha__primary_color: #03a9f4;
}
}
}
.distributor:hover {
border-color: $ha__primary_color;
}
@ -845,6 +883,7 @@ $ha__primary_color: #03a9f4;
.box-contents {
margin: 0 16px 32px;
ul {
margin: 12px 0 12px 24px;
color: darkslategrey;
@ -854,6 +893,7 @@ $ha__primary_color: #03a9f4;
margin-bottom: 4px;
}
}
.ul-sub {
margin: 0 0 0 16px;
}
@ -873,6 +913,7 @@ $ha__primary_color: #03a9f4;
@media only screen and (max-width: $palm-end) {
$landingpage__hero_height: 500px;
#landingpage {
.site-header {
background-color: #ffffffe8;
@ -883,20 +924,25 @@ $ha__primary_color: #03a9f4;
width: calc(100% - 8px);
}
}
.page-content {
margin-top: 0;
height: 100%;
}
.grid-wrapper {
margin-left: 0;
width: 100%;
}
.banner {
margin-bottom: 8px;
height: $landingpage__hero_height;
img {
height: $landingpage__hero_height;
}
.title {
width: 100%;
left: unset;
@ -945,6 +991,7 @@ $ha__primary_color: #03a9f4;
.button-row-with-icon {
display: flex;
flex-direction: column;
.button-icon {
width: calc(100% - 8px);
margin: 2px 4px;
@ -983,6 +1030,7 @@ $ha__primary_color: #03a9f4;
padding-left: 8px;
width: 100%;
}
.secondary {
display: none;
}
@ -1004,16 +1052,19 @@ $ha__primary_color: #03a9f4;
}
.bullet-points {
margin: 24px 0;
margin: 48px 0 24px;
.item {
span:nth-of-type(1) {
font-size: 16px;
line-height: 16px;
}
span:nth-of-type(2) {
font-size: 32px;
line-height: 32px;
}
span:nth-of-type(3) {
font-size: 12px;
line-height: 12px;
@ -1023,28 +1074,35 @@ $ha__primary_color: #03a9f4;
.vision {
margin-bottom: 0;
svg {
display: none;
}
.vision-content {
margin-top: 28px;
.vision-header {
font-size: 34px;
line-height: 40px;
margin-top: 8px;
}
.vision-statement {
font-size: 12px;
line-height: 14px;
}
.vision-blocks {
.vision-block {
width: 100%;
margin: 9px;
.vision-block-title {
font-size: 24px;
line-height: 28px;
}
.vision-block-content {
display: none;
}
@ -1076,6 +1134,7 @@ $ha__primary_color: #03a9f4;
}
}
}
.mood-separator {
margin: -80px calc((100% / 2) - 120px);
@ -1113,6 +1172,7 @@ $ha__primary_color: #03a9f4;
margin-top: -4px;
}
}
.specifications-form-factor {
.specifications-form-factor-grid {
margin-left: 0;
@ -1120,6 +1180,7 @@ $ha__primary_color: #03a9f4;
.sff-width {
margin-left: 50px;
}
.sff-description {
span:last-of-type {
font-size: 16px;
@ -1151,6 +1212,7 @@ $ha__primary_color: #03a9f4;
}
}
}
.blue3d {
.blue3d-container {
width: 100% !important;
@ -1181,8 +1243,9 @@ $ha__primary_color: #03a9f4;
.page-content {
.content {
.bullet-points {
margin: 24px 0;
margin: 48px 0 24px;
}
.vision {
margin-top: -200px;
@ -1202,10 +1265,12 @@ $ha__primary_color: #03a9f4;
}
}
}
.mood {
.mood-cards {
margin: 0;
width: inherit;
.material-card {
height: 300px;
width: 230px;
@ -1213,6 +1278,7 @@ $ha__primary_color: #03a9f4;
}
}
}
.specifications {
margin: 0 16px;
}

4
source/_dashboards/statistics-graph.markdown
View File

@ -49,7 +49,7 @@ chart_type:
type: string
stat_types:
required: false
description: The statistics types to render. `min`, `max`, `mean`, `sum`, `state`
description: The statistics types to render. `min`, `max`, `mean`, `sum`, `state`, `change`
type: list
title:
required: false
@ -57,7 +57,7 @@ title:
type: string
period:
required: false
description: The period of the rendered graph. `5minute`, `hour`, `day` or `month`
description: The period of the rendered graph. `5minute`, `hour`, `day`, `week` or `month`
type: string
hide_legend:
required: false

2
source/_docs/configuration/basic.markdown
View File

@ -32,7 +32,7 @@ homeassistant:
<div class='note'>
You will not be able to edit anything in {% my general title="Settings > System > General" %} in the UI if you are using YAML configuration for any of the following: name, latitude, longitude, elevation, unit_system, temperature_unit, time_zone, external_url, internal_url. Additionally, some options are only visible after "Advanced Mode" is enabled on your {% my profile title="User Profile" %}.
You will not be able to edit anything in {% my general title="Settings > System > General" %} in the UI if you are using YAML configuration for any of the following: name, latitude, longitude, elevation, unit_system, temperature_unit, time_zone, external_url, internal_url, country, currency. Additionally, some options are only visible after "Advanced Mode" is enabled on your {% my profile title="User Profile" %}.
</div>

2
source/_includes/installation/operating_system.md
View File

@ -91,7 +91,7 @@ To use this method, follow the steps described in the procedure below: [Write th
- To use this method, follow the instructions of your Live distribution (e.g., [this Ubuntu guide](https://ubuntu.com/tutorials/try-ubuntu-before-you-install)). Once you booted the live operating system, follow the steps described in the procedure below: [Write the image to your boot media](#write-the-image-to-your-boot-media).
{% details "Ubuntu dependency's for Etcher" %}
{% details "Ubuntu dependencies for Etcher" %}
When installing Etcher on an Ubuntu system you may need to install the fuse
dependency, you can do so with the following commands:

6
source/_integrations/london_air.markdown
View File

@ -68,11 +68,11 @@ To explore the data available within the `data` attribute of a sensor use the `d
template:
- sensor:
- name: "Updated"
state: '{{ state_attr('sensor.merton', 'updated') }}'
state: "{{ state_attr('sensor.merton', 'updated') }}"
- name: "Merton PM10"
state: '{{ state_attr('sensor.merton', 'data')[0].pollutants[0].summary }}'
state: "{{ state_attr('sensor.merton', 'data')[0].pollutants[0].summary }}"
- name: "Westminster S02"
state: '{{ state_attr('sensor.westminster', 'data')[0].pollutants[3].summary }}'
state: "{{ state_attr('sensor.westminster', 'data')[0].pollutants[3].summary }}"
```
{% endraw %}

2
source/_integrations/min_max.markdown
View File

@ -37,7 +37,7 @@ Precision:
## YAML Configuration
Alternatlively, this integration can be configured and set up manually via YAML
Alternatively, this integration can be configured and set up manually via YAML
instead. To enable the Integration sensor in your installation, add the
following to your `configuration.yaml` file:

3
source/_integrations/nest.markdown
View File

@ -288,7 +288,8 @@ All cameras have motion and person triggers, however only some support capturing
| Nest Cam Indoor<br>Nest Cam IQ Indoor<br>Nest Cam IQ Outdoor<br>Nest Cam Outdoor | RTSP<br>Recording | Motion<br>Person<br>Sound | Snapshot (jpg) |
| Nest Cam with floodlight | WebRTC | Motion<br>Person | N/A |
| Nest Doorbell (battery) | WebRTC | Motion<br>Person<br>Chime | Clip Preview (mp4, gif) |
| Nest Doorbell (wired) | RTSP<br>Recording | Motion<br>Person<br>Sound<br>Chime | Snapshot (jpg) |
| Nest Doorbell (wired, 1st gen) | RTSP<br>Recording | Motion<br>Person<br>Sound<br>Chime | Snapshot (jpg) |
| Nest Doorbell (wired, 2nd gen) | WebRTC | Motion<br>Person<br>Chime | Clip Preview (mp4, gif) |
| Nest Hub Max | RTSP<br>Recording | Motion<br>Person<br>Sound<br> | Snapshot (jpg) |
Given a camera named `Front Yard` then the camera is created with a name such as `camera.front_yard`.

4
source/_integrations/transmission.markdown
View File

@ -20,10 +20,6 @@ ha_integration_type: integration
The Transmission integration allows you to monitor your [Transmission](https://www.transmissionbt.com/) BitTorrent downloads from within Home Assistant and set up automations based on that information.
<div class='note warning'>
This integration is only compatible with Transmission clients versions 1.31 - 2.82.
</div>
## Setup
Your Transmission client must first be configured to allow remote access. In your Transmission client navigate to **Preferences** -> **Remote** tab and then click the **Allow remote access** checkbox.

4
source/blue/index.html
View File

@ -29,7 +29,7 @@ frontpage_image: /images/frontpage/blue-frontpage.jpg
<div class="content">
<div class="material-card text banner-overlay with-box">
<div>
<div class="banner-overlay-header">Available today</div>
<div class="banner-overlay-header">Limited Edition</div>
<div class="banner-overlay-content">
The limited edition Home Assistant Blue bundle is hardware that is affordable
and fast, packed in a custom-designed and gorgeous case, and powered by the most powerful home
@ -613,5 +613,5 @@ Nope! We are committed to keep supporting all platforms that are currently avail
</div>
</div>
</a>
</div>

BIN
source/images/yellow/home-assistant-yellow-exploded-and-labeled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
source/images/yellow/yellow-2d.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
source/images/yellow/yellow-kit-2d.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
source/images/yellow/yellow-kit-poe-2d.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
source/images/yellow/yellow-pcb-preview.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 370 KiB

BIN
source/images/yellow/yellow-poe-box-preview.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
source/images/yellow/yellow-preview.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
source/images/yellow/yellow_hero.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 KiB

39
source/index.html
View File

@ -101,45 +101,6 @@ feedback: false
"
></a>
<!-- SkyConnect -->
<a class="material-card picture-promo" href="/skyconnect/" style="
background-image: url(/images/skyconnect/skyconnect-cover.png);
background-size: cover;
background-color: #41bdf5;
">
<div class="caption">
<div class="title">
Home Assistant SkyConnect
<div class="subtitle">
Best way to add Zigbee and Matter to Home Assistant
</div>
</div>
<svg viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>
</div>
</a>
<!-- Home Assistant Yellow -->
<a
class="material-card picture-promo"
href="https://yellow.home-assistant.io"
style="
background-image: url(/images/frontpage/yellow-frontpage.jpg);
background-size: cover;
background-color: #41bdf5;
"
>
<div class="caption">
<div class="title">
Home Assistant Yellow
<div class="subtitle">
The easiest way to run Home Assistant. Now available for pre-order.
</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>
</div>
</a>
{% assign pages_by_date = site.pages | sort: "date" | reverse %}
{% for page in pages_by_date %}
{% if page.layout == "landingpage" and page.frontpage != false %}

12
source/skyconnect/index.html
View File

@ -7,7 +7,7 @@ tagline: Home Assistant SkyConnect
tagline_wide: false
og_image: /images/skyconnect/skyconnect-cover.png
hero_image: /images/skyconnect/skyconnect_horizontal.png
frontpage: false
frontpage: true
frontpage_image: /images/skyconnect/skyconnect-cover.png
---
@ -167,7 +167,9 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
wireless devices. This includes Zigbee and Thread. If you do not use the
extension cable, it may not work at all, and if it does, it could be flaky at
best with intermittent problems (issues with pairing, device dropouts, unreachable
devices, timeout errors, etc). {% enddetails %}
devices, timeout errors, etc).
<br><br>
<a href="https://www.youtube.com/watch?v=tHqZhNcFEvA">See demo on YouTube.</a> {% enddetails %}
</div>
<div style="margin-top: 24px; text-align: center; font-size: .8rem;">
@ -386,7 +388,7 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z"
/>
</svg>
ORDER SKYCONNECT
ORDER
</div>
<script>
@ -408,4 +410,8 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
closeDialog();
}
};
if (document.location.search === "?order") {
showBuyDialog();
}
</script>

350
source/yellow/index.html Normal file
View File

@ -0,0 +1,350 @@
---
layout: landingpage
title: "Home Assistant Yellow"
description: "The easiest way to run Home Assistant. Now available for pre-order."
date: 2022-10-05
tagline: Home Assistant Yellow
tagline_wide: false
og_image: /images/yellow/yellow_hero.jpg
hero_image: /images/yellow/yellow_hero.jpg
frontpage: true
frontpage_image: /images/frontpage/yellow-frontpage.jpg
---
<style>
#landingpage .banner .title {
text-shadow: 0px 0px 10px rgba(0, 0, 0), 0px 0px 10px rgba(0, 0, 0);
}
#landingpage .content .bullet-points,
#landingpage .sub-title {
margin-top: 100px;
}
#landingpage #buy-dialog {
overflow-y: auto;
}
.spaced-card {
max-width: 750px;
margin: 100px auto;
}
#landingpage .content .bullet-points .item.rpi span:nth-of-type(2) {
font-size: 39px;
}
#landingpage .yellow-variant {
display: flex;
flex-direction: row;
margin-bottom: 16px;
}
#landingpage .yellow-variant:last-child {
margin-bottom: 0;
}
#landingpage .yellow-variant div:first-child {
width: 100px;
margin-right: 16px;
}
#landingpage .yellow-variant img {
height: auto;
box-shadow: none;
border: none;
max-width: initial;
width: 100px;
}
.banner-overlay-button, #landingpage .fab {
background-color: #ffc900 !important;
color: black !important;
}
@media only screen and (max-width: 480px) {
#landingpage .content .bullet-points .item.rpi span:nth-of-type(2) {
font-size: 32px;
}
#landingpage .yellow-variant {
flex-direction: column;
}
}
</style>
<div class="content">
<div class="material-card text banner-overlay with-box">
<div>
<div class="banner-overlay-header">Our take on Home Automation</div>
<div class="banner-overlay-content">
The foundation of your smart home needs to be local and private. Home Assistant Yellow is that foundation.
<br><br>
On top of that, it's Matter-ready, upgradable and extendable. You won't need anything else.
</div>
</div>
<div class="material-card text box">
<div class="banner-overlay-images">
<a
href="/images/yellow/yellow-pcb-preview.jpg"
target="_blank" class="img-container">
<img src="/images/yellow/yellow-pcb-preview.jpg" />
</a>
<a
href="/images/yellow/yellow-poe-box-preview.jpg"
target="_blank" class="img-container">
<img src="/images/yellow/yellow-poe-box-preview.jpg" />
</a>
<a
href="/images/yellow/yellow-preview.jpg"
target="_blank" class="img-container">
<img src="/images/yellow/yellow-preview.jpg" />
</a>
</div>
<div class="banner-overlay-button" onclick="showBuyDialog()">
<div>Order now</div>
</div>
</div>
</div>
<div class="bullet-points">
<div class="item rpi">
<span>Fast</span>
<span>Compute Module 4</span>
<span>Powered by the powerful Raspberry Pi Compute Module 4. Swap it out for a better one if you need more power in the future.</span>
</div>
<div class="item">
<span>Expandable</span>
<span>M.2 Slot</span>
<span>Add a hard drive with terabytes of extra space</span>
</div>
<div class="item">
<span>Connected</span>
<span>Zigbee & Thread</span>
<span>Comes with Zigbee out of the box. Thread to power your Matter network is coming soon</span>
</div>
<div class="item">
<span>Ready</span>
<span>Zero Setup</span>
<span>Comes with Home Assistant</span>
</div>
</div>
</div>
<div class="material-card spaced-card">
<img src="/images/yellow/home-assistant-yellow-exploded-and-labeled.png">
</div>
<div class="material-card text spaced-card">
<h1>Pick your flavor</h1>
<div class="yellow-variant">
<div><img src="/images/yellow/yellow-2d.jpg" alt="2D overview of the content of the Home Assistant Yellow"></div>
<div>
<b>Home Assistant Yellow</b><br>
This flagship version of Home Assistant Yellow is ready to go out of the box.
<br><br>
It comes pre-assembled in a custom enclosure with a Raspberry Pi Compute Module 4 (CM4) and a custom heat sink for fanless, silent operation. The CM4 is a version without wireless and has 2 GB RAM and 16 GB eMMC storage, pre-installed with Home Assistant.
<br><br>
All you need to get started is to plug in the power supply and the Ethernet cable, both of which are included. This variant does not have Power-over-Ethernet.
</div>
</div>
<div class="yellow-variant">
<div><img src="/images/yellow/yellow-2d.jpg" alt="2D overview of the content of the Home Assistant Yellow Kit Power-over-Ethernet variant"></div>
<div>
<b>Yellow Kit with Power-over-Ethernet</b><br>
<a href="https://yellow.home-assistant.io/poe/">Some assembly required!</a> This kit supports Power-over-Ethernet (PoE) and includes everything in the flagship version except the Raspberry Pi Compute Module 4.
<br><br>
Custom enclosure, custom heat sink, and Ethernet cable included. You must provide your own Raspberry Pi Compute Module 4 and install Home Assistant on it. The kit does not include a power supply (because power comes from PoE).
</div>
</div>
<div class="yellow-variant">
<div><img src="/images/yellow/yellow-2d.jpg" alt="2D overview of the content of the Home Assistant Yellow Kit"></div>
<div>
<b>Yellow Kit with Power Supply</b><br>
<a href="https://yellow.home-assistant.io/power-supply/">Some assembly required!</a> This kit includes everything in the flagship version except the Raspberry Pi Compute Module 4.
<br><br>
This option allows you to pick the compute module with the memory and eMMC storage to fit your needs. You will need to install Home Assistant on the compute module you provide. Custom enclosure, custom heat sink, and Ethernet cable included. This version comes with a power supply, but does not support Power-over-Ethernet.
</div>
</div>
</div>
<div class="material-card text spaced-card">
<h1>Open Hardware</h1>
<p>
We spend a lot of time and resources on getting our products to work great. We want to make it possible for other people to study our work and be able to learn how to make great products for the smart home, so we've released the schematics of Yellow as open-source.
<a href="https://yellow.home-assistant.io/yellow-v1.2-standard/">Explore the board</a> and <a href="https://github.com/NabuCasa/yellow/">view the source.</a>
</p>
</div>
<div class="sub-title">Features & Specifications</div>
<div class="flex">
<ul>
<li>
Carrier board for Raspberry Pi Compute Module 4 (CM4)
<ul>
<li>CM4 board-to-board connector</li>
<li>Supports direct boot from NVMe devices (e.g., for CM4 Lite)</li>
<li>12 cm x 12 cm</li>
<li>Compatible with all 32 variants of CM4
<ul>
<li>Quad-core Cortex-A72 (ARMv8) 64-bit / 1.5 GHz</li>
<li>Up to 8 GB RAM</li>
<li>Up to 32 GB eMMC</li>
<li>Regulatory approval does not cover wireless variants</li>
</ul>
</li>
</ul>
</li>
<li>
Integrated smart-home wireless (<a href="https://www.mouser.com/new/silicon-labs/silicon-labs-mgm210p-mighty-gecko-lighting-module/">Silicon Labs MGM210P Mighty Gecko Module</a>)
<ul>
<li>Supports Zigbee 3.0, OpenThread, and Matter</li>
<li>2.4 GHz radio with TX power up to +20 dBm</li>
<li>1024 KB flash program memory, 96 KB RAM data memory</li>
<li>Pre-installed with Zigbee 3.0 firmware (EZSP), can be upgraded</li>
</ul>
</li>
<li>Expansion slot
<ul>
<li>For NVMe SSDs (M-Key)</li>
<li>M.2 socket M-Key</li>
<li>Supports 2230, 2242, 2260, and 2280 modules</li>
<li>PCIe x1</li>
<li>Note: Google Coral AI Accelerator not working, details in this <a href="https://github.com/google-coral/edgetpu/issues/280#issuecomment-818202094">issue</a></li>
</ul>
</li>
<li>Gigabit Ethernet</li>
<li>2 x USB 2.0 Type-A host port</li>
<li>1 x USB-C 2.0 device port (<a href="https://www.mouser.com/new/silicon-labs/silabs-cp2102n-usbxpress-usb-uart-bridge-controllers/">Silicon Labs CP2102N USBXpress USB bridge</a>)
<ul>
<li>UART mode (default): debug USB-to-serial adapter</li>
<li>USB mode: CM4 USB 2.0 interface for USB recovery</li>
</ul>
</li>
</ul>
<ul>
<li>High-quality stereo audio DAC
<ul>
<li>2 V RMS line-out on 3.5 mm audio jack</li>
<li>SNR 106 dB</li>
</ul>
</li>
<li>2 x Push button
<ul>
<li>Red: Factory reset</li>
<li>Blue: To be determined</li>
</ul>
</li>
<li>RTC backed by CR2032 battery</li>
<li>Status LEDs (can be powered off during regular operation)
<ul>
<li>Green: Power</li>
<li>Red: Disk usage</li>
<li>Yellow: Home Assistant system state</li>
</ul>
</li>
<li>Power
<ul>
<li>12 V / 2 A through barrel DC power jack (5.5 mm x 2.1 mm)</li>
<li>Ethernet: PoE+ IEEE 802.3at-2009 Class 3 or 4 (selectable via jumper)</li>
<li>Typical power usage
<ul>
<li>Idle ~1.5 W</li>
<li>Idle with NVMe ~2.5 W</li>
<li>Load ~5-9 W</li>
</ul>
</li>
</ul>
</li>
<li>Enclosure
<ul>
<li>123 mm x 123 mm x 36 mm</li>
<li>Translucent injection-molded polycarbonate plastic</li>
<li>Tool-free assembly</li>
<li>Accommodates custom heat sink (included)</li>
</ul>
</li>
</ul>
</div>
<div id="buy-dialog" class="dialog">
<div class="material-card text dialog-content">
<div class="close-container"></div>
<div class="dialog-header">
<span>Home Assistant Yellow</span>
<span class="dialog-close" onclick="closeDialog()" title="close">
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
/>
</svg>
</span>
</div>
<div class="distributors">
<a href="https://www.crowdsupply.com/nabu-casa/home-assistant-yellow#products" target="_blank">
<div class="distributor">
<div>
<div>🇺🇸</div>
<div>Crowd Supply</div>
<div>Located in USA</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
<a
href="https://raspberrypi.dk/en?s=home+assistant+yellow&post_type=product"
target="_blank"
>
<div class="distributor">
<div>
<div>🇩🇰</div>
<div>RaspberryPi.dk</div>
<div>Located in Denmark</div>
</div>
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
/>
</svg>
</div>
</a>
</div>
</div>
</div>
<div
class="fab"
onclick="showBuyDialog()"
title="pre-order Home Assistant Yellow"
>
<svg style="width: 32px; height: 32px" viewBox="0 0 32 32">
<path
fill="currentColor"
d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z"
/>
</svg>
ORDER
</div>
<script>
const buyDialog = document.getElementById("buy-dialog");
const buyFab = document.querySelector(".fab");
function showBuyDialog() {
buyDialog.style.display = "flex";
buyFab.style.display = "none";
}
function closeDialog() {
buyDialog.style.display = "none";
buyFab.style.display = "flex";
}
window.onclick = function (event) {
if (event.target === buyDialog) {
closeDialog();
}
};
if (document.location.search === "?order") {
showBuyDialog();
}
</script>