4

I recently started experimenting with sending G-code to my printer via USB cable. I downloaded Printrun and it works great! However, I want to be able to do this from my web browser because the app im developing is web based.

I found this Chrome app called chrome-gcode-sender that does this but it unfortunately no longer works because Google sadly ended support for all Chrome apps in June 2022.

The maker of this app suggested on GitHub that the same thing should be achievable using Web Serial API. I have been trying to get this to work for almost two days now but with little success. I found several tutorials online about how to use Web Serial API but nothing for this specific use case. Here is a sample of the code I have developed so far, just a simple HTML document with some vanilla JavaScript:

<html>
  <head>
    <title>Web Serial API Demo</title>
  </head>
  <body>
    <button id="connect">Connect</button>
    <script>

    var device
    let button = document.getElementById(&quot;connect&quot;)

    document.addEventListener(&quot;DOMContentLoaded&quot;, event =&gt; {
        button.addEventListener(&quot;click&quot;, async() =&gt; {
            try {

                device = await navigator.serial.requestPort()

                await device.open({baudRate: 9600})

                console.log(&quot;Opened: &quot;, device)
                console.log(&quot;Info: &quot;, device.getInfo())

                const encoder = new TextEncoder()
                const writer = device.writable.getWriter()

                await writer.write(encoder.encode(&quot;G28&quot;))

                writer.releaseLock()

                await device.close()

            } catch (error) {

                console.log(error)

            }
        })
    })

&lt;/script&gt;



</body>
</html>

When I click the 'Connect' button and select the device I want it appears to connect fine. However, when I try to send a simple G-code like G28 (autohome) the printer does nothing. If anyone has an idea how I could get this working please let me know! Im also 100 % open to an alternative approach! The main idea is just to be able to send G-code from a browser to a printer.

Notes:

  • I've also tried experimenting with Web USB API but no luck here as well.
jgphilpott
  • 171
  • 8

1 Answers1

3

Finally, got it! I was very close, but two changes needed to be made to the above code for the example to work.

  1. The baudRate needed to be changed to 115200. This value can vary from printer to printer but 115200 is fairly common, and thus a good default. If you find it's not working for you try looking up the recommended baudRate for your printer/firmware version.

  2. I needed to add \n to the end of my G-code string. In this example there was only one command, G28\n but if you want multiple commands in a single string you will need to add \n after each one.

Awesome!!! It is possible to send G-code to a printer from a web browser with just a few lines of JavaScript!

Update: If anyone is interested I built this simple terminal-style app. It should work with any compatible browser and is also usable offline if you clone the repo and open the sender.html file in your browser.

jgphilpott
  • 171
  • 8