A quick Arduino Plotter Fix

The new Arduino IDE has a lot of powerful features. Unfortunately the plotter app is not one of them. It can be frustrating, but there is a fix.

Out of the box the Arduino 2.x plotter only displays 50 data points at a time. This is not enough for seeing many trends in sensors and other contexts.

This post is all about making the 2.x plotter wider so you can get the most out of this tool.

You have to do this every time you update your Arduino software!

Modding Software

To adjust the plotter we need to follow the solution posted in this Arduino issues thread: https://github.com/arduino/arduino-ide/issues/803, specifically this post: https://github.com/arduino/arduino-ide/issues/803#issuecomment-1338149431 . Hats off to the user Alex-Tsyganok  who posted the solution.

NOTE

The posts above gives us the strategy, but the path to the file we need to mod has changed since the solution was first shared. The above solution worked until at least Aug 2023. But as of October 2023 the needed file has moved.

The rest of this post is based on above using the current file structure.

What we need to do

Our goal is to make the plotter 500 points wide not 50. We are going to track down the serial plotter software inside Arduino IDE and mode the file so that 500 points are displayed.

Test COde

Cut, paste and upload the following code using IDE 2.x to test your plotter as you work through this mod. (This is not needed in IDE 1.x).

// simpleSquareWave generator
// plotter test code 

unsigned long interval = 50;
unsigned long start = 0;
unsigned long now = 0;

int STATE = 0;

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
}

void loop() {
  // put your main code here, to run repeatedly:
   now = millis();

   if ( (now - start) > interval){
      STATE = 1 - STATE;
      start+= interval;
   }

   Serial.println(STATE);

   delay(10); 
  
}

Video

Here are video instructions — text follows with search terms and paths spelled out.

PATH

Oct 2023 path:

Find the file in question here:

Arduino —> Contents —> Resources —> app  —> lib —> backend —> resources —> arduino-serial-plotter-webapp —> static —> js —> main.35ae02cb.chunk.js

ON OSX:

Find the Arduino IDE icon in finder and right click. Then click on SHOW PACKAGE CONTENTS to get to Contents folder then navigate as described above.

ON WINDOWS:

Right click on the Arduino IDE shortcut and select “Open file location”. From there follow the path

 \resources\app\lib\backend\resources\arduino-serial-plotter-webapp\static\js  

[thanks David Bouchard for confirming the path and the search tip.]

File to FIND:

Once you get to the .js file you are looking for:

 main.35ae02cb.chunk.js

Copy it — to back it up.

Then,

Open the original file in a text editor and find/search for the following line:

U=Object(o.useState)(50)

change that line by adding a zero (0) in the brackets to make 50, 500

U=Object(o.useState)(500)

Save the file. Do not change the name.

With some computers / setups you may need to change permissions to save. It will be ok. Go for it.

At this point the plotter is modded — you can test.

Permissions and Saving

You may need to enable ‘Write’ permission on the file to save your changes. If you try to save and it throws a warning about not being allowed, try the following:

OSX

In FINDER, right click the file and click Get Info or simply highlight the file and on keyboard click BUTTERFLY-I (butterfly is command).

The bottom of info window is permissions. Unlock the window (bottom right icon — enter password if you need to) – then for your user name OR everyone select Read and Write. Re-lock window for good measure.

You should now be able to save.

Windows

Navigate to the file we are modding and open settings. Different Windows versions may do this differently …

In File Explorer click on the file and then on keyboard press Alt-ENTER or with mouse ALT-Double-click this should give a settings window.

Link to additional methods if those don’t work (none of these are tested).

Once you have the settings window open … select SECURITY tab.

In that tab — select USERS in Group or user name frame, click EDIT (i don’t know which of those comes first), click the box for WRITE, ALLOW which should now be visible and click OK to save changes.

That should do it (i hope). You should be able to save.

Thanks to Rosalind P from tangible 2023 for help explaining the windows fix and sending along the images. All errors are mine.

Back to Arduino

In the Arduino IDE, with the above test code running, reopen the plotter and if all is well, you will see the 500 point wide plotter dancing before you.

Nailed it. Applaud self — get on with day.

If you have trouble opening the plotter, restart Arduino. And try again.

If it has really gone wrong — i did mess this up once to see what a worst case scenario might look like — you can reinstall Arduino 2.x.x and start again. No harm done.

Going Further

If you have not already done so, you can jump over to this building block and learn the Serial object basics.

Digital Outputs

Digital Outputs (DO) are one of the four contexts or types of circuits that are core to tangible.

If you have not yet looked at the tangible matrix Building Block, you should check it out now. It will introduce you to all four contexts.

Context :: Digital Output

do matrix

Digital refers to signals, circuits, or logical systems that only have two states; ON, OFF.

Input and Output are defined from the perspective of our Arduino.

Electrical signals generated by the Arduino and sent out to circuits are OUTPUTS.

So, Digital Outputs are ON/OFF signals (V) that move OUT of the Arduino.

Card

Your kit contains a reference card for digital outputs.

Each card indicates the context, command, circuit and offers a code sample.

digital output card

Video :: Digital Outputs

This first video is from a project that I completed with David Bouchard. An alternate course specific video can be found below.

tangible introduction to digital outputs. Please note — I extend the first build with an RGB LED in this video. If you have not looked at RGB LED you can just use 2 single color LEDs. It simplifies the circuit. I will post an RGB video ASAP.

Code samples from the video can be found below.

Get the Slides

Classic Example

The classic example of a digital output is a blinking LED.

Circuit

The classic circuit for testing a digital output is a simple LED and current limiting resistor. Circuit on left when state = 0, LOW, circuit on right when state = 1,HIGH.

Command :: digitalWrite()

The code that creates a Digital Output is:

    digitalWrite(pin, state);

where:
pin = 2 – 13 (inclusive)
state = LOW (0, Ground) OR HIGH (1, 5V)

Note 1: pin can also include 0,1; but these are reserved for communication, so best to avoid them. Note 2: pin 13 has the built in LED attached

The line of code above means:

Write a digital (on/off) signal to pin at level = state (0/LOW or 1/HIGH).

How Does it Work?

If a 1 or HIGH is written, then the voltage (V) at the pin is set to 5V.

If a 0 or LOW is written, then the voltage (V) at the pin is set to 0V (ground).

Important

In Arduino, we Write outputs. Image creating waterfalls on the selected pin.

Check the Arduino Docs for this topic

Code Sample – SINGLE LED

int ledPin  = 5 ; // led on pin 5

void setup() {
  pinMode ( ledPin , OUTPUT) ; // set direction
}

void loop() {

  digitalWrite ( ledPin , 1 ) ;   // turn LED on
  delay ( 1000 ) ;  // wait a bit == 1 second

  digitalWrite ( ledPin, 0 ) ;  // turn LED off  
  delay ( 1000 ) ; // wait a bit

}

CODE Sample – 2 colors of RGB LED

// code sample using B and R, of RGB led

int blueLED  = 5 ;  // connect PIN 5 to BLUE pin of RGB LED
int redLED   = 10 ; // connect PIN 10 to RED pin of RGB LED

void setup() { 
  // put your setup code here, to run once:
  pinMode ( blueLED , OUTPUT) ;   
  pinMode ( redLED  , OUTPUT) ; 
}

void loop() { 
  // put your main code here, to run repeatedly:

  //  blue
  digitalWrite ( blueLED , HIGH ) ;   // turn LED on 
  delay ( 1000 ) ;  // wait a bit == 1 second 
  digitalWrite ( blueLED, LOW ) ;  // turn LED off  
  delay  (1000 ) ; // wait a bit 

  //  red
  digitalWrite ( redLED , HIGH ) ; 
  delay ( 1000 ) ;  // wait a bit == 1 second 
  digitalWrite ( redLED, LOW ) ;  // turn LED off  
  delay  (1000 ) ; // wait a bit 
}

Going Further

Some follow up Arduino references:

pinMode

Serial

Digital Inputs

Digital Inputs (DI) are one of the four contexts or types of circuits that are core to tangible.

If you have not yet looked at the tangible matrix Building Block, you should check it out now. It will introduce you to all four contexts.

Context :: Digital Input

Digital refers to signals, circuits, or logical systems that only have two states; ON, OFF.

Input and Output are defined from the perspective of our Arduino.

Electrical signals generated in circuits and sent into the Arduino are INPUTS.

So, Digital Inputs are ON/OFF signals (V) that move INTO the Arduino.

Card

Your kit contains a reference card for digital inputs.

Each card indicates the context, command, circuit and offers a code sample.

Video :: Digital Inputs

Get the Slides

Classic Example

The classic example of a digital input is a button.

Circuit

The classic circuit for testing a digital input is a simple push button (tho any two wires could do). The circuit on left indicates electrical state (state = 0, LOW) when a button is unpressed . The circuit on right indicates electrical state (state = 1,HIGH) when button is pressed.

Command :: digitalRead()

The code that creates a Digital Input is:

    state = digitalRead(pin);

where:
pin = 2 – 13 (inclusive)
state = 0 OR 1 (gnd or 5V)

Note 1: pin can also include 0,1; but these are reserved for communication, so best to avoid them.

Note 2: pin 13 has the built in LED attached

The line of code above means:

Read the digital (on/off) state of pinX and store that reading in a variable called state.

How Does it Work ?

If the button is pressed, a 5V signal reaches pinX and a 1 ( conceptually a HIGH) is stored in state.

If the button is not pressed (released), a 0V or GND signal reaches pinX and a 0 ( conceptually a LOW) is stored in state.

Important

In Arduino, we read inputs.

Check the Arduino Docs for this topic

Code Sample

int buttonPIN = 12;
int state = 0;

void setup() {
  pinMode( buttonPIN, INPUT ); 
  Serial.begin(9600);
}
void loop() {
  state = digitalRead( buttonPIN ); 
  Serial.println(state);
}

Going Further

Some follow up Arduino references:

pinMode

Serial

Arduino :: Introductions

Understanding the Arduino Ecosystem

The Arduino platform is made up of a combination of microcontroller boards (hardware) and the Arduino IDE (Integrated Development Environment, software). There are countless variations on boards that have a wide range of capabilities. There are several official options for the code environment and several other platforms that support programming Arduinos.

In this course we will be using Arduino UNO microcontrollers and the latest version (2.x) of their desktop IDE.

Part 1 – Hardware :: What’s an Arduino ?

Microcontrollers are small computers designed to respond to and control connected circuits. These are distinct from microprocessors (the kind of computer chip inside your laptop of desktop). The microcontroller included in your kit is an Arduino Uno.

The Uno is a microcontroller chip (Atmega328) and some related hardware (USB, power regulation, breakout headers) all attached to a single board making it easy to use and program. The Uno is very popular in creative and maker communities. It is an excellent way to start exploring tangible.

Like all of our hardware components we need to be able to identify the device — or in this case it various hardware features, know if electrical limits and learn its representations.

Representation(s)

The Arduino symbol is complex, reflecting the sophistication of the device. We will come to understand all the parts over several weeks.

Arduino Power Limits

One must take care when powering the Arduino. It is a 5V max device. It can be very safely powered by USB — which is designed to provide 5V, 1A to connected devices.

When powered by your battery packs (9V) — the only safe way is to use your battery clip with the barrel jack.

Getting to know your Uno

Required Parts

  • Arduino UNO
  • USB cable
  • Battery Clip with Barrel

Landmarks

The Uno has several features that you should take the time to get familiar with. They are highlighted in the image below.

Video :: Getting to kNow Your Arduino

Get the slides

Part 2 – Software :: What is the Arduino IDE?

The second component of the Arduino system is the programming environment or IDE.

Context of tangible Coding

Before we download and set up the Arduino environment, we should take a moment to think about how it relates to other code contexts you may have used in the past.

Different computer languages and platforms have been developed to solve different problems.

The problems we want to explore in this course revolve around themes of tangible computing: how can we build an experience that knows when people are present? How can I make that thing move? How can I built an object that responds changes in temperature?

All of these examples exist in the real world (not in a web browser or on a screen). The Arduino platform was developed to explore exactly these real world experiences.

Where is the code?

Arduino code is compiled and embedded. As a result, there are a few programming steps that you may not have experienced on other platforms. This is especially true if you are coming from a web (P5JS) background, or from P5JS’s parent platform Processing.

Like many other platforms you will write code in a glorified text editor. However, to make your code run you need to get it inside your Uno (microcontroller).

The first step in this process is compiling. Compiling is an automated process that takes the Arduino-language syntax that you typed and converts it into a machine readable format. Syntax error checking happens at this stage. So typos and language bugs will often be caught here.

Once compiled, the code is UPLOADED into the Uno. Uploading literally moves the compiled machine code from your programming computer into the chip on the Uno board. Once uploaded it runs automatically. You will solve semantic or experience errors and bugs at this stage.

Required Software

You can download the required free software from the Arduino site.

Arduino software is open source and donations are requested. But you can hit the <Just Download> button.

Here is a quick walk through of the process (2024).

Once you have the software downloaded and installed you should test your tool chain.

Comparing Arduino 1.x and 2.x

Make sure you get the latest Version 1.X desktop IDE for your platform (at time of writing this was 1.8.16). We will not be using the Web Editor or the Version 2.0 IDE — which is in Beta. (You are encouraged to check out the V2.0 IDE as it will be standard very soon, but i will teach from 1.X).

As of 2024 we will use Arduino IDE 2.x in our introductory class. This version is a fork of the VSCode environment, so if you have experience there you will see some similarities (and a few differences).

This means that moving forward, older videos use a different interface than the one we are using in class. Some things are in different places. At first you may find the translation between versions a bit overwhelming – but it should be quick to overcome.

To help in this transition, I have made a video which highlights the difference between V1.x and V2.x for board selection, port selection, serial monitor access and functioning, and serial plotter access. You may want to watch it now or later as you move through this introduction.

As mentioned in the video — this is a bit chicken and egg — seeing the comparison before you know the tasks. You may decided to come back to this video at various times through out the course.

GET to know the Arduino SOftware (IDE)

This video was made in 2020. The above video will help you figure out differences if you are unsure.

There is a section in this video (below) that shows you how to turn on line numbers and code folding — these are both enabled by default in the 2.x versions. So nothing to do there. On OSX you can’t turn them off anymore, I assume that is the same across platforms ( let me know if I am wrong, or if your platform is different).

Toolchain overview, Upload code, Blink an LED.

In this video near the end, there is a reference to an assignment called a Circuit Selfie. In 2024 these are now called ARTifacts … check D2L for specific course tasks, because these have changed since the pandemic years.

Checkout the Arduino language

The Arduino language is a subset of C and C++ with some hardware specific (contextual) additions. Take a few minutes to check it out. It has many structures that should be familiar.

Advanced Considerations

If you are new to all of this, feel free to ignore this paragraph.

If you have coded C or C++ or even C# for screen based contexts (apps, phones, gaming) you will notice some features are not available. Arduino Unos are a very basic, single threaded, 8-bit RISC architecture. They do not support screens or multitasking. There is also no math co-processor so INTs largely rule the day.

Going Further

There are thousands of pages and sites dedicated to learning Arduino. Google is your friend but there are caveats. A lot of information dates very quickly. Older posts are very likely no longer current. These may be great for background, but specifics often change. If you search instructables — and you absolutely should — note that info there is not fact checked — not all instructables are complete, nor do they always make sense or even come to the conclusion suggested by their titles. That said, I am learning new stuff there all the time.

The Arduino Getting Started page gives a great overview of all the available boards (when we first used Arduino in this course there was only one board!)

All the built in examples ( board specific) are well documented and could be places to dive in.

Check out the official Arduino Playground for loads of detailed information. It will go well beyond this course.

If you want to go beyond our kits Sparkfun has lots of Arduino info. BUT BE AWARE that they are US based so buying directly comes with border broker and currency costs. Perhaps use this link for info only and check out some buying tips here before ordering form the states.

Buying Parts in Canada

This is a list of resources for buying additional parts if you so desire.  You should have most ( all?) of what you need in your kit but there are tons of other parts out there and you may want to explore some.  these are not endorsements — simply provided for reference.  Comparative shopping pays in this space.  

Canadian (shipping but no duty or import) 

Sometime in 2024 – Creatron seems to have crumbled. This is a big loss – they could be a bit socially cold and occasionally condescending, but they had a great range of products. Creatron (Toronto)  — https://www.creatroninc.com/ — post pandemic I think they are down to one store in Toronto.

As of sometime in 2022 or 2023 Elmwood Electronics has merged with pishop.ca This has resulted in slightly higher ticket price — but Canadian dollars and no exchange. Elmwood — https://elmwoodelectronics.ca/ — sell US suppliers (Sparkfun) without the direct import costs   — slightly higher prices than you will see on US site — cause they paid import/ shipping for you, and exchange.

You can still go to Supremetronic. 290 College St, Toronto, ON – (just west of Spadina)

Note: Supremetronic is part of Home Hardware and is located in the basement of this Home Hardware location.  AFAIK they are not online — but post-COVID they are an adventure and are totally worth a trip — i have not gone recently — let me know how it goes.

Robotshop ( Montreal )https://www.robotshop.com/ca/en/?___store=ca_en&___from_store=us_en

Solarbotics ( Calgary ) — https://solarbotics.com/

Buy A Pi—  https://www.buyapi.ca/. — mostly R-pis which are not the same thing.  But also some other interesting parts.

Canada Robotix — Toronto — https://www.canadarobotix.com/

Sayalhttps://secure.sayal.com/STORE2/shop.php

This is a good list — I have not used all suppliers listed here but give them a try. http://makercanada.ca/

Warehouse Suppliers

These companies are massive suppliers who sell to individuals.  Its an epic experience but you can save some money if you know what you want — these places take a bit search practice.  These have Canadian and US sites — check your location when shopping. 

https://www.digikey.ca/ — most of your kit came from here

Mouser Electronics

Newark Canada

US Suppliers

Shipping, duty and exchange are all ADDED costs for these.  If you find something on these sites, search the suppliers above before you buy and compare prices. 

Sparkfun. https://www.sparkfun.com/

— this is one of the original shops that supply hobby electronics — huge range of parts — lost of ideas.

Ada Fruit.  https://www.adafruit.com/

— this site has great tutorials and supports.  They are worth a look.  Arduino used to be their bread and butter but they have created their own product line — so older tutorials are more relevant to this course than newer ones, but may be dated in some cases.

— they are the originators of LED strips and rings — which are really cool and expressive devices — but they can be expensive.  

Code of Conduct

tangible is a community of learners. One of our core beliefs is that everyone has something to share. Comments and forums provide one channel for engagement and dialog. Your actions must meet our basic expectations outlined below.

0. Kindness: Be kind to everyone and treat them as they want to be treated. Virtual space is not an excuse to be a jerk. EVER. Online spaces still have real world consequences (outlined in school policies).

1. Inclusion: Be committed to decolonization and antiracist practice. Be open to listening & learning.

2. Boundaries: Respect the boundaries of everyone in the comment sections of this site.

3. Take care: Get outdoors, drink water – 8 cups, sleep – 8 hours. It makes everything tangible so much better.

4. Feedback: When offering critical feedback, do so with the belief that people are here to learn; when receiving critical feedback, listen to others with a willingness to learn.

5. Support: Do your best to support each other — think about what you are saying BEFORE you post.