Laaouatni/gcode.js

add the possibility to add a `Canvas` to see visually the movements

Laaouatni opened this issue · 1 comments

Laaouatni commented
  • you can create a new Class that is needed to simulate the movements of all G0/G1 called before
  • the array of G0/G1 classes, is inside the GcodeAPI.array (the array is created in this issue #9)
  • the simulation needs to be inside <canvas>
  • and need to use the canvas web APIs (context 2D)

but in the future, I think we will use normal CSS (since is more powerful, but maybe slow).

the functionalities to add (at least that can be called inside the same class):

  • create() method (internally):

    • this creates a new canvas element
    • append the canvas to the parent element
      • you need to make the user choose
        - what querySelector(); is the parent element
        - but if isn't defined by the user, use <body> as a default.
    • the user needs to choose also dimensions
      • if there isn't any dimension
        - get the other dimension (for example, "width is undefined" then get the height)
        - if none of that parameters is defined then use 500px.

  • drawLine() method:
    - it needs to create a line from the previous position (or 0 if there aren't any of them)
    - and go to the chosen position in G0/G1
    - and show the line using the .stroke() canvas API method

  • generate() method:

    • it needs to use the create() method
    • and loop the drawLine() method of all GcodeAPI arrays with .forEach

only generate() need to be used by the user,
but the other method only internally.

so in the docs add only generate();

⚠️ also solve the issues in MoveTo(); that don't get the previus position if you call MoveTo() 2+ times. (if you call only 1 time work fine, but 2 or more not, try solve that)

Laaouatni commented

now canvas will not be used anymore.

#15 now the drawing logic is implemented from zero with CSS only (so it will be 100% native, and easy to make it more custom)