From 9f3e64a84e48d04f83ca68794f087e9007ef693e Mon Sep 17 00:00:00 2001
From: Charlie Powell <31997505+cp2004@users.noreply.github.com>
Date: Tue, 18 May 2021 23:17:26 +0100
Subject: [PATCH] :pencil2: Add some explainers to make usage easier

See #20
---
 octoprint_wled/static/src/wled.scss             |  4 ++++
 .../templates/wled-settings/features.jinja2     |  6 +++++-
 .../templates/wled-settings/overview.jinja2     | 17 +++++++++++------
 .../templates/wled-settings/progress.jinja2     | 13 ++++++++++---
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/octoprint_wled/static/src/wled.scss b/octoprint_wled/static/src/wled.scss
index 9d2aa29..5986788 100644
--- a/octoprint_wled/static/src/wled.scss
+++ b/octoprint_wled/static/src/wled.scss
@@ -112,6 +112,10 @@ $animation-duration: 0.3s;
 d-block {
   display: block;
 }
+.visibility-collapse {
+  visibility: collapse;
+}
+
 
 .effect-overview {
   margin-left: 1.5rem;
diff --git a/octoprint_wled/templates/wled-settings/features.jinja2 b/octoprint_wled/templates/wled-settings/features.jinja2
index c5c3346..0c01c3d 100644
--- a/octoprint_wled/templates/wled-settings/features.jinja2
+++ b/octoprint_wled/templates/wled-settings/features.jinja2
@@ -24,8 +24,12 @@
 </tr>
 {% endmacro %}
 
+<p>
+    Enable some optional features for the plugin here.
+</p>
+
 <table class="table">
-    <thead>
+    <thead class="visibility-collapse">
     <tr>
         <th class="colwidth-10"></th>  {# These widths have been carefully fine tuned... Try not to break them :) #}
         <th class="colwidth-80"></th>
diff --git a/octoprint_wled/templates/wled-settings/overview.jinja2 b/octoprint_wled/templates/wled-settings/overview.jinja2
index ebcebec..c62f7ff 100644
--- a/octoprint_wled/templates/wled-settings/overview.jinja2
+++ b/octoprint_wled/templates/wled-settings/overview.jinja2
@@ -1,7 +1,12 @@
 {% import "wled-settings/sub/template.jinja2" as template %}
-
+<p>
+    Enable the events you want the plugin to react to below, then add effect configurations for each event.
+</p>
+<p>
+    Segments need to be configured in WLED for the plugin to be able to use them.
+</p>
 <table class="table">
-    <thead>
+    <thead class="visibility-collapse">
     <tr>
         <th class="colwidth-10"></th>  {# These widths have been carefully fine tuned... Try not to break them :) #}
         <th class="colwidth-35"></th>
@@ -12,11 +17,11 @@
     </tr>
     </thead>
     <tbody>
-    {{ template.effectOverview("idle", "Idle", "Fires when the printer is connected.") }}
+    {{ template.effectOverview("idle", "Idle (Connected)", "Fires when the printer is connected.") }}
     {{ template.effectOverview("disconnected", "Disconnected") }}
     {{ template.effectOverview("started", "Print Started") }}
-    {{ template.effectOverview("failed", "Failed") }}
-    {{ template.effectOverview("success", "Success") }}
-    {{ template.effectOverview("paused", "Paused") }}
+    {{ template.effectOverview("failed", "Print Failed") }}
+    {{ template.effectOverview("success", "Print Success") }}
+    {{ template.effectOverview("paused", "Print Paused") }}
     </tbody>
 </table>
diff --git a/octoprint_wled/templates/wled-settings/progress.jinja2 b/octoprint_wled/templates/wled-settings/progress.jinja2
index 8eb6c70..771627d 100644
--- a/octoprint_wled/templates/wled-settings/progress.jinja2
+++ b/octoprint_wled/templates/wled-settings/progress.jinja2
@@ -49,15 +49,22 @@
             <input id="ws_temp_threshold" class="input-small" type="number" data-bind="value: settingsViewModel.settings.plugins.wled.progress.cooling.threshold">
             <span class="add-on">C</span>
         </div>
-        {# TODO add some explanation or docs #}
+        <p class="d-block">
+            Cooling progress will stop once the temperature gets to this value.
+        </p>
     </td>
     <td></td>
 </tr>
 {% endmacro %}
-
+<p>
+    Progress effects simulate a progress bar, with two colours. Progress is shown per-segment.
+</p>
+<p>
+    You can customize the colours and some additional configuration for each event type.
+</p>
 
 <table class="table">
-    <thead>
+    <thead class="visibility-collapse">
     <tr>
         <th class="colwidth-10"></th>  {# These widths have been carefully fine tuned... Try not to break them :) #}
         <th class="colwidth-35"></th>