Merge branch 'devel' into furtherConfigChecks

2021-03-16 20:15:43 +01:00 · 2021-03-16 20:15:43 +01:00 · 53614f7d00
parent 1d8a6cb352 c1e2cb5ae0
commit 53614f7d00
16 changed files with 880 additions and 226 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -8,10 +8,17 @@ end_of_line = lf
 charset = utf-8
 insert_final_newline = true
 trim_trailing_whitespace = true
+indent_style = space
+max_line_length = 90

 [**.py]
-indent_style = tab
+indent_size = 3

-[**.js]
-indent_style = space
-indent_size = 4
+[**.yaml]
+indent_size = 2
+
+[/static/less/**.less]
+indent_size = 2
+
+[**.jinja2]
+indent_size = 3
--- a/.gitignore
+++ b/.gitignore
@ -8,4 +8,5 @@ dist
 .DS_Store
 *.zip

-*.bak
+*.bak
+.vscode
--- a/README.md
+++ b/README.md
@ -1,12 +1,12 @@
 ## Fork information:
 - This is forked from [the original](https://github.com/mmone/OctoprintKlipperPlugin) version 0.2.5
 - The fork now supports Python3 (hopefully without any new bugs)
- The current version is 0.3.1 and includes the pull requests left on the old plugin page that fixes several bugs and Themify support.
+- The current version is 0.3.3 and includes the pull requests left on the old plugin page that fixes several bugs and Themify support.

 ## Fork Installation Information:
 - Uninstall any other versions of the plugin using Plugin Manager or other means, as necessary.
 - Install this version by using Plugin Manager's "From Url" option and entering this URL:
-`https://github.com/AliceGrey/OctoprintKlipperPlugin/archive/master.zip`
+`https://github.com/thelastWallE/OctoprintKlipperPlugin/archive/master.zip`


 # OctoKlipper Plugin
@ -31,7 +31,7 @@ Search for "Klipper" in OctoPrints Plugin Manager.

 or install manually using this URL / zip:

-    https://github.com/AliceGrey/OctoprintKlipperPlugin/archive/master.zip
+    https://github.com/thelastWallE/OctoprintKlipperPlugin/archive/master.zip

 ## Update

--- a/octoprint_klipper/init.py
+++ b/octoprint_klipper/init.py
@ -19,10 +19,13 @@ import octoprint.plugin
 import octoprint.plugin.core
 import glob
 import os
+import sys
 from octoprint.util.comm import parse_firmware_line
+from octoprint.access.permissions import Permissions, ADMIN_GROUP, USER_GROUP
 from .modules import KlipperLogAnalyzer
 import flask
 import configparser
+from flask_babel import gettext

 class KlipperPlugin(
      octoprint.plugin.StartupPlugin,
@ -49,6 +52,26 @@ class KlipperPlugin(

   #-- Settings Plugin

+   def get_additional_permissions(self, *args, **kwargs):
+        return [
+           {
+               "key": "CONFIG",
+               "name": "Config Klipper",
+               "description": gettext("Allows to config klipper"),
+               "default_groups": [ADMIN_GROUP],
+               "dangerous": True,
+               "roles": ["admin"]
+            },
+            {
+               "key": "MACRO",
+               "name": "Use Klipper Macros",
+               "description": gettext("Allows to use klipper macros"),
+               "default_groups": [ADMIN_GROUP],
+               "dangerous": True,
+               "roles": ["admin"]
+            },
+        ]
+
   def get_settings_defaults(self):
      return dict(
         connection = dict(
@ -75,7 +98,8 @@ class KlipperPlugin(
         configuration = dict(
            configpath="~/printer.cfg",
            logpath="/tmp/klippy.log",
-            reload_command="RESTART"
+            reload_command="RESTART",
+            navbar=True
         )
      )

@ -92,6 +116,7 @@ class KlipperPlugin(

      try:
         f = open(configpath, "r")
+
         data["config"] = f.read()
         f.close()
      except IOError:
@ -100,6 +125,20 @@ class KlipperPlugin(
         )
      return data

+   def reloadConfigfile(self):
+      data = octoprint.plugin.SettingsPlugin.on_settings_load(self)
+
+      filepath = os.path.expanduser(
+         self._settings.get(["configuration", "configpath"]))
+      try:
+         f = open(filepath, "r", encoding="utf-8")
+         data["config"] = f.read()
+         f.close()
+      except IOError:
+         self._logger.error(
+            "Error: Klipper config file not found at: {}".format(filepath))
+      return data
+
   def on_settings_save(self, data):
      if self.keyexists(data, "configuration", "configpath"):
         configpath = os.path.expanduser(
@ -129,6 +168,7 @@ class KlipperPlugin(


            f = open(configpath, "w")
+
            f.write(data["config"])
            f.close()
            self._logger.error(
@ -343,9 +383,21 @@ class KlipperPlugin(
            displayVersion=self._plugin_version,
            type="github_release",
            current=self._plugin_version,
-            user="AliceGrey",
+            user="thelastWallE",
            repo="OctoprintKlipperPlugin",
-            pip="https://github.com/AliceGrey/OctoprintKlipperPlugin/archive/{target_version}.zip"
+            pip="https://github.com/thelastWallE/OctoprintKlipperPlugin/archive/{target_version}.zip",
+            stable_branch=dict(
+               name="Stable",
+               branch="master",
+               comittish=["master"]
+            ),
+            prerelease_branches=[
+               dict(
+                  name="Release Candidate",
+                  branch="rc",
+                  comittish=["rc", "master"],
+               )
+            ]
         )
      )

@ -394,7 +446,7 @@ def __plugin_load__():
   global __plugin_hooks__
   __plugin_implementation__ = KlipperPlugin()
   __plugin_hooks__ = {
+      "octoprint.access.permissions": __plugin_implementation__.get_additional_permissions,
      "octoprint.comm.protocol.gcode.received": __plugin_implementation__.on_parse_gcode,
      "octoprint.plugin.softwareupdate.check_config": __plugin_implementation__.get_update_information
   }
-
--- a/octoprint_klipper/modules/KlipperLogAnalyzer.py
+++ b/octoprint_klipper/modules/KlipperLogAnalyzer.py
@ -43,7 +43,7 @@ class KlipperLogAnalyzer():
      out = []

      try:
-         f = open(logname, 'rb')
+         f = open(logname, 'r')

         for line in f:
            parts = line.split()
--- a/octoprint_klipper/static/css/klipper.css
+++ b/octoprint_klipper/static/css/klipper.css
@ -3,6 +3,7 @@
   overflow-y: scroll;
   height: 400px;
   border: 1px solid #eee;
+   width: 100%;
 }

 .plugin-klipper-log .log-item {
@ -34,14 +35,85 @@

 .clear-btn {
   margin-top: 6px;
+   margin-bottom: 6px;
+}
+
+#level .controls {
+   padding: 1px;
+}
+
+ul#klipper-settings {
+   margin: 0;
+}
+
+#klipper-settings a{
+   margin: 5px;
 }

 #plugin-klipper-config {
+   height: 100%;
   font-family: monospace;
 }

+#tab_plugin_klipper_main .row-fluid {
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+}
+
+#tab_plugin_klipper_main .span8 {
+   flex-grow: 8;
+   float: left;
+   box-sizing: border-box;
+}
+
+#tab_plugin_klipper_main .span8 label {
+   float: left;
+}
+
+#tab_plugin_klipper_main .span4 {
+   flex-grow: 0;
+   flex-shrink: 1;
+   /* max-width: 13%; */
+   float: left;
+   box-sizing: border-box;
+}
+
+#settings_plugin_klipper {
+   height: 100%;
+}
+
+#settings_plugin_klipper form {
+   margin: 0px;
+   height: 100%;
+}
+
+#settings_plugin_klipper form .tab-content {
+   height: calc(100% - 40px);
+   overflow: auto;
+}
+
+#settings_plugin_klipper form .tab-content .tab-pane {
+   height: 100%;
+}
+
+#settings_plugin_klipper form .tab-content .tap-pane#conf .control-group {
+   margin-bottom: 0px;
+   height: 99%;
+}
+
+#macros #item.control-group {
+   margin-bottom: 2px;
+   border: 2px solid #ccc;
+   border-radius: 3px;
+   background-color: #eeeeee;
+   color: #333;
+   padding-bottom: 2px;
+   padding-top: 2px;
+}
+
 #klipper_graph_dialog form {
-	margin: 0;
+   margin: 0;
 }

 #klipper_graph_dialog .graph-footer {
--- a/octoprint_klipper/static/js/klipper.js
+++ b/octoprint_klipper/static/js/klipper.js
@ -4,29 +4,30 @@
 // it under the terms of the GNU Affero General Public License as
 // published by the Free Software Foundation, either version 3 of the
 // License, or (at your option) any later version.
- 
+
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU Affero General Public License for more details.
- 
+
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

-$(function() {
-   function KlipperViewModel(parameters) {
-       var self = this;
+$(function () {
+    function KlipperViewModel(parameters) {
+        var self = this;

-       self.settings = parameters[0];
-       self.loginState = parameters[1];
-       self.connectionState = parameters[2];
-       self.levelingViewModel = parameters[3];
-       self.paramMacroViewModel = parameters[4];
-       
-       self.shortStatus = ko.observable();
-       self.logMessages = ko.observableArray();
+        self.settings = parameters[0];
+        self.loginState = parameters[1];
+        self.connectionState = parameters[2];
+        self.levelingViewModel = parameters[3];
+        self.paramMacroViewModel = parameters[4];
+        self.access = parameters[5];
+      
+        self.shortStatus = ko.observable();
+        self.logMessages = ko.observableArray();

-       self.showPopUp = function(popupType, popupTitle, message){
+        self.showPopUp = function(popupType, popupTitle, message){
        var title = popupType.toUpperCase() + ":  " + popupTitle;
        new PNotify({
            title: title,
@ -34,81 +35,89 @@ $(function() {
            type: popupType,
            hide: false
            });
-         };
-       
-       self.showLevelingDialog = function() {
-          var dialog = $("#klipper_leveling_dialog");
-          dialog.modal({
-             show: 'true',
-             backdrop: 'static',
-             keyboard: false
-          });
-          self.levelingViewModel.initView();
-       };
-       
-       self.showPidTuningDialog = function() {
-          var dialog = $("#klipper_pid_tuning_dialog");
-          dialog.modal({
-             show: 'true',
-             backdrop: 'static',
-             keyboard: false
-          });
-       };
-       
-       self.showOffsetDialog = function() {
-          var dialog = $("#klipper_offset_dialog");
-          dialog.modal({
-             show: 'true',
-             backdrop: 'static'
-          });
-       };
-       
-       self.showGraphDialog = function() {
-          var dialog = $("#klipper_graph_dialog");
-          dialog.modal({
-             show: 'true',
-             minHeight: "500px",
-             maxHeight: "600px"
-          });
-       };
-       
-       self.executeMacro = function(macro) {
-          var paramObjRegex = /{(.*?)}/g;
-          
-          if (macro.macro().match(paramObjRegex) == null) {
-             OctoPrint.control.sendGcode(
-                // Use .split to create an array of strings which is sent to 
-                // OctoPrint.control.sendGcode instead of a single string.
-                macro.macro().split(/\r\n|\r|\n/)
-             );
-          } else {
-             self.paramMacroViewModel.process(macro);
-             
-             var dialog = $("#klipper_macro_dialog");
-             dialog.modal({
-                show: 'true',
-                backdrop: 'static'
-             });
-          }
-       };
-    
-       self.onGetStatus = function() {
-          OctoPrint.control.sendGcode("Status")
-       };
-       
-       self.onRestartFirmware = function() {
-          OctoPrint.control.sendGcode("FIRMWARE_RESTART")
-       };
-       
-       self.onRestartHost = function() {
-          OctoPrint.control.sendGcode("RESTART")
-       };
-       
-       self.onAfterBinding = function() {
-          self.connectionState.selectedPort(self.settings.settings.plugins.klipper.connection.port());
-       };
-       
-       self.onDataUpdaterPluginMessage = function(plugin, data) {
+        };
+      
+        self.showLevelingDialog = function () {
+            var dialog = $("#klipper_leveling_dialog");
+            dialog.modal({
+                show: "true",
+                backdrop: "static",
+                keyboard: false
+            });
+            self.levelingViewModel.initView();
+        };
+
+        self.showPidTuningDialog = function () {
+            var dialog = $("#klipper_pid_tuning_dialog");
+            dialog.modal({
+                show: "true",
+                backdrop: "static",
+                keyboard: false
+            });
+        };
+
+        self.showOffsetDialog = function () {
+            var dialog = $("#klipper_offset_dialog");
+            dialog.modal({
+                show: "true",
+                backdrop: "static"
+            });
+        };
+
+        self.showGraphDialog = function () {
+            var dialog = $("#klipper_graph_dialog");
+            dialog.modal({
+                show: "true",
+                minHeight: "500px",
+                maxHeight: "600px"
+            });
+        };
+
+        self.executeMacro = function (macro) {
+            var paramObjRegex = /{(.*?)}/g;
+
+            if (!self.hasRight("MACRO")) return;
+
+            if (macro.macro().match(paramObjRegex) == null) {
+                OctoPrint.control.sendGcode(
+                    // Use .split to create an array of strings which is sent to
+                    // OctoPrint.control.sendGcode instead of a single string.
+                    macro.macro().split(/\r\n|\r|\n/)
+                );
+            } else {
+                self.paramMacroViewModel.process(macro);
+
+                var dialog = $("#klipper_macro_dialog");
+                dialog.modal({
+                    show: "true",
+                    backdrop: "static"
+                });
+            }
+        };
+
+        self.navbarClicked = function () {
+            $("#tab_plugin_klipper_main_link").find("a").click();
+        };
+
+        self.onGetStatus = function () {
+            OctoPrint.control.sendGcode("Status");
+        };
+
+        self.onRestartFirmware = function () {
+            OctoPrint.control.sendGcode("FIRMWARE_RESTART");
+        };
+
+        self.onRestartHost = function () {
+            OctoPrint.control.sendGcode("RESTART");
+        };
+
+        self.onAfterBinding = function () {
+            self.connectionState.selectedPort(
+                self.settings.settings.plugins.klipper.connection.port()
+            );
+        };
+
+        self.onDataUpdaterPluginMessage = function(plugin, data) {
          if(plugin == "klipper") {
             if ("warningPopUp" == data.type){
                self.showPopUp(data.subtype, data.title, data.payload);
@ -124,34 +133,61 @@ $(function() {
                self.logMessage(data.time, data.subtype, data.payload);
             }
            }
-          };
+        };

-       self.logMessage = function(timestamp, type, message) {
-          self.logMessages.push({
-             time: timestamp,
-             type: type,
-             msg: message.replace(/\n/gi, "<br>")}
-          );
-       };
-       
-       self.onClearLog = function() {
-          self.logMessages.removeAll();
-       };
-       
-       self.isActive = function() {
-          return self.connectionState.isOperational() && self.loginState.isUser();
-       };
-   }
+        self.logMessage = function (timestamp, type, message) {
+            self.logMessages.push({
+                time: timestamp,
+                type: type,
+                msg: message.replace(/\n/gi, "<br>")
+            });
+        };

-   OCTOPRINT_VIEWMODELS.push({
-       construct: KlipperViewModel,
-       dependencies: [
-          "settingsViewModel",
-          "loginStateViewModel",
-          "connectionViewModel",
-          "klipperLevelingViewModel",
-          "klipperMacroDialogViewModel"
-       ],
-       elements: ["#tab_plugin_klipper_main", "#sidebar_plugin_klipper", "#navbar_plugin_klipper"]
-   });
+        self.onClearLog = function () {
+            self.logMessages.removeAll();
+        };
+
+        self.isActive = function () {
+            return self.connectionState.isOperational() && this.hasRight("CONFIG");
+        };
+
+        self.hasRight = function (right_role, type) {
+            var arg = eval("self.access.permissions.PLUGIN_KLIPPER_" + right_role);
+
+            if (type == "Ko") {
+                return self.loginState.hasPermissionKo(arg);
+            }
+            return self.loginState.hasPermission(arg);
+        };
+
+        // OctoKlipper settings link
+        self.openOctoKlipperSettings = function (profile_type) {
+            if (!self.hasRight("CONFIG")) return;
+
+            $("a#navbar_show_settings").click();
+            $("li#settings_plugin_klipper_link a").click();
+            if (profile_type) {
+                var query =
+                    "#klipper-settings a[data-profile-type='" + profile_type + "']";
+                $(query).click();
+            }
+        };
+    }
+
+    OCTOPRINT_VIEWMODELS.push({
+        construct: KlipperViewModel,
+        dependencies: [
+            "settingsViewModel",
+            "loginStateViewModel",
+            "connectionViewModel",
+            "klipperLevelingViewModel",
+            "klipperMacroDialogViewModel",
+            "accessViewModel"
+        ],
+        elements: [
+            "#tab_plugin_klipper_main",
+            "#sidebar_plugin_klipper",
+            "#navbar_plugin_klipper"
+        ]
+    });
 });
--- a/octoprint_klipper/static/js/lib/ace/ace.min.js
+++ b/octoprint_klipper/static/js/lib/ace/ace.min.js
--- a/octoprint_klipper/static/js/lib/ace/mode-klipper_config.js
+++ b/octoprint_klipper/static/js/lib/ace/mode-klipper_config.js
@ -0,0 +1,422 @@
+ace.define("ace/mode/klipper_config_highlight_rules",[], function(require, exports, module) {
+    "use strict";
+    
+    var oop = require("../lib/oop");
+    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
+    
+    var KlipperConfigHighlightRules = function() {
+    
+        this.$rules = {
+            start: [{
+                include: "#single_line_comment"
+            }, {
+                include: "#config_block"
+            }, {
+                include: "#config_line"
+            }, {
+                include: "#number"
+            }, {
+                include: "#config_line_start_gcode"
+            }],
+            "#single_line_comment": [{
+                token: "comment.line.number-sign",
+                regex: /#.*$/
+            }, {
+                token: "comment.line.gcode",
+                regex: /;.*$/
+            }],
+            "#number": [{
+                token: "constant.numeric",
+                regex: /\-?\d+(?:[\.,]\d+)?\b/
+            }, {
+                token: "constant.numeric",
+                regex: /\-?[\.,]\d+?\b/
+            }],
+            "#boolean": [{
+                token: "constant.language",
+                regex: /\b(?:true|false)\b/,
+                caseInsensitive: true
+            }],
+            "#string-single": [{
+                token: "text",
+                regex: /'/,
+                push: [{
+                    token: "text",
+                    regex: /'/,
+                    next: "pop"
+                }]
+            }],
+            "#string-double": [{
+                token: "text",
+                regex: /"/,
+                push: [{
+                    token: "text",
+                    regex: /"/,
+                    next: "pop"
+                }]
+            }],
+            "#config_block": [{
+                token: "text",
+                regex: /^\[/,
+                push: [{
+                    token: "text",
+                    regex: /\]\s*$/,
+                    next: "pop"
+                }, {
+                    include: "#known_config_block_name"
+                }, {
+                    include: "#known_driver_type"
+                }, {
+                    defaultToken: "keyword.control"
+                }]
+            }],
+            "#known_config_block_name": [{
+                token: "storage.type",
+                regex: /\b(?:ad5206|adc_temperature|bed_mesh|bed_screws|bed_tilt|bltouch|board_pins|controller_fan|delayed_gcode|delta_calibrate|display|display_data|display_template|dotstar|dual_carriage|endstop_phase|extruder_stepper|extruder[1-9]{0,1}|fan|filament_switch_sensor|firmware_retraction|force_move|gcode_arcs|gcode_button|gcode_macro|hall_filament_width_sensor|heater_bed|heater_fan|heater_generic|homing_heaters|homing_override|idle_timeout|include|manual_stepper|mcp4018|mcp4451|mcp4728|mcu|menu|multi_pin|neopixel|output_pin|pause_resume|printer|probe|quad_gantry_level|replicape|respond|safe_z_home|samd_sercom|screws_tilt_adjust|servo|skew_correction|static_digital_output|stepper_(?:bed|arm|[abcdxy]|z[1-9]{0,1})|sx1509|temperature_fan|temperature_sensor|thermistor|tsl1401cl_filament_width_sensor|verify_heater|virtual_sdcard|z_tilt)\b/,
+                caseInsensitive: true
+            }],
+            "#known_driver_type": [{
+                token: "support.type",
+                regex: /\btmc(?:2130|2208|2209|2660|5160)\b/,
+                caseInsensitive: true,
+                push: [{
+                    token: "text",
+                    regex: /(?=(\]))/,
+                    next: "pop"
+                }, {
+                    defaultToken: "keyword.control"
+                }]
+            }],
+            "#known_thermistor_type": [{
+                token: "support.type",
+                regex: /\b(?:EPCOS 100K B57560G104F|ATC Semitec 104GT-2|NTC 100K beta 3950|Honeywell 100K 135-104LAG-J01|NTC 100K MGB18-104F39050L32)\b/,
+                caseInsensitive: true
+            }],
+            "#known_extruder_sensor_type": [{
+                token: "support.type",
+                regex: /\b(?:MAX6675|MAX31855|MAX31856|MAX31865|PT100 INA826|AD595|AD8494|AD8495|AD8496|AD8497|PT1000|BME280)\b/,
+                caseInsensitive: true
+            }],
+            "#known_control_type": [{
+                token: "support.type",
+                regex: /\b(?:watermark|pid)\b/,
+                caseInsensitive: true
+            }],
+            "#known_display_type": [{
+                token: "support.type",
+                regex: /\b(?:hd44780|st7920|uc1701|ssd1306|sh1106)\b/,
+                caseInsensitive: true
+            }],
+            "#serial": [{
+                token: "support.type",
+                regex: /\/dev\/serial\/by-(?:id|path)\/[\d\w\/\-:\.]+/
+            }],
+            "#pin": [{
+                token: "support.type",
+                regex: /[\^~!]*(?:ar|analog)\d{1,2}/,
+                caseInsensitive: true
+            }, {
+                token: "support.type",
+                regex: /(?:\b)[\^~!]*(?:z:)?[a-z]{1,2}\d{1,2}(?:\.\d{1,2})?/,
+                caseInsensitive: true
+            }],
+            "#config_line_start_gcode": [{
+                token: ["variable.name", "text"],
+                regex: /^(gcode)(\s*[:=]\s*)/,
+                push: [{
+                    token: "text",
+                    regex: /(?=(\[))/,
+                    next: "start"
+                }, {
+                    include: "#gcode_line"
+                }, {
+                    include: "#single_line_comment"
+                }]
+            }],
+            "#config_line": [{
+                token: ["variable.name", "text"],
+                regex: /^(?!(gcode))(\w+)(\s*[:=]\s*)/,
+                push: [{
+                    token: "text",
+                    regex: /$/,
+                    next: "pop"
+                }, {
+                    include: "#known_thermistor_type"
+                }, {
+                    include: "#known_extruder_sensor_type"
+                }, {
+                    include: "#known_control_type"
+                }, {
+                    include: "#known_display_type"
+                }, {
+                    include: "#pin"
+                }, {
+                    include: "#serial"
+                }, {
+                    include: "#number"
+                }, {
+                    include: "#boolean"
+                }, {
+                    include: "#single_line_comment"
+                }]
+            }],
+           "#gcode_line": [{
+                include: "#gcode_command"
+            }, {
+                include: "#gcode_extended_command"
+            }, {
+                include: "#gcode_parameter"
+            }, {
+                include: "#gcode_extended_parameter"
+            }, {
+                include: "#gcode_macro_block"
+            }],
+            "#gcode_command": [{
+                token: ["text", "keyword.operator"],
+                regex: /^(\s*)([A-z]+)(?![A-z])/,
+                caseInsensitive: true,
+                push: [{
+                    token: "text",
+                    regex: /(\s|$)/,
+                    next: "pop"
+                }, {
+                    include: "#number"
+                }, {
+                    include: "#gcode_macro_block"
+                }]
+            }],
+            "#gcode_parameter": [{
+                token: "variable.parameter",
+                regex: /\b[A-z]+(?![a-z])/,
+                caseInsensitive: true,
+                push: [{
+                    token: "text",
+                    regex: /(?=(\s|$))/,
+                    next: "pop"
+                }, {
+                    include: "#number"
+                }, {
+                    include: "#string-single"
+                }, {
+                    include: "#string-double"
+                }, {
+                    include: "#gcode_macro_block"
+                }]
+            }],
+            "#gcode_extended_command": [{
+                token: "keyword.operator",
+                regex: /^\s*(?:ABORT|ACCEPT|ACTIVATE_EXTRUDER|BED_MESH_CALIBRATE|BED_MESH_CLEAR|BED_MESH_MAP|BED_MESH_OUTPUT|BED_MESH_PROFILE|BED_SCREWS_ADJUST|BED_TILT_CALIBRATE|BLTOUCH_DEBUG|BLTOUCH_STORE|CALC_MEASURED_SKEW|CLEAR_PAUSE|DELTA_ANALYZE|DELTA_CALIBRATE|DUMP_TMC|ENDSTOP_PHASE_CALIBRATE|FIRMWARE_RESTART|FORCE_MOVE|GET_CURRENT_SKEW|GET_POSITION|GET_RETRACTION|HELP|MANUAL_PROBE|MANUAL_STEPPER|PAUSE|PID_CALIBRATE|PROBE|PROBE_ACCURACY|PROBE_CALIBRATE|QUAD_GANTRY_LEVEL|QUERY_ADC|QUERY_ENDSTOPS|QUERY_FILAMENT_SENSOR|QUERY_PROBE|RESPOND|RESTART|RESTORE_GCODE_STATE|RESUME|SAVE_CONFIG|SAVE_GCODE_STATE|SCREWS_TILT_CALCULATE|SET_DUAL_CARRIAGE|SET_EXTRUDER_STEP_DISTANCE|SET_FILAMENT_SENSOR|SET_GCODE_OFFSET|SET_GCODE_VARIABLE|SET_HEATER_TEMPERATURE|SET_IDLE_TIMEOUT|SET_KINEMATIC_POSITION|SET_LED|SET_PIN|SET_PRESSURE_ADVANCE|SET_RETRACTION|SET_SERVO|SET_SKEW|SET_STEPPER_ENABLE|SET_TMC_CURRENT|SET_TMC_FIELD|SET_VELOCITY_LIMIT|SKEW_PROFILE|STATUS|STEPPER_BUZZ|TESTZ|TUNING_TOWER|TURN_OFF_HEATERS|UPDATE_DELAYED_GCODE|Z_ENDSTOP_CALIBRATE|Z_TILT_ADJUST)\s/,
+                caseInsensitive: true
+            }],
+            "#gcode_extended_parameter": [{
+                token: ["variable.parameter", "text"],
+                regex: /\b(AC|ACCEL|ACCEL_TO_DECEL|AD|ADVANCE|ANGLE|BAND|BD|BLUE|CARRIAGE|CLEAR|COMMAND|CURRENT|DISTANCE|DURATION|ENABLE|EXTRUDER|FACTOR|FIELD|GREEN|HEATER|HOLDCURRENT|ID|INDEX|LED|LIFT_SPEED|LOAD|MACRO|METHOD|MODE|MOVE_SPEED|MSG|NAME|PARAMETER|PGP|PIN|PREFIX|PROBE_SPEED|PULLUP|RED|REMOVE|RETRACT_LENGTH|RETRACT_SPEED|SAMPLE_RETRACT_DIST|SAMPLES|SAMPLES_RESULT|SAMPLES_TOLERANCE|SAMPLES_TOLERANCE_RETRIES|SAVE|SENSOR|SERVO|SET_POSITION|SMOOTH_TIME|SPEED|SQUARE_CORNER_VELOCITY|START|STEPPER|STOP_ON_ENDSTOP|SYNC|TARGET|TIMEOUT|TRANSMIT|TYPE|UNRETRACT_EXTRA_LENGTH|UNRETRACT_SPEED|VALUE|VARIABLE|VELOCITY|WIDTH|WRITE_FILE|X|X_ADJUST|XY|XZ|Y|Y_ADJUST|YZ|Z|Z_ADJUST)(=)/,
+                caseInsensitive: true,
+                push: [{
+                    token: "text",
+                    regex: /[^\d\w]/,
+                    next: "pop"
+                }, {
+                    token: "constant.language",
+                    regex: /5V|average|command|echo|error|manual|median|OD|output_mode_store|pin_down|pin_up|reset|self_test|set_5V_output_mode|set_5V_output_mode|set_OD_output_mode|touch_mode/,
+                    caseInsensitive: true
+                }, {
+                    include: "#number"
+                }, {
+                    include: "#gcode_macro_block"
+                }]
+            }],
+            "#gcode_macro_block": [{
+                token: "string.unquoted",
+                regex: /{/,
+                push: [{
+                    token: "string.unquoted",
+                    regex: /}/,
+                    next: "pop"
+                }, {
+                    defaultToken: "string.unquoted"
+                }]
+            }]
+        }
+    
+        this.normalizeRules();
+    };
+    
+    KlipperConfigHighlightRules.metaData = {
+        "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+        name: "Klipper Config",
+        scopeName: "source.klipper-config"
+    }
+    
+    
+    oop.inherits(KlipperConfigHighlightRules, TextHighlightRules);
+    
+    exports.KlipperConfigHighlightRules = KlipperConfigHighlightRules;
+    });
+    
+    ace.define("ace/mode/folding/cstyle",[], function(require, exports, module) {
+    "use strict";
+    
+    var oop = require("../../lib/oop");
+    var Range = require("../../range").Range;
+    var BaseFoldMode = require("./fold_mode").FoldMode;
+    
+    var FoldMode = exports.FoldMode = function(commentRegex) {
+        if (commentRegex) {
+            this.foldingStartMarker = new RegExp(
+                this.foldingStartMarker.source.replace(/\|[^|]*?$/, "|" + commentRegex.start)
+            );
+            this.foldingStopMarker = new RegExp(
+                this.foldingStopMarker.source.replace(/\|[^|]*?$/, "|" + commentRegex.end)
+            );
+        }
+    };
+    oop.inherits(FoldMode, BaseFoldMode);
+    
+    (function() {
+    
+        this.foldingStartMarker = /([\{\[\(])[^\}\]\)]*$|^\s*(\/\*)/;
+        this.foldingStopMarker = /^[^\[\{\(]*([\}\]\)])|^[\s\*]*(\*\/)/;
+        this.singleLineBlockCommentRe= /^\s*(\/\*).*\*\/\s*$/;
+        this.tripleStarBlockCommentRe = /^\s*(\/\*\*\*).*\*\/\s*$/;
+        this.startRegionRe = /^\s*(\/\*|\/\/)#?region\b/;
+        this._getFoldWidgetBase = this.getFoldWidget;
+        this.getFoldWidget = function(session, foldStyle, row) {
+            var line = session.getLine(row);
+    
+            if (this.singleLineBlockCommentRe.test(line)) {
+                if (!this.startRegionRe.test(line) && !this.tripleStarBlockCommentRe.test(line))
+                    return "";
+            }
+    
+            var fw = this._getFoldWidgetBase(session, foldStyle, row);
+    
+            if (!fw && this.startRegionRe.test(line))
+                return "start"; // lineCommentRegionStart
+    
+            return fw;
+        };
+    
+        this.getFoldWidgetRange = function(session, foldStyle, row, forceMultiline) {
+            var line = session.getLine(row);
+    
+            if (this.startRegionRe.test(line))
+                return this.getCommentRegionBlock(session, line, row);
+    
+            var match = line.match(this.foldingStartMarker);
+            if (match) {
+                var i = match.index;
+    
+                if (match[1])
+                    return this.openingBracketBlock(session, match[1], row, i);
+    
+                var range = session.getCommentFoldRange(row, i + match[0].length, 1);
+    
+                if (range && !range.isMultiLine()) {
+                    if (forceMultiline) {
+                        range = this.getSectionRange(session, row);
+                    } else if (foldStyle != "all")
+                        range = null;
+                }
+    
+                return range;
+            }
+    
+            if (foldStyle === "markbegin")
+                return;
+    
+            var match = line.match(this.foldingStopMarker);
+            if (match) {
+                var i = match.index + match[0].length;
+    
+                if (match[1])
+                    return this.closingBracketBlock(session, match[1], row, i);
+    
+                return session.getCommentFoldRange(row, i, -1);
+            }
+        };
+    
+        this.getSectionRange = function(session, row) {
+            var line = session.getLine(row);
+            var startIndent = line.search(/\S/);
+            var startRow = row;
+            var startColumn = line.length;
+            row = row + 1;
+            var endRow = row;
+            var maxRow = session.getLength();
+            while (++row < maxRow) {
+                line = session.getLine(row);
+                var indent = line.search(/\S/);
+                if (indent === -1)
+                    continue;
+                if  (startIndent > indent)
+                    break;
+                var subRange = this.getFoldWidgetRange(session, "all", row);
+    
+                if (subRange) {
+                    if (subRange.start.row <= startRow) {
+                        break;
+                    } else if (subRange.isMultiLine()) {
+                        row = subRange.end.row;
+                    } else if (startIndent == indent) {
+                        break;
+                    }
+                }
+                endRow = row;
+            }
+    
+            return new Range(startRow, startColumn, endRow, session.getLine(endRow).length);
+        };
+        this.getCommentRegionBlock = function(session, line, row) {
+            var startColumn = line.search(/\s*$/);
+            var maxRow = session.getLength();
+            var startRow = row;
+    
+            var re = /^\s*(?:\/\*|\/\/|--)#?(end)?region\b/;
+            var depth = 1;
+            while (++row < maxRow) {
+                line = session.getLine(row);
+                var m = re.exec(line);
+                if (!m) continue;
+                if (m[1]) depth--;
+                else depth++;
+    
+                if (!depth) break;
+            }
+    
+            var endRow = row;
+            if (endRow > startRow) {
+                return new Range(startRow, startColumn, endRow, line.length);
+            }
+        };
+    
+    }).call(FoldMode.prototype);
+    
+    });
+    
+    ace.define("ace/mode/klipper_config",[], function(require, exports, module) {
+    "use strict";
+    
+    var oop = require("../lib/oop");
+    var TextMode = require("./text").Mode;
+    var KlipperConfigHighlightRules = require("./klipper_config_highlight_rules").KlipperConfigHighlightRules;
+    var FoldMode = require("./folding/cstyle").FoldMode;
+    
+    var Mode = function() {
+        this.HighlightRules = KlipperConfigHighlightRules;
+        this.foldingRules = new FoldMode();
+    };
+    oop.inherits(Mode, TextMode);
+    
+    (function() {
+        this.$id = "ace/mode/klipper_config"
+    }).call(Mode.prototype);
+    
+    exports.Mode = Mode;
+    });                (function() {
+                        ace.require(["ace/mode/klipper_config"], function(m) {
+                            if (typeof module == "object" && typeof exports == "object" && module) {
+                                module.exports = m;
+                            }
+                        });
+                    })();
--- a/octoprint_klipper/static/js/lib/ace/theme-monokai.min.js
+++ b/octoprint_klipper/static/js/lib/ace/theme-monokai.min.js
@ -0,0 +1,2 @@
+
+define("ace/theme/monokai",["require","exports","module","ace/lib/dom"],function(a,e,o){e.isDark=!0,e.cssClass="ace-monokai",e.cssText=".ace-monokai .ace_gutter {background: #2F3129;color: #8F908A}.ace-monokai .ace_print-margin {width: 1px;background: #555651}.ace-monokai {background-color: #272822;color: #F8F8F2}.ace-monokai .ace_cursor {color: #F8F8F0}.ace-monokai .ace_marker-layer .ace_selection {background: #49483E}.ace-monokai.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #272822;}.ace-monokai .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-monokai .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #49483E}.ace-monokai .ace_marker-layer .ace_active-line {background: #202020}.ace-monokai .ace_gutter-active-line {background-color: #272727}.ace-monokai .ace_marker-layer .ace_selected-word {border: 1px solid #49483E}.ace-monokai .ace_invisible {color: #52524d}.ace-monokai .ace_entity.ace_name.ace_tag,.ace-monokai .ace_keyword,.ace-monokai .ace_meta.ace_tag,.ace-monokai .ace_storage {color: #F92672}.ace-monokai .ace_punctuation,.ace-monokai .ace_punctuation.ace_tag {color: #fff}.ace-monokai .ace_constant.ace_character,.ace-monokai .ace_constant.ace_language,.ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_other {color: #AE81FF}.ace-monokai .ace_invalid {color: #F8F8F0;background-color: #F92672}.ace-monokai .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #AE81FF}.ace-monokai .ace_support.ace_constant,.ace-monokai .ace_support.ace_function {color: #66D9EF}.ace-monokai .ace_fold {background-color: #A6E22E;border-color: #F8F8F2}.ace-monokai .ace_storage.ace_type,.ace-monokai .ace_support.ace_class,.ace-monokai .ace_support.ace_type {font-style: italic;color: #66D9EF}.ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_entity.ace_other,.ace-monokai .ace_entity.ace_other.ace_attribute-name,.ace-monokai .ace_variable {color: #A6E22E}.ace-monokai .ace_variable.ace_parameter {font-style: italic;color: #FD971F}.ace-monokai .ace_string {color: #E6DB74}.ace-monokai .ace_comment {color: #75715E}.ace-monokai .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y}",a("../lib/dom").importCssString(e.cssText,e.cssClass)}),window.require(["ace/theme/monokai"],function(a){"object"==typeof module&&"object"==typeof exports&&module&&(module.exports=a)});
--- a/octoprint_klipper/static/less/klipper.less
+++ b/octoprint_klipper/static/less/klipper.less
@ -1,5 +0,0 @@
-#tab_plugin_klipper iframe {
-  width: 100%;
-  height: 600px;
-  border: 1px solid #808080;
-}
--- a/octoprint_klipper/templates/klipper_navbar.jinja2
+++ b/octoprint_klipper/templates/klipper_navbar.jinja2
@ -1 +1,3 @@
-<a href="#tab_plugin_klipper_main" data-bind="text: shortStatus"></a>
+<!-- ko if: settings.settings.plugins.klipper.configuration.navbar -->
+    <a data-bind="text: shortStatus, click: navbarClicked"></a>
+<!-- /ko -->
--- a/octoprint_klipper/templates/klipper_settings.jinja2
+++ b/octoprint_klipper/templates/klipper_settings.jinja2
@ -1,9 +1,9 @@
 <form class="form-horizontal">
 <ul class="nav nav-pills" id="klipper-settings">
-  <li><a href="#basic" data-toggle="tab">Basic</a></li>
-  <li><a href="#macros" data-toggle="tab">Macros</a></li>
-  <li><a href="#level" data-toggle="tab">Bed Leveling</a></li>
-  <li><a href="#conf" data-toggle="tab">Klipper Configuration</a></li>
+  <li><a href="#basic" data-toggle="tab" data-profile-type="klipper-basic">Basic</a></li>
+  <li><a href="#macros" data-toggle="tab" data-profile-type="klipper-macros">Macros</a></li>
+  <li><a href="#level" data-toggle="tab" data-profile-type="klipper-bed">Bed Leveling</a></li>
+  <li><a href="#conf" data-toggle="tab" data-profile-type="klipper-config">Klipper Configuration</a></li>
 </ul>
 <div class="tab-content">
  <!-- Basics -->
@ -19,6 +19,11 @@
        <div class="controls">
            <input type="checkbox" class="input-block-level" data-bind="checked: settings.settings.plugins.klipper.connection.replace_connection_panel">
        </div>
+    </div><div class="control-group">
+        <label class="control-label">{{ _('Show NavBar Message') }}</label>
+        <div class="controls">
+            <input type="checkbox" class="input-block-level" data-bind="checked: settings.settings.plugins.klipper.configuration.navbar">
+        </div>
    </div>
    <div class="control-group">
        <label class="control-label">{{ _('Klipper Config Path') }}</label>
@ -57,7 +62,7 @@
       </div>
    </div>
    <div data-bind="foreach: settings.settings.plugins.klipper.macros">   
-       <div class="control-group">
+       <div class="control-group" id="item">
           <label class="control-label">{{ _('Name') }}</label>
           <div class="controls">
                <div class="row-fluid">
@ -100,13 +105,13 @@
        </span>
    </div>
    <div class="control-group">
-<pre>
-PID_CALIBRATE
-HEATER={label:Heater, default:extruder, options:extruder|extruder1}
-TARGET={label:Target Temperature, unit:°C, default:190}
-WRITE_FILE={label:Write to File, default:0, options:0|1}
-</pre>
-     </div>
+      <pre>
+        PID_CALIBRATE
+        HEATER={label:Heater, default:extruder, options:extruder|extruder1}
+        TARGET={label:Target Temperature, unit:°C, default:190}
+        WRITE_FILE={label:Write to File, default:0, options:0|1}
+      </pre>
+    </div>
  </div>
  <!-- Leveling -->
  <div class="tab-pane" id="level">
@ -189,7 +194,60 @@ WRITE_FILE={label:Write to File, default:0, options:0|1}
  <!-- Klipper Conf -->
  <div class="tab-pane" id="conf">
   <div class="control-group">
-      <textarea id="plugin-klipper-config" rows="31" class="block" data-bind="value: settings.settings.plugins.klipper.config"></textarea>
+    <script src="plugin/klipper/static/js/lib/ace/ace.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="plugin/klipper/static/js/lib/ace/theme-monokai.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="plugin/klipper/static/js/lib/ace/mode-klipper_config.js" type="text/javascript"></script>
+    <input id="hdnLoadKlipperConfig" type="hidden" data-bind="value: configBound(settings.settings.plugins.klipper.config)" />
+    <div id="plugin-klipper-config"></div>
+    <script>
+
+        var obKlipperConfig = null;
+        var editor = null;
+
+        function configBound(config) {
+            config.withSilence = function() {
+              this.notifySubscribers = function() {
+                if (!this.isSilent) {
+                  ko.subscribable.fn.notifySubscribers.apply(this, arguments);
+                }
+              };
+
+              this.silentUpdate = function(newValue) {
+                this.isSilent = true;
+                this(newValue);
+                this.isSilent = false;
+              };
+
+              return this;
+            };
+
+            obKlipperConfig = config.withSilence();
+            if (editor) {
+              editor.setValue(obKlipperConfig());
+              editor.clearSelection();
+            }
+            return obKlipperConfig;
+        }
+
+        ace.config.set("basePath", "plugin/klipper/static/js/lib/ace/");
+        editor = ace.edit("plugin-klipper-config");
+        editor.setTheme("ace/theme/monokai");
+        editor.session.setMode("ace/mode/klipper_config");
+        editor.setOptions({
+          autoScrollEditorIntoView: true,
+          maxLines: "Infinity"
+        });
+
+        editor.session.on('change', function(delta) {
+          if (obKlipperConfig) {
+              obKlipperConfig.silentUpdate(editor.getValue());
+          }
+        });
+
+        // Uncomment this if not using maxLines: "Infinity"...
+        // setInterval(function(){ editor.resize(); }, 500);
+
+    </script>
   </div>
  </div>
 </div>
--- a/octoprint_klipper/templates/klipper_sidebar.jinja2
+++ b/octoprint_klipper/templates/klipper_sidebar.jinja2
@ -3,15 +3,16 @@
      <label for="connection_printers" data-bind="css: {disabled: !connectionState.isErrorOrClosed()}, enable: connectionState.isErrorOrClosed() && loginState.isUser()">{{ _('Printer Profile') }}</label>
      <select id="connection_printers" data-bind="options: connectionState.printerOptions, optionsText: 'name', optionsValue: 'id', value: connectionState.selectedPrinter, css: {disabled: !connectionState.isErrorOrClosed()}, enable: connectionState.isErrorOrClosed() && loginState.isUser()"></select>
      <button class="btn btn-block" data-bind="click: connectionState.connect, text: connectionState.buttonText(), enable: loginState.isUser()">{{ _('Connect') }}</button>
+      <button class="btn btn-block" data-bind="visible: hasRight('CONFIG', 'Ko'), click: function() {openOctoKlipperSettings('klipper-config');}">{{ _('Open Klipper config') }}</button>
   </div>
 </div>
-<div class="control-group">
+<div class="control-group" data-bind="visible: hasRight('MACRO', 'Ko')">
   <div class="controls">
      <label class="control-label small"><i class="icon-list-alt"></i> {{ _('Macros') }}</label>
      <div data-bind="foreach: settings.settings.plugins.klipper.macros">
         <!-- ko if: sidebar -->
-         <button class="btn btn-block" data-bind="text: name, click: $parent.executeMacro, enable: $parent.isActive()"></button>
+            <button class="btn btn-block" data-bind="text: name, click: $parent.executeMacro, enable: $parent.isActive()"></button>
         <!-- /ko -->
      </div>
   </div>
-</div>
+</div>
--- a/octoprint_klipper/templates/klipper_tab_main.jinja2
+++ b/octoprint_klipper/templates/klipper_tab_main.jinja2
@ -1,72 +1,76 @@
 <div class="row-fluid">
-  <div class="span8">
-    <label><i class="icon-tasks"></i> {{ _('Messages') }}</label>
-    <div class="plugin-klipper-log" data-bind="foreach: logMessages">
-      <div class="log-item" data-bind="css: type">
-         <div data-bind="text: time" class="ts" ></div>
-         <div data-bind="html: msg" class="msg"></div>
-      </div>
-    </div>
-    &nbsp;
-    <button class="btn btn-mini pull-right clear-btn" data-bind="click: onClearLog, enable: isActive()"
-       title="Clear Log">
-       <i class="fa fa-trash"></i>{{ _('Clear') }}
-    </button>
-  </div>
-  <div class="span4">
-    <div class="control-group">
-     <div class="control-group">
-        <div class="controls">
-           <label class="control-label"></label>
-           <button class="btn btn-block btn-small" data-bind="click: onGetStatus, enable: isActive()"
-              title="Query Klipper for its current status">
-              <i class="fa icon-black fa-info-circle"></i> {{ _('Get Status') }}
-           </button>
-        </div>
-     </div>
-     <div class="control-group">
-        <div class="controls">
-          <label class="control-label small"><i class="icon-refresh"></i> {{ _('Restart') }}</label>
-          <button class="btn btn-block btn-small" data-bind="click: onRestartHost, enable: isActive()"
-             title="This will cause the host software to reload its config and perform an internal reset">
-             {{ _('Host') }}
-          </button>
-          <button class="btn btn-block btn-small" data-bind="click: onRestartFirmware, enable: isActive()"
-             title="Similar to a host restart, but also clears any error state from the micro-controller">
-             {{ _('Firmware') }}
-          </button>
-        </div>
-     </div>
-     <div class="control-group">
-        <div class="controls">
-         <label class="control-label"><i class="icon-wrench"></i> {{ _('Tools') }}</label>
-         <button class="btn btn-block btn-small" data-bind="click: showLevelingDialog, enable: isActive()"
-            title="Assists in manually leveling your printbed by moving the head to a configurable set of positions in sequence.">
-            {{ _('Assisted Bed Leveling') }}
-         </button>
-         <button class="btn btn-block btn-small" data-bind="click: showPidTuningDialog, enable: isActive()"
-            title="Determines optimal PID parameters by heat cycling the hotend/bed.">
-            {{ _('PID Tuning') }}
-         </button>
-         <button class="btn btn-block btn-small" data-bind="click: showOffsetDialog, enable: isActive()"
-            title="Sets a offset for subsequent GCODE coordinates.">
-            {{ _('Coordinate Offset') }}
-         </button>
-         <button class="btn btn-block btn-small" data-bind="click: showGraphDialog, enable: isActive()"
-            title="Assists in debugging performance issues by analyzing the Klipper log files.">
-            {{ _('Performance Graph') }}
-         </button>
-        </div>
-     </div>
-     <div class="controls">
-         <label class="control-label"><i class="icon-list-alt"></i> {{ _('Macros') }}</label>
-         <div data-bind="foreach: settings.settings.plugins.klipper.macros">
-            <!-- ko if: tab -->
-            <button class="btn btn-block btn-small" data-bind="text: name, click: $parent.executeMacro, enable: $parent.isActive()">
-            </button>
-            <!-- /ko -->
+   <div class="span8">
+      <label>
+         <i class="icon-tasks"></i> {{ _('Messages') }}
+      </label>
+      <div class="plugin-klipper-log" data-bind="foreach: logMessages">
+         <div class="log-item" data-bind="css: type">
+            <div data-bind="text: time" class="ts"></div>
+            <div data-bind="html: msg" class="msg"></div>
         </div>
-     </div>
-    </div>
-  </div>
+      </div>
+      &nbsp;
+      <button class="btn btn-mini pull-right clear-btn" data-bind="click: onClearLog, enable: isActive()"
+         title="Clear Log">
+         <i class="fa fa-trash"></i> {{ _('Clear') }}
+      </button>
+   </div>
+   <div class="span4">
+      <div class="control-group">
+         <div class="control-group">
+            <div class="controls">
+               <label class="control-label"></label>
+               <button class="btn btn-block btn-small" data-bind="click: onGetStatus, enable: isActive()" title="Query Klipper for its current status">
+                  <i class="fa icon-black fa-info-circle"></i> {{ _('Get Status') }}
+               </button>
+               <button class="btn btn-block btn-small" data-bind="visible: hasRight('CONFIG', 'Ko'), click: function() {openOctoKlipperSettings('klipper-config');}" title="Open the Klipper configurationfile">
+                  <i class="fa icon-black fa-file-code-o"></i> {{ _('Open Klipper config') }}
+               </button>
+            </div>
+         </div>
+         <div class="control-group">
+            <div class="controls">
+               <label class="control-label small"><i class="icon-refresh"></i> {{ _('Restart') }}</label>
+               <button class="btn btn-block btn-small" data-bind="click: onRestartHost, enable: isActive()"
+                  title="This will cause the host software to reload its config and perform an internal reset">
+                  {{ _('Host') }}
+               </button>
+               <button class="btn btn-block btn-small" data-bind="click: onRestartFirmware, enable: isActive()"
+                  title="Similar to a host restart, but also clears any error state from the micro-controller">
+                  {{ _('Firmware') }}
+               </button>
+            </div>
+         </div>
+         <div class="control-group">
+            <div class="controls">
+               <label class="control-label"><i class="icon-wrench"></i> {{ _('Tools') }}</label>
+               <button class="btn btn-block btn-small" data-bind="click: showLevelingDialog, enable: isActive()"
+                  title="Assists in manually leveling your printbed by moving the head to a configurable set of positions in sequence.">
+                  {{ _('Assisted Bed Leveling') }}
+               </button>
+               <button class="btn btn-block btn-small" data-bind="click: showPidTuningDialog, enable: isActive()"
+                  title="Determines optimal PID parameters by heat cycling the hotend/bed.">
+                  {{ _('PID Tuning') }}
+               </button>
+               <button class="btn btn-block btn-small" data-bind="click: showOffsetDialog, enable: isActive()"
+                  title="Sets a offset for subsequent GCODE coordinates.">
+                  {{ _('Coordinate Offset') }}
+               </button>
+               <button class="btn btn-block btn-small" data-bind="click: showGraphDialog, enable: isActive()"
+                  title="Assists in debugging performance issues by analyzing the Klipper log files.">
+                  {{ _('Performance Graph') }}
+               </button>
+            </div>
+         </div>
+         <div class="controls" data-bind="visible: hasRight('MACRO', 'Ko')">
+            <label class="control-label"><i class="icon-list-alt"></i> {{ _('Macros') }}</label>
+            <div data-bind="foreach: settings.settings.plugins.klipper.macros">
+               <!-- ko if: tab -->
+                  <button class="btn btn-block btn-small" data-bind="text: name, click: $parent.executeMacro, enable: $parent.isActive()">
+                  </button>
+               <!-- /ko -->
+            </div>
+         </div>
+      </div>
+   </div>
 </div>
--- a/setup.py
+++ b/setup.py
@ -19,15 +19,15 @@ plugin_package = "octoprint_klipper"

 plugin_name = "OctoKlipper"

-plugin_version = "0.3.1"
+plugin_version = "0.3.3"

 plugin_description = """A plugin for OctoPrint to configure,control and monitor the Klipper 3D printer software."""

-plugin_author = "Alice Weigt"
+plugin_author = "thelastWallE"

-plugin_author_email = "alice@grey.systems"
+plugin_author_email = "thelastwalle.github@gmail.com"

-plugin_url = ""
+plugin_url = "https://github.com/thelastWallE/OctoprintKlipperPlugin"

 plugin_license = "AGPLv3"
				`@ -0,0 +1,2 @@`

				define("ace/theme/monokai",["require","exports","module","ace/lib/dom"],function(a,e,o){e.isDark=!0,e.cssClass="ace-monokai",e.cssText=".ace-monokai .ace_gutter {background: #2F3129;color: #8F908A}.ace-monokai .ace_print-margin {width: 1px;background: #555651}.ace-monokai {background-color: #272822;color: #F8F8F2}.ace-monokai .ace_cursor {color: #F8F8F0}.ace-monokai .ace_marker-layer .ace_selection {background: #49483E}.ace-monokai.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #272822;}.ace-monokai .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-monokai .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #49483E}.ace-monokai .ace_marker-layer .ace_active-line {background: #202020}.ace-monokai .ace_gutter-active-line {background-color: #272727}.ace-monokai .ace_marker-layer .ace_selected-word {border: 1px solid #49483E}.ace-monokai .ace_invisible {color: #52524d}.ace-monokai .ace_entity.ace_name.ace_tag,.ace-monokai .ace_keyword,.ace-monokai .ace_meta.ace_tag,.ace-monokai .ace_storage {color: #F92672}.ace-monokai .ace_punctuation,.ace-monokai .ace_punctuation.ace_tag {color: #fff}.ace-monokai .ace_constant.ace_character,.ace-monokai .ace_constant.ace_language,.ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_other {color: #AE81FF}.ace-monokai .ace_invalid {color: #F8F8F0;background-color: #F92672}.ace-monokai .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #AE81FF}.ace-monokai .ace_support.ace_constant,.ace-monokai .ace_support.ace_function {color: #66D9EF}.ace-monokai .ace_fold {background-color: #A6E22E;border-color: #F8F8F2}.ace-monokai .ace_storage.ace_type,.ace-monokai .ace_support.ace_class,.ace-monokai .ace_support.ace_type {font-style: italic;color: #66D9EF}.ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_entity.ace_other,.ace-monokai .ace_entity.ace_other.ace_attribute-name,.ace-monokai .ace_variable {color: #A6E22E}.ace-monokai .ace_variable.ace_parameter {font-style: italic;color: #FD971F}.ace-monokai .ace_string {color: #E6DB74}.ace-monokai .ace_comment {color: #75715E}.ace-monokai .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y}",a("../lib/dom").importCssString(e.cssText,e.cssClass)}),window.require(["ace/theme/monokai"],function(a){"object"==typeof module&&"object"==typeof exports&&module&&(module.exports=a)});