laaouatni / gcode.js Goto Github PK

basically a gcode library for making the making gcode program easily and efficiently for CNC machines.

License: MIT License

JavaScript 30.06% HTML 63.71% CSS 6.23%

gcode cnc javascript cnc-milling cnc-programming gcode-editor gcode-generation gcode-interpreter gcode-viewer gcode-visualizer

gcode.js's Introduction

Hi 👋, I'm Anas Laaouatni

I'm a ~~Junior~~ Web Developer.

⬇ My ⭐ Favourite Stack: ⬇

SvelteKitJS + TailwindCSS + TypeScript

Now I am learning ARDUINO C++: https://www.tinkercad.com/users/3eC5gZvvAcy?type=circuits

maybe you saw me there on Stack Overflow

My Journey on FreeCodeCamp.org

flowchart LR
    d[Programming Courses I did]

    d   --> d0[FreeCodeCamp]

    %% native --> langs
    subgraph Native Web Languages Learned
        c12(JavaScript)
        c11(CSS)
        c10(HTML)
    end

    subgraph FreeCodeCamp
    %% Freecodecamp --> Courses
        d0  --> d01[Responsive Web Design]
        d0  --> d02[JavaScript Algorithms and Data Structures]
        d0  --> d03[Front End Development Libraries]
        %% FCC Responsive Web Design --> Concepts
        subgraph fcc1 [Freecodecamp's Responsive Web Design]
            d01 --> c11 
            d01 --> d0101[HTML5]
            d01 --> d0102[CSS3]
            d01 --> d010[Applied Visual Design]
            d01 --> d011[Applied Accessibility]
            d01 --> d012[Responsive Web Design Principles]
            d01 --> d013[CSS Flexbox]
            d01 --> d014[CSS Grid]

            d0101 --> c10
            d0102 --> c11
        end

        %% FCC JS --> Concepts
        subgraph fcc2 [Freecodecamp's JavaScript Algorithms and Data Structures]
            d02 --> d020[ES6]
            d02 --> d021[Regex]
            d02 --> d022[Debugging]
            d02 --> d023[Basic Data Structures]
            d02 --> d024[Basic Algorithm Scripting]
            d02 --> d025[Object Oriented Programming]
            d02 --> d026[Functional Programming]
            d02 --> d027[Intermediate Algorithm Scripting]
            d02 --> d028[Functional Programming]

            d02 --> d0201[Basic JavaScript]
            d0201 --> c12
        end

        %% FCC Front End Dev --> Concepts
        subgraph fcc3 [Freecodecamp's Front End Development Libraries]
            d03 --> d030[Bootstrap]
            d03 --> d032[SASS]
            d03 --> d034[Redux]
            d03 --> d031[jQuery]
            d03 --> d033[React]

            d034 --> d033
            d03 --> c0

            subgraph Frameworks
                c0[Frameworks] --> d033

                c0 --> favLangs

                %% favourite ones --> langs
                subgraph favLangs [Favourite Languages]
                    c011(SvelteKit);
                    c012(Tailwind CSS);
                end
            end
        end
    end

    d031 --> c12

    %% tailwind --> programming languages related
    c012 --> c11

    %% sveltekit --> languages used
    c011 --> c10  
    c011 --> c11 
    c011 --> c12 

    %% FCC langs --> CSS
    %%%% Responsive 
    d013[CSS Flexbox]   --> c11
    d014[CSS Grid]      --> c11
    %%%% Frontend
    d030                --> c11
    d032                --> c11

my FreeCodeCamp Certifications

Front End Development Libraries

JavaScript Algorithms and Data Structures

Responsive Web Design

My Social Media

My Skills

My Tools

My Github Stats

Time Spent Coding

gcode.js's People

Contributors

Stargazers

Watchers

Forkers

barionleg

gcode.js's Issues

`bottom` and `right` show wrong UI lines in Gcss simulator (but `left` and `top` correct)

Describe the bug
right, and bottom in MoveTo don't work in the CSS generator

they need to be attached, and the number ::before need to be in the correct x,y (displayed in the popup)

Screenshots

❌

for (let i = 0; i < 9; i++) {
  a.moveTo({
    left: 50,
    bottom: i * 10,
  });
}

but with top is ok ✅

❌ there is a bug with right

for (let i = 0; i < 9; i++) {
  a.moveTo({
    right: 50,
  });
}

❌ also here the same bug with right

for (let i = 0; i < 9; i++) {
  a.moveTo({
    right: 50,
    top: i * 10,
  });
}

Css gcode visualiser/simulator.

since <canvas> seems a little bit difficult to make it custom to me.
I suggest using the classic way, so use native CSS instead.
all the information for this implementation needs to be done
- inside a new class called Gcss.js
- this means all the functionalities need to be done from scratch (zero)
  - but one of the advantages in the end:
  - is completely animated using CSS transitions, or CSS animations keyframes
  - colors, background, etc... can be used to make it more custom.
the Gcss implementation needs to
- have a height/width chosen by the user (like canvas)
  - if the user in the OBJ parameter
    - inserted a height (number, without "px"), then set the height correctly
    - if isn't inserted correctly, then use the width for the height (for making a perfect square)
    - the same logic for also width (and get the height, and so on...)
    - ... if anything isn't inserted by the user, use a default 500px (we can decrease or change that value in the future, for now, 500 is ok)
- have the possibility to choose what is the parent element:
  - if the parent element isn't settled then we will use #app (at least in react, and vite its default parent)
  - if #app isn't existing then we will use <body> that always exists in normal HTML.
create a new <div> where all the logic will be inside that (like canvas)
that <div> needs to have an ID:
- at least for now is ID, in the future maybe a class
- for making the user change some properties in CSS easily. (like box-shadow, or border-radius, etc...)
inside the div, we need to have the possibility to draw lines
- and since lines that some data inside every one of them:
  - I suggest using a new class called Line
    - at every created line with the new keyword:
      - create a new line element with the document.createElement("div")
        
        now you can store that element, inside a this. called this.lineElement
        
        once we are stored this, we can use the lineElement to do all the logic we want inside the same class (accessing directly the line)
    - the Line, need to get also 2 OBJs to calculate:
      - this.currentObj
      - this.previusObj
        
        you can get it by using the array[] GcodeAPI and decreasing by one the index and get that.
    - for getting the length of the line:
      - we need to check 3 conditions:
        
        is moving on the X axis only?
        
        is moving on the Y axis only?
        
        is moving on both X/Y?
        
        this is more difficult to calculate since we need to use some triangle formulas.
        
        in this case pitagora formula can work fine for getting the hypotenuse.
        
        with code, we will use Math built-in APIs:
        
        Math.sqrt() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt
        
        Math.pow() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
        
        is not moving? (if not moving then return a simple 0)
    - for getting the angle:
      - in the calcolateLenght() logic,
        
        add 3 this. boolean variables (that can be true or false):
        
        this.sameX if is moving on Y
        
        this.sameY is moving on X
        
        all these 2 of before to true if we use the triangle formula (for oblique movements)
    - the user doesn't need to manually get the height and do things:
      - we need to create another method called generate:
        
        this will loop on all GcodeAPI.array and inside it call this.DrawLine()
        
        GcodeAPI.array.forEach((_posObj, _index) => { this.drawLine(_posObj, _index); });
        
        As you see INDEX is important here, so we can get the actualOBJ and previusOBJ easily inside the class.
  - every method that has a complex logic
    - needs to be in a separate file,
    - then exported with default
    - and then get imported when it's needed by passing some parameters (we need in the future dedicated docs for telling what parameters to use, and what not),
    - to not make it easy to change the correct code, only if he wants to
    - and easy to integrate one logic inside the parent class or any other thing in the future.
also we need to add a key="" attribute in HTML for every line.
- the key needs a number, and that number is the index. (the first element is 0)

<div key="0"></div>
<div key="1"></div>

- then we can use the key in a ::before CSS pseudoelement:

 .Gline::before {
     content: attr(key);
}

- the before element needs to be at the end of the line
- and centered to the point of the end using translate(-50%, -50%)
the CSS doesn't need to directly change the style:
- but all the CSS properties need to be a CSS var (so the user can change when he wants or modify them easily)

<div style="--line-color: red; --line-width: 100px; --line-helloworld: 10px;"></div>

on the div, we need to add a data-line attribute
- that needs to contain an OBJ
  - with the data
  - data to display on hover in the popup.
  - also the obj needs to be prettified so have some tabs/spaces before.

Full rewrite and Refactoring

I created an organization on GitHub, where we would rewrite this program from scratch using Svelte

if you have any suggestions or ways to refactor/improve you can comment to contribute

https://github.com/gcodeJS/Gcode.js

generation of lines need to have animation.

Is your feature request related to a problem? Please describe.
the generation of the CSS lines is cool, but what about implementing animation in them?

Describe the solution you'd like

in the start, the Gcss canvas need to not have any visible line,
then the first line needs to appear, and then the second, and a loop like this...
the animation consists in changing the width from 0 to 100%.
also in the animation change the opacity.

something like this:

make website faster by not using custom font, also minify CSS with vite.js

Describe the bug

Google Fonts take a long time to load, so maybe we can use a native font, without the need for external calls.
CSS doesn't get minified at all, so we need to find a way to make vite.js on npm build minify also CSS for us.

89% of performance now
and one of the opportunities that lighthouse dev tools suggest is not using google font.

make popup transition when hovering another Gline.

Is your feature request related to a problem? Please describe.
make the popup transition, when I move from one line to another.

✅ something like this:

X, Y, Z with Previous Coordinate saved in class

in this project we need to use class();, so it will not be repetitive and also customizable
the code needs to be split into other files, so every file does one thing or has one class()
the program needs to have some CNC Gcode commands like:
- G0
- G1
syntax needs to be like this:
- new G1();
the Gcode class command (like G0 or G1) needs to get these parameters:
- X coordinate
- Y coordinate
- Z coordinate
not all parameters are necessary:
- for example, I can give the X and Y values, but not the Z value (if I only need 2d moves).
the order of parameters isn't important
- this means that the user doesn't need to write always with X, Y, and Z order.
  - this is the following order of parameters to support:
    - X, "", ""
    - X, Y, ""
    - X, Y, Z
    - Y, "", ""
    - Y, X, ""
    - Y, X, Z
    - Y, Z, X
    - Y, Z, ""
    - Z, "", ""
    - Z, X, ""
    - Z, X, Y
    - Z, Y, X
    - Z, Y, ""
if a coordinate isn't defined:
- then we need to set that "X or Y or Z" to the "previous value" that was written by the user
- if the previous value there isn't:
  - then we will set that value to ZERO (0)
every time that we get the code from our API we need to set the last position X or Y or Z to the last value written by the user.
getCode() need to return a string like this: G1 X10 Y20 Z0
- here the order is important!
  - the user can use the order that he wants, but the script needs to return the correct order.

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

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)

Popup don't need to be writed in html. but automatically generated

we need to simplify the life of the user,
- so this is why the popup HTML elements don't need to be written in HTML.
- but be inserted only one time at the start of the program.
  - not at the start, but only when the user uses Gss for visualizing/animating the code. (using static keyword)
the popup needs to be inserted inside the parent container
- parentHtmlContainer: that can be #app, or <body> or custom div.

another thing to solve is... adding a zIndex to all lines, from bigger to smaller. (so we don't have any more UI bugs)

for example:

if we have 5 lines.

the first line is z-index: 5;, then 4, 3, 2, 1

add Popup on hover

when users hover over the Line
- we need to see a popup
  - which contain some data inside it
for the positioning of the popup:
- just use an online library like https://floating-ui.com/
  - and follow their docs.

make sure to add also the arrow, and style all the things (docs are ok for doing that)

⚠️ EDIT:

in a change I created a mini-bug that don't make the angle be visible

now is solved in #21

BUG: `MoveTo()` method don't get the G0/G1 object from constructor

the problem happens when you write something similar to this:

G0({x:10}).moveTo({left: 20});

this should return X30 because 10+20 = 30...
but in this case, seems that it does always 0+20 = 20 (so maybe it doesn't get the G0() object?)

what I see is that G0() constructor parameter object gets ignored completely once you add MoveTo()

but without MoveTo() the x then get read correctly.

MoveTo have inverted bottom, top (top is doing the bottom functionality, and viceversa)

the first G0 needs to be displayed also (before it gets excluded)
the ::before number visualizer, need to be on the right since the first one will be on the left.

in the bottom/top position logic, is inverted :)

change the top logic to the bottom,
and bottom to the top logic

case "bottom"
    // put the correct logic (now you are using top logic here)
case "top"
   // put the correct logic (now you are using bottom logic here)

also, use top/left for moving
- instead of transform. this will make use of not having a lot of bugs now and in the future.

save all created `G0/G1` in a array on ParentClass

we need to implement this:
- when the user calls a class by using new (for example new G0({});)
- then we need to push the chosen class inside an array (that need to be inside Parent Class)
- the array needs to not be reset, but have always its values (for solving this we can use a static variable)

why do we need to create this array?

this array is needed because in the future we can use it to make a simulator (with native canvas APIs, or CSS libraries)

in the end, we can have in the array something like this:

// [{...}, {...}, {...}, {...}]

that we can iterate on it with for loop or something similar to create something more interesting:

array.forEach(obj => console.log(obj.x););

also Make sure other methods are inside separate files if you can (not important, but if you can is better)

add `vite.js` to the example html project

add vite.js to the example html project

https://vitejs.dev/

add `vitest` library to the project

I suggest to not use anymore the old good console.log() for testing like you are doing in this program.
instead, try using visit https://vitest.dev/ and understand more about it (to make more professional tests)

popup is visible outside parentElement

Describe the bug

the popup is always behind the lines, it needs to have a higher index (like 9999)
the popup goes outside the parent element
lines need to be bigger, and easy to see.

To Reproduce
Steps to reproduce the behavior:

refresh the page
go near the line 1 or 0
hover on the line

Expected behavior

it needs to be always on top of lines if I hover.
Do not go outside the parent element if centered, etc...

Screenshots

Desktop (please complete the following information):

OS: Windows 11
Browser: Chrome
Version: 104.0.5112.82

Smartphone (please complete the following information):

Device: Samsung J6+
OS: Android 11
Browser: Chrome
Version: undefined

Additional context
Add any other context about the problem here.

CSS code need to be in different files

split the CSS codes in different files

then use @import to get them and put them all in one file.

vite will automatically bundle them in inside HTML in a style tag

`MoveTo()` method X, Y, Z

a new method needs to be created called moveTo()
moveTo() get as paramters:
- an object of some data (similar to CSS):
  - left or right:
    - this need to be similar to how the position CSS property work in CSS language (but in javascript)
    - change Position on X axis:
      - left add the number as value to the current X position
      - right subtract the number as value to the current X position
    - if there are 2 contrasting keywords such as {left: 10, right: 20}:
      - ✅we must take the last key into consideration
      - ❌without using the first (as happens in the CSS language)
  - top or bottom:
    - this need to be similar to how the position CSS property work in CSS language (but in javascript)
    - change Position on the Y axis:
      - bottom add the number as value to the current X position
      - top subtract the number as value to the current X position
    - if there are 2 contrasting keywords such as {top: 10, bottom: 20}:
      - ✅we must take the last key into consideration
      - ❌without using the first (as happens in the CSS language)

why do we want to use the CSS naming convention in our project?

this is because it will make the program easier to understand for those who know already CSS.

also the concept of last get used, is called Specificity in CSS (you can search about it in MDN)

try create a separate class for the specificy logic.

⚠️ for now make this only relative

but in the future, maybe we can use absolute if we create a G54 class (but this isn't in the plan for now)

for implementing relatively Z position moving:
- use a key in the object called zIndex that seems more readable to me.
- same logic as the previous ones, but zIndex doesn't have contrasting keywords (so it will be easy to implement)

all the files should be tested
- at least for now with console.log()s manually
  
  then I think we can use vitest or jest external library to test (but is not planned at least at the moment)
the tests need to have also a for loop testing for the moveTo() method
also put a boolean var that if is true then it makes the tests start, or if are false to not start