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

Add support for high-DPI screens to gcode renderer

Browse source 
window.devicePixelRatio is used to scale the canvas, extrusion line
width, retract spot size and mouse event position.
This commit is contained in:
Lucas Clemente 2015-04-18 12:10:24 +02:00
parent a996f7b6fb
commit 579fd3bbfb
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -121,6 +121,7 @@
* Added support for rectangular printer beds with the origin in the center ([#682](https://github.com/foosel/OctoPrint/issues/682)
and [#852](https://github.com/foosel/OctoPrint/pull/852)). Printer profiles now contain a new settings ``volume.origin``
which can either be ``lowerleft`` or ``center``. For circular beds only ``center`` is supported.
* High-DPI support for the GCode viewer
### Bug Fixes

17
src/octoprint/static/gcodeviewer/js/renderer.js
View file

@ -14,6 +14,7 @@ GCODE.renderer = (function(){
var gridStep=10;
var ctxHeight, ctxWidth;
var prevX=0, prevY=0;
var pixelRatio = window.devicePixelRatio || 1;
var layerNumStore, progressStore={from: 0, to: -1};
var lastX, lastY;
@ -32,9 +33,9 @@ GCODE.renderer = (function(){
showMoves: true,
showRetracts: true,
extrusionWidth: 1,
extrusionWidth: 1 * pixelRatio,
// #000000", "#45c7ba", "#a9533a", "#ff44cc", "#dd1177", "#eeee22", "#ffbb55", "#ff5511", "#777788"
sizeRetractSpot: 2,
sizeRetractSpot: 2 * pixelRatio,
modelCenter: {x: 0, y: 0},
differentiateColors: true,
showNextLayer: false,
@ -136,6 +137,10 @@ GCODE.renderer = (function(){
canvas = jqueryCanvas[0];
ctx = canvas.getContext('2d');
canvas.style.height = canvas.height + "px";
canvas.style.width = canvas.width + "px";
canvas.height = canvas.height * pixelRatio;
canvas.width = canvas.width * pixelRatio;
ctxHeight = canvas.height;
ctxWidth = canvas.width;
lastX = ctxWidth/2;
@ -149,8 +154,8 @@ GCODE.renderer = (function(){
document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
// remember starting point of dragging gesture
lastX = event.offsetX || (event.pageX - canvas.offsetLeft);
lastY = event.offsetY || (event.pageY - canvas.offsetTop);
lastX = (event.offsetX || (event.pageX - canvas.offsetLeft)) * pixelRatio;
lastY = (event.offsetY || (event.pageY - canvas.offsetTop)) * pixelRatio;
dragStart = ctx.transformedPoint(lastX, lastY);
// not yet dragged anything
@ -159,8 +164,8 @@ GCODE.renderer = (function(){
canvas.addEventListener('mousemove', function(event){
// save current mouse coordinates
lastX = event.offsetX || (event.pageX - canvas.offsetLeft);
lastY = event.offsetY || (event.pageY - canvas.offsetTop);
lastX = (event.offsetX || (event.pageX - canvas.offsetLeft)) * pixelRatio;
lastY = (event.offsetY || (event.pageY - canvas.offsetTop)) * pixelRatio;
// mouse movement => dragged
dragged = true;