Maker.io main logo

M5StickC Textbuffer Scrolling Display

10

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

Microsoft Visual Studio Code

PlatformIO IDE

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:

Copy Code
#include "tb_display.h"

Then it can be initialized with the desired orientation:

Copy Code
// 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:

1

                              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:

Copy Code
// 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:

Copy Code
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.

Copy Code
// 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);

 

Demonstration of the character_delay to make the display look like an old Teletype or Typewriter

 

QWERTY keyboard HAT

Together with the keyboard HAT you have a simple way to enter and display texts or values.

2

                      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.

Copy Code
/******************************************************************************
* 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

 

 

Mfr Part # K016-F
M5STICKC DEV KIT WITH HAT
M5Stack Technology Co., Ltd.
More Info
View More Details
Mfr Part # K016-P
M5STICKC PLUS ESP32-PICO IOT KIT
M5Stack Technology Co., Ltd.
$166.95
View More Details
Mfr Part # U035
CARDKB KEYBOARD UNIT (MEGA328P)
M5Stack Technology Co., Ltd.
More Info
View More Details
Add all DigiKey Parts to Cart
Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.