From e7149e23bf9bc59e34ef146065409e5160cd66e0 Mon Sep 17 00:00:00 2001
From: Anna Bocharova <robin_tail@me.com>
Date: Fri, 11 Aug 2023 17:09:43 +0200
Subject: [PATCH] UI/UX Improvements (#167)

* Monospace font for OS commands.

* Going with FontAwesome terminal icon.

* No 'OS' since we have icon, labeling 'ON' and 'OFF' for commands.

* Labeling OFF for confirmation setting.

* Prefexing GPIO input with BCM helper.

* Moving and scaling icon previews.

* Captions for previews.

* Minor: shorter label.

* Better preview caption appearance.

* Adding help icon opening pins enumeration docs.

* Reducing the help block on inverted relays.

* Introducing CSS asset (not complete).

* Easier CSS references and better markup.

* CSS extracting complete.

* Better info icons.

* Ref: extracting css class bindings into 'let' ones.

* Slightly smaller ON/OFF labels on the left side.

* Updating tests.

* UX: fading the tabs switching.

* Updating snapshot.

* Neat: icon preview border radius.

* Changelog: the future 3.5.0.
---
 CHANGELOG.md                                  |    7 +
 octoprint_octorelay/const.py                  |    5 +-
 octoprint_octorelay/static/css/octorelay.css  |   63 +
 .../templates/octorelay_settings.jinja2       |  144 +-
 tests/snapshots/snap_test_templates.py        | 2568 +++++++++++------
 tests/test_init.py                            |    2 +-
 6 files changed, 1802 insertions(+), 987 deletions(-)
 create mode 100644 octoprint_octorelay/static/css/octorelay.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4efe2408..dd96b974 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ## Version 3
 
+### 3.5.0
+
+- A couple more improvements for the UI/UX.
+  - This version introduces a new asset — CSS file. 
+
+![UI](https://user-images.githubusercontent.com/13189514/260043096-38e10e10-1285-401f-bf1f-18aa9e397c25.png)
+
 ### 3.4.0
 
 - New feature: event-based automation.
diff --git a/octoprint_octorelay/const.py b/octoprint_octorelay/const.py
index f9364097..eae8d022 100644
--- a/octoprint_octorelay/const.py
+++ b/octoprint_octorelay/const.py
@@ -260,7 +260,10 @@ def get_ui_vars():
     }
 
 # Plugin's asset files to automatically include in the core UI
-ASSETS = { "js": [ "js/octorelay.js" ] }
+ASSETS = {
+    "js": [ "js/octorelay.js" ],
+    "css": [ "css/octorelay.css" ]
+}
 
 # Public interface commands:
 UPDATE_COMMAND = "update"
diff --git a/octoprint_octorelay/static/css/octorelay.css b/octoprint_octorelay/static/css/octorelay.css
new file mode 100644
index 00000000..a7217158
--- /dev/null
+++ b/octoprint_octorelay/static/css/octorelay.css
@@ -0,0 +1,63 @@
+#settings_plugin_octorelay .tab-content {
+    position: relative
+}
+
+#settings_plugin_octorelay .btn > input[type='radio'] {
+    display: none
+}
+
+#settings_plugin_octorelay input.code {
+    font-family: monospace;
+}
+
+#settings_plugin_octorelay .input-prepend > .add-on.tiny {
+    font-size: 0.45rem;
+    font-weight: 600;
+}
+
+#settings_plugin_octorelay .help-inline a.same-color {
+    color: inherit;
+}
+
+#settings_plugin_octorelay .control-label span.label {
+    zoom: 0.85; /* not scale */
+}
+
+#settings_plugin_octorelay .fa-info {
+    border: 2px solid currentColor;
+    padding: 3px 8px;
+    border-radius: 50%;
+    scale: 0.6;
+    transform-origin: left;
+}
+
+#settings_plugin_octorelay .preview {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    overflow: hidden;
+    line-height: unset;
+    font-size: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    scale: 3;
+    transform-origin: top left;
+    border: 0.3px dashed #00000066;
+    box-sizing: content-box;
+    border-radius: 2px;
+}
+
+#settings_plugin_octorelay .preview-caption {
+    position: absolute;
+    top: 75px;
+    width: 75px;
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    gap: 0.5ch;
+    white-space: nowrap;
+    scale: 0.75;
+    transform-origin: top;
+}
diff --git a/octoprint_octorelay/templates/octorelay_settings.jinja2 b/octoprint_octorelay/templates/octorelay_settings.jinja2
index 8e1b9c13..425d3fbd 100755
--- a/octoprint_octorelay/templates/octorelay_settings.jinja2
+++ b/octoprint_octorelay/templates/octorelay_settings.jinja2
@@ -17,26 +17,26 @@
         {% for n in range(1,9) %}
         <div
             id="relay_settings_{{n}}"
-            class="tab-pane"
-            data-bind="css: { active: 1 === {{n}} }, using: settings.plugins.octorelay.r{{n}}"
+            class="tab-pane fade"
+            data-bind="css: { 'active in': 1 === {{n}} }, using: settings.plugins.octorelay.r{{n}}"
         >
-
             <div class="control-group">
                 <label class="control-label">{{ _('Active') }}</label>
                 <div class="controls">
                     <div class="btn-group">
                         {% for value, option in plugin_octorelay_boolean.items() %}
-                        <label
-                            class="btn"
-                            data-bind="css: { 'active btn-{{option.color}}': active() === {{value}}, 'btn-default': active() !== {{value}} }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-{{option.color}}': active() === {{value}},
+                            'btn-default': active() !== {{value}}
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: {{value}}, checked: active"
                             />
                             {{ _(option.caption) }}
                         </label>
+                        <!--/ko-->
                         {% endfor %}
                     </div>
                     <span class="help-block" data-bind="hidden: active">
@@ -46,6 +46,14 @@
             </div>
 
             <div data-bind="visible: active">
+                {% for state, offset in {"on": 315, "off": 415}.items() %}
+                <div class="preview" style="left: {{offset}}px;" data-bind="html: icon_{{state}}"></div>
+                <div class="preview-caption" style="left: {{offset}}px">
+                    <span class="label">{{ _(state.upper()) }}</span>
+                    {{ _('preview') }}
+                </div>
+                {% endfor %}
+
                 <div class="control-group">
                     <label class="control-label">{{ _('Label') }}</label>
                     <div class="controls">
@@ -53,17 +61,44 @@
                     </div>
                 </div>
 
+                {% for state in ["on", "off"] %}
+                <div class="control-group">
+                    <label class="control-label">
+                        {{ _('Icon') }}
+                        <span class="label">{{ _(state.upper()) }}</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_{{state}}"
+                            >
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+
                 <div class="control-group">
                     <label class="control-label">{{ _('GPIO Number') }}</label>
                     <div class="controls">
-                        <input
-                            id="relay_pin-input{{n}}"
-                            type="number"
-                            min="1"
-                            max="27"
-                            class="input-small"
-                            data-bind="value: relay_pin"
-                        >
+                        <div class="input-prepend">
+                            <span class="add-on tiny">BCM</span>
+                            <input
+                                id="relay_pin-input{{n}}"
+                                type="number"
+                                min="1"
+                                max="27"
+                                class="input-mini"
+                                data-bind="value: relay_pin"
+                            >
+                        </div>
+                        <span class="help-inline">
+                            <a href="https://pinout.xyz/" target="_blank" class="same-color">
+                                <i class="fa fa-info"></i>
+                            </a>
+                        </span>
                     </div>
                 </div>
 
@@ -72,54 +107,53 @@
                     <div class="controls">
                         <div class="btn-group">
                             {% for value, option in plugin_octorelay_boolean.items() %}
-                            <label
-                                class="btn"
-                                data-bind="css: { 'active btn-{{option.color}}': inverted_output() === {{value}}, 'btn-default': inverted_output() !== {{value}} }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-{{option.color}}': inverted_output() === {{value}},
+                                'btn-default': inverted_output() !== {{value}}
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: {{value}}, checked: inverted_output"
                                 />
                                 {{ _(option.caption) }}
                             </label>
+                            <!--/ko-->
                             {% endfor %}
                         </div>
-                        <span class="help-block">
-                            {{ _('For normally closed relays: the electrical circuit is closed without applying current and the relay connects the power to the load.') }}
+                        <span class="help-inline">
+                            {{ _('For normally closed relays') }}
+                            <a
+                                href="https://www.google.com/search?q=what+normally+closed+relay+is"
+                                target="_blank"
+                                class="same-color"
+                            >
+                                <i class="fa fa-info"></i>
+                            </a>
                         </span>
                     </div>
                 </div>
 
-                {% for state in ["on", "off"] %}
-                <div class="control-group">
-                    <label class="control-label">{{ _('Icon') }} {{ _(state.upper()) }}</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_{{state}}">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_{{state}}"
-                        ></div>
-                    </div>
-                </div>
-                {% endfor %}
-
                 <div class="control-group">
-                    <label class="control-label">{{ _('Warn when turning OFF') }}</label>
+                    <label class="control-label">
+                        {{ _('Warn if turning') }}
+                        <span class="label">{{ _('OFF') }}</span>
+                    </label>
                     <div class="controls">
                         <div class="btn-group">
                             {% for value, option in plugin_octorelay_boolean.items() %}
-                            <label
-                                class="btn"
-                                data-bind="css: { 'active btn-{{option.color}}': confirm_off() === {{value}}, 'btn-default': confirm_off() !== {{value}} }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-{{option.color}}': confirm_off() === {{value}},
+                                'btn-default': confirm_off() !== {{value}}
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: {{value}}, checked: confirm_off"
                                 />
                                 {{ _(option.caption) }}
                             </label>
+                            <!--/ko-->
                             {% endfor %}
                         </div>
                     </div>
@@ -131,16 +165,18 @@
                     <div class="controls">
                         <div class="btn-group">
                             {% for value, state in plugin_octorelay_tristate.items() %}
-                            <label
-                                class="btn"
-                                data-bind="css: { 'active btn-{{state.color}}': state() === {{value}}, 'btn-default': state() !== {{value}} }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-{{state.color}}': state() === {{value}},
+                                'btn-default': state() !== {{value}}
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: {{value}}, checked: state"
+                                    data-bind="checkedValue: {{value}}, checked: state"
                                 />
                                 {{ _(state.caption) }}
                             </label>
+                            <!--/ko-->
                             {% endfor %}
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -154,9 +190,19 @@
 
                 {% for state in ["on", "off"] %}
                 <div class="control-group">
-                    <label class="control-label">{{ _('OS Command') }} {{ _(state.upper()) }}</label>
+                    <label class="control-label">
+                        {{ _('Command') }}
+                        <span class="label">{{ _(state.upper()) }}</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_{{state}}">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_{{state}}"
+                            >
+                        </div>
                     </div>
                 </div>
                 {% endfor %}
diff --git a/tests/snapshots/snap_test_templates.py b/tests/snapshots/snap_test_templates.py
index 5ebd1d50..99926bd0 100644
--- a/tests/snapshots/snap_test_templates.py
+++ b/tests/snapshots/snap_test_templates.py
@@ -130,38 +130,39 @@
         
         <div
             id="relay_settings_1"
-            class="tab-pane"
-            data-bind="css: { active: 1 === 1 }, using: settings.plugins.octorelay.r1"
+            class="tab-pane fade"
+            data-bind="css: { \'active in\': 1 === 1 }, using: settings.plugins.octorelay.r1"
         >
-
             <div class="control-group">
                 <label class="control-label">Active</label>
                 <div class="controls">
                     <div class="btn-group">
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-info\': active() === true, \'btn-default\': active() !== true }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-info': active() === true,
+                            'btn-default': active() !== true
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: true, checked: active"
                             />
                             YES
                         </label>
+                        <!--/ko-->
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-default\': active() === false, \'btn-default\': active() !== false }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-default': active() === false,
+                            'btn-default': active() !== false
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: false, checked: active"
                             />
                             NO
                         </label>
+                        <!--/ko-->
                         
                     </div>
                     <span class="help-block" data-bind="hidden: active">
@@ -171,6 +172,20 @@
             </div>
 
             <div data-bind="visible: active">
+                
+                <div class="preview" style="left: 315px;" data-bind="html: icon_on"></div>
+                <div class="preview-caption" style="left: 315px">
+                    <span class="label">ON</span>
+                    preview
+                </div>
+                
+                <div class="preview" style="left: 415px;" data-bind="html: icon_off"></div>
+                <div class="preview-caption" style="left: 415px">
+                    <span class="label">OFF</span>
+                    preview
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">Label</label>
                     <div class="controls">
@@ -178,17 +193,61 @@
                     </div>
                 </div>
 
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">ON</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_on"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">OFF</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_off"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">GPIO Number</label>
                     <div class="controls">
-                        <input
-                            id="relay_pin-input1"
-                            type="number"
-                            min="1"
-                            max="27"
-                            class="input-small"
-                            data-bind="value: relay_pin"
-                        >
+                        <div class="input-prepend">
+                            <span class="add-on tiny">BCM</span>
+                            <input
+                                id="relay_pin-input1"
+                                type="number"
+                                min="1"
+                                max="27"
+                                class="input-mini"
+                                data-bind="value: relay_pin"
+                            >
+                        </div>
+                        <span class="help-inline">
+                            <a href="https://pinout.xyz/" target="_blank" class="same-color">
+                                <i class="fa fa-info"></i>
+                            </a>
+                        </span>
                     </div>
                 </div>
 
@@ -197,89 +256,79 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': inverted_output() === true, \'btn-default\': inverted_output() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': inverted_output() === true,
+                                'btn-default': inverted_output() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: inverted_output"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': inverted_output() === false, \'btn-default\': inverted_output() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': inverted_output() === false,
+                                'btn-default': inverted_output() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: inverted_output"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
-                        <span class="help-block">
-                            For normally closed relays: the electrical circuit is closed without applying current and the relay connects the power to the load.
+                        <span class="help-inline">
+                            For normally closed relays
+                            <a
+                                href="https://www.google.com/search?q=what+normally+closed+relay+is"
+                                target="_blank"
+                                class="same-color"
+                            >
+                                <i class="fa fa-info"></i>
+                            </a>
                         </span>
                     </div>
                 </div>
 
-                
-                <div class="control-group">
-                    <label class="control-label">Icon ON</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_on">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_on"
-                        ></div>
-                    </div>
-                </div>
-                
                 <div class="control-group">
-                    <label class="control-label">Icon OFF</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_off">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_off"
-                        ></div>
-                    </div>
-                </div>
-                
-
-                <div class="control-group">
-                    <label class="control-label">Warn when turning OFF</label>
+                    <label class="control-label">
+                        Warn if turning
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': confirm_off() === true, \'btn-default\': confirm_off() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': confirm_off() === true,
+                                'btn-default': confirm_off() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: confirm_off"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': confirm_off() === false, \'btn-default\': confirm_off() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': confirm_off() === false,
+                                'btn-default': confirm_off() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: confirm_off"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
                     </div>
@@ -291,38 +340,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -338,38 +393,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -385,38 +446,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -430,16 +497,36 @@
 
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command ON</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">ON</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_on">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_on"
+                            >
+                        </div>
                     </div>
                 </div>
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command OFF</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_off">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_off"
+                            >
+                        </div>
                     </div>
                 </div>
                 
@@ -449,38 +536,39 @@
         
         <div
             id="relay_settings_2"
-            class="tab-pane"
-            data-bind="css: { active: 1 === 2 }, using: settings.plugins.octorelay.r2"
+            class="tab-pane fade"
+            data-bind="css: { \'active in\': 1 === 2 }, using: settings.plugins.octorelay.r2"
         >
-
             <div class="control-group">
                 <label class="control-label">Active</label>
                 <div class="controls">
                     <div class="btn-group">
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-info\': active() === true, \'btn-default\': active() !== true }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-info': active() === true,
+                            'btn-default': active() !== true
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: true, checked: active"
                             />
                             YES
                         </label>
+                        <!--/ko-->
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-default\': active() === false, \'btn-default\': active() !== false }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-default': active() === false,
+                            'btn-default': active() !== false
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: false, checked: active"
                             />
                             NO
                         </label>
+                        <!--/ko-->
                         
                     </div>
                     <span class="help-block" data-bind="hidden: active">
@@ -490,6 +578,20 @@
             </div>
 
             <div data-bind="visible: active">
+                
+                <div class="preview" style="left: 315px;" data-bind="html: icon_on"></div>
+                <div class="preview-caption" style="left: 315px">
+                    <span class="label">ON</span>
+                    preview
+                </div>
+                
+                <div class="preview" style="left: 415px;" data-bind="html: icon_off"></div>
+                <div class="preview-caption" style="left: 415px">
+                    <span class="label">OFF</span>
+                    preview
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">Label</label>
                     <div class="controls">
@@ -497,17 +599,61 @@
                     </div>
                 </div>
 
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">ON</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_on"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">OFF</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_off"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">GPIO Number</label>
                     <div class="controls">
-                        <input
-                            id="relay_pin-input2"
-                            type="number"
-                            min="1"
-                            max="27"
-                            class="input-small"
-                            data-bind="value: relay_pin"
-                        >
+                        <div class="input-prepend">
+                            <span class="add-on tiny">BCM</span>
+                            <input
+                                id="relay_pin-input2"
+                                type="number"
+                                min="1"
+                                max="27"
+                                class="input-mini"
+                                data-bind="value: relay_pin"
+                            >
+                        </div>
+                        <span class="help-inline">
+                            <a href="https://pinout.xyz/" target="_blank" class="same-color">
+                                <i class="fa fa-info"></i>
+                            </a>
+                        </span>
                     </div>
                 </div>
 
@@ -516,89 +662,79 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': inverted_output() === true, \'btn-default\': inverted_output() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': inverted_output() === true,
+                                'btn-default': inverted_output() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: inverted_output"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': inverted_output() === false, \'btn-default\': inverted_output() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': inverted_output() === false,
+                                'btn-default': inverted_output() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: inverted_output"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
-                        <span class="help-block">
-                            For normally closed relays: the electrical circuit is closed without applying current and the relay connects the power to the load.
+                        <span class="help-inline">
+                            For normally closed relays
+                            <a
+                                href="https://www.google.com/search?q=what+normally+closed+relay+is"
+                                target="_blank"
+                                class="same-color"
+                            >
+                                <i class="fa fa-info"></i>
+                            </a>
                         </span>
                     </div>
                 </div>
 
-                
-                <div class="control-group">
-                    <label class="control-label">Icon ON</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_on">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_on"
-                        ></div>
-                    </div>
-                </div>
-                
                 <div class="control-group">
-                    <label class="control-label">Icon OFF</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_off">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_off"
-                        ></div>
-                    </div>
-                </div>
-                
-
-                <div class="control-group">
-                    <label class="control-label">Warn when turning OFF</label>
+                    <label class="control-label">
+                        Warn if turning
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': confirm_off() === true, \'btn-default\': confirm_off() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': confirm_off() === true,
+                                'btn-default': confirm_off() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: confirm_off"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': confirm_off() === false, \'btn-default\': confirm_off() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': confirm_off() === false,
+                                'btn-default': confirm_off() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: confirm_off"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
                     </div>
@@ -610,38 +746,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -657,38 +799,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -704,38 +852,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -749,16 +903,36 @@
 
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command ON</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">ON</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_on">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_on"
+                            >
+                        </div>
                     </div>
                 </div>
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command OFF</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_off">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_off"
+                            >
+                        </div>
                     </div>
                 </div>
                 
@@ -768,38 +942,39 @@
         
         <div
             id="relay_settings_3"
-            class="tab-pane"
-            data-bind="css: { active: 1 === 3 }, using: settings.plugins.octorelay.r3"
+            class="tab-pane fade"
+            data-bind="css: { \'active in\': 1 === 3 }, using: settings.plugins.octorelay.r3"
         >
-
             <div class="control-group">
                 <label class="control-label">Active</label>
                 <div class="controls">
                     <div class="btn-group">
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-info\': active() === true, \'btn-default\': active() !== true }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-info': active() === true,
+                            'btn-default': active() !== true
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: true, checked: active"
                             />
                             YES
                         </label>
+                        <!--/ko-->
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-default\': active() === false, \'btn-default\': active() !== false }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-default': active() === false,
+                            'btn-default': active() !== false
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: false, checked: active"
                             />
                             NO
                         </label>
+                        <!--/ko-->
                         
                     </div>
                     <span class="help-block" data-bind="hidden: active">
@@ -809,6 +984,20 @@
             </div>
 
             <div data-bind="visible: active">
+                
+                <div class="preview" style="left: 315px;" data-bind="html: icon_on"></div>
+                <div class="preview-caption" style="left: 315px">
+                    <span class="label">ON</span>
+                    preview
+                </div>
+                
+                <div class="preview" style="left: 415px;" data-bind="html: icon_off"></div>
+                <div class="preview-caption" style="left: 415px">
+                    <span class="label">OFF</span>
+                    preview
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">Label</label>
                     <div class="controls">
@@ -816,17 +1005,61 @@
                     </div>
                 </div>
 
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">ON</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_on"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">OFF</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_off"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">GPIO Number</label>
                     <div class="controls">
-                        <input
-                            id="relay_pin-input3"
-                            type="number"
-                            min="1"
-                            max="27"
-                            class="input-small"
-                            data-bind="value: relay_pin"
-                        >
+                        <div class="input-prepend">
+                            <span class="add-on tiny">BCM</span>
+                            <input
+                                id="relay_pin-input3"
+                                type="number"
+                                min="1"
+                                max="27"
+                                class="input-mini"
+                                data-bind="value: relay_pin"
+                            >
+                        </div>
+                        <span class="help-inline">
+                            <a href="https://pinout.xyz/" target="_blank" class="same-color">
+                                <i class="fa fa-info"></i>
+                            </a>
+                        </span>
                     </div>
                 </div>
 
@@ -835,89 +1068,79 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': inverted_output() === true, \'btn-default\': inverted_output() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': inverted_output() === true,
+                                'btn-default': inverted_output() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: inverted_output"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': inverted_output() === false, \'btn-default\': inverted_output() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': inverted_output() === false,
+                                'btn-default': inverted_output() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: inverted_output"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
-                        <span class="help-block">
-                            For normally closed relays: the electrical circuit is closed without applying current and the relay connects the power to the load.
+                        <span class="help-inline">
+                            For normally closed relays
+                            <a
+                                href="https://www.google.com/search?q=what+normally+closed+relay+is"
+                                target="_blank"
+                                class="same-color"
+                            >
+                                <i class="fa fa-info"></i>
+                            </a>
                         </span>
                     </div>
                 </div>
 
-                
-                <div class="control-group">
-                    <label class="control-label">Icon ON</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_on">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_on"
-                        ></div>
-                    </div>
-                </div>
-                
                 <div class="control-group">
-                    <label class="control-label">Icon OFF</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_off">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_off"
-                        ></div>
-                    </div>
-                </div>
-                
-
-                <div class="control-group">
-                    <label class="control-label">Warn when turning OFF</label>
+                    <label class="control-label">
+                        Warn if turning
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': confirm_off() === true, \'btn-default\': confirm_off() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': confirm_off() === true,
+                                'btn-default': confirm_off() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: confirm_off"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': confirm_off() === false, \'btn-default\': confirm_off() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': confirm_off() === false,
+                                'btn-default': confirm_off() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: confirm_off"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
                     </div>
@@ -929,38 +1152,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -976,38 +1205,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -1023,38 +1258,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -1068,16 +1309,36 @@
 
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command ON</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">ON</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_on">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_on"
+                            >
+                        </div>
                     </div>
                 </div>
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command OFF</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_off">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_off"
+                            >
+                        </div>
                     </div>
                 </div>
                 
@@ -1087,38 +1348,39 @@
         
         <div
             id="relay_settings_4"
-            class="tab-pane"
-            data-bind="css: { active: 1 === 4 }, using: settings.plugins.octorelay.r4"
+            class="tab-pane fade"
+            data-bind="css: { \'active in\': 1 === 4 }, using: settings.plugins.octorelay.r4"
         >
-
             <div class="control-group">
                 <label class="control-label">Active</label>
                 <div class="controls">
                     <div class="btn-group">
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-info\': active() === true, \'btn-default\': active() !== true }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-info': active() === true,
+                            'btn-default': active() !== true
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: true, checked: active"
                             />
                             YES
                         </label>
+                        <!--/ko-->
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-default\': active() === false, \'btn-default\': active() !== false }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-default': active() === false,
+                            'btn-default': active() !== false
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: false, checked: active"
                             />
                             NO
                         </label>
+                        <!--/ko-->
                         
                     </div>
                     <span class="help-block" data-bind="hidden: active">
@@ -1128,6 +1390,20 @@
             </div>
 
             <div data-bind="visible: active">
+                
+                <div class="preview" style="left: 315px;" data-bind="html: icon_on"></div>
+                <div class="preview-caption" style="left: 315px">
+                    <span class="label">ON</span>
+                    preview
+                </div>
+                
+                <div class="preview" style="left: 415px;" data-bind="html: icon_off"></div>
+                <div class="preview-caption" style="left: 415px">
+                    <span class="label">OFF</span>
+                    preview
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">Label</label>
                     <div class="controls">
@@ -1135,17 +1411,61 @@
                     </div>
                 </div>
 
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">ON</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_on"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">OFF</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_off"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">GPIO Number</label>
                     <div class="controls">
-                        <input
-                            id="relay_pin-input4"
-                            type="number"
-                            min="1"
-                            max="27"
-                            class="input-small"
-                            data-bind="value: relay_pin"
-                        >
+                        <div class="input-prepend">
+                            <span class="add-on tiny">BCM</span>
+                            <input
+                                id="relay_pin-input4"
+                                type="number"
+                                min="1"
+                                max="27"
+                                class="input-mini"
+                                data-bind="value: relay_pin"
+                            >
+                        </div>
+                        <span class="help-inline">
+                            <a href="https://pinout.xyz/" target="_blank" class="same-color">
+                                <i class="fa fa-info"></i>
+                            </a>
+                        </span>
                     </div>
                 </div>
 
@@ -1154,89 +1474,79 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': inverted_output() === true, \'btn-default\': inverted_output() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': inverted_output() === true,
+                                'btn-default': inverted_output() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: inverted_output"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': inverted_output() === false, \'btn-default\': inverted_output() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': inverted_output() === false,
+                                'btn-default': inverted_output() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: inverted_output"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
-                        <span class="help-block">
-                            For normally closed relays: the electrical circuit is closed without applying current and the relay connects the power to the load.
+                        <span class="help-inline">
+                            For normally closed relays
+                            <a
+                                href="https://www.google.com/search?q=what+normally+closed+relay+is"
+                                target="_blank"
+                                class="same-color"
+                            >
+                                <i class="fa fa-info"></i>
+                            </a>
                         </span>
                     </div>
                 </div>
 
-                
-                <div class="control-group">
-                    <label class="control-label">Icon ON</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_on">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_on"
-                        ></div>
-                    </div>
-                </div>
-                
                 <div class="control-group">
-                    <label class="control-label">Icon OFF</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_off">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_off"
-                        ></div>
-                    </div>
-                </div>
-                
-
-                <div class="control-group">
-                    <label class="control-label">Warn when turning OFF</label>
+                    <label class="control-label">
+                        Warn if turning
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': confirm_off() === true, \'btn-default\': confirm_off() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': confirm_off() === true,
+                                'btn-default': confirm_off() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: confirm_off"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': confirm_off() === false, \'btn-default\': confirm_off() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': confirm_off() === false,
+                                'btn-default': confirm_off() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: confirm_off"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
                     </div>
@@ -1248,38 +1558,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -1295,38 +1611,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -1342,38 +1664,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -1387,16 +1715,36 @@
 
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command ON</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">ON</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_on">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_on"
+                            >
+                        </div>
                     </div>
                 </div>
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command OFF</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_off">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_off"
+                            >
+                        </div>
                     </div>
                 </div>
                 
@@ -1406,38 +1754,39 @@
         
         <div
             id="relay_settings_5"
-            class="tab-pane"
-            data-bind="css: { active: 1 === 5 }, using: settings.plugins.octorelay.r5"
+            class="tab-pane fade"
+            data-bind="css: { \'active in\': 1 === 5 }, using: settings.plugins.octorelay.r5"
         >
-
             <div class="control-group">
                 <label class="control-label">Active</label>
                 <div class="controls">
                     <div class="btn-group">
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-info\': active() === true, \'btn-default\': active() !== true }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-info': active() === true,
+                            'btn-default': active() !== true
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: true, checked: active"
                             />
                             YES
                         </label>
+                        <!--/ko-->
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-default\': active() === false, \'btn-default\': active() !== false }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-default': active() === false,
+                            'btn-default': active() !== false
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: false, checked: active"
                             />
                             NO
                         </label>
+                        <!--/ko-->
                         
                     </div>
                     <span class="help-block" data-bind="hidden: active">
@@ -1447,6 +1796,20 @@
             </div>
 
             <div data-bind="visible: active">
+                
+                <div class="preview" style="left: 315px;" data-bind="html: icon_on"></div>
+                <div class="preview-caption" style="left: 315px">
+                    <span class="label">ON</span>
+                    preview
+                </div>
+                
+                <div class="preview" style="left: 415px;" data-bind="html: icon_off"></div>
+                <div class="preview-caption" style="left: 415px">
+                    <span class="label">OFF</span>
+                    preview
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">Label</label>
                     <div class="controls">
@@ -1454,17 +1817,61 @@
                     </div>
                 </div>
 
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">ON</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_on"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">OFF</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_off"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">GPIO Number</label>
                     <div class="controls">
-                        <input
-                            id="relay_pin-input5"
-                            type="number"
-                            min="1"
-                            max="27"
-                            class="input-small"
-                            data-bind="value: relay_pin"
-                        >
+                        <div class="input-prepend">
+                            <span class="add-on tiny">BCM</span>
+                            <input
+                                id="relay_pin-input5"
+                                type="number"
+                                min="1"
+                                max="27"
+                                class="input-mini"
+                                data-bind="value: relay_pin"
+                            >
+                        </div>
+                        <span class="help-inline">
+                            <a href="https://pinout.xyz/" target="_blank" class="same-color">
+                                <i class="fa fa-info"></i>
+                            </a>
+                        </span>
                     </div>
                 </div>
 
@@ -1473,89 +1880,79 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': inverted_output() === true, \'btn-default\': inverted_output() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': inverted_output() === true,
+                                'btn-default': inverted_output() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: inverted_output"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': inverted_output() === false, \'btn-default\': inverted_output() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': inverted_output() === false,
+                                'btn-default': inverted_output() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: inverted_output"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
-                        <span class="help-block">
-                            For normally closed relays: the electrical circuit is closed without applying current and the relay connects the power to the load.
+                        <span class="help-inline">
+                            For normally closed relays
+                            <a
+                                href="https://www.google.com/search?q=what+normally+closed+relay+is"
+                                target="_blank"
+                                class="same-color"
+                            >
+                                <i class="fa fa-info"></i>
+                            </a>
                         </span>
                     </div>
                 </div>
 
-                
-                <div class="control-group">
-                    <label class="control-label">Icon ON</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_on">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_on"
-                        ></div>
-                    </div>
-                </div>
-                
                 <div class="control-group">
-                    <label class="control-label">Icon OFF</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_off">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_off"
-                        ></div>
-                    </div>
-                </div>
-                
-
-                <div class="control-group">
-                    <label class="control-label">Warn when turning OFF</label>
+                    <label class="control-label">
+                        Warn if turning
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': confirm_off() === true, \'btn-default\': confirm_off() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': confirm_off() === true,
+                                'btn-default': confirm_off() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: confirm_off"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': confirm_off() === false, \'btn-default\': confirm_off() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': confirm_off() === false,
+                                'btn-default': confirm_off() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: confirm_off"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
                     </div>
@@ -1567,38 +1964,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -1614,38 +2017,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -1661,38 +2070,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -1706,16 +2121,36 @@
 
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command ON</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">ON</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_on">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_on"
+                            >
+                        </div>
                     </div>
                 </div>
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command OFF</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_off">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_off"
+                            >
+                        </div>
                     </div>
                 </div>
                 
@@ -1725,38 +2160,39 @@
         
         <div
             id="relay_settings_6"
-            class="tab-pane"
-            data-bind="css: { active: 1 === 6 }, using: settings.plugins.octorelay.r6"
+            class="tab-pane fade"
+            data-bind="css: { \'active in\': 1 === 6 }, using: settings.plugins.octorelay.r6"
         >
-
             <div class="control-group">
                 <label class="control-label">Active</label>
                 <div class="controls">
                     <div class="btn-group">
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-info\': active() === true, \'btn-default\': active() !== true }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-info': active() === true,
+                            'btn-default': active() !== true
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: true, checked: active"
                             />
                             YES
                         </label>
+                        <!--/ko-->
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-default\': active() === false, \'btn-default\': active() !== false }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-default': active() === false,
+                            'btn-default': active() !== false
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: false, checked: active"
                             />
                             NO
                         </label>
+                        <!--/ko-->
                         
                     </div>
                     <span class="help-block" data-bind="hidden: active">
@@ -1766,6 +2202,20 @@
             </div>
 
             <div data-bind="visible: active">
+                
+                <div class="preview" style="left: 315px;" data-bind="html: icon_on"></div>
+                <div class="preview-caption" style="left: 315px">
+                    <span class="label">ON</span>
+                    preview
+                </div>
+                
+                <div class="preview" style="left: 415px;" data-bind="html: icon_off"></div>
+                <div class="preview-caption" style="left: 415px">
+                    <span class="label">OFF</span>
+                    preview
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">Label</label>
                     <div class="controls">
@@ -1773,17 +2223,61 @@
                     </div>
                 </div>
 
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">ON</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_on"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">OFF</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_off"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">GPIO Number</label>
                     <div class="controls">
-                        <input
-                            id="relay_pin-input6"
-                            type="number"
-                            min="1"
-                            max="27"
-                            class="input-small"
-                            data-bind="value: relay_pin"
-                        >
+                        <div class="input-prepend">
+                            <span class="add-on tiny">BCM</span>
+                            <input
+                                id="relay_pin-input6"
+                                type="number"
+                                min="1"
+                                max="27"
+                                class="input-mini"
+                                data-bind="value: relay_pin"
+                            >
+                        </div>
+                        <span class="help-inline">
+                            <a href="https://pinout.xyz/" target="_blank" class="same-color">
+                                <i class="fa fa-info"></i>
+                            </a>
+                        </span>
                     </div>
                 </div>
 
@@ -1792,89 +2286,79 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': inverted_output() === true, \'btn-default\': inverted_output() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': inverted_output() === true,
+                                'btn-default': inverted_output() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: inverted_output"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': inverted_output() === false, \'btn-default\': inverted_output() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': inverted_output() === false,
+                                'btn-default': inverted_output() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: inverted_output"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
-                        <span class="help-block">
-                            For normally closed relays: the electrical circuit is closed without applying current and the relay connects the power to the load.
+                        <span class="help-inline">
+                            For normally closed relays
+                            <a
+                                href="https://www.google.com/search?q=what+normally+closed+relay+is"
+                                target="_blank"
+                                class="same-color"
+                            >
+                                <i class="fa fa-info"></i>
+                            </a>
                         </span>
                     </div>
                 </div>
 
-                
-                <div class="control-group">
-                    <label class="control-label">Icon ON</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_on">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_on"
-                        ></div>
-                    </div>
-                </div>
-                
                 <div class="control-group">
-                    <label class="control-label">Icon OFF</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_off">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_off"
-                        ></div>
-                    </div>
-                </div>
-                
-
-                <div class="control-group">
-                    <label class="control-label">Warn when turning OFF</label>
+                    <label class="control-label">
+                        Warn if turning
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': confirm_off() === true, \'btn-default\': confirm_off() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': confirm_off() === true,
+                                'btn-default': confirm_off() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: confirm_off"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': confirm_off() === false, \'btn-default\': confirm_off() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': confirm_off() === false,
+                                'btn-default': confirm_off() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: confirm_off"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
                     </div>
@@ -1886,38 +2370,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -1933,38 +2423,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -1980,38 +2476,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -2025,16 +2527,36 @@
 
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command ON</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">ON</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_on">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_on"
+                            >
+                        </div>
                     </div>
                 </div>
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command OFF</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_off">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_off"
+                            >
+                        </div>
                     </div>
                 </div>
                 
@@ -2044,38 +2566,39 @@
         
         <div
             id="relay_settings_7"
-            class="tab-pane"
-            data-bind="css: { active: 1 === 7 }, using: settings.plugins.octorelay.r7"
+            class="tab-pane fade"
+            data-bind="css: { \'active in\': 1 === 7 }, using: settings.plugins.octorelay.r7"
         >
-
             <div class="control-group">
                 <label class="control-label">Active</label>
                 <div class="controls">
                     <div class="btn-group">
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-info\': active() === true, \'btn-default\': active() !== true }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-info': active() === true,
+                            'btn-default': active() !== true
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: true, checked: active"
                             />
                             YES
                         </label>
+                        <!--/ko-->
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-default\': active() === false, \'btn-default\': active() !== false }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-default': active() === false,
+                            'btn-default': active() !== false
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: false, checked: active"
                             />
                             NO
                         </label>
+                        <!--/ko-->
                         
                     </div>
                     <span class="help-block" data-bind="hidden: active">
@@ -2085,6 +2608,20 @@
             </div>
 
             <div data-bind="visible: active">
+                
+                <div class="preview" style="left: 315px;" data-bind="html: icon_on"></div>
+                <div class="preview-caption" style="left: 315px">
+                    <span class="label">ON</span>
+                    preview
+                </div>
+                
+                <div class="preview" style="left: 415px;" data-bind="html: icon_off"></div>
+                <div class="preview-caption" style="left: 415px">
+                    <span class="label">OFF</span>
+                    preview
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">Label</label>
                     <div class="controls">
@@ -2092,17 +2629,61 @@
                     </div>
                 </div>
 
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">ON</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_on"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">OFF</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_off"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">GPIO Number</label>
                     <div class="controls">
-                        <input
-                            id="relay_pin-input7"
-                            type="number"
-                            min="1"
-                            max="27"
-                            class="input-small"
-                            data-bind="value: relay_pin"
-                        >
+                        <div class="input-prepend">
+                            <span class="add-on tiny">BCM</span>
+                            <input
+                                id="relay_pin-input7"
+                                type="number"
+                                min="1"
+                                max="27"
+                                class="input-mini"
+                                data-bind="value: relay_pin"
+                            >
+                        </div>
+                        <span class="help-inline">
+                            <a href="https://pinout.xyz/" target="_blank" class="same-color">
+                                <i class="fa fa-info"></i>
+                            </a>
+                        </span>
                     </div>
                 </div>
 
@@ -2111,89 +2692,79 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': inverted_output() === true, \'btn-default\': inverted_output() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': inverted_output() === true,
+                                'btn-default': inverted_output() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: inverted_output"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': inverted_output() === false, \'btn-default\': inverted_output() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': inverted_output() === false,
+                                'btn-default': inverted_output() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: inverted_output"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
-                        <span class="help-block">
-                            For normally closed relays: the electrical circuit is closed without applying current and the relay connects the power to the load.
+                        <span class="help-inline">
+                            For normally closed relays
+                            <a
+                                href="https://www.google.com/search?q=what+normally+closed+relay+is"
+                                target="_blank"
+                                class="same-color"
+                            >
+                                <i class="fa fa-info"></i>
+                            </a>
                         </span>
                     </div>
                 </div>
 
-                
-                <div class="control-group">
-                    <label class="control-label">Icon ON</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_on">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_on"
-                        ></div>
-                    </div>
-                </div>
-                
                 <div class="control-group">
-                    <label class="control-label">Icon OFF</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_off">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_off"
-                        ></div>
-                    </div>
-                </div>
-                
-
-                <div class="control-group">
-                    <label class="control-label">Warn when turning OFF</label>
+                    <label class="control-label">
+                        Warn if turning
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': confirm_off() === true, \'btn-default\': confirm_off() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': confirm_off() === true,
+                                'btn-default': confirm_off() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: confirm_off"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': confirm_off() === false, \'btn-default\': confirm_off() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': confirm_off() === false,
+                                'btn-default': confirm_off() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: confirm_off"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
                     </div>
@@ -2205,38 +2776,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -2252,38 +2829,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -2299,38 +2882,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -2344,16 +2933,36 @@
 
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command ON</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">ON</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_on">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_on"
+                            >
+                        </div>
                     </div>
                 </div>
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command OFF</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_off">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_off"
+                            >
+                        </div>
                     </div>
                 </div>
                 
@@ -2363,38 +2972,39 @@
         
         <div
             id="relay_settings_8"
-            class="tab-pane"
-            data-bind="css: { active: 1 === 8 }, using: settings.plugins.octorelay.r8"
+            class="tab-pane fade"
+            data-bind="css: { \'active in\': 1 === 8 }, using: settings.plugins.octorelay.r8"
         >
-
             <div class="control-group">
                 <label class="control-label">Active</label>
                 <div class="controls">
                     <div class="btn-group">
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-info\': active() === true, \'btn-default\': active() !== true }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-info': active() === true,
+                            'btn-default': active() !== true
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: true, checked: active"
                             />
                             YES
                         </label>
+                        <!--/ko-->
                         
-                        <label
-                            class="btn"
-                            data-bind="css: { \'active btn-default\': active() === false, \'btn-default\': active() !== false }"
-                        >
+                        <!--ko let: { classBinding: {
+                            'active btn-default': active() === false,
+                            'btn-default': active() !== false
+                        } } -->
+                        <label class="btn" data-bind="css: classBinding">
                             <input
                                 type="radio"
-                                style="display: none"
                                 data-bind="checkedValue: false, checked: active"
                             />
                             NO
                         </label>
+                        <!--/ko-->
                         
                     </div>
                     <span class="help-block" data-bind="hidden: active">
@@ -2404,6 +3014,20 @@
             </div>
 
             <div data-bind="visible: active">
+                
+                <div class="preview" style="left: 315px;" data-bind="html: icon_on"></div>
+                <div class="preview-caption" style="left: 315px">
+                    <span class="label">ON</span>
+                    preview
+                </div>
+                
+                <div class="preview" style="left: 415px;" data-bind="html: icon_off"></div>
+                <div class="preview-caption" style="left: 415px">
+                    <span class="label">OFF</span>
+                    preview
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">Label</label>
                     <div class="controls">
@@ -2411,17 +3035,61 @@
                     </div>
                 </div>
 
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">ON</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_on"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="control-group">
+                    <label class="control-label">
+                        Icon
+                        <span class="label">OFF</span>
+                    </label>
+                    <div class="controls">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-code fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: icon_off"
+                            >
+                        </div>
+                    </div>
+                </div>
+                
+
                 <div class="control-group">
                     <label class="control-label">GPIO Number</label>
                     <div class="controls">
-                        <input
-                            id="relay_pin-input8"
-                            type="number"
-                            min="1"
-                            max="27"
-                            class="input-small"
-                            data-bind="value: relay_pin"
-                        >
+                        <div class="input-prepend">
+                            <span class="add-on tiny">BCM</span>
+                            <input
+                                id="relay_pin-input8"
+                                type="number"
+                                min="1"
+                                max="27"
+                                class="input-mini"
+                                data-bind="value: relay_pin"
+                            >
+                        </div>
+                        <span class="help-inline">
+                            <a href="https://pinout.xyz/" target="_blank" class="same-color">
+                                <i class="fa fa-info"></i>
+                            </a>
+                        </span>
                     </div>
                 </div>
 
@@ -2430,89 +3098,79 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': inverted_output() === true, \'btn-default\': inverted_output() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': inverted_output() === true,
+                                'btn-default': inverted_output() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: inverted_output"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': inverted_output() === false, \'btn-default\': inverted_output() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': inverted_output() === false,
+                                'btn-default': inverted_output() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: inverted_output"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
-                        <span class="help-block">
-                            For normally closed relays: the electrical circuit is closed without applying current and the relay connects the power to the load.
+                        <span class="help-inline">
+                            For normally closed relays
+                            <a
+                                href="https://www.google.com/search?q=what+normally+closed+relay+is"
+                                target="_blank"
+                                class="same-color"
+                            >
+                                <i class="fa fa-info"></i>
+                            </a>
                         </span>
                     </div>
                 </div>
 
-                
-                <div class="control-group">
-                    <label class="control-label">Icon ON</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_on">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_on"
-                        ></div>
-                    </div>
-                </div>
-                
                 <div class="control-group">
-                    <label class="control-label">Icon OFF</label>
-                    <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: icon_off">
-                        <div
-                            style="display: inline-flex; width: 24px; height: 24px; margin-left: 8px; overflow: hidden; line-height: unset; vertical-align: middle; font-size: 1.25rem; align-items: center; justify-content: center;"
-                            data-bind="html: icon_off"
-                        ></div>
-                    </div>
-                </div>
-                
-
-                <div class="control-group">
-                    <label class="control-label">Warn when turning OFF</label>
+                    <label class="control-label">
+                        Warn if turning
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-info\': confirm_off() === true, \'btn-default\': confirm_off() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-info': confirm_off() === true,
+                                'btn-default': confirm_off() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: true, checked: confirm_off"
                                 />
                                 YES
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': confirm_off() === false, \'btn-default\': confirm_off() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': confirm_off() === false,
+                                'btn-default': confirm_off() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none"
                                     data-bind="checkedValue: false, checked: confirm_off"
                                 />
                                 NO
                             </label>
+                            <!--/ko-->
                             
                         </div>
                     </div>
@@ -2524,38 +3182,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -2571,38 +3235,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -2618,38 +3288,44 @@
                     <div class="controls">
                         <div class="btn-group">
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-success\': state() === true, \'btn-default\': state() !== true }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-success': state() === true,
+                                'btn-default': state() !== true
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: true, checked: state"
+                                    data-bind="checkedValue: true, checked: state"
                                 />
                                 ON
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-default\': state() === null, \'btn-default\': state() !== null }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-default': state() === null,
+                                'btn-default': state() !== null
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: null, checked: state"
+                                    data-bind="checkedValue: null, checked: state"
                                 />
                                 skip
                             </label>
+                            <!--/ko-->
                             
-                            <label
-                                class="btn"
-                                data-bind="css: { \'active btn-danger\': state() === false, \'btn-default\': state() !== false }"
-                            >
+                            <!--ko let: { classBinding: {
+                                'active btn-danger': state() === false,
+                                'btn-default': state() !== false
+                            } } -->
+                            <label class="btn" data-bind="css: classBinding">
                                 <input
                                     type="radio"
-                                    style="display: none" data-bind="checkedValue: false, checked: state"
+                                    data-bind="checkedValue: false, checked: state"
                                 />
                                 OFF
                             </label>
+                            <!--/ko-->
                             
                         </div>
                         <div class="input-prepend input-append" data-bind="hidden: state() === null">
@@ -2663,16 +3339,36 @@
 
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command ON</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">ON</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_on">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_on"
+                            >
+                        </div>
                     </div>
                 </div>
                 
                 <div class="control-group">
-                    <label class="control-label">OS Command OFF</label>
+                    <label class="control-label">
+                        Command
+                        <span class="label">OFF</span>
+                    </label>
                     <div class="controls">
-                        <input type="text" class="input-large" data-bind="value: cmd_off">
+                        <div class="input-prepend">
+                            <span class="add-on"><i class="fa fa-terminal fa-sm"></i></span>
+                            <input
+                                type="text"
+                                class="input-xlarge code"
+                                data-bind="value: cmd_off"
+                            >
+                        </div>
                     </div>
                 </div>
                 
diff --git a/tests/test_init.py b/tests/test_init.py
index 731cf1ec..4130b184 100644
--- a/tests/test_init.py
+++ b/tests/test_init.py
@@ -337,7 +337,7 @@ def test_get_template_configs__immutable(self):
 
     def test_get_assets(self):
         # Should return the plugin assets configutation
-        expected = { "js": [ "js/octorelay.js" ] }
+        expected = { "js": [ "js/octorelay.js" ], "css": [ "css/octorelay.css" ] }
         actual = self.plugin_instance.get_assets()
         self.assertEqual(actual, expected)