all the dockables

src/main/resources/webui/dataReceive.js

@@ -8,13 +8,160 @@ let maxConsoleLines;
 let graphTimeFrame;
 let showConsoleLatest;
 let doAnimations;
+let lockDash;
 //non-option var
 let statRequest;
 //stat vars
 
+//dockable things
+let config = {
+    settings: {
+        hasHeaders: true,
+        constrainDragToContainer: false,
+        reorderEnabled: true,
+        selectionEnabled: false,
+        popoutWholeStack: false,
+        blockedPopoutsThrowError: true,
+        closePopoutsOnUnload: true,
+        showPopoutIcon: false,
+        showMaximiseIcon: false,
+        showCloseIcon: lockDash
+    },
+    dimensions: {
+        borderWidth: 20,
+        minItemHeight: 10,
+        minItemWidth: 10,
+        headerHeight: 20,
+        dragProxyWidth: 300,
+        dragProxyHeight: 200
+    },
+    labels: {
+        close: 'close',
+        maximise: 'maximise',
+        minimise: 'minimise',
+        popout: 'open in new window'
+    },
+    content: [{
+        type: 'column',
+        content: [{
+            type: 'row',
+            content: [{
+                type: 'column',
+                content: [{
+                    type: 'row',
+                    content: [{
+                        type: 'component',
+                        componentName: 'Hit Percent',
+                        width: 50,
+                        componentState: {label: 'F'}
+                    }, {
+                        type: 'component',
+                        componentName: 'Hits',
+                        componentState: {label: 'B'}
+                    }, {
+                        type: 'component',
+                        componentName: 'Misses',
+                        componentState: {label: 'C'}
+                    }]
+                }, {
+                    type: 'row',
+                    content: [{
+                        type: 'component',
+                        componentName: 'Requests Served',
+                        componentState: {label: 'B'}
+                    }, {
+                        type: 'component',
+                        componentName: 'Bytes Sent',
+                        componentState: {label: 'C'}
+                    }]
+                }]
+            }, {
+                type: 'column',
+                content: [{
+                    type: 'component',
+                    componentName: 'Network Utilization',
+                    componentState: {label: 'B'}
+                }, {
+                    type: 'component',
+                    componentName: 'CPU Utilization',
+                    componentState: {label: 'C'}
+                }, {
+                    type: 'component',
+                    componentName: 'Disk Utilization',
+                    componentState: {label: 'D'}
+                }, {
+                    type: 'component',
+                    componentName: 'RAM Utilization',
+                    componentState: {label: 'E'}
+                }]
+            }]
+        }, {
+            type: 'row',
+            height: 20,
+            content: [{
+                type: 'component',
+                componentName: 'Cache Size',
+                componentState: {label: 'F'}
+            }]
+        }]
+    }]
+};
+let dashlayout;
+
+function loadDash() {
+    let savedState = localStorage.getItem("dashState");
+    if (savedState !== null) {
+        dashlayout = new GoldenLayout(JSON.parse(savedState), $("#dashboard"));
+    } else {
+    dashlayout = new GoldenLayout(config, $("#dashboard"));
+    }
+    //graphs
+    dashlayout.registerComponent('Network Utilization', function (container, state) {
+        container.getElement().append('<div id="networkUtil" class="line_graph_data"></div>');
+    });
+    dashlayout.registerComponent('CPU Utilization', function (container, state) {
+        container.getElement().append('<div id="cpuUtil" class="line_graph_data"></div>');
+    });
+    dashlayout.registerComponent('Disk Utilization', function (container, state) {
+        container.getElement().append('<div id="discUtil" class="line_graph_data"></div>');
+    });
+    dashlayout.registerComponent('Cache Size', function (container, state) {
+
+        container.getElement().append('<div id="cacheSize" class="line_graph_data"></div>');
+    });
+    dashlayout.registerComponent('RAM Utilization', function (container, state) {
+        container.getElement().append(' <div id="ramUtil" class="line_graph_data"></div>');
+    });
+    // numbers
+    dashlayout.registerComponent('Hits', function (container, state) {
+        container.getElement().append('<div id="hits" class="numerical_data"></div>');
+    });
+    dashlayout.registerComponent('Misses', function (container, state) {
+        container.getElement().append('<div id="misses" class="numerical_data"></div>');
+    });
+    dashlayout.registerComponent('Requests Served', function (container, state) {
+        container.getElement().append('<div id="reqServed" class="numerical_data"></div>');
+    });
+    dashlayout.registerComponent('Bytes Sent', function (container, state) {
+        container.getElement().append('<div id="bytesSent" class="numerical_data"></div>');
+    });
+    dashlayout.registerComponent('Hit Percent', function (container, state) {
+        container.getElement().append('<div id="hitPercent" class="numerical_data"></div>');
+    });
+
+    dashlayout.init();
+    dashlayout.on('stateChanged', function () {
+        localStorage.setItem('dashState', JSON.stringify(dashlayout.toConfig()));
+    });
+}
 
 jQuery(document).ready(function () {
+    loadDash();
     loadOptions();
+    $(window).resize(function () {
+        let dash = $("#dashboard");
+        dashlayout.updateSize(dash.width(), dash.height());
+    });
     $("#theme").attr("href", "themes/" + theme + ".css");
     $("#style").attr("href", "themes/" + style + ".css");
     if (doAnimations) {
@@ -62,7 +209,8 @@ function loadOptions() {
             max_console_lines: 1000,
             show_console_latest: false,
             graph_time_frame: 30000,
-            do_animations: true
+            do_animations: true,
+            lock_dashboard: true
         }
     }
     theme = options.theme;
@@ -74,6 +222,7 @@ function loadOptions() {
     graphTimeFrame = options.graph_time_frame;
     showConsoleLatest = options.show_console_latest;
     doAnimations = options.do_animations;
+    lockDash = options.lock_dashboard;
     $("#dataRefreshRate").val(refreshRate);
     $("#port").val(port);
     $("#ip").val(ip);
@@ -83,10 +232,11 @@ function loadOptions() {
     $("#styleIn").val(style);
     $("#newestconsole").prop("checked", showConsoleLatest);
     $("#doAnimations").prop("checked", doAnimations);
+    $("#lockDash").prop("checked", lockDash)
 }
 
 function resetOptions() {
-    if (confirm("Do you really want to reset to defaults?")) {
+    if (confirm("Do you really want to reset all customizations to defaults?")) {
         $("#dataRefreshRate").val(5000);
         $("#port").val(33333);
         $("#ip").val("localhost");
@@ -96,6 +246,12 @@ function resetOptions() {
         $("#styleIn").val("sharpStyle");
         $("#newestconsole").prop("checked", false);
         $("#doAnimations").prop("checked", true);
+        dashlayout.destroy();
+        localStorage.removeItem('dashState');
+        loadDash();
+        selectTab('dash', 'dashb');
+        let dash = $("#dashboard");
+        dashlayout.updateSize(dash.width(), dash.height());
         applyOptions()
     }
 }
@@ -110,7 +266,8 @@ function applyOptions() {
         max_console_lines: parseInt($("#maxConsoleLines").val()),
         show_console_latest: $("#newestconsole").prop("checked"),
         graph_time_frame: parseInt($("#graphTimeFrame").val()),
-        do_animations: $("#doAnimations").prop("checked")
+        do_animations: $("#doAnimations").prop("checked"),
+        lock_dashboard: $("#lockDash").prop("checked")
     };
     if (options.do_animations !== doAnimations) {
         doAnimations = options.do_animations;
@@ -215,6 +372,19 @@ function applyOptions() {
             }
         ).prop("checked", showConsoleLatest);
     }
+    if (options.lock_dashboard !== lockDash) {
+        lockDash = options.lock_dashboard;
+        config.settings.showCloseIcon = !lockDash;
+        // localStorage.setItem('dashState', JSON.stringify(dashlayout.toConfig()));
+        // $("#dashboard").empty();
+        // loadDash();
+        $("#lockDashcb").addClass("updated").on(
+            "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
+            function () {
+                $(this).removeClass("updated");
+            }
+        ).prop("checked", showConsoleLatest);
+    }
     localStorage.setItem("options", JSON.stringify(options));
 }
 
@@ -266,8 +436,8 @@ function expSide() {
 
 function applyTheme(t) {
     if (doAnimations)
-        $("*").each(function () {
-            if (!$(this).attr("hidden"))
+        $(document.body).children().each(function () {
+            if (!($(this).attr("hidden")))
                 $(this).addClass("tempsmooth").on(
                     "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
                     function () {
@@ -280,8 +450,8 @@ function applyTheme(t) {
 
 function applyStyle(s) {
     if (doAnimations)
-        $("*").each(function () {
-            if (!$(this).attr("hidden"))
+        $(document.body).children().each(function () {
+            if (!($(this).attr("hidden")))
                 $(this).addClass("tempsmooth").on(
                     "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
                     function () {

src/main/resources/webui/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>MD@H Client</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
     <script src="dataReceive.js"></script>
     <link rel="stylesheet" type="text/css" href="layout.css">
     <link rel="stylesheet" type="text/css" href="" id="style">
@@ -46,19 +47,9 @@
         <div class="contentHeader">
             <h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Dashboard</h1>
         </div>
-        <div id="nDat">
-            <div id="hits" class="numerical_data"></div>
-            <div id="misses" class="numerical_data"></div>
-            <div id="hitPercent" class="numerical_data"></div>
-            <div id="reqServed" class="numerical_data"></div>
-            <div id="bytesSent" class="numerical_data"></div>
-        </div>
-        <div id="gDat">
-            <div id="cpuUtil" class="line_graph_data"></div>
-            <div id="networkUtil" class="line_graph_data"></div>
-            <div id="discUtil" class="line_graph_data"></div>
-            <div id="cacheSize" class="line_graph_data"></div>
-            <div id="ramUtil" class="line_graph_data"></div>
+        <div id="dashboard"></div>
+        <div id="gDat" hidden>
+
         </div>
     </div>
     <div id="console" class="content" hidden>
@@ -107,8 +98,8 @@
                 <label><select id="themeIn" class="optionInput input">
                     <option value="lightTheme">Light</option>
                     <option value="darkTheme">Dark</option>
-                    <option value="midnightTheme">Midnight</option>
-                    <option value="eyekillerTheme">High Vibrancy</option>
+                    <option value="midnightTheme">Midnight (not maintained)</option>
+                    <option value="eyekillerTheme">High Vibrancy (not maintained)</option>
                 </select></label>
             </div>
             <div class="option">
@@ -132,6 +123,13 @@
                     <span id="doAnimationscb" class="slider"></span>
                 </label>
             </div>
+            <div class="option">
+                <h4>Lock Dashboard <br>(does not work)</h4>
+                <label class="switch switchInput">
+                    <input id="lockDash" type="checkbox">
+                    <span id="lockDashcb" class="slider"></span>
+                </label>
+            </div>
         </div>
         <button id="apply" class="button" onclick="applyOptions()">Apply</button>
         <button id="reset" class="button" onclick="resetOptions()">Reset</button>

src/main/resources/webui/layout.css

@@ -123,20 +123,17 @@ body {
     position: absolute;
 }
 
-#nDat {
-    width: 40%;
-    height: calc(100% - 140px);
-    margin: 20px;
-    top: 100px;
+#dashboard{
     position: absolute;
-
+    margin: 20px;
+    width: calc(100% - 40px);
+    height: calc(100% - 140px);
+    top: 100px;
 }
 
 .numerical_data {
-    height: 150px;
-    width: calc(50% - 20px);
-    margin: 10px;
-    float: left;
+    height: 100%;
+    width: 100%;
 }
 
 #gDat {
@@ -150,10 +147,8 @@ body {
 }
 
 .line_graph_data {
-    height: 200px;
-    width: calc((100% - 20px));
-    margin: 10px;
-    float: left;
+    height: 100%;
+    width: 100%;
 }
 
 /*Console and options positions*/
@@ -370,3 +365,316 @@ body {
         opacity: 1;
     }
 }
+
+/*golden layout*/
+.lm_root {
+    position: relative
+}
+
+.lm_row > .lm_item {
+    float: left
+}
+
+.lm_content {
+    overflow: hidden;
+    position: relative
+}
+
+.lm_dragging, .lm_dragging * {
+    cursor: move !important;
+    user-select: none
+}
+
+.lm_maximised {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 40
+}
+
+.lm_maximise_placeholder {
+    display: none
+}
+
+.lm_splitter {
+    position: relative;
+    z-index: 20
+}
+
+.lm_splitter:hover, .lm_splitter.lm_dragging {
+    background: orange
+}
+
+.lm_splitter.lm_vertical .lm_drag_handle {
+    width: 100%;
+    height: 15px;
+    position: absolute;
+    top: -5px;
+    cursor: ns-resize
+}
+
+.lm_splitter.lm_horizontal {
+    float: left;
+    height: 100%
+}
+
+.lm_splitter.lm_horizontal .lm_drag_handle {
+    width: 15px;
+    height: 100%;
+    position: absolute;
+    left: -5px;
+    cursor: ew-resize
+}
+
+.lm_header {
+    overflow: visible;
+    position: relative;
+    z-index: 1
+}
+
+.lm_header [class^=lm_] {
+    box-sizing: content-box !important
+}
+
+.lm_header .lm_controls {
+    position: absolute;
+    right: 3px
+}
+
+.lm_header .lm_controls > li {
+    cursor: pointer;
+    float: left;
+    width: 18px;
+    height: 18px;
+    text-align: center
+}
+
+.lm_header ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none
+}
+
+.lm_header .lm_tabs {
+    position: absolute;
+}
+
+.lm_header .lm_tab {
+    cursor: pointer;
+    float: left;
+    height: 14px;
+    padding: 0 25px 5px 10px;
+    position: relative
+}
+
+.lm_header .lm_tab i {
+    width: 2px;
+    height: 19px;
+    position: absolute
+}
+
+.lm_header .lm_tab i.lm_left {
+    top: 0;
+    left: -2px
+}
+
+.lm_header .lm_tab i.lm_right {
+    top: 0;
+    right: -2px
+}
+
+.lm_header .lm_tab .lm_title {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis
+}
+
+.lm_header .lm_tab .lm_close_tab {
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    text-align: center
+}
+
+.lm_stack.lm_left .lm_header, .lm_stack.lm_right .lm_header {
+    height: 100%
+}
+
+.lm_dragProxy.lm_left .lm_header, .lm_dragProxy.lm_right .lm_header, .lm_stack.lm_left .lm_header, .lm_stack.lm_right .lm_header {
+    width: 20px;
+    float: left;
+    vertical-align: top
+}
+
+.lm_dragProxy.lm_left .lm_header .lm_tabs, .lm_dragProxy.lm_right .lm_header .lm_tabs, .lm_stack.lm_left .lm_header .lm_tabs, .lm_stack.lm_right .lm_header .lm_tabs {
+    transform-origin: left top;
+    top: 0;
+    width: 1000px
+}
+
+.lm_dragProxy.lm_left .lm_header .lm_controls, .lm_dragProxy.lm_right .lm_header .lm_controls, .lm_stack.lm_left .lm_header .lm_controls, .lm_stack.lm_right .lm_header .lm_controls {
+    bottom: 0
+}
+
+.lm_dragProxy.lm_left .lm_items, .lm_dragProxy.lm_right .lm_items, .lm_stack.lm_left .lm_items, .lm_stack.lm_right .lm_items {
+    float: left
+}
+
+.lm_dragProxy.lm_left .lm_header .lm_tabs, .lm_stack.lm_left .lm_header .lm_tabs {
+    transform: rotate(-90deg) scaleX(-1);
+    left: 0
+}
+
+.lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab, .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {
+    transform: scaleX(-1);
+    margin-top: 1px
+}
+
+.lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list, .lm_stack.lm_left .lm_header .lm_tabdropdown_list {
+    top: initial;
+    right: initial;
+    left: 20px
+}
+
+.lm_dragProxy.lm_right .lm_content {
+    float: left
+}
+
+.lm_dragProxy.lm_right .lm_header .lm_tabs, .lm_stack.lm_right .lm_header .lm_tabs {
+    transform: rotate(90deg) scaleX(1);
+    left: 100%;
+    margin-left: 0
+}
+
+.lm_dragProxy.lm_right .lm_header .lm_controls, .lm_stack.lm_right .lm_header .lm_controls {
+    left: 3px
+}
+
+.lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list, .lm_stack.lm_right .lm_header .lm_tabdropdown_list {
+    top: initial;
+    right: 20px
+}
+
+.lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab {
+    margin-top: 0;
+    border-top: none
+}
+
+.lm_dragProxy.lm_bottom .lm_header .lm_controls, .lm_stack.lm_bottom .lm_header .lm_controls {
+    top: 3px
+}
+
+.lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list, .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {
+    top: initial;
+    bottom: 20px
+}
+
+.lm_drop_tab_placeholder {
+    float: left;
+    width: 100px;
+    height: 10px;
+    visibility: hidden
+}
+
+.lm_header .lm_controls .lm_tabdropdown:before {
+    content: '';
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    display: inline-block;
+    border-top: 5px dashed;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    color: white
+}
+
+.lm_header .lm_tabdropdown_list {
+    position: absolute;
+    top: 20px;
+    right: 0;
+    z-index: 5;
+    overflow: hidden
+}
+
+.lm_header .lm_tabdropdown_list .lm_tab {
+    clear: both;
+    padding-right: 10px;
+    margin: 0
+}
+
+.lm_header .lm_tabdropdown_list .lm_tab .lm_title {
+    width: 100px
+}
+
+.lm_header .lm_tabdropdown_list .lm_close_tab {
+    display: none !important
+}
+
+.lm_dragProxy {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 30
+}
+
+.lm_dragProxy .lm_header {
+    background: transparent
+}
+
+.lm_dragProxy .lm_content {
+    border-top: none;
+    overflow: hidden
+}
+
+.lm_dropTargetIndicator {
+    display: none;
+    position: absolute;
+    z-index: 20
+}
+
+.lm_dropTargetIndicator .lm_inner {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    top: 0;
+    left: 0
+}
+
+.lm_transition_indicator {
+    display: none;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 20
+}
+
+.lm_popin {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 9999
+}
+
+.lm_popin > * {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0
+}
+
+.lm_popin > .lm_bg {
+    z-index: 10
+}
+
+.lm_popin > .lm_icon {
+    z-index: 20
+}
+
+/*# sourceMappingURL=goldenlayout-base.css.map */

src/main/resources/webui/themes/darkTheme.css

@@ -165,3 +165,170 @@ input:checked + .slider {
 ::-webkit-scrollbar-track {
 
 }
+
+/*golden layout*/
+.lm_goldenlayout {
+    background: rgba(0, 0, 0, 0);
+}
+
+.lm_content {
+    background: rgba(0, 0, 0, 0);
+}
+
+.lm_dragProxy .lm_content {
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9)
+}
+
+.lm_dropTargetIndicator {
+    box-shadow: inset 0 0 30px #000000;
+    outline: 1px dashed #cccccc;
+    transition: all 200ms ease
+}
+
+.lm_dropTargetIndicator .lm_inner {
+    background: #000000;
+    opacity: .2
+}
+
+.lm_splitter {
+    background: inherit;
+    opacity: .001;
+    transition: opacity 200ms ease
+}
+
+.lm_splitter:hover, .lm_splitter.lm_dragging {
+    background: #303030;
+    opacity: 1
+}
+
+.lm_header {
+    background-color: #606060;
+    height: 20px;
+    user-select: none
+}
+
+.lm_header.lm_selectable {
+    cursor: pointer
+}
+
+.lm_header .lm_tab {
+    font-size: 12px;
+    color: #f0f0f0;
+    background-color: #303030;
+    margin-right: 2px;
+    padding-bottom: 2px;
+    padding-top: 1px
+}
+
+.lm_header .lm_tab .lm_close_tab {
+    width: 9px;
+    height: 9px;
+    background-image: url("../icons/close.png");
+    filter: invert(100%);
+    background-size: 14px 14px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    top: 4px;
+    right: 6px;
+    opacity: .4
+}
+
+.lm_header .lm_tab .lm_close_tab:hover {
+    opacity: 1
+}
+
+.lm_header .lm_tab.lm_active {
+    background-color: #909090;
+}
+
+.lm_header .lm_tab.lm_active .lm_close_tab:hover {
+    opacity: 1
+}
+
+.lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab {
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3)
+}
+
+.lm_dragProxy.lm_bottom .lm_header .lm_tab.lm_active, .lm_stack.lm_bottom .lm_header .lm_tab.lm_active {
+    box-shadow: 0 2px 2px #000000
+}
+
+.lm_selected .lm_header {
+    background-color: #452500
+}
+
+.lm_tab:hover, .lm_tab.lm_active {
+    background: #202020;
+    color: #f0f0f0
+}
+
+.lm_header .lm_controls .lm_tabdropdown:before {
+    color: #ffffff
+}
+
+.lm_controls > li {
+    position: relative;
+    background-position: center center;
+    background-repeat: no-repeat;
+    opacity: .4;
+    transition: opacity 300ms ease
+}
+
+.lm_controls > li:hover {
+    opacity: 1
+}
+
+.lm_controls .lm_popout {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=)
+}
+
+.lm_controls .lm_maximise {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==)
+}
+
+.lm_controls .lm_close {
+    top: 2px;
+    width: 18px !important;
+    height: 18px !important;
+    background-image: url("../icons/close.png");
+    background-size: 16px 16px;
+    background-position: center center;
+    filter: invert(100%);
+}
+
+.lm_maximised .lm_header {
+    background-color: #000000
+}
+
+.lm_maximised .lm_controls .lm_maximise {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC)
+}
+
+.lm_transition_indicator {
+    background-color: #000000;
+    border: 1px dashed #555555
+}
+
+.lm_popin {
+    cursor: pointer
+}
+
+.lm_popin .lm_bg {
+    background: #ffffff;
+    opacity: .3
+}
+
+.lm_popin .lm_icon {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
+    background-position: center center;
+    background-repeat: no-repeat;
+    border-left: 1px solid #eeeeee;
+    border-top: 1px solid #eeeeee;
+    opacity: .7
+}
+
+.lm_popin:hover .lm_icon {
+    opacity: 1
+}
+
+/*# sourceMappingURL=goldenlayout-dark-theme.css.map */

src/main/resources/webui/themes/lightTheme.css

@@ -164,3 +164,166 @@ input:checked + .slider {
 ::-webkit-scrollbar-track {
 
 }
+
+/*golden layout overrides*/
+
+.lm_goldenlayout {
+    background: rgba(0, 0, 0, 0);
+}
+
+.lm_content {
+    background: rgba(0, 0, 0, 0);
+}
+
+.lm_dragProxy .lm_content {
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9)
+}
+
+.lm_dropTargetIndicator {
+    box-shadow: inset 0 0 30px #000000;
+    outline: 1px dashed #cccccc;
+    transition: all 200ms ease
+}
+
+.lm_dropTargetIndicator .lm_inner {
+    background: #000000;
+    opacity: .2
+}
+
+.lm_splitter {
+    background: inherit;
+    opacity: .001;
+    transition: opacity 200ms ease
+}
+
+.lm_splitter:hover, .lm_splitter.lm_dragging {
+    background-color: #dadada;
+    opacity: 1
+}
+
+.lm_header {
+    background-color: #ededed;
+    height: 20px;
+    user-select: none
+}
+
+.lm_header.lm_selectable {
+    cursor: pointer
+}
+
+.lm_header .lm_tab {
+    font-size: 12px;
+    color: #202020;
+    background-color: #f8f9fa;
+    margin-right: 2px;
+    padding-bottom: 2px;
+    padding-top: 1px
+}
+
+.lm_header .lm_tab .lm_close_tab {
+    width: 9px;
+    height: 9px;
+    background-image: url("../icons/close.png");
+    background-position: center center;
+    background-repeat: no-repeat;
+    top: 4px;
+    right: 6px;
+    opacity: .4
+}
+
+.lm_header .lm_tab .lm_close_tab:hover {
+    opacity: 1
+}
+
+.lm_header .lm_tab.lm_active {
+    background-color: #e1e1e1;
+}
+
+.lm_header .lm_tab.lm_active .lm_close_tab:hover {
+    opacity: 1
+}
+
+.lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab {
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3)
+}
+
+.lm_dragProxy.lm_bottom .lm_header .lm_tab.lm_active, .lm_stack.lm_bottom .lm_header .lm_tab.lm_active {
+    box-shadow: 0 2px 2px #000000
+}
+
+.lm_selected .lm_header {
+    background-color: #452500
+}
+
+.lm_tab:hover, .lm_tab.lm_active {
+    background-color: #dadada;
+}
+
+.lm_header .lm_controls .lm_tabdropdown:before {
+    color: #ffffff
+}
+
+.lm_controls > li {
+    position: relative;
+    background-position: center center;
+    background-repeat: no-repeat;
+    opacity: .4;
+    transition: opacity 300ms ease
+}
+
+.lm_controls > li:hover {
+    opacity: 1
+}
+
+.lm_controls .lm_popout {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=)
+}
+
+.lm_controls .lm_maximise {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==)
+}
+
+.lm_controls .lm_close {
+    top: 2px;
+    width: 10px !important;
+    height: 10px !important;
+    background-image: url("../icons/close.png");
+    background-position: center center;
+}
+
+.lm_maximised .lm_header {
+    background-color: #000000
+}
+
+.lm_maximised .lm_controls .lm_maximise {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC)
+}
+
+.lm_transition_indicator {
+    background-color: #000000;
+    border: 1px dashed #555555
+}
+
+.lm_popin {
+    cursor: pointer
+}
+
+.lm_popin .lm_bg {
+    background: #ffffff;
+    opacity: .3
+}
+
+.lm_popin .lm_icon {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
+    background-position: center center;
+    background-repeat: no-repeat;
+    border-left: 1px solid #eeeeee;
+    border-top: 1px solid #eeeeee;
+    opacity: .7
+}
+
+.lm_popin:hover .lm_icon {
+    opacity: 1
+}
+
+/*# sourceMappingURL=goldenlayout-dark-theme.css.map */

src/main/resources/webui/themes/softStyle.css

@@ -51,7 +51,7 @@
 }
 
 .numerical_data {
-    border-radius: 10px;
+    border-radius: 0 0 10px 10px;
 }
 
 #gDat {
@@ -59,7 +59,7 @@
 }
 
 .line_graph_data {
-    border-radius: 10px;
+    border-radius: 0 0 10px 10px;
 }
 
 /*Console and options positions*/
@@ -143,3 +143,21 @@ input:checked + .slider:before {
 
 ::-webkit-scrollbar-track {
 }
+
+/*Golden Layout Overrides*/
+
+.lm_header {
+    border-radius: 10px 10px 0 0;
+}
+
+.lm_tabs:first-child .lm_tab{
+    border-top-left-radius: 10px;
+}
+.lm_tabs:first-child .lm_tab ~ .lm_tab{
+    border-top-left-radius: 0;
+}
+
+.lm_splitter {
+    border-radius: 10px;
+}
+