pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

lots of visual fixes. z-axis support

Browse source
This commit is contained in:
Teja 2015-01-08 12:13:56 +01:00
parent b2e3c07e73
commit cf23781326
3 changed files with 154 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/octoprint/plugins/svgtogcode/static/js/working_area.js
View file

@ -25,6 +25,7 @@ function WorkingAreaViewModel(loginStateViewModel, settingsViewModel, printerSta
var ratio = self.settings.printer_bedDimensionY() / self.settings.printer_bedDimensionX();
return ratio;
}, self);
self.workingAreaDim = ko.computed(function(){
var maxH = self.availableHeight();
var maxW = self.availableWidth();
@ -38,26 +39,28 @@ function WorkingAreaViewModel(loginStateViewModel, settingsViewModel, printerSta
} else {
w = maxH / hwRatio;
h = maxH;
console.log(w,h, hwRatio);
}
var dim = [w,h];
return dim;
}
});
self.workingAreaWidth = ko.computed(function(){
var dim = self.workingAreaDim();
return dim ? dim[0] : 1;
}, self);
self.workingAreaHeight = ko.computed(function(){
var dim = self.workingAreaDim();
return dim ? dim[1] : 1;
}, self);
self.px2mm_factor = ko.computed(function(){
return self.settings.printer_bedDimensionX() / self.workingAreaWidth();
});
self.trigger_resize = function(){
self.availableHeight(document.documentElement.clientHeight - $('body>nav').height() - $('footer>*').outerHeight());
self.availableHeight(document.documentElement.clientHeight - $('body>nav').outerHeight() - $('footer>*').outerHeight() - 39); // magic number
self.availableWidth($('#workingarea div.span8').innerWidth());
};

178
src/octoprint/plugins/svgtogcode/templates/override_index.jinja2
View file

@ -15,32 +15,33 @@
<link href="{{ url_for('static', filename='css/pnotify.min.css') }}" rel="stylesheet" media="screen">
{% if stylesheet == "less" %}
<link href="{{ url_for('static', filename='less/octoprint.less') }}" rel="stylesheet/less" type="text/css" media="screen">
<!--<link href="{{ url_for('static', filename='less/octoprint.less') }}" rel="stylesheet/less" type="text/css" media="screen">-->
<link href="{{ url_for('static', filename='less/mrbeam.less') }}" rel="stylesheet/less" type="text/css" media="screen">
<!-- Plugin files -->
{% for name, assets in assetPlugins.items() %}
{% if "less" in assets %}
{% for asset in assets["less"] %}
<link href="{{ url_for('plugin_assets', name=name, filename=asset) }}" rel="stylesheet/less" type="text/css" media="screen">
{% endfor %}
{% endif %}
{% endfor %}
<!-- /Plugin files -->
<!-- Plugin files -->
{% for name, assets in assetPlugins.items() %}
{% if "less" in assets %}
{% for asset in assets["less"] %}
<link href="{{ url_for('plugin_assets', name=name, filename=asset) }}" rel="stylesheet/less" type="text/css" media="screen">
{% endfor %}
{% endif %}
{% endfor %}
<!-- /Plugin files -->
<script src="{{ url_for('static', filename='js/lib/less.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/lib/less.min.js') }}" type="text/javascript"></script>
{% else %}
<link href="{{ url_for('static', filename='css/octoprint.css') }}" rel="stylesheet" type="text/css" media="screen">
<!-- Plugin files -->
{% for name, assets in assetPlugins.items() %}
{% if "css" in assets %}
{% for asset in assets["css"] %}
<link href="{{ url_for('plugin_assets', name=name, filename=asset) }}" rel="stylesheet" type="text/css" media="screen">
{% endfor %}
{% endif %}
{% endfor %}
<!-- /Plugin files -->
<!--<link href="{{ url_for('static', filename='css/octoprint.css') }}" rel="stylesheet" type="text/css" media="screen">-->
<link href="{{ url_for('static', filename='css/mrbeam.css') }}" rel="stylesheet" media="screen">
<!-- Plugin files -->
{% for name, assets in assetPlugins.items() %}
{% if "css" in assets %}
{% for asset in assets["css"] %}
<link href="{{ url_for('plugin_assets', name=name, filename=asset) }}" rel="stylesheet" type="text/css" media="screen">
{% endfor %}
{% endif %}
{% endfor %}
<!-- /Plugin files -->
{% endif %}
<link href="{{ url_for('static', filename='css/mrbeam.css') }}" rel="stylesheet" media="screen">
<script type="text/javascript" >
var BASEURL = "{{ url_for('index') }}";
@ -67,9 +68,10 @@ var UI_API_KEY = "{{ uiApiKey }}";
var ADDITIONAL_VIEWMODELS = []; </script>
</head>
<body>
<div class="container octoprint-container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header brand">
<div class="navbar-header brand" style="min-width: 272px;">
<a class="navbar-brand" href="#">
<img alt="Mr Beam Logo" src="{{ url_for('static', filename='img/mr-typo-red_x120.png') }}">
</a>
@ -121,73 +123,72 @@ var UI_API_KEY = "{{ uiApiKey }}";
</div>
</nav>
<div class="span12 tabbable">
<div class="span12 tabbable" id="mrbeam-tabs">
<div class="tab-content">
<div class="tab-pane active" id="workingarea">
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 accordion">
<!-- <div class="accordion-group" data-bind="visible: loginState.isUser" id="connection_accordion">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#connection"><i class="icon-signal"></i> {{ _('Connection') }}</a>
</div>
</div>-->
<div class="accordion-group" id="state_accordion">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#state"><i class="icon-info-sign"></i> {{ _('State') }}</a>
<a class="accordion-toggle" data-toggle="collapse" href="#statusbox"><i class="icon-info-sign"></i> {{ _('State') }}</a>
</div>
<div id="control" class="accordion-inner" >
{{ _('Position') }}: <strong data-bind="text: laserPos"></strong>
<a href="#control_btns" class="btn btn-xs pull-right" data-toggle="collapse" aria-expanded="false">
<i class="icon-move sr-only"></i>
<span class="caret"></span>
</a>
<div class="xxaccordion-inner collapse" id="control_btns">
<div class="jog-panel" >
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',1) }"><i class="icon-arrow-up"></i></button>
</div>
<div>
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',-1) }"><i class="icon-arrow-left"></i></button>
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['x', 'y']) }"><i class="icon-home"></i></button>
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',1) }"><i class="icon-arrow-right"></i></button>
</div>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',-1) }"><i class="icon-arrow-down"></i></button>
</div>
</div>
{% if hasZAxis %}
Z jogging control panel
<div class="jog-panel" id="control_zaxis">
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
</div>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['z']) }"><i class="icon-home"></i></button>
</div>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',-1) }"><i class="icon-arrow-down"></i></button>
</div>
</div>
{% endif %}
<div class="clearfix"></div>
Jog distance
<div class="distance">
<!--<input type="range" min="0" max="50" value="0" step="10" onchange="" />-->
<div class="btn-group" data-toggle="buttons-radio" id="jog_distance">
<button type="button" class="btn distance" data-distance="0.1" data-bind="enable: loginState.isUser()">0.1</button>
<button type="button" class="btn distance" data-distance="1" data-bind="enable: loginState.isUser()">1</button>
<button type="button" class="btn distance active" data-distance="10" data-bind="enable: loginState.isUser()">10</button>
<button type="button" class="btn distance" data-distance="100" data-bind="enable: loginState.isUser()">100</button>
</div>
</div>
</div>
</div>
<div id="statusbox">
<div id="control" class="accordion-inner" >
{{ _('Position') }}: <strong data-bind="text: laserPos"></strong>
<a href="#control_btns" style="margin-top: -5px;"
class="btn btn-xs pull-right"
data-toggle="collapse" aria-expanded="false">
<i class="icon-move sr-only"></i>
<span class="caret"></span>
</a>
<div class="clearfix"></div>
<div class="collapse" id="control_btns">
<div class="jog-panel" id="control_xyaxis">
XY-Axes
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',1) }"><i class="icon-arrow-up"></i></button>
</div>
<div>
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',-1) }"><i class="icon-arrow-left"></i></button>
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['x', 'y']) }"><i class="icon-home"></i></button>
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',1) }"><i class="icon-arrow-right"></i></button>
</div>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',-1) }"><i class="icon-arrow-down"></i></button>
</div>
</div>
{% if hasZAxis %}
<div class="jog-panel" id="control_zaxis">
Z-Axis
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
</div>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['z']) }"><i class="icon-home"></i></button>
</div>
<div>
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',-1) }"><i class="icon-arrow-down"></i></button>
</div>
</div>
{% endif %}
<div class="clearfix"></div>
Jog distance
<div class="distance">
<!--<input type="range" min="0" max="50" value="0" step="10" onchange="" />-->
<div class="btn-group" data-toggle="buttons-radio" id="jog_distance">
<button type="button" class="btn distance" data-distance="0.1" data-bind="enable: loginState.isUser()">0.1</button>
<button type="button" class="btn distance" data-distance="1" data-bind="enable: loginState.isUser()">1</button>
<button type="button" class="btn distance active" data-distance="10" data-bind="enable: loginState.isUser()">10</button>
<button type="button" class="btn distance" data-distance="100" data-bind="enable: loginState.isUser()">100</button>
</div>
</div>
</div>
</div>
<div class="accordion-body collapse in" id="connection" data-bind="visible: isErrorOrClosed() && loginState.isUser()">
<div class="accordion-inner">
@ -228,18 +229,21 @@ var UI_API_KEY = "{{ uiApiKey }}";
</div>
</div>
</div>
</div>
</div>
<div id="state_accordion"></div>
<div data-bind="visible: loginState.isUser" id="connection_accordion"></div>
<div class="" id="files_accordion">
<div class="accordion-group" id="files_accordion">
<div class="">
<a class="accordion-toggle" data-toggle="collapse" href="#files"><i class="icon-list"></i> {{ _('Files') }}</a>
<div class="settings-trigger accordion-heading-button btn-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#files"><i class="icon-list"></i> {{ _('Files') }}</a>
</div>
<div class="settings-trigger accordion-heading-button btn-group" style="display: none;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="icon-wrench"></span>
</a>
@ -415,7 +419,7 @@ var UI_API_KEY = "{{ uiApiKey }}";
<!------->
<!------>
<div class="container octoprint-container">
<footer class="footer">
<ul class="pull-left muted">
<li><small>{{ _('Version') }}: <span class="version">{{ display_version }}</span></small></li>

71
src/octoprint/static/css/mrbeam.css
View file

@ -457,6 +457,7 @@ input[type="submit"].btn.btn-mini {
}
.navbar .brand {
padding-top: 4px;
padding-bottom: 0px;
}
#navbar .navbar-inner .brand span {
background-image: url(../img/mr-typo-red_x120.png);
@ -822,22 +823,32 @@ input[type="submit"].btn.btn-mini {
padding: 14px 15px 14px;
}
.navbar {
margin-bottom: 0px;
margin-top: 6px;
}
body {
background-color:whitesmoke;
}
.octoprint-container {
margin-top: 20px;
margin-top: 0px;
background-color:white;
/** OctoPrint application tabs */
/** Accordions */
}
.octoprint-container .tab-content {
padding: 9px 15px;
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
border-bottom: 1px solid #DDD;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
border-left: 0px solid #DDD;
border-right: 0px solid #DDD;
border-bottom: 0px solid #DDD;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
}
.octoprint-container .nav {
margin-bottom: 0px;
@ -1122,8 +1133,17 @@ ul.dropdown-menu li a {
#control {
overflow: hidden;
}
#control .jog-panel {
margin: 1em 1em 0;
#control_btns {
text-align:center;
}
#control_zaxis {
display:inline-block;
width: 80px;
}
#control_xyaxis {
display:inline-block;
margin: 1em auto 0;
width: 120px;
}
#control h1 {
text-align: left;
@ -1187,7 +1207,7 @@ ul.dropdown-menu li a {
/** Settings dialog */
/** Footer */
.footer ul {
margin: 0;
margin: 0 1em;
}
.footer ul li {
display: inline;
@ -1571,3 +1591,28 @@ input.search-query,
.footer>* {
padding-top: 1em;
}
#mrbeam-tabs {
margin:0;
}
#mrbeam-tabs .container-fluid {
padding-right: 0px;
padding-left: 0px;
}
#mrbeam-tabs .accordion-inner {
padding: 9px 15px;
border-top: none;
}
#mrbeam-tabs .accordion-group {
border-top:1px solid grey;
border-left:none;
border-right:none;
border-bottom:none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}