Home-IoT/esphome
1
0
Fork 0
mirror of https://github.com/esphome/esphome.git synced 2024-11-10 09:17:46 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Improve dashboard setup wizard (#450)

Browse source
This commit is contained in:
Otto Winter 2019-02-22 21:18:56 +01:00
parent 6be47488a4
commit fc8f270a9f
No known key found for this signature in database
GPG key ID: DB66C0BE6013F97E
2 changed files with 28 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
esphome/dashboard/static/esphome.css
View file

@ -150,6 +150,7 @@ ul.stepper:not(.horizontal) .step.active::before, ul.stepper:not(.horizontal) .s
.select-action { .select-action {
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
white-space: nowrap;
} }
.tap-target-wrapper { .tap-target-wrapper {

50
esphome/dashboard/templates/index.html
View file

@ -35,8 +35,9 @@
<h5>Select Upload Port</h5> <h5>Select Upload Port</h5>
<p> <p>
Here you can select where ESPHome will attempt to show logs and upload firmwares to. Here you can select where ESPHome will attempt to show logs and upload firmwares to.
By default, this is "OTA", or Over-The-Air. Note that you might have to restart the Hass.io add-on For newly plugged in serial devices to be detected, restart the add-on.
for new serial ports to be detected. (Also see <a href="https://esphome.io/guides/faq#i-can-t-get-flashing-over-usb-to-work" target="_blank">
esphomeflasher</a>)
</p> </p>
</div> </div>
</div> </div>
@ -151,27 +152,24 @@
<div class="step-content"> <div class="step-content">
<div class="row"> <div class="row">
<p> <p>
Hi there! I'm the ESPHome setup wizard and will guide you through setting up Hi there! This is the ESPHome setup wizard. It will guide you through setting up
your first ESP8266 or ESP32-powered device using ESPHome. your first ESP8266 or ESP32-powered device using ESPHome.
</p> </p>
<a href="https://www.espressif.com/en/products/hardware/esp8266ex/overview" target="_blank">ESP8266s</a> and <a href="https://www.espressif.com/en/products/hardware/esp8266ex/overview" target="_blank">ESP8266s</a> and
their successors (the <a href="https://www.espressif.com/en/products/hardware/esp32/overview" target="_blank">ESP32s</a>) their successors (the <a href="https://www.espressif.com/en/products/hardware/esp32/overview" target="_blank">ESP32s</a>)
are great low-cost microcontrollers that can communicate with the outside world using WiFi. are great low-cost microcontrollers that can communicate with the outside world using WiFi.
They're found in many devices such as the popular Sonoff/iTead, but also exist as development boards They're found in many devices such as the popular Sonoff/iTead, but also exist as development boards
such as the <a such as the <a href="https://esphome.io/devices/nodemcu_esp8266.html" rel="noreferrer" target="_blank">NodeMCU</a>.
href="https://esphome.io/devices/nodemcu_esp8266.html"
rel="noreferrer" target="_blank">NodeMCU</a>.
<p> <p>
</p> </p>
<a href="https://esphome.io/index.html" rel="noreferrer" <a href="https://esphome.io/index.html" rel="noreferrer" target="_blank">ESPHome</a>,
target="_blank">ESPHome</a>,
the tool you're using here, creates custom firmwares for these devices using YAML configuration the tool you're using here, creates custom firmwares for these devices using YAML configuration
files (similar to the ones you might be used to with Home Assistant). files (similar to the ones you might be used to with Home Assistant).
<p> <p>
</p> </p>
This wizard will create a basic YAML configuration file for your "node" (the microcontroller). This wizard will create a basic YAML configuration file for your "node" (the microcontroller).
Later, you will be able to customize this file and add some of ESPHome's Later, you will be able to customize this file and add some of ESPHome's many
many integrations. integrations.
<p> <p>
<p> <p>
First, I need to know what this node should be called. Choose this name wisely, it should be unique among First, I need to know what this node should be called. Choose this name wisely, it should be unique among
@ -196,8 +194,11 @@
<div class="row"> <div class="row">
<p> <p>
Great! Now I need to know what type of microcontroller you're using so that I can compile firmware for them. Great! Now I need to know what type of microcontroller you're using so that I can compile firmware for them.
Please choose the board you're using below. If you're not sure you can also use similar ones Please choose the board you're using below.
or even the "Generic" option. In most cases that will work too. </p>
<p>
If you're not sure you can also use similar ones or even the
"Generic" option. In most cases that will work too.
</p> </p>
<div class="input-field col s12"> <div class="input-field col s12">
<select id="board" name="board" required> <select id="board" name="board" required>
@ -332,24 +333,20 @@
<div class="step-content"> <div class="step-content">
<p> <p>
Hooray! 🎉🎉🎉 You've successfully created your first ESPHome configuration file. Hooray! 🎉🎉🎉 You've successfully created your first ESPHome configuration file.
When you click Submit, I will save this configuration file under When you click Submit, the wizard will save a configuration file under
<code class="inlinecode">&lt;HASS_CONFIG_FOLDER&gt;/esphome/&lt;NAME_OF_NODE&gt;.yaml</code> <code class="inlinecode">&lt;HASS_CONFIG_FOLDER&gt;/esphome/&lt;NAME_OF_NODE&gt;.yaml</code>.
and
you will be able to edit this file with the
<a href="https://www.home-assistant.io/addons/configurator/" target="_blank">HASS Configuratior add-on</a>.
</p> </p>
<h5>Next steps</h5> <h5>Next steps</h5>
<ul class="browser-default"> <ul class="browser-default">
<li> <li>
Flash the firmware. This can be done using the “UPLOAD” option in the dashboard. See Flash the firmware. This can be done using the “UPLOAD” option in the dashboard. See
<a href="https://esphome.io/index.html#devices" rel="noreferrer" <a href="https://esphome.io/index.html#devices" rel="noreferrer" target="_blank">this</a>
target="_blank">this</a> for guides on how to flash different types of devices. For newly plugged in serial
for guides on how to flash different types of devices. Note that you need to restart this add-on devices to be detected, restart the add-on.
for newly plugged in serial devices to be detected.
</li> </li>
<li> <li>
With the current configuration, your node will only connect to WiFi and MQTT. To make it actually <i>do</i> With the current configuration, your node will only connect to WiFi. To make it
stuff, follow actually <i>do</i> stuff, follow
<a href="https://esphome.io/guides/getting_started_hassio.html#adding-some-basic-features" <a href="https://esphome.io/guides/getting_started_hassio.html#adding-some-basic-features"
rel="noreferrer"> rel="noreferrer">
the rest of the getting started guide the rest of the getting started guide
@ -361,12 +358,11 @@
for a list of supported sensors/devices. for a list of supported sensors/devices.
</li> </li>
<li> <li>
Join the <a href="https://discord.gg/KhAMKrd" target="_blank">Discord server</a> and say hi! When I Join the <a href="https://discord.gg/KhAMKrd" target="_blank">Discord server</a> and
have time, I would be happy to help with issues and discuss new features. say hi! Discord's the best place to ask if you have issues/ideas.
</li> </li>
<li> <li>
Star <a href="https://github.com/esphome/esphome" Star <a href="https://github.com/esphome/esphome" target="_blank">ESPHome</a> on GitHub
target="_blank">ESPHome</a> on GitHub
if you find this software awesome and report issues using the bug trackers there. if you find this software awesome and report issues using the bug trackers there.
</li> </li>
</ul> </ul>