From 07e99544b0f0888835dcc670cf043c986b61ea99 Mon Sep 17 00:00:00 2001 From: Hugo Costa Date: Wed, 21 Jul 2021 10:24:12 +0100 Subject: [PATCH] Works Fine this version --- octoprint_BLOCKS/__init__.py | 33 +----- octoprint_BLOCKS/static/css/BLOCKS.css | 34 ++++-- octoprint_BLOCKS/static/js/BLOCKS.js | 143 +++++++++++-------------- 3 files changed, 86 insertions(+), 124 deletions(-) diff --git a/octoprint_BLOCKS/__init__.py b/octoprint_BLOCKS/__init__.py index 4339345..c600cd8 100644 --- a/octoprint_BLOCKS/__init__.py +++ b/octoprint_BLOCKS/__init__.py @@ -33,15 +33,6 @@ def on_after_startup(self): ##~~ SettingsPlugin mixin - ##Plugins including the mixing will get injected an additional property - ##self._settings which is an instance of PluginSettingsManager already properly - ##initialized for use by the plugin. In order for the manager to know about the - ##available settings structure and default values upon initialization, - ##implementing plugins will need to provide a dictionary with the plugin’s - ##default settings through overriding the method get_settings_defaults(). - ##The defined structure will then be available to access through the - ##settings manager available as self._settings. - def get_settings_defaults(self): return { # put your plugin's default settings here @@ -51,7 +42,7 @@ def get_settings_defaults(self): "fixedHeader" : True, "fixedFooter" : True, - + "blocksFooterInfo" : True, "removeCollapsible" : True @@ -63,25 +54,12 @@ def add_templatetype ( self, current_order, current_rules, *args, **kwargs): ("connectionWrapper", dict(), dict(template=lambda x: x + "_connectionWrapper.jinja2")) ] """ - ##Vou precisar de adicionar as definições de on_settings_save e ainda - ##on_after_startup para salvar as definições que tenhamos - ##~~ AssetPlugin mixi - ##Allows me to define additional static assets such as JavaScript or class - ##files to be automatically embedded into the pages delivered by the server - ##to be used within the client sided part of the plugin - def get_assets(self): # Define your plugin's asset(the folder) files to automatically include in the # core UI here. - - ##Defines the folder where the plugin stores its static assets - ##as defined in - #~Return string: the absolute path to the folder where the plugin - ##stores its static assets - return dict( js= ["js/BLOCKS.js","js/jquery-ui.min.js"], img= ["img/Blocks_Logo.png","img/settings.png"], @@ -95,20 +73,13 @@ def get_assets(self): ##web interface. def get_template_configs(self): - ##Allow configuration of injected navbar,sidebar,tab and settings - ##templates(and also additional templates of types specified by plugins - ##through hte octoprint.ui.web.templateytpes hook). - ##Basically i can allows me to configure Should be a list containing one - ##configuration object per template to inject. Each configuration object - ##is represented by a dictionary which may contain the following keys: - ##type|name|template|suffix|div |replaces|custom_bindings|data_bind| - ##classes|styles return[ dict(type="settings", custom_bindings=False), # Permite-me adicionar o meu novo container para a connection mas não sei se devo utilizar este type # ou criar meu próprio type de template... dict(type="sidebar", template="blocks_connectionWrapper.jinja2", custom_bindings=False), + # My refresh button for my connection wrapper dict(type="generic", template="refreshButton.jinja2", custom_bindings=False) ] diff --git a/octoprint_BLOCKS/static/css/BLOCKS.css b/octoprint_BLOCKS/static/css/BLOCKS.css index a2381cc..aacefdf 100644 --- a/octoprint_BLOCKS/static/css/BLOCKS.css +++ b/octoprint_BLOCKS/static/css/BLOCKS.css @@ -35,15 +35,12 @@ }*/ /* -------------------------*/ body.BLOCKSUIfixedHeader{ - margin-top: 50px; + /*margin-top: 50px;*/ } .BLOCKSMainContainer{ - padding-right: 10px; - padding-left: 10px; - } - .BLOCKSMainTabs.container-fluid{ padding-left: 0px; padding-right: 0px; + padding-top: 25px; } @@ -81,8 +78,15 @@ margin-left: 10px; } #control > .container-fluid > .row-fluid { - margin-inline-start: 70px; + position: relative; + left: 70px; } + #control .jog-panel>div.distance { + text-align: left; + position: relative; + top: 0px; + left: -5px; +} /* ----------------------------*/ /* Temperature wrapper properties */ @@ -97,6 +101,7 @@ #temp_wrapper { border: 1px solid #e5e5e5; border-radius: 4px; + height : 577px; } #temp { padding: 8px 15px; @@ -186,8 +191,15 @@ display: flex; flex-direction: column; } +/* To fix the button settings on the files */ + .open>.dropdown-menu { + display: block; + position: absolute; + top: auto; + left:auto; + right:auto; - + } /* Grid properties */ .TopRow{ @@ -197,7 +209,7 @@ } .BotRow{ display: flex ; - margin-top: 10px; + /*margin-top: 10px;*/ align-items: flex-start; flex-wrap:nowrap; @@ -272,9 +284,9 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input } #refreshButton.refresh-trigger{ - - position: static; - left: 100px; + + position: relative; + left: 40px; } label.form-check-text { font-weight: bold; diff --git a/octoprint_BLOCKS/static/js/BLOCKS.js b/octoprint_BLOCKS/static/js/BLOCKS.js index f300a7d..6c67363 100644 --- a/octoprint_BLOCKS/static/js/BLOCKS.js +++ b/octoprint_BLOCKS/static/js/BLOCKS.js @@ -18,20 +18,17 @@ $(function() { function BlocksViewModel(parameters) { var self = this; - //Run in debug/verbose mode self.debug = false; // assign the injected parameters, e.g.: - self.settings = parameters[0]; self.connection = parameters[1]; self.loginState = parameters[2]; // TODO: Implement your plugin's view model here. - - // Quick debug + // Taken from UICustomizer plugin self.logToConsole = function(msg){ if (!self.debug){ return true; @@ -41,16 +38,12 @@ $(function() { } }; - - - - //~~---------------------------------------------------- + //--------------------------------------------------------------------------- self.onAllBound = function(){ //Html can have mulitple classes $('#tabs').parent().addClass('BLOCKSMainTabs'); - //adds another class name for the octoprint-container i can now call it by BLOCKSMainContainer $('div.octoprint-container').addClass('BLOCKSMainContainer'); @@ -65,15 +58,17 @@ $(function() { }; // onAllBound END - //--------------------------------------------------- + //--------------------------------------------------------------------------- - // -------------------------------------------------------------------------- + //--------------------------------------------------------------------------- // Connection switch trigger functionality, this set of instructions is what // make the switch work // - // -------------------------------------------------------------------------- + //--------------------------------------------------------------------------- // ~~ observable so i know if my toggle switch is on or off + // ~~ My observable trigger, lets me know if the connection switch is + // ~~ on or off self.connectIt = ko.observable(undefined); // ~~ subscribes my switch to a funcion, this function will always run when the // ~~ switch state changes (When it's pressed or not) @@ -87,40 +82,40 @@ $(function() { } }); // ~~ Change the text on my connection trigger switch + // ~~ Will display Connected/Disconnected + // ~~ it also changes the color of the connection trigger + // ~~ Conected =:= Green + // ~~ Disconnected =:= Red self.connection_labelText = ko.pureComputed(function () { if (self.connection.isErrorOrClosed()){ - $('#blocks_printer_connect').css("border-color", "rgb(255, 59, 59)"); $('.form-check-input').css("background-color","rgb(255, 59, 59)"); return gettext("Disconnected"); - } - else{ + }else{ $('#blocks_printer_connect').css("border-color", "rgb(85, 247, 92)"); $('.form-check-input:checked').css("background-color", "rgb(85, 247, 92)"); return gettext("Connected"); - } }); - // ------------------------------------------------------------------------ - + //--------------------------------------------------------------------------- - - // ------------------------------------------------------------------------ + //--------------------------------------------------------------------------- self.UpdateLayout= function(settingsPlugin){ self.logToConsole('Updating layout'); + self.set_fixedHeader(settingsPlugin.fixedHeader()); - self.set_fixedFooter(settingsPlugin.fixedFooter()); + //self.set_fixedFooter(settingsPlugin.fixedFooter()); self.set_fluidLayout(settingsPlugin.fluidLayout()); self.set_blocksFooterInfo(settingsPlugin.blocksFooterInfo()); //Builds the main layout self.set_mainLayout(settingsPlugin); - + // Remove the collapsible feature self.set_removeCollapsible(settingsPlugin.removeCollapsible()); self.correctFilesWrapper(settingsPlugin); @@ -129,27 +124,21 @@ $(function() { }; - //------------------------------------------------------------------------- + //--------------------------------------------------------------------------- // Took from UICustumizer self.set_fixedHeader = function(enable) { if(enable){ $('body').addClass('BLOCKSUIfixedHeader'); $('#navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top'); $('#navbar').css('overflow','visible').css('padding-top','0').css('display','block'); - - }else{ $('body').removeClass('BLOCKSUIfixedHeader'); $('#navbar').addClass('navbar-static-top').removeClass('navbar-fixed-top'); $('#navbar').css('overflow',''); } - - - - }; - //------------------------------------------------------------------------------------------------ + //--------------------------------------------------------------------------- self.set_fixedFooter = function(enable) { if(enable){ $('.footer').css("position", "fixed"); @@ -159,37 +148,29 @@ $(function() { $('.footer').css("left","0px"); $('.footer').css("bottom","0px"); $('.footer').css("right","0px"); - } }; - //------------------------------------------------------------------------------------------------ + //--------------------------------------------------------------------------- self.set_blocksFooterInfo = function(enable) { if(enable){ $('#footer_links').prepend('
  • BLOCKS
    • '); } }; - - //----------------------------------------------------------------------------------------------- + //--------------------------------------------------------------------------- // In this function where i can change the layout of the main container self.set_mainLayout = function(settingsPlugin) { - self.buildGrid(settingsPlugin); - //In these set of instructions i set what each container on my grid has self.set_blocksWrapper(settingsPlugin); - - $('#state_wrapper').appendTo($('#BTC2')); + // ~~ Bind the remaining wrappers to the grid + self.bindWrappers(settingsPlugin); // ~~The function where i create the Controls wrapper. self.set_ControlWrapper(settingsPlugin); + self.set_TemperatureWrapper(settingsPlugin); - $('div.tabbable.span8').appendTo($('#BBC2')); - self.set_TemperatureWrapper(settingsPlugin); - $('#sidebar_plugin_firmware_check_info_wrapper').appendTo($('#BTC1')); - $('#sidebar_plugin_firmware_check_warning_wrapper').appendTo($('#BTC1')); - $('#files_wrapper').appendTo($('#BBC3')); - // I don't need the sidebar anymore + // ~~ Remove the sidebar, i don't need it anymore $('#sidebar').remove(); $('div.tabbable').removeClass('span8'); // The tabs does not need the Control tab because the Control module is @@ -201,18 +182,15 @@ $(function() { }; - // ------------------------------------------------------------------------------------------------------------------------ + //--------------------------------------------------------------------------- self.buildGrid = function (settingsPlugin) { //What i want to do here is just create a matrix 3x3 $('div.BLOCKSMainContainer > div.row').removeClass('row').addClass('row-fluid').addClass('TopRow').addClass('no-gutters'); - //add another row after the TopRow $('
    ').insertBefore('div.footer'); - //add an id to both rows $('div.BLOCKSMainContainer > div.row-fluid.TopRow').attr('id','BLOCKSRowTop'); $('div.BLOCKSMainContainer > div.row-fluid.BotRow').attr('id','BLOCKSRowBot'); - // All that is left to do is just create my collumns. $('#BLOCKSRowTop').append('
    '); $('#BLOCKSRowTop').append('
    '); @@ -221,22 +199,15 @@ $(function() { $('#BLOCKSRowBot').append('
    '); $('#BLOCKSRowBot').append('
    '); } - //------------------------------------------------------------ - // Fix fluid layout - // Took from UICustomizer - self.set_fluidLayout = function(enabled){ - if (enabled){ - $('#navbar > div.navbar-inner > div:first').removeClass("container").addClass("container-fluid").removeAttr("style",""); - $('div.BLOCKSMainContainer').removeClass("container").addClass("container-fluid"); - }else{ - $('#navbar > div.navbar-inner > div:first').removeClass("container-fluid").addClass("container"); - $('div.BLOCKSMainContainer').removeClass("container-fluid").addClass("container"); - } + //--------------------------------------------------------------------------- + self.bindWrappers = function(settingsPlugin){ + $('#sidebar_plugin_firmware_check_info_wrapper').appendTo($('#BTC1')); + $('#sidebar_plugin_firmware_check_warning_wrapper').appendTo($('#BTC1')); + $('#state_wrapper').appendTo($('#BTC2')); + $('div.tabbable.span8').appendTo($('#BBC2')); + $('#files_wrapper').appendTo($('#BBC3')); }; - // ------------------------------------------------------------------------------------------------------------------------ - // ~~ This wrapper is a simplified version of the connection and notifications wrappers - // ~~ It's function is to just have a simple way to connect to the printer and receive - // ~~ the notifications from that printer + //--------------------------------------------------------------------------- self.set_blocksWrapper = function(settingsPlugin){ // The idea od this wrapper is to have the button for the connection and all the printer notifications // on the same space. So i'll just append the wrappers to the correct place @@ -247,55 +218,47 @@ $(function() { // Add a refresh button to the connection/warnings wrapper // I now have a refresh button next to my connection slider $('#blocksWrapper > .container-fluid').append($('#refreshButton')); - - // I'll need to introduce, at least a sentence saying that this container has the Notifications $('#sidebar_plugin_action_command_notification').prepend('
    Notifications
    '); - } + }; - // ------------------------------------------------------------------------ + //--------------------------------------------------------------------------- self.correctFilesWrapper = function(settingsPlugin){ $('#files_wrapper > div.container-fluid.heading').attr('role','group'); $('.btn-group').css({'font-size': ''}); $('#files_wrapper > div.container-fluid.heading').children().removeClass('btn-group'); // $('#files_wrapper > div.container-fluid.heading > a').removeClass('btn'); self.fixFilesTriggers(settingsPlugin); - } + }; self.fixFilesTriggers = function(settingsPlugin) { //i'm going to wrap the three files triggers inside a container $('#files_wrapper > .container-fluid > div.accordion-heading-button').wrapAll('
    ') - }; - // ------------------------------------------------------------------------------------------------------------------------- + $('.dropdown-menu').addClass("dropdown-menu-right"); + }; + //--------------------------------------------------------------------------- self.set_ControlWrapper = function(settingsPlugin){ - // Wrap my #control ( Made by OctoPrint ) on a new division with the ID="control_wrapper" $('#control').wrap('
    '); - // Remove the tab-pane class because it's no longer a tab pane, it's a separate wrapper now $('#control').removeClass('tab-pane').removeClass('container-fluid').addClass('container-fluid body'); - // This is for the heading, also gives it the possibility to collapse. $('').insertBefore('#control'); - // I needed a inner wrapper so i used the query function wrapInner to wrap everything inside the #control $('#control').wrapInner('
    '); - // Needed to wrap my header $('#control_wrapper > a').wrap('
    '); - // Adds the gamepad icon in black and also adds the text "Controls" to the header $('#control_wrapper > div > a').append(''); $('#control_wrapper > div > a').append(' Controls '); - // Need to create a row-fluid $('#control > .container-fluid > div').wrapAll('
    '); - // Fix the size of the controll wrapper letters. + // Fix the size of the control wrapper letters. $('h1').css("font-size","30px"); // Finally i place my new control wrapper in my grid $('#control_wrapper').appendTo($('#BTC3')); }; - // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- + //--------------------------------------------------------------------------- self.set_TemperatureWrapper = function(settingsPlugin) { $('#temp').wrap('
    '); @@ -310,14 +273,14 @@ $(function() { $('#temp_wrapper > div > a').append(' Temperature '); //Place the wrapper in my grid $('#temp_wrapper').appendTo($('#BBC1')); - $('#temperature-table').css("margin-top",""); + $('#temperature-table').css("margin-top","0px"); // Just a little hack so i can use the temperatureViewModel graph // Basically it presses the button on the tabs to create the grid // After the grid is created the tab is deleted from the tab container // because i don't need that tab there anymore $('#temp_link > a').trigger('click'); }; - + //--------------------------------------------------------------------------- //I don't want my elements to be collapsible self.set_removeCollapsible = function(enable){ if(enable){ @@ -352,12 +315,28 @@ $(function() { // Maybe implement when we want the collapsible feature } }; + //--------------------------------------------------------------------------- + // Fix fluid layout + // Took from UICustomizer + self.set_fluidLayout = function(enabled){ + if (enabled){ + $('#navbar > div.navbar-inner > div:first').removeClass("container").addClass("container-fluid").removeAttr("style",""); + $('div.BLOCKSMainContainer').removeClass("container").addClass("container-fluid"); + }else{ + $('#navbar > div.navbar-inner > div:first').removeClass("container-fluid").addClass("container"); + $('div.BLOCKSMainContainer').removeClass("container-fluid").addClass("container"); + } + }; } - + //--------------------------------------------------------------------------- + //--------------------------------------------------------------------------- + // BlocksViewModel END + //--------------------------------------------------------------------------- + //--------------------------------------------------------------------------- /* view model class, parameters for constructor, container to bind to * Please see http://docs.octoprint.org/en/master/plugins/viewmodels.html#registering-custom-viewmodels for more details