Expand effect engine & ui update (#445)

* update

* update

* update

* .

* .

* .

* update

* .

* .

* .

* .

* update

* .

* update

* .

* update

* update

* update

* update

* update

* update

* .

* update

* update

* update

* .

* .

* .

* Revert "."

This reverts commit 4dd6404b32.

* update

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* ...

* .

* .

* .

* .

* .

* .

* .

* .

* .

* update

* update

* update

* remove svg and pic

* colorpicker imgs to base64 to prevent delayed load if not cached

* fix json2python func

* update swirl with rgba

* add double swirl, tune default val in schema, update explanation

* adjust swirl.py

* FileObserver for config checks with timer as fallback (#4)

assets/webconfig/css/hyperion.css

@@ -482,9 +482,15 @@ li a:active:after {
 }
 
 /* drag and resizable modal http://gijgo.com/ */
-.gj-draggable {
-    cursor: move;
+.gj-button {
+    background-color: #f5f5f5;
+    border: 1px solid #ddd;
+    color: #000;
+    border-radius: 3px;
+    padding: 6px 10px;
+    cursor: pointer;
 }
+
 .gj-unselectable {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -493,6 +499,46 @@ li a:active:after {
     -ms-user-select: none;
     user-select: none;
 }
+
+.gj-margin-left-5 {
+    margin-left: 5px;
+}
+
+.gj-margin-left-10 {
+    margin-left: 10px;
+}
+
+.gj-width-full {
+    width: 100%;
+}
+
+.gj-cursor-pointer {
+    cursor: pointer;
+}
+
+.gj-text-align-center {
+    text-align: center;
+}
+
+.gj-font-size-16 {
+    font-size: 16px;
+}
+
+.gj-hidden {
+    display: none;
+}
+
+.gj-mdl-icon-plus::after {
+    content: "\E145";
+}
+
+.gj-mdl-icon-minus::after {
+    content: "\E15B";
+}
+
+.gj-draggable {
+    cursor: move;
+}
 .gj-resizable-handle {
     position: absolute;
     font-size: 0.1px;
@@ -563,6 +609,7 @@ li a:active:after {
     position: absolute;
     bottom: 0px;
     width: 100%;
+    margin-top: 0px;
 }
 
 .gj-modal {
@@ -591,6 +638,15 @@ li a:active:after {
     border-bottom: 1px solid #e5e5e5;
 }
 
+.gj-footer {
+    min-height: 16.43px;
+    padding: 15px;
+    border-top: 1px solid #e5e5e5;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
 .gj-title {
     margin: 2px;
 }
@@ -611,6 +667,7 @@ li a:active:after {
     padding: 15px;
 }
 
+
 /*https://github.com/flatlogic/awesome-bootstrap-checkbox slighty edited for our purposes*/
 .checkbox {
   height:34px;