I'm interested in how to draw onto the gcodeviewer (or a canvas overlay of the gcodeviewer) to provide some clickable functions. I'm a bit at a loss for how to convert tracked gcode coordinates into pixel positions in the gcodeviewer. Obviously there needs to be some transformation based on zoom level, etc., but I lack the knowledge to accomplish this. Can someone point me to examples for how to do this?

# Gcode coordinates in gcodeviewer

Imagine a `G0 X60 Y60`

on my printer (which would be centered on my 120x120 bed). The canvas for the viewer is 568x568 in width/height, so that means that there should be a dot in the center of that at (568/2, 568/2). We should be able to ignore that the units in one system are millimeters and the new system are pixels.

For my printer, it homes in the back/left corner so a bigger value of Y means that the hotend assembly comes toward me.

Without factoring in the zoom aspect of this, it seems like the math then is...

## Map the four outermost corners and the center

From coordinates | => | To Canvas |
---|---|---|

G0 X0 Y0 | => | left: 0, top: 0 |

G0 X120 Y120 | => | left: 568, top: 568 |

G0 X0 Y120 | => | left: 0, top: 568 |

G0 X120 Y0 | => | left: 568, top: 0 |

G0 X60 Y60 | => | left: 284, top: 284 |

There's a common method of transforming between two systems by setting things up to "cross multiply":

```
60 x
--- = ---
120 568
```

Here, we know that 60:120 is the ratio of the X coordinate versus the maximum X coordinate. The destination system is from 0 to 568 so we're looking for the corresponding value x which is the canvas offset equivalent to the original value of 60 on the bed.

To find x, multiply (60 * 568) / 120 and solve. So the midway point in the new system is 284 which we knew intuitively before. But now we have the math for anything else.

(originalX * 568) / bedXmaximum = canvas left coordinate

(originalY * 568) / bedYmaximum = canvas top coordinate

**foosel**#3

It's been ages since I list fiddled around in this, but after a quick look just now and a bit of jogging my memory I think the secret was that gcode coordinates translate 1:1 on pixel position (so one pixel distance equals one mm distance), and zoom and offset are just done through the transformation.

The interesting bits are `applyOffsets`

and `applyZoom`

(plus `applyInversion`

in case of a coordinate swap) in https://github.com/foosel/OctoPrint/blob/61431c0df3fb571bd5fdaa6a910e4366a2145c51/src/octoprint/static/gcodeviewer/js/renderer.js. Transforms get tracked by wrapping the context and overloading the transform modifying operations (see `trackTransforms`

in the same file).

**paukstelis**#4

Thanks for the info. I am slowly making some progress on this. I'm trying to mark positions of objects in CancelObject plugin so they can be cancelled directly in the gcodeviewer.