✏️ Add some explainers to make usage easier

See #20
cp2004 · May 18, 2021 · 9f3e64a · 9f3e64a
1 parent 8a6d8bf
commit 9f3e64a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>