M5StickC Textbuffer Scrolling Display
2022-01-25 | By M5Stack
License: General Public License Arduino
* Thanks to the project info and source code provided by @Hans-Günther Nusseck
Software apps and online services
Story
The M5StickC is an ideal development tool for various projects. The ESP32 enables almost universal application possibilities and with the 160x80 RGB pixel display the M5StickC can also be used for graphically complex applications.
But sometimes only a simple text output is needed, similar to a terminal, where the text scrolls up with every new line.
Generally, the display driver supports scrolling in hardware, but I haven't found a solution to scroll text with the driver in landscape orientation. So, I programmed a simple text buffer and corresponding drawing functions to display the buffer on the display.
To use the text buffer display, it only needs to be included in the project:
#include "tb_display.h"
Then it can be initialized with the desired orientation:
// init the text buffer display and print welcome text on the display
tb_display_init(screen_orientation);
Display orientation
The value for the orientation can be seen in this image:
screen_orientation values
Print functions
Two functions are available to output either single characters or a whole string. Here is an example for the output of a single character received via the serial interface:
// check for serial input and print the received characters
while(Serial.available() > 0){
char data = Serial.read();
tb_display_print_char(data);
Serial.write(data);
}
And here for the output of a string:
tb_display_print_String(" M5StickC\n\n Textbuffer Display\n\n");
Update #1:
Version 1.1 allows an additional (optional) parameter for the print string function. The optional parameter "chr_delay" allows a "character by character" processing of the String. Then, it looks like Teletype or Typewriter. The delay is in milliseconds. Thanks to LeRoy Miller for the idea.
// with 85ms Character delay, the display looks more
// like Teletype or a typewriter
tb_display_print_String("The quick brown fox jumps over the lazy dog and was surprised that he used all letters of the alphabet.", 85);
QWERTY keyboard HAT
Together with the keyboard HAT you have a simple way to enter and display texts or values.
M5StickC with KB_HAT
Nao (n602) constructed a very nice frame for the keyboard HAT. With this frame the keyboard can be used much better and is optically enhanced. Check it out on thingiverse.
These can be, for example, access data to an access point, or login data. Or notes that come to mind at the breakfast table.
Feedback
I hope this code can prove to be useful to the wider community. Feel free to message me here if you have questions or comments.
Enjoy!
Code
Example for the usage of tb_display C/C++
A simple example displaying characters that were either received via the serial interface or entered via the Hat keyboard. The orientation can be changed via the M5 button.
/******************************************************************************
* Example for tb_display
*
* Library for a simple text buffer scrolling display on the M5StickC.
* Hague Nusseck @ electricidea
* 01/19/2020
* https://github.com/electricidea/M5StickC-TB_Display
*
* This library makes it easy to display texts on the M5StickC.
* The display behaves like a terminal: New text is added at the bottom.
* The text scrolls up with every new line. The lines are automatically wrapped.
* The display can be used in any orientation.
*
* This example shows characters from the serial port on the M5StickC display.
* If a Keyboard-Hat is connected, also the characters from the Keyboard
* are shoen on the display.
*
* Distributed as-is; no warranty is given.
******************************************************************************/
#include <Arduino.h>
#include <M5StickC.h>
#include "tb_display.h"
// I2C Adress of the Keyboard Hat
#define CARDKB_ADDR 0x5F
// Display brightness level
// possible values: 7 - 15
uint8_t screen_brightness = 10;
// scren Rotation values:
// 1 = Button right
// 2 = Button above
// 3 = Button left
// 4 = Button below
int screen_orientation = 1;
void setup() {
// initialize the M5Stack object
m5.begin();
// initialize I2C for the Keyboard Hat (not required)
Wire.begin(0, 26);
// set screen brightness
M5.Axp.ScreenBreath(screen_brightness);
// print a welcome message over serial porta
Serial.println("===================");
Serial.println(" M5StickC");
Serial.println("Textbuffer Display");
Serial.println(" 19.01.2020 v1.0");
Serial.println("===================");
// init the text buffer display and print welcome text on the display
tb_display_init(screen_orientation);
tb_display_print_String(" M5StickC\n\n Textbuffer Display\n\n");
}
void loop() {
M5.update();
// change the display orientation if Button A is pressed
if (M5.BtnA.wasPressed()){
screen_orientation++;
if(screen_orientation > 4)
screen_orientation = 1;
// init the text buffer display with the new orientation
tb_display_init(screen_orientation);
// different text alignment for landscape or portrait mode
switch (screen_orientation) {
case 1: case 3: {
tb_display_print_String(" M5StickC\n\n Textbuffer Display\n\n");
break;
}
case 2: case 4: {
tb_display_print_String(" M5StickC\n\nTextbuffer\n Display\n\n\n\n\n");
break;
}
default: {
break;
}
}
}
// check for serial input and print the received characters
while(Serial.available() > 0){
char data = Serial.read();
tb_display_print_char(data);
Serial.write(data);
}
// check for input from the Keyboard Hat and print the received characters
Wire.requestFrom(CARDKB_ADDR, 1);
while (Wire.available())
{
char c = Wire.read(); // receive a byte as characterif
if (c != 0)
{
if (c == 13) { //0x0D = CR = '\r'
// Map CR to LF (0x0A)
tb_display_print_char('\n');
Serial.write('\n');
} else {
tb_display_print_char(c);
Serial.write(c);
}
}
}
}
Full library code and the example code
The library consists of a header file and a source code file.
https://github.com/electricidea/M5StickC-TB_Display