{"id":24660037,"url":"https://github.com/liatemplates/gcode-preview","last_synced_at":"2025-03-21T06:23:29.906Z","repository":{"id":273572101,"uuid":"823621324","full_name":"LiaTemplates/gcode-preview","owner":"LiaTemplates","description":"gcode-preview template for liascript with either live coding or preview options","archived":false,"fork":false,"pushed_at":"2025-01-21T17:16:07.000Z","size":965,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T18:26:38.717Z","etag":null,"topics":["education","gcode","gcode-parser","gcode-visualizer","liascript","liascript-template","oer"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/LiaTemplates/gcode-preview/refs/heads/main/README.md","language":"G-code","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaTemplates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-03T11:37:06.000Z","updated_at":"2025-01-21T17:19:18.000Z","dependencies_parsed_at":"2025-01-21T18:26:49.554Z","dependency_job_id":"ae86a188-2551-445d-a358-add0d2d499c5","html_url":"https://github.com/LiaTemplates/gcode-preview","commit_stats":null,"previous_names":["liatemplates/gcode-preview"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fgcode-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fgcode-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fgcode-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fgcode-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaTemplates","download_url":"https://codeload.github.com/LiaTemplates/gcode-preview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244747050,"owners_count":20503309,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["education","gcode","gcode-parser","gcode-visualizer","liascript","liascript-template","oer"],"created_at":"2025-01-26T03:17:09.955Z","updated_at":"2025-03-21T06:23:29.880Z","avatar_url":"https://github.com/LiaTemplates.png","language":"G-code","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nauthor:   André Dietrich\n\nemail:    LiaScript@web.de\n\nversion:  0.0.1\n\nlanguage: en\n\nnarrator: UK English Male\n\ncomment:  This template integrates the gcode-preview npm package, allowing you to provide an interactive and educational experience for learners working with GCode, which is essential in the realm of CNC (Computer Numerical Control) machining.\n\nscript: ./dist/index.js\n\n@GCODE.preview: @GCODE.previewWithParams(style=\"width: 100%; height: 60vh\",```@0```)\n\n@GCODE.previewWithParams\n\u003cgcode-preview\n@0\ncode=\"@1\"\n\u003e\u003c/gcode-preview\u003e\n\u003cbr/\u003e\n@end\n\n@GCODE.eval: @GCODE.evalWithParams(style='width: 100%; height: 400px' animate=\"true\")\n\n@GCODE.evalWithParams: \u003cscript\u003e console.html(`\u003cgcode-preview code=\"@input\" debug=\"true\" @0 animate=\"true\" data-random=${Math.random()}\u003e\u003c/gcode-preview\u003e`);\"\"\u003c/script\u003e\n\n@GCODE.load.eval\n\u003cscript style=\"display: block\" modify=\"false\" run-once=\"true\"\u003e\n    fetch(\"@0\")\n    .then((response) =\u003e {\n        if (response.ok) {\n            response.text()\n            .then((text) =\u003e {\n                send.lia(\"LIASCRIPT:\\n``` gcode\\n\" + text + \"\\n```\\n@GCODE.eval\\n\")\n            })\n        } else {\n            send.lia(\"HTML: \u003cspan style='color: red'\u003eSomething went wrong, could not load \u003ca href='@0'\u003e@0\u003c/a\u003e\u003c/span\u003e\")\n        }\n    })\n    \"loading: @0\"\n\u003c/script\u003e\n@end\n\n@GCODE.load.preview\n\u003cscript style=\"display: block\" modify=\"false\" run-once=\"true\"\u003e\n    fetch(\"@0\")\n    .then((response) =\u003e {\n        if (response.ok) {\n            response.text()\n            .then((text) =\u003e {\n                send.lia(\"LIASCRIPT:\\n``` gcode @GCODE.preview\\n\" + text + \"\\n```\\n\")\n            })\n        } else {\n            send.lia(\"HTML: \u003cspan style='color: red'\u003eSomething went wrong, could not load \u003ca href='@0'\u003e@0\u003c/a\u003e\u003c/span\u003e\")\n        }\n    })\n    \"loading: @0\"\n\u003c/script\u003e\n@end\n--\u003e\n\n# GCode-Preview for LiaScript\n\n    --{{0}}--\nGCode-Preview is a LiaScript template that enables you to visualize GCode files directly within your LiaScript courses.\nThis template integrates the [gcode-preview](https://github.com/xyz-tools/gcode-preview) npm package, allowing you to provide an interactive and educational experience for learners working with GCode, which is essential in the realm of CNC (Computer Numerical Control) machining.\n\n      {{1}}\nWhat is GCode? https://en.wikipedia.org/wiki/G-code\n\n    --{{1}}--\nGCode is a language used to control CNC machines, such as milling machines, lathes, 3D printers, and laser cutters.\nIt is a vital tool for the manufacturing and prototyping processes. GCode commands provide instructions to the machine's motors, defining the movements, speed, rotation, and other parameters necessary for the precise creation of parts and components.\nFeatures of the GCode Preview Template\n\n    --{{2}}--\nThis template offers a user-friendly way to embed GCode visualizations within your LiaScript courses. The key features include:\n\n      {{2}}\n- Interactive GCode Viewer: Display and interact with GCode files in real-time.\n- Customizable Viewer Settings: Adjust visualization parameters to suit your teaching needs.\n- Embedded Examples: Include GCode examples directly in your course for hands-on learning.\n\n    --{{3}}--\nThere are three ways to use this template.\nThe easiest way is to use the import statement and the url of the raw text-file of the master branch or any other branch or version.\nBut you can also copy the required functionality directly into the header of your Markdown document, see therefor the last slide. And of course, you could also clone this project and change it, as you wish.\n\n      {{3}}\n\n1. Load the macros via\n\n   `import: https://raw.githubusercontent.com/liaTemplates/ABCjs/main/README.md`\n\n   or use this specific version and you course will be stable:\n\n   `import: https://raw.githubusercontent.com/LiaTemplates/ABCjs/0.0.1/README.md`\n\n2. Copy the definitions into your Project\n\n3. Clone this repository on GitHub\n\n## `@GCODE.preview`\n\n    --{{0}}--\nIf you want to preview an example, just use the macro `@GCODE.preview` and add this to the head of a code block.\nThis way the entire code will be displayed and visualized.\n\n```` markdown\n``` gcode @GCODE.preview\nG0 X0 Y0 Z0.2\nG1 X42 Y42 E10\nG0 X100 Y100 Z20.2\nG1 X42 Y42 E10\n```\n````\n\n``` gcode @GCODE.preview\nG0 X0 Y0 Z0.2\nG1 X42 Y42 E10\nG0 X100 Y100 Z20.2\nG1 X42 Y42 E10\n```\n\n## `@GCODE.previewWithParams`\n\n    --{{0}}--\nIf you need more control over the visualization, you can use the `@GCODE.previewWithParams` macro.\n\n```` markdown\n``` gcode @GCODE.previewWithParams(style=\"width: 100%; height: 200px;\")\nG0 X0 Y0 Z0.2\nG1 X42 Y42 E10\nG0 X100 Y100 Z20.2\nG1 X42 Y42 E10\n```\n````\n\n``` gcode @GCODE.previewWithParams(style=\"width: 100%; height: 200px;\")\nG0 X0 Y0 Z0.2\nG1 X42 Y42 E10\nG0 X100 Y100 Z20.2\nG1 X42 Y42 E10\n```\n\n    --{{1}}--\nBut you can also pass most of the parameters directly to the `gcode-preview` element, like this:\n\n      {{1}}\n```` markdown\n``` gcode @GCODE.previewWithParams(style=\"width: 100%; height: 200px;\" backgroundColor=\"green\" renderTravel=\"true\" renderTubes=\"true\" lineWidth=\"5\"  lineHeight=\"5\")\nG0 X0 Y0 Z0.2\nG1 X42 Y42 E10\nG0 X100 Y100 Z20.2\nG1 X42 Y42 E10\n```\n````\n\n      {{1}}\n``` gcode @GCODE.previewWithParams(style=\"width: 100%; height: 200px;\" backgroundColor=\"green\" renderTravel=\"true\" renderTubes=\"true\" lineWidth=\"5\"  lineHeight=\"5\")\nG0 X0 Y0 Z0.2\nG1 X42 Y42 E10\nG0 X100 Y100 Z20.2\nG1 X42 Y42 E10\n```\n\n## Supported parameters\n\n``` ts\nanimate?: boolean\nallowDragNDrop?: boolean\nbackgroundColor?: string\nbuildVolume?: { x: number; y: number; z: number }\ndebug?: boolean\ndevMode?:\n    | boolean\n    | {\n        buildVolume?: boolean | false\n        camera?: boolean | false\n        devHelpers?: boolean | false\n        parser?: boolean | false\n        renderer?: boolean | false\n        statsContainer?: HTMLElement\n      }\ndisableGradient?: boolean\nendLayer?: number\nextrusionColor?: string\nextrusionWidth?: number\ninitialCameraPosition?: number[]\nlastSegmentColor?: string\nlineHeight?: number\nlineWidth?: number\nminLayerThreshold?: number\nnonTravelMoves?: string[]\nrenderExtrusion?: boolean\nrenderTravel?: boolean\nrenderTubes?: boolean\nstartLayer?: number\ntoolColors?: Record\u003cnumber, string\u003e\ntopLayerColor?: string\ntravelColor?: string\n```\n\n## `@GCODE.evalWithParams`\n\n    --{{0}}--\nIn order to utilize this lib also to dynamically evaluate gcode, you can simply attach the following macro to the end of a code-block.\nThe parameters you can pass are the same as in the previous example.\nAfter executing the example, you can also resize the output terminal by clicking onto bottom right corner.\nIf you then rerun the execution again, the preview will use more space.\n\n```` markdown\n``` gcode\nG0 X0 Y0 Z0.2\nG1 X42 Y42 E10\n```\n@GCODE.evalWithParams(extrusionColor=\"green\" backgroundColor=\"#222\" style=\"width: 100%;\" animate=\"false\")\n````\n\n\n``` gcode\nG0 X0 Y0 Z0.2\nG1 X42 Y42 E10\n```\n@GCODE.evalWithParams(extrusionColor=\"green\" backgroundColor=\"#222\" style=\"width: 100%;\" animate=\"false\")\n\n## `@GCODE.load`\n\nIf you need to load larger code-blocks that you do not want to add to Markdown, because they might be too gigantic, then you can use the `@GCODE.load...` macro.\nIt comes in two flavours, a preview and an eval macro.\nThe usage of the link macro format allows you to embed either absolute or relative examples.\nLiaScript will check for the correct origin and add this if needed.\n\n``` markdown\n@[GCODE.load.eval](./example/eiffel-tower.gcode)\n\n---\n\n@[GCODE.load.preview](./example/eiffel-tower.gcode)\n```\n\n@[GCODE.load.eval](./example/eiffel-tower.gcode)\n\n---\n\n@[GCODE.load.preview](./example/eiffel-tower.gcode)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fgcode-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliatemplates%2Fgcode-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fgcode-preview/lists"}