[web_server] v3-features (#4001)

components/web_server.rst

@@ -140,8 +140,62 @@ V2 embeds the css within the js file so is not required, however you could inclu
       js_url: ""
       version: 2
 
+
 Copy https://oi.esphome.io/v2/www.js to a V2 folder in your yaml folder.
 
+
+.. _config-webserver-version-3-options:
+
+Version 3 features
+---------------------------
+
+Number in slider mode
+*********************
+.. figure:: /components/images/web_server/number-slider-popup.png
+    :align: left
+    :width: 100.0%
+
+
+You can change the value by moving the slider.
+If you wish to enter a precise number you can click and hold the current value. A popup input field will appear where you can enter a number and confirm your input by pressing the enter key.
+
+.. figure:: /components/images/web_server/number-slider-popup-input-field.png
+    :align: left
+    :width: 100.0%
+
+
+Expand Controls and Logs
+************************
+.. figure:: /components/images/web_server/tab-header-expand-cloapsed.png
+    :align: left
+    :width: 100.0%
+
+
+By double-clicking on any group header you can expand the controls to fill up the whole screen.
+You can do the same for the logs.
+
+.. figure:: /components/images/web_server/tab-header-expand-controls-expanded.png
+    :align: center
+    :width: 100.0%
+
+    Expanded Controls
+
+
+.. figure:: /components/images/web_server/tab-header-expand-logs-expanded.png
+    :align: center
+    :width: 100.0%
+
+    Expanded Logs
+
+
+Sensor value graph
+******************
+.. figure:: /components/images/web_server/sensor-history-graph.png
+    :align: left
+    :width: 100.0%
+
+By clicking on any sensor it will expand a graph with the historical values for that sensor.
+
 .. _config-webserver-sorting:
 
 Entity sorting