This is a Serial monitor I developing with every feature I ever saw on various other monitors or found useful to have. Fully developed in Javascript with Node and Electron. I made it after using many serial monitors and not finding any of them complete, always missing some feature, so I decided to make my own serial monitor that would have all the features needed for a serial monitor.
Every basic feature:
Log file for the received data, with the option to choose whether to overwrite or append to the file
Graph for the data received on the serial port:
Parsers:
a deeper explanation on how to use the custom parser feature can be found later on in this readme file
Text finder on the whole page from electron-find from TheoXiong
Optional connection status change display
Optional disconnection on Boot message from ESP series microcontrollers
Standalone ESP Exception Decoder
The installation process is very simple, you simply download the most recent version on the releases page. A Windows version is already built in a zip file, but if you use another platform for now your best option is to build the version yourself. Note: For now I don't have access to linux or Mac computer to test builds for those platforms.
With the .zip file, simply unzip it and put the resulting folder somewhere you'll be able to find it. Only thing to be careful is to not put it somewhere where special admnistrative access is needed to access the files, as that will cause some problems with the program.
To use the logging feature you can configure it on the config menu, at first it will look like the following:
The Log file can be configured into 3 modes:
The "Add Timestamp" switch can be checked to add the timestamp to the log file. To select where the log file will be created, simply click on the "Browse..." button and select the folder. An important note is that the folder must have at least one file, it cannot be empty, when you're selecting it through the Browse button, that is due to a limitation of the file browser system. A workaround for using an empty folder is to simply write the path of the folder into the text input, make sure that it ends in a '\' or '/' character. In the future this quirk will be fixed.
Once it is all configured, when you connect to the serial port a file called "log.txt" will be created on the folder you selected, and the data received will be treated according to the mode configured.
If you want to use the built in ESP Exception Decoder for the serial port terminal you can just select the .elf file for the current code you're running on your ESP through the browse button:
Which will then open a file explorer for you to select the file. Alternatively you can simply click the "Auto detect" button if you're using the Arduino IDE, which normally puts all it's compilation files in the Temp folder, so the program can find them by getting the most recently compiled. When a line starting with "Backtrace" is received on the serial port, the parser does the decoding automatically and outputs it in the lower half:
Beyond the built into the terminal Decoder, the program also includes a standalone ESP Exception decoder, you can open it via the tools menu:
Upon opening the window it will look like this:
So just fill in your backtrace and the path to your .elf file:
If you use the Arduino IDE, you can simply click the "Auto Detect" button for it to find the most recently compiled sketch
Once it is all filled in, just click the "Decode" button and the decoded backtrace will appear in the Output div:
To use the custom parsers feature, you must first create a .js file with a parser function following the pattern specified in the example file. With the created file, go to the config menu on the custom parsers section:
Click on the "+" button to add a new custom parser
Then fill all the fields:
Where each field is the following:
Note: all the parsing is done only when the line is fully sent, so it happens when a \n character is received, ending the line.
When the parser is configured the results will start appearing on the output history div for every line that contains the string you filled in the trigger field. It should look something like this:
As the parsers put out results, they get added to the history div as a button with the time of entry, the payload used in the parser and the color assigned to that parser.
In the right corner you can see there is a "Filters" button
On this dropdown you can check the parsers you actively want to see, in this case the JSON parser is unchecked so only the exception decoder gets show:
When you click on the parser output entry, the output div gets filled with the parser result for that entry.
To use the graph feature, you must first open the window by going to the tools button and then clicking the Grapher button
Once you open the window, at least on you first time opening it will look like this:
When you open the config menu it should look something like this:
Click on the "+" button to add a new graph tracking
Then fill all the fields:
Where each field is the following:
So for example with the graph tracking configured in the example the text received on the terminal will be the following:
value15
Where 15 is the value that get added to the graph series and the string "value" is discarted. As with the custom parsers, a new line('\n') character is needed at the end of the data for it to be parsed.
When data starts to come in the serial port, the graph will be filled:
Note that on the top of the screen there is a label for each of the series currently being tracked, in this case there are two series, by clicking on the label you can hide any series you want and then click again to show them once more:
You can set the axis ranges on the config menu:
If you do not want to manually set the values you can simply check the auto detect slider, that way the graph will set the ranges based on the minimum and maximum values present in the series'.
Finally you can configure how many data points in the X axis you wish to have in the graph. For example, In case you only want 100 points to be shown, you can configure it in the menu:
Once that happens, only the most recent 100 points will be shown in the graph, all points beyond that will be discarded. If you do not want any data to be discarded, simply set the value to 0, then all data will be kept in the graph until you manually delete them with the delete button in the corner of the screen.
The program includes a feature to program a sequence of packets to be sent via the serial port, to use it you can open it via the tools menu:
Upon opening the window for the first time, it will look like this:
To add a packet to the sequence simply click the "Add Packet" button, with that an empty field will be created at the end of the sequence:
Where each field is the following:
After you've saved the sequence, you can start sending the sequence, if "Continuous sequence" is checked the sequence will repeat continously, if not it will run the whole sequence and then stop.
Note: the line ending for each of the packets will be the line ending configured at the top of the terminal