esphome/esphomeyaml/dashboard/templates/index.html

510 lines
23 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
2019-01-06 19:38:23 +01:00
<title>ESPHome Dashboard</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2019-01-06 19:38:23 +01:00
<link rel="stylesheet" href="{{ get_static_file_url('materialize.min.css') }}">
<link rel="stylesheet" href="{{ get_static_file_url('materialize-stepper.min.css') }}">
<link rel="stylesheet" href="{{ get_static_file_url('esphomeyaml.css') }}">
<link rel="shortcut icon" href="{{ get_static_file_url('favicon.ico') }}">
2019-01-06 19:38:23 +01:00
<script src="{{ get_static_file_url('jquery.min.js') }}"></script>
<script src="{{ get_static_file_url('jquery-ui.min.js') }}"></script>
<script src="{{ get_static_file_url('materialize.min.js') }}"></script>
<script src="{{ get_static_file_url('jquery.validate.min.js') }}"></script>
2018-08-25 22:18:22 +02:00
2019-01-06 19:38:23 +01:00
<script src="{{ get_static_file_url('materialize-stepper.min.js') }}"></script>
2018-08-25 22:18:22 +02:00
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper indigo">
2019-01-06 19:38:23 +01:00
<a href="#" class="brand-logo left">ESPHome Dashboard</a>
2018-06-03 11:18:53 +02:00
<div class="select-port-container right" id="select-port-target">
<select></select>
</div>
</div>
</nav>
2018-06-03 11:18:53 +02:00
<div class="tap-target pink lighten-1 select-port" data-target="select-port-target">
<div class="tap-target-content">
<h5>Select Upload Port</h5>
<p>
2019-01-06 19:38:23 +01:00
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
2018-06-03 11:18:53 +02:00
for new serial ports to be detected.
</p>
</div>
</div>
<div class="ribbon"></div>
</header>
<main>
<div class="container">
2019-01-06 19:38:23 +01:00
{% for i, entry in enumerate(entries) %}
<div class="row">
<div class="col s12 m10 offset-m1 l12">
<div class="card horizontal">
<div class="card-image center-align hide-on-small-only">
<i class="material-icons very-large icon-grey">memory</i>
</div>
<div class="card-stacked">
<div class="card-content">
<span class="card-title">
2019-01-06 19:38:23 +01:00
{{ escape(entry.name) }}
<i class="material-icons right dropdown-trigger" data-target="dropdown-{{ i }}">more_vert</i>
</span>
<p>
2019-01-06 19:38:23 +01:00
<span class="status-indicator unknown" data-node="{{ entry.filename }}">
<span class="status-indicator-icon"></span>
<span class="status-indicator-text"></span></span>.
Full path: <code class="inlinecode">{{ escape(entry.full_path) }}</code>
</p>
2019-01-06 19:38:23 +01:00
{% if entry.update_available %}
<p class="update-available" data-node="{{ entry.filename }}">
<i class="material-icons">system_update</i>
Update Available! {{ entry.update_old }} &#x27A1;&#xFE0F;{{ entry.update_new }}
</p>
{% end %}
</div>
<div class="card-action">
2019-01-06 19:38:23 +01:00
<a class="action-upload" data-node="{{ entry.filename }}">Upload</a>
<a class="action-edit" data-node="{{ entry.filename }}">Edit</a>
<a class="action-show-logs" data-node="{{ entry.filename }}">Show Logs</a>
<a class="action-validate" data-node="{{ entry.filename }}">Validate</a>
</div>
2019-01-06 19:38:23 +01:00
<ul id="dropdown-{{ i }}" class="dropdown-content card-dropdown-action">
<li><a class="action-clean-mqtt" data-node="{{ entry.filename }}">Clean MQTT</a></li>
<li><a class="action-clean" data-node="{{ entry.filename }}">Clean Build</a></li>
<li><a class="action-compile" data-node="{{ entry.filename }}">Compile</a></li>
<li><a class="action-hass-config" data-node="{{ entry.filename }}">HASS MQTT Configuration</a></li>
</ul>
</div>
</div>
</div>
</div>
{% end %}
</div>
<div id="modal-logs" class="modal modal-fixed-footer">
2019-01-06 19:38:23 +01:00
<div class="modal-content autoscroll">
<div>
<h4>Show Logs <code class="inlinecode filename"></code></h4>
<div>
<div class="log-container">
<pre class="log"></pre>
</div>
</div>
</div>
</div>
<div class="modal-footer">
2018-06-03 11:18:53 +02:00
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Close</a>
</div>
</div>
<div id="modal-upload" class="modal modal-fixed-footer">
2019-01-06 19:38:23 +01:00
<div class="modal-content autoscroll">
<div>
<h4>Compile And Upload <code class="inlinecode filename"></code></h4>
<div class="log-container">
<pre class="log"></pre>
</div>
</div>
</div>
<div class="modal-footer">
2019-01-06 19:38:23 +01:00
<a href="https://esphomelib.com/esphomeyaml/guides/faq.html#i-can-t-get-flashing-over-usb-to-work" target="_blank"
class="tooltipped" data-position="left" data-tooltip="Flash using esphomeflasher">
<i class="material-icons flash-using-esphomeflasher">help_outline</i>
</a>
2018-06-03 11:18:53 +02:00
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a>
</div>
</div>
<div id="modal-compile" class="modal modal-fixed-footer">
2019-01-06 19:38:23 +01:00
<div class="modal-content autoscroll">
<div>
<h4>Compile <code class="inlinecode filename"></code></h4>
<div class="log-container">
<pre class="log"></pre>
</div>
</div>
</div>
<div class="modal-footer">
2019-01-06 19:38:23 +01:00
<a href="https://esphomelib.com/esphomeyaml/guides/faq.html#i-can-t-get-flashing-over-usb-to-work" target="_blank"
class="tooltipped" data-position="left" data-tooltip="Flash using esphomeflasher">
<i class="material-icons flash-using-esphomeflasher">help_outline</i>
</a>
<a class="modal-close waves-effect waves-green btn-flat disabled download-binary">Download Binary</a>
2018-06-03 11:18:53 +02:00
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a>
</div>
</div>
2018-06-03 12:16:43 +02:00
<div id="modal-validate" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Validate <code class="inlinecode filename"></code></h4>
<div class="log-container">
<pre class="log"></pre>
</div>
</div>
<div class="modal-footer">
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a>
</div>
</div>
<div id="modal-wizard" class="modal">
<div class="modal-content">
<form action="/wizard.html" method="POST">
<ul class="stepper linear">
<li class="step active">
<div class="step-title waves-effect">Introduction And Name</div>
<div class="step-content">
<div class="row">
<p>
2019-01-06 19:38:23 +01:00
Hi there! I'm the ESPHome setup wizard and will guide you through setting up
your first ESP8266 or ESP32-powered device using ESPHome.
</p>
<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>)
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
2018-06-03 12:16:43 +02:00
such as the <a href="https://esphomelib.com/esphomeyaml/devices/nodemcu_esp8266.html" target="_blank">NodeMCU</a>.
<p>
</p>
2019-01-06 19:38:23 +01:00
<a href="https://esphomelib.com/esphomeyaml/index.html" target="_blank">ESPHome</a>,
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).
<p>
</p>
This wizard will create a basic YAML configuration file for your "node" (the microcontroller).
2019-01-06 19:38:23 +01:00
Later, you will be able to customize this file and add some of ESPHome's
many integrations.
<p>
<p>
2019-01-06 19:38:23 +01:00
First, I need to know what this node should be called. Choose this name wisely, it should be unique among
all your ESPs.
2018-08-13 19:11:33 +02:00
Names must be <strong>lowercase</strong> and <strong>must not contain spaces</strong> (allowed characters: <code class="inlinecode">a-z</code>,
<code class="inlinecode">0-9</code> and <code class="inlinecode">_</code>)
</p>
<div class="input-field col s12">
<input id="node_name" class="validate" type="text" name="name" required>
<label for="node_name">Name of node</label>
</div>
</div>
<div class="step-actions">
2018-06-03 11:18:53 +02:00
<button class="waves-effect waves-dark btn indigo next-step">CONTINUE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect">Device Type</div>
<div class="step-content">
<div class="row">
<p>
Great! Now I need to know what type of microcontroller you're using so that I can compile firmware for them.
2019-01-06 19:38:23 +01:00
Please choose the board you're using below. If you're not sure you can also use similar ones
or even the "Generic" option. In most cases that will work too.
</p>
<div class="input-field col s12">
2019-01-06 19:38:23 +01:00
<select id="board" name="board" required>
<optgroup label="ESP8266">
<option value="esp01_1m">Generic ESP8266 (for example Sonoff)</option>
<option value="nodemcuv2">NodeMCU</option>
<option value="d1_mini">Wemos D1 and Wemos D1 mini</option>
<option value="d1_mini_lite">Wemos D1 mini Lite</option>
<option value="d1_mini_pro">Wemos D1 mini Pro</option>
<option value="huzzah">Adafruit HUZZAH ESP8266</option>
<option value="oak">DigiStump Oak</option>
<option value="thing">Sparkfun ESP8266 Thing</option>
<option value="thingdev">Sparkfun ESP8266 Thing - Dev Board</option>
</optgroup>
<optgroup label="ESP32">
<option value="esp-wrover-kit">Generic ESP32 (WROVER Module)</option>
<option value="nodemcu-32s">NodeMCU-32S</option>
<option value="lolin_d32">Wemos Lolin D32</option>
<option value="lolin_d32_pro">Wemos Lolin D32 Pro</option>
<option value="featheresp32">Adafruit ESP32 Feather</option>
<option value="m5stack-core-esp32">M5Stack Core ESP32</option>
</optgroup>
<optgroup label="Other ESP8266s">
<option value="gen4iod">4D Systems gen4 IoD Range</option>
<option value="wifi_slot">Amperka WiFi Slot</option>
<option value="espduino">Doit ESPDuino</option>
<option value="espectro">DycodeX ESPectro Core</option>
<option value="espino">ESPino</option>
<option value="esp_wroom_02">Espressif ESP-WROOM-02 module</option>
<option value="esp12e">Espressif ESP-12E module</option>
<option value="esp01">Espressif ESP-01 512k module</option>
<option value="esp07">Espressif ESP-07 module</option>
<option value="esp8285">Generic ESP8285 module</option>
<option value="espresso_lite_v1">ESPert ESPresso Lite 1.0</option>
<option value="espresso_lite_v2">ESPert ESPresso Lite 2.0</option>
<option value="phoenix_v1">ESPert Phoenix 1.0</option>
<option value="wifinfo">WiFInfo</option>
<option value="heltec_wifi_kit_8">Heltec WiFi kit 8</option>
<option value="nodemcu">NodeMCU 0.9</option>
<option value="modwifi">Olimex MOD-WIFI</option>
<option value="wio_link">SeedStudio Wio Link</option>
<option value="wio_node">SeedStudio Wio Node</option>
<option value="sparkfunBlynk">Sparkfun Blynk Board</option>
<option value="esp210">SweetPea ESP-210</option>
<option value="espinotee">ThaiEasyElec ESPino</option>
<option value="d1">Wemos D1 Revision 1</option>
<option value="wifiduino">WiFiDuino</option>
<option value="xinabox_cw01">XinaBox CW01</option>
</optgroup>
<optgroup label="Other ESP32s">
<option value="lolin32">Wemos Lolin 32</option>
<option value="esp32dev">Espressif ESP32 Dev Module</option>
<option value="m5stack-fire">M5Stack FIRE</option>
<option value="wemosbat">Wemos WiFi &amp; Bluetooth Battery</option>
<option value="node32s">Aiyarafun Node32s</option>
<option value="espea32">April Brother ESPea32</option>
<option value="firebeetle32">DFRobot FireBeetle-ESP32</option>
<option value="esp32doit-devkit-v1">Doit ESP32 Devkit v1</option>
<option value="pocket_32">Dongsen Tech Pocket 32</option>
<option value="espectro32">DycodeX ESPectro32</option>
<option value="esp32vn-iot-uno">ESP32vn IoT Uno</option>
<option value="esp320">Electronic SweetPeas ESP320</option>
<option value="pico32">Espressif ESP32 Pico Kit</option>
<option value="odroid_esp32">Hardkernel Odroid GO</option>
<option value="heltec_wifi_kit_32">Heltec WIFI Kit 32</option>
<option value="heltec_wifi_lora_32">Heltec WIFI LoRa 32</option>
<option value="hornbill32dev">Hornbill ESP32 Dev</option>
<option value="hornbill32minima">Hornbill ESP32 Minima</option>
<option value="intorobot">IntoRobot Fig</option>
<option value="mhetesp32devkit">MH-ET Live ESP32 Devkit</option>
<option value="mhetesp32minikit">MH-ET Live ESP32 Minikit</option>
<option value="nano32">MakerAsia Nano32</option>
<option value="microduino-core-esp32">Microduino Core ESP32</option>
<option value="quantum">Noduino Quantum</option>
<option value="esp32-evb">Olimex ESP32-EVB</option>
<option value="esp32-gateway">Olimex ESP32-GATEWAY</option>
<option value="esp32-pro">Olimex ESP32-PRO</option>
<option value="onehorse32dev">Onehorse ESP32 Dev Module</option>
<option value="alksesp32">RoboticsBrno ALKS ESP32</option>
<option value="esp32thing">Sparkfun ESP32 Thing</option>
<option value="ttgo-lora32-v1">TTGO LoRa32-OLED v1</option>
<option value="espino32">ThaiEasyElec ESPino32</option>
<option value="widora-air">Widora AIR</option>
<option value="xinabox_cw02">XinaBox CW02</option>
<option value="iotbusio">oddWires IoT-Bus Io</option>
<option value="iotbusproteus">oddWires Proteus IoT-Bus</option>
<option value="nina_w10">u-blox NINA-W10 series</option>
</optgroup>
</select>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn indigo next-step">CONTINUE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect">WiFi And Over-The-Air Updates</div>
<div class="step-content">
<div class="row">
<p>
Thanks! Now I need to know what WiFi Access Point I should instruct the node to connect to.
Please enter an SSID (name of the WiFi network) and password (leave empty for no password).
</p>
<div class="input-field col s12">
<input id="wifi_ssid" class="validate" type="text" name="ssid" required>
<label for="wifi_ssid">WiFi SSID</label>
</div>
<div class="input-field col s12">
<input id="wifi_password" name="psk" type="password">
<label for="wifi_password">WiFi Password</label>
</div>
<p>
2019-01-06 19:38:23 +01:00
ESPHome automatically sets up an Over-The-Air update server on the node
so that you only need to flash a firmware via USB once. This password
is also used to connect to the ESP from Home Assistant.
2018-06-03 12:16:43 +02:00
Optionally, you can set a password for this upload process here:
</p>
<div class="input-field col s12">
2019-01-06 19:38:23 +01:00
<input id="password" class="validate" name="password" type="password">
<label for="password">Access Password</label>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn indigo next-step">CONTINUE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect">Done!</div>
<div class="step-content">
<p>
2019-01-06 19:38:23 +01:00
Hooray! 🎉🎉🎉 You've successfully created your first ESPHome configuration file.
When you click Submit, I will save this configuration file under
<code class="inlinecode">&lt;HASS_CONFIG_FOLDER&gt;/esphomeyaml/&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>
<h5>Next steps</h5>
<ul class="browser-default">
<li>
Flash the firmware. This can be done using the “UPLOAD” option in the dashboard. See
2018-06-03 12:16:43 +02:00
<a href="https://esphomelib.com/esphomeyaml/index.html#devices" target="_blank">this</a>
for guides on how to flash different types of devices. Note that you need to restart this add-on
for newly plugged in serial devices to be detected.
</li>
2018-06-03 12:16:43 +02:00
<li>
With the current configuration, your node will only connect to WiFi and MQTT. To make it actually <i>do</i>
stuff, follow
<a href="https://esphomelib.com/esphomeyaml/guides/getting_started_hassio.html#adding-some-basic-features">
the rest of the getting started guide
</a>.
</li>
<li>
2019-01-06 19:38:23 +01:00
See the <a href="https://esphomelib.com/esphomeyaml/index.html" target="_blank">ESPHome index</a>
for a list of supported sensors/devices.
</li>
<li>
2018-06-03 12:16:43 +02:00
Join the <a href="https://discord.gg/KhAMKrd" target="_blank">Discord server</a> and say hi! When I
have time, I would be happy to help with issues and discuss new features.
</li>
<li>
2019-01-06 19:38:23 +01:00
Star <a href="https://github.com/OttoWinter/esphomelib" target="_blank">ESPHome Core</a> and
<a href="https://github.com/OttoWinter/esphomeyaml" target="_blank">ESPHome</a> on GitHub
2018-06-03 12:16:43 +02:00
if you find this software awesome and report issues using the bug trackers there.
</li>
</ul>
<div class="step-actions">
<button class="waves-effect waves-dark btn indigo" type="submit">SUBMIT</button>
</div>
</div>
</li>
</ul>
</form>
</div>
<div class="modal-footer">
2019-01-06 19:38:23 +01:00
<a class="modal-close waves-effect waves-green btn-flat">Abort</a>
</div>
</div>
<div id="modal-clean-mqtt" class="modal modal-fixed-footer">
2019-01-06 19:38:23 +01:00
<div class="modal-content autoscroll">
<div>
<h4>Clean MQTT discovery <code class="inlinecode filename"></code></h4>
<div class="log-container">
<pre class="log"></pre>
</div>
</div>
</div>
<div class="modal-footer">
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a>
</div>
</div>
<div id="modal-clean" class="modal modal-fixed-footer">
2019-01-06 19:38:23 +01:00
<div class="modal-content autoscroll">
<div>
<h4>Clean Build Files <code class="inlinecode filename"></code></h4>
<div class="log-container">
<pre class="log"></pre>
</div>
</div>
</div>
<div class="modal-footer">
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a>
</div>
</div>
<div id="modal-hass-config" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Generate Home Assistant Configuration <code class="inlinecode filename"></code></h4>
<div class="log-container">
<pre class="log"></pre>
</div>
</div>
<div class="modal-footer">
<a class="modal-close waves-effect waves-green btn-flat stop-logs">Stop</a>
</div>
</div>
2019-01-06 19:38:23 +01:00
<div id="modal-editor" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Edit <code class="inlinecode filename"></code></h4>
<div id="editor">
</div>
</div>
<div class="modal-footer">
<a class="waves-effect waves-green btn-flat save-button">Save</a>
<a class="modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<a class="btn-floating btn-large ribbon-fab waves-effect waves-light pink accent-2" id="setup-wizard-start">
<i class="material-icons">add</i>
</a>
2018-06-03 11:18:53 +02:00
<div class="tap-target pink lighten-1 setup-wizard" data-target="setup-wizard-start">
<div class="tap-target-content">
<h5>Set up your first Node</h5>
<p>
2019-01-06 19:38:23 +01:00
Huh... It seems like you you don't have any ESPHome configuration files yet...
Fortunately, there's a setup wizard that will step you through setting up your first node 🎉
</p>
</div>
</div>
</main>
<footer class="page-footer indigo darken-1">
<div class="container">
</div>
<div class="footer-copyright">
<div class="container">
© 2018 Copyright Otto Winter, Made with <a class="grey-text text-lighten-4" href="https://materializecss.com/" target="_blank">Materialize</a>
2019-01-06 19:38:23 +01:00
<a class="grey-text text-lighten-4 right" href="{{ docs_link }}" target="_blank">ESPHome {{ version }} Documentation</a>
</div>
</div>
</footer>
2019-01-06 19:38:23 +01:00
<script src="{{ get_static_file_url('ace.js') }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ get_static_file_url('esphomeyaml.js') }}" type="text/javascript"></script>
2019-01-06 19:38:23 +01:00
{% if len(entries) == 0 %}
<script>
document.addEventListener('DOMContentLoaded', () => {
2018-06-03 11:18:53 +02:00
const tapTargetElem = document.querySelector('.tap-target.setup-wizard');
const tapTargetInstance = M.TapTarget.getInstance(tapTargetElem);
tapTargetInstance.options.onOpen = () => {
$('.tap-target-origin').on('click', () => {
startWizard();
});
};
tapTargetInstance.open();
});
</script>
{% end %}
2018-06-03 11:18:53 +02:00
{% if begin %}
<script>
window.history.replaceState({}, document.title, "/");
document.addEventListener('DOMContentLoaded', () => {
const tapTargetElem = document.querySelector('.tap-target.select-port');
const tapTargetInstance = M.TapTarget.getInstance(tapTargetElem);
tapTargetInstance.open();
tapTargetInstance.contentEl.style["top"] = "300px";
tapTargetInstance.contentEl.style["padding"] = "250px";
tapTargetInstance.waveEl.style["top"] = "250px";
tapTargetInstance.waveEl.style["left"] = "250px";
tapTargetInstance.waveEl.style["width"] = "300px";
tapTargetInstance.waveEl.style["height"] = "300px";
});
</script>
{% end %}
</body>
2018-06-03 12:16:43 +02:00
</html>