Arduino Coding in Js Client agent

We will learn to code our Arduino, using JavaScript, and official Arduino create agent.

• Download Arduino js create agent (you may git clone also)
• Download and setup Arduino create agent
• Download nodejs,vscode... other tools you may require always.

Skip this if you have already downloaded

git clone https://github.com/arduino/arduino-create-agent-js-client.git

1. Pick up your nano/any arduino
2. Select your port ,bootloader,board
3. Now go to File>Preference>Enable verbose for compilation>Ok
4. Upload the sample blink code using arduino IDE

Now you would have got some more compilation output,they are not errors don't worry!

It looks like this

C:\Program Files (x86)\Arduino\arduino-builder -dump-prefs -logger=machine -hardware C:\Program Files (x86)\Arduino\hardware -hardware C:\Users\nepto\AppData\Local\Arduino15\packages -tools C:\Program Files (x86)\Arduino\tools-builder -tools C:\Program Files (x86)\Arduino\hardware\tools\avr -tools C:\Users\nepto\AppData\Local\Arduino15\packages -built-in-libraries C:\Program Files (x86)\Arduino\libraries -libraries C:\Users\nepto\Documents\Arduino\libraries -fqbn=arduino:avr:nano:cpu=atmega328old -vid-pid=1A86_7523 -ide-version=10815 -build-path C:\Users\nepto\AppData\Local\Temp\arduino_build_136900 -warnings=none -build-cache C:\Users\nepto\AppData\Local\Temp\arduino_cache_675429 -prefs=build.warn_data_percentage=75 -prefs=runtime.tools.avrdude.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\avrdude\6.3.0-arduino17 -prefs=runtime.tools.avrdude-6.3.0-arduino17.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\avrdude\6.3.0-arduino17 -prefs=runtime.tools.avr-gcc.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\avr-gcc\7.3.0-atmel3.6.1-arduino7 -prefs=runtime.tools.avr-gcc-7.3.0-atmel3.6.1-arduino7.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\avr-gcc\7.3.0-atmel3.6.1-arduino7 -prefs=runtime.tools.arduinoOTA.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\arduinoOTA\1.3.0 -prefs=runtime.tools.arduinoOTA-1.3.0.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\arduinoOTA\1.3.0 -verbose C:\Users\nepto\OneDrive\Desktop\Standard_Blink\Standard_Blink.ino
C:\Program Files (x86)\Arduino\arduino-builder -compile -logger=machine -hardware C:\Program Files (x86)\Arduino\hardware -hardware C:\Users\nepto\AppData\Local\Arduino15\packages -tools C:\Program Files (x86)\Arduino\tools-builder -tools C:\Program Files (x86)\Arduino\hardware\tools\avr -tools C:\Users\nepto\AppData\Local\Arduino15\packages -built-in-libraries C:\Program Files (x86)\Arduino\libraries -libraries C:\Users\nepto\Documents\Arduino\libraries -fqbn=arduino:avr:nano:cpu=atmega328old -vid-pid=1A86_7523 -ide-version=10815 -build-path C:\Users\nepto\AppData\Local\Temp\arduino_build_136900 -warnings=none -build-cache C:\Users\nepto\AppData\Local\Temp\arduino_cache_675429 -prefs=build.warn_data_percentage=75 -prefs=runtime.tools.avrdude.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\avrdude\6.3.0-arduino17 -prefs=runtime.tools.avrdude-6.3.0-arduino17.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\avrdude\6.3.0-arduino17 -prefs=runtime.tools.avr-gcc.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\avr-gcc\7.3.0-atmel3.6.1-arduino7 -prefs=runtime.tools.avr-gcc-7.3.0-atmel3.6.1-arduino7.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\avr-gcc\7.3.0-atmel3.6.1-arduino7 -prefs=runtime.tools.arduinoOTA.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\arduinoOTA\1.3.0 -prefs=runtime.tools.arduinoOTA-1.3.0.path=C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\tools\arduinoOTA\1.3.0 -verbose C:\Users\nepto\OneDrive\Desktop\Standard_Blink\Standard_Blink.ino
Using board 'nano' from platform in folder: C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\hardware\avr\1.8.4
Using core 'arduino' from platform in folder: C:\Users\nepto\AppData\Local\Arduino15\packages\arduino\hardware\avr\1.8.4
Detecting libraries used...
...
Sketch uses 924 bytes (3%) of program storage space. Maximum is 30720 bytes.
Global variables use 9 bytes (0%) of dynamic memory, leaving 2039 bytes for local variables. Maximum is 2048 bytes.

Now copy all and paste them in notepad📒

Press [Ctrl-F] and search for fqbn

It will return like below

-fqbn=arduino:avr:nano:cpu=atmega328old

Take note of that

arduino:avr:nano:cpu=atmega328old

now go to the FolderYouCloned\demo\app.jsx

Edit line 189-205 change port and set board to fqbn,

handleUpload() {
    const target = {
      board: 'arduino:avr:nano:cpu=atmega328old',/*Fqbn here*/
      port: 'COM7',/*change this to port*/
      network: false
    };

    this.setState({ uploadingPort: target.port });
    daemon.boardPortAfterUpload.subscribe(portStatus => {
      if (portStatus.hasChanged) {
        this.setState({ uploadingPort: portStatus.newPort });
      }
    });

    // Upload a compiled sketch.
    daemon.uploadSerial(target, 'serial_mirror', { bin: HEX });
  }

The demo app hard codes the sketch to download in serial_mirror.js

This can be replaced with the desired sketch by exporting the compiled binary from the Arduino app. See screenshot below. The exported binary is saved to the sketch folder ("Show Sketch folder" on the "Sketch" menu will display this folder). Note that the sketch needs to be writable (e.g. the example sketchs do not produce binaries in this sketch folder).

The exported binary needs to be base 64 encoded. The exported binary will have a hex or bin extension depending on the type of board you are using. e.g. for avr boards convert the file named <sketch>.ino.with_bootloader.standard.hex in the sketch folder.

You can convert the binary with the following command in WSL (Windows Subsystem for Linux):

base64 -w 0 sketch.ino.with_bootloader.standard.hex > exported.sketch.b64

Alternatively, using powershell:

[System.Convert]::ToBase64String([System.IO.File]::ReadAllBytes("c:\<path to sketch.ino.with_bootloader.standard.hex>")) | Set-Content -Path "C:\<path to exported.sketch.b64>"

The string in demo\serial_mirror.js needs to be replaced with the new sketch's base 64 string. i.e.

export const HEX = '<string from exported.sketch.b64>';

Now by this time we are at the end

The developer console in the browser displays CORS errors when trying to upload the sketch.

You can temporarily disable this security check by starting a separate instance of your browser. e.g. start Chrome with the --disable-web-security flag:

"c:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=c:\\windows\\temp

The demo app can then upload the sketch without any CORS errors.

See this other SO answer for an overview for why this fails.

The request to builder.arduino.cc that fails is required by the app to determine the command line and tool signature to use when programming the board.

npm run dev

run the command

since the local host runs on http://localhost:8000/ edit the config file

C:\Users\USER\AppData\Roaming\ArduinoCreateAgent\config.ini

and set origins = http://localhost:8000

that is

gc = std  # Type of garbage collection. std = Normal garbage collection allowing system to decide (this has been known to cause a stop the world in the middle of a CNC job which can cause lost responses from the CNC controller and thus stalled jobs. use max instead to solve.), off = let memory grow unbounded (you have to send in the gc command manually to garbage collect or you will run out of RAM eventually), max = Force garbage collection on each recv or send on a serial port (this minimizes stop the world events and thus lost serial responses, but increases CPU usage)
hostname = unknown-hostname  # Override the hostname we get from the OS
regex = usb|acm|com  # Regular expression to filter serial port list
v = true  # show debug logging
appName = CreateAgent/Stable
updateUrl = https://downloads.arduino.cc/
origins = http://localhost:8000 #this is where I have setted
#httpProxy = http://your.proxy:port # Proxy server for HTTP requests
crashreport = false # enable crashreport logging

Now open http://localhost:8000 in the window that opened in the last step

----------------------------------------------------------------------------------------------------------

There will be an upload sketch button on the website click it

And code gets uploaded to arduino!!!