A ring buffer is also called a circular buffer. The memory itself is still an ordinary C array. What makes it circular is the way its indexes return to zero after reaching the final array element.

This tutorial explains how an embedded ring buffer works, how its head and tail pointers move, and how you can implement one in C. You can also use the interactive visualizer below to see each operation happen.

Interactive Embedded Ring Buffer Visualizer

Enter a character, decimal byte, or hexadecimal value and click Write Byte. The value is stored at the current head position. Click Read Byte to remove the oldest value from the tail position.

Watch what happens when either pointer reaches the final slot. Instead of moving outside the array, it wraps around to index zero.

#define BUFFER_SIZE 8

typedef struct
{
    uint8_t data[BUFFER_SIZE];
    volatile uint8_t head;
    volatile uint8_t tail;
    volatile uint8_t count;
} RingBuffer;

bool ring_buffer_write(RingBuffer *rb, uint8_t value)
{
    if (rb->count >= BUFFER_SIZE)
    {
        return false;
    }

    rb->data[rb->head] = value;
    rb->head = (rb->head + 1U) % BUFFER_SIZE;
    rb->count++;

    return true;
}

bool ring_buffer_read(RingBuffer *rb, uint8_t *value)
{
    if (rb->count == 0U)
    {
        return false;
    }

    *value = rb->data[rb->tail];
    rb->tail = (rb->tail + 1U) % BUFFER_SIZE;
    rb->count--;

    return true;
}

What Is a Ring Buffer in Embedded Systems?

A ring buffer is a first-in, first-out or FIFO data structure built using a fixed-size array. The first value written into the buffer is normally the first value read from it.

Consider this eight-byte array:

uint8_t buffer[8];

A normal queue implementation might remove the first value and then shift every remaining value toward index zero. That approach works, but repeatedly moving data wastes processor time.

A ring buffer does not shift its contents. Instead, it keeps track of two indexes:

• Head — the position where the next value will be written
• Tail — the position where the next value will be read

When a value is written, the head advances. When a value is read, the tail advances. The data remains in the same physical array slots until those slots are reused.

This makes ring-buffer writes and reads fast and predictable. Both operations normally take constant time because no existing elements have to be moved.

Why Ring Buffers Are Useful in Embedded Applications

Microcontrollers often deal with events that do not happen at exactly the same speed as the main application.

For example, a UART peripheral may receive a byte while the processor is:

• Updating a display
• Reading a sensor
• Writing data to flash memory
• Processing a communication packet
• Executing another part of the main loop

The UART receive interrupt should not perform a large amount of processing. It should normally retrieve the received byte quickly, store it somewhere safe, and then return.

A ring buffer provides that temporary storage:

UART peripheral → RX interrupt → Ring buffer → Main application

The interrupt acts as the producer because it adds bytes. The main application acts as the consumer because it removes and processes them.

The same idea can be used for:

• UART receive and transmit queues
• ADC sample storage
• Sensor-data collection
• Logging systems
• CAN and SPI message queues
• Audio samples
• Keyboard or keypad input
• Data moving between interrupt handlers and the main loop

How the Head Pointer Works

The head points to the array position where the next byte will be stored.

Suppose the head is initially at index zero:

head = 0;

Writing the character 'A' stores it in buffer[0]. The head then moves to index one.

buffer[head] = 'A';
head++;

If the next value is 'B', it is stored in buffer[1], after which the head moves to index two.

The head always identifies the next available write position. It does not normally point to the most recently written value.

How the Tail Pointer Works

The tail points to the oldest unread value.

If the tail is at index zero, reading from the buffer returns the value stored in buffer[0]. The tail then advances to index one.

value = buffer[tail];
tail++;

The contents do not need to be shifted after the read. The application simply considers that slot available again.

Some implementations clear a slot after reading it because doing so makes debugging and visualization easier. Clearing the slot is not normally required for the ring-buffer algorithm itself.

Pointer Wraparound

The circular behavior appears when a pointer reaches the end of the array.

For an eight-element buffer, the valid indexes are zero through seven. If the head is at index seven, its next position must be index zero.

This can be written using the modulo operator:

head = (head + 1U) % BUFFER_SIZE;

With BUFFER_SIZE equal to eight:

(7 + 1) % 8 = 0

The same operation is used for the tail:

tail = (tail + 1U) % BUFFER_SIZE;

No data is physically moved from the end of the array back to the beginning. Only the index wraps around.

Detecting an Empty or Full Ring Buffer

A ring buffer must be able to determine whether another read or write is allowed.

The interactive visualizer uses a count-based implementation. In addition to the head and tail, it stores the number of elements currently inside the buffer.

uint8_t head;
uint8_t tail;
uint8_t count;

The buffer is empty when:

count == 0

It is full when:

count == BUFFER_SIZE

This method allows every array element to be used. An eight-element array can hold eight values.

Another common method avoids the count variable and reserves one array slot. In that version:

• head == tail means the buffer is empty.
• The buffer is full when advancing the head would make it equal to the tail.

That approach is especially useful for a single-producer, single-consumer ring buffer because the producer can own the head while the consumer owns the tail. I will return to that version later in the tutorial.

Basic Count-Based Ring Buffer in C

The following implementation matches the behavior of the visualizer. It stores eight bytes and rejects new data when the buffer is full.

#include <stdbool.h>
#include <stdint.h>

#define BUFFER_SIZE 8U

typedef struct
{
    uint8_t data[BUFFER_SIZE];
    uint8_t head;
    uint8_t tail;
    uint8_t count;
} RingBuffer;

Initializing the Buffer

Initialization places both pointers at index zero and sets the stored count to zero.

void ring_buffer_init(RingBuffer *rb)
{
    rb->head = 0U;
    rb->tail = 0U;
    rb->count = 0U;
}

The actual data array does not have to be cleared because no slot is considered valid while the count is zero.

Writing a Byte

bool ring_buffer_write(RingBuffer *rb, uint8_t value)
{
    if (rb->count >= BUFFER_SIZE)
    {
        return false;
    }

    rb->data[rb->head] = value;
    rb->head = (rb->head + 1U) % BUFFER_SIZE;
    rb->count++;

    return true;
}

The function first checks whether the buffer is full. If space is available, the value is written at the head position. The head advances, and the element count increases.

The function returns false when no more data can be accepted. The caller can use this result to record an overflow, increment an error counter, or take another appropriate action.

Reading a Byte

bool ring_buffer_read(RingBuffer *rb, uint8_t *value)
{
    if (rb->count == 0U)
    {
        return false;
    }

    *value = rb->data[rb->tail];
    rb->tail = (rb->tail + 1U) % BUFFER_SIZE;
    rb->count--;

    return true;
}

The read function checks for an empty buffer before accessing the array. It returns the oldest byte, advances the tail, and decreases the count.

Checking the Current State

bool ring_buffer_is_empty(const RingBuffer *rb)
{
    return rb->count == 0U;
}

bool ring_buffer_is_full(const RingBuffer *rb)
{
    return rb->count == BUFFER_SIZE;
}

uint8_t ring_buffer_used(const RingBuffer *rb)
{
    return rb->count;
}

uint8_t ring_buffer_free(const RingBuffer *rb)
{
    return BUFFER_SIZE - rb->count;
}

A Simple Ring Buffer Example

Here is how the buffer can be used from a normal C program:

RingBuffer rx_buffer;
uint8_t received_byte;

int main(void)
{
    ring_buffer_init(&rx_buffer);

    ring_buffer_write(&rx_buffer, 'A');
    ring_buffer_write(&rx_buffer, 'B');
    ring_buffer_write(&rx_buffer, 'C');

    if (ring_buffer_read(&rx_buffer, &received_byte))
    {
        /* received_byte contains 'A' */
    }

    if (ring_buffer_read(&rx_buffer, &received_byte))
    {
        /* received_byte contains 'B' */
    }

    while (1)
    {
        /* Main application */
    }
}

Even if the head wraps around while more values are written, the tail continues to return them in FIFO order.

Using a Ring Buffer for UART Reception

A UART receive ring buffer is one of the most common embedded applications.

The general flow is:

1. The UART peripheral receives a byte.
2. The receive interrupt runs.
3. The interrupt reads the UART data register.
4. The byte is written into the ring buffer.
5. The interrupt returns.
6. The main loop later reads and processes the buffered byte.

A simplified interrupt handler might look like this:

void UART_RX_IRQHandler(void)
{
    uint8_t value = uart_read_data_register();

    if (!ring_buffer_write(&rx_buffer, value))
    {
        uart_rx_overflow = true;
    }
}

The main loop can process the data without waiting inside the interrupt:

int main(void)
{
    uint8_t value;

    ring_buffer_init(&rx_buffer);
    uart_init();

    while (1)
    {
        while (ring_buffer_read(&rx_buffer, &value))
        {
            process_received_byte(value);
        }

        run_other_application_tasks();
    }
}

This arrangement lets the interrupt capture incoming data quickly while the main application performs the more time-consuming work.

A Concurrency Warning About the Count Variable

The count-based implementation is easy to understand and works well for the visualizer. However, notice what happens in the UART example:

• The interrupt increases count.
• The main loop decreases count.

Both execution contexts modify the same variable. An interrupt occurring during a read-modify-write operation may produce a race condition, depending on the microcontroller, variable width, compiler, and generated instructions.

Adding volatile prevents the compiler from treating a shared variable as if it never changes unexpectedly. It does not automatically make an operation atomic, and it does not by itself solve every concurrency problem.

You can protect a count-based implementation with a short critical section. Another option is to use a single-producer, single-consumer design where the interrupt modifies only the head and the main loop modifies only the tail.

Single-Producer, Single-Consumer UART Ring Buffer

For a typical UART receive buffer, there is one producer and one consumer:

• The UART RX interrupt is the only code that changes the head.
• The main loop is the only code that changes the tail.

The implementation below reserves one array slot so that head == tail can unambiguously represent an empty buffer.

#include <stdbool.h>
#include <stdint.h>

#define UART_BUFFER_SIZE 16U
#define UART_BUFFER_MASK (UART_BUFFER_SIZE - 1U)

typedef struct
{
    uint8_t data[UART_BUFFER_SIZE];
    volatile uint16_t head;
    volatile uint16_t tail;
} UartRingBuffer;

Because the masking optimization is used here, UART_BUFFER_SIZE must be a power of two.

Writing from the UART Interrupt

bool uart_ring_buffer_write_isr(
    UartRingBuffer *rb,
    uint8_t value)
{
    uint16_t head = rb->head;
    uint16_t next =
        (head + 1U) & UART_BUFFER_MASK;

    if (next == rb->tail)
    {
        return false;
    }

    rb->data[head] = value;
    rb->head = next;

    return true;
}

Reading from the Main Loop

bool uart_ring_buffer_read(
    UartRingBuffer *rb,
    uint8_t *value)
{
    uint16_t tail = rb->tail;

    if (tail == rb->head)
    {
        return false;
    }

    *value = rb->data[tail];
    rb->tail =
        (tail + 1U) & UART_BUFFER_MASK;

    return true;
}

This arrangement avoids a shared count variable. The producer publishes a new head only after writing the byte, while the consumer advances the tail only after retrieving it.

You should still check the requirements of your specific architecture. Index reads and writes should be naturally aligned and atomic for the chosen index type. Systems with multiple cores, DMA, an RTOS, cache coherency concerns, or more than one producer or consumer may require memory barriers, critical sections, or an operating-system synchronization primitive.

Modulo Versus Bit Masking

The general wraparound operation uses modulo:

next = (index + 1U) % BUFFER_SIZE;

This works for any valid buffer size.

If the size is a power of two, the index can instead be wrapped using a mask:

next = (index + 1U) & (BUFFER_SIZE - 1U);

For example, valid indexes for a 16-byte buffer are zero through 15. The value BUFFER_SIZE - 1 is therefore 0x0F.

Modern compilers can often optimize a constant modulo operation automatically. I would therefore prioritize clear and correct code first, then inspect the generated code if performance is critical.

Ring Buffer Overflow and Underflow

Overflow

An overflow occurs when the producer attempts to write while no space is available.

The buffer can respond in different ways:

• Reject the new value
• Overwrite the oldest unread value
• Set an overflow flag
• Increment a lost-byte counter
• Apply flow control when the protocol supports it

The visualizer rejects the new byte because this makes the loss of data obvious. Whether that is the correct behavior in a real project depends on the application.

For a command interface, losing an old or new character may invalidate the entire command. For continuous sensor history, overwriting the oldest sample may be acceptable.

Underflow

An underflow occurs when the consumer attempts to read an empty buffer.

A well-designed read function should detect this before accessing the array. Returning a Boolean result is useful because every possible byte value, including zero, may be valid data.

uint8_t value;

if (ring_buffer_read(&rx_buffer, &value))
{
    process_received_byte(value);
}
else
{
    /* No data currently available */
}

Choosing the Ring Buffer Size

The correct buffer size depends on how quickly data arrives and how long the consumer may be unable to process it.

A useful starting estimate is:

$N_{\min} \ge R_{\text{bytes}}T_{\text{delay}} + M$

Where:

• N_min is the minimum number of required slots.
• R_bytes is the incoming data rate in bytes per second.
• T_delay is the longest expected consumer delay in seconds.
• M is an additional safety margin.

For example, an 8-N-1 UART connection at 115200 baud uses approximately ten transmitted bits for every data byte: one start bit, eight data bits, and one stop bit.

$R_{\text{bytes}} \approx \frac{115200}{10} = 11520\text{ bytes/s}$

If the main application can be delayed for 5 milliseconds:

$N_{\min} \ge 11520 \times 0.005 = 57.6\text{ bytes}$

A 64-byte buffer is the smallest convenient power-of-two choice, but it leaves almost no margin. A 128-byte buffer may be more appropriate if RAM permits and occasional longer delays are possible.

If the implementation reserves one slot, remember that a 64-element array stores only 63 bytes.

Ring Buffer Versus an Ordinary Linear Buffer

Common Ring Buffer Mistakes

Confusing the Head with the Last Written Position

In the implementation used here, the head is the next write position. After writing to index three, the head normally advances to index four.

Failing to Distinguish Full from Empty

If the head and tail can be equal in both states, another piece of information is required. Use a count, reserve one slot, or store a separate full flag.

Using an Index That Is Too Small

The index type must be able to represent every valid buffer position. An eight-bit index is sufficient for buffers up to 256 elements, but larger buffers require a wider type.

Assuming Volatile Makes Everything Thread-Safe

volatile affects compiler optimization. It does not automatically protect a multi-step update from interrupts, multiple tasks, or another processor core.

Doing Too Much Work Inside the Interrupt

The receive interrupt should normally store the byte and return. Packet parsing, command execution, display updates, and other longer operations are better handled outside the ISR.

Ignoring Overflow

Even a correctly implemented ring buffer can overflow. Always decide how the application should detect and respond to lost data.

Frequently Asked Questions

Is a ring buffer the same as a circular queue?

The terms are often used interchangeably. Both normally describe FIFO storage that reuses a fixed array by wrapping its indexes. Ring buffer is particularly common terminology in embedded systems, drivers, communications, and streaming applications.

Does a ring buffer dynamically allocate memory?

It does not have to. Embedded implementations usually use a statically allocated array so memory usage is known at compile time and no heap allocation is required.

Can a ring buffer store structures instead of bytes?

Yes. The array can contain sensor samples, CAN frames, event structures, pointers, or other fixed-size objects.

typedef struct
{
    uint32_t timestamp;
    int16_t temperature;
    uint16_t pressure;
} SensorSample;

SensorSample sample_buffer[16];

Should a full ring buffer reject or overwrite data?

It depends on the application. Communication buffers often reject new data and report an overflow. History buffers may intentionally overwrite the oldest entry so they always contain the most recent samples.

Can DMA use a ring buffer?

Yes, although the design becomes more hardware-specific. Many microcontrollers support circular DMA modes that repeatedly fill a memory region. The application must then track which portion of the region has been written and which portion has already been processed.

Can I use this implementation with an RTOS?

You can, but a ring buffer shared by multiple tasks may require a mutex, critical section, semaphore, or RTOS queue. A lock-free single-producer, single-consumer implementation should not automatically be treated as safe for multiple producers or consumers.

Conclusion

A ring buffer gives embedded applications an efficient way to temporarily store streaming data without shifting array elements or allocating more memory at runtime.

The basic idea is simple:

• The head identifies the next write position.
• The tail identifies the next read position.
• Both pointers return to zero after reaching the end.
• Writes must detect a full buffer.
• Reads must detect an empty buffer.

The count-based approach used by the visualizer is useful for learning because the full and empty conditions are easy to see. For a real UART interrupt and main-loop arrangement, a single-producer, single-consumer implementation with separate head and tail ownership can reduce shared-state problems.

Try filling the visualizer, reading a few bytes, and then writing more values. The most important moment is when the head crosses the final index and returns to zero while the unread values remain in the correct FIFO order. Once that behavior is clear, the C implementation becomes much easier to understand.

The post Ring Buffer Visualizer for Embedded Systems appeared first on Microcontroller Tutorials.

(Click to view larger image)

ESP32-CAM Pinout Description

ESP32-CAM Schematic Diagram

The schematic diagram below is a useful reference, together with the pinout, as you make your project.

(Click to view larger image)

The post ESP32 Pinout Diagram | ESP32-CAM appeared first on Microcontroller Tutorials.

(Click to view larger image)

ESP32-WROVER Module Variants

ESP32-WROVER / WROVER-I

• The original module with integrated PSRAM (typically 4 MB)
• WROVER-I refers to the version with a U.FL (IPEX) antenna connector (instead of or in addition to PCB trace antenna)

ESP32-WROVER-B / WROVER-IB

• These versions operate their PSRAM at 3.3 V (vs. 1.8 V in earlier WROVER versions)
• The “IB” suffix again implies the variant with an IPEX connector for external antenna

ESP32-WROVER-E / WROVER-IE

• A newer revision, often supporting larger flash or PSRAM variants (for example, 8 MB PSRAM)
• The “IE” version includes the IPEX connector for external antennas

Custom Flash / PSRAM configurations

• Within each of these variants, you will often find options for different flash memory sizes (e.g. 4 MB, 8 MB, 16 MB) and PSRAM sizes
• Also, some modules may include or exclude onboard antenna or use external antenna connectors according to design.

ESP32-WROVER Pinout Description

The ESP32-WROVER has the same pinout as the ESP32-WROOM. The pins are categorized into digital pins, analog pins, and power pins. Refer to the table below for details on pins with secondary functions. Moreover, these secondary pins often serve communication purposes, such as I2C and SPI or as ADC channels.

ESP32 WROVER Schematic Diagram

The schematic diagram below is a useful reference, together with the pinout as you make your project.

(Click to view larger image)

Do you want some ESP32 project ideas? Check out the following tutorials:

• Sensor Display on ESP32 Web Server
• ESP32 Turbidity Sensor
• ESP32 Magnetometer using HMC5883L
• ESP32 MAX7219 WiFi Message Board
• Using Restful APIs with ESP32
• ESP32 Pressure Sensor

... and many more! See our ESP32 Tutorial archive.

The post ESP32 Pinout Diagram | ESP32-WROVER appeared first on Microcontroller Tutorials.

Like its predecessor, the ESP-12F is built around the ESP8266EX chip, which features a 32-bit Tensilica L106 processor running at 80 MHz (up to 160 MHz overclocked) and supports Wi-Fi 2.4 GHz (802.11 b/g/n). With 4 MB (32 Mbit) of flash memory, it is well-suited for applications like home automation, smart devices, and wireless sensors.

ESP-12F Pin Description

The ESP-12F has 22 pins, including power, GPIOs, and communication interfaces. Below is a breakdown of the key pin functions:

ESP-12F Pinout Table

Boot Modes

The ESP-12F supports different boot modes based on the state of GPIO0, GPIO2, and GPIO15:

Power Considerations

The ESP-12F requires a stable 3.3V power supply and can draw up to 170 mA during Wi-Fi transmissions. It is recommended to use an LDO voltage regulator or a dedicated power supply for reliable operation.

Applications

Due to its compact size, Wi-Fi capability, and low power consumption, the ESP-12F is commonly used in:

• Smart home devices (e.g., Wi-Fi switches, sensors)
• IoT projects
• Wireless data logging
• Home automation systems

The post ESP12F Pinout Diagram appeared first on Microcontroller Tutorials.

I2C (Inter-Integrated Circuit) is a widely used communication protocol in embedded systems, particularly in STM32 microcontrollers. Configuring the correct clock settings for I2C communication is crucial for reliable data transmission. However, calculating the necessary parameters, such as the Clock Control Register (CCR), the Rise Time Register (TRISE), and the Timing Register in newer STM32 versions, can be complex.

To simplify this process, we’ve developed an STM32 I2C Clock Calculator, which allows users to quickly determine the required settings based on the peripheral clock (PCLK) and the target I2C frequency. 

Understanding I2C Clock Configuration

STM32 microcontrollers implement I2C timing configuration through different registers depending on the version:

1. CCR (Clock Control Register): Determines the clock period based on the PCLK and the desired I2C frequency (older STM32 models).
2. TRISE (Rise Time Register): Ensures that the SDA and SCL lines meet the required timing constraints for correct signal transitions.
3. Timing Register: Used in newer STM32 microcontrollers (such as STM32F7, STM32H7, and STM32L4) to configure I2C timing more precisely.

I2C Modes in STM32

STM32 supports two primary I2C speed modes:

• Standard Mode (SM): Operates at a maximum of 100 kHz.
• Fast Mode (FM): Operates up to 400 kHz.

The formulas for computing CCR and TRISE values are as follows:

Standard Mode (≤ 100 kHz)

• CCR = PCLK / (2 * Target Frequency)

• TRISE = (PCLK / 1,000,000) + 1

Fast Mode (≤ 400 kHz)

• CCR = PCLK / (3 * Target Frequency)

• TRISE = (PCLK / 1,000,000) * 300 / 1000 + 1

For newer STM32 models, the Timing Register is used instead, requiring a more detailed calculation based on SCL timing constraints:

Timing Register Calculation (Newer STM32 Versions)

The Timing Register is composed of multiple fields:

• SCLL (Low period of SCL clock):

  (PCLK / (2 * Target Frequency)) - 1

• SCLH (High period of SCL clock):

  (PCLK / (2 * Target Frequency)) - 1

• SDADEL (Data hold time):

  (PCLK / 100,000,000) (Approximate placeholder)

• SCLDEL (Data setup time):

  (PCLK / 50,000,000) (Approximate placeholder)

The final Timing Register Value is calculated as:

TIMING = (SCLDEL << 20) | (SDADEL << 16) | (SCLH << 8) | SCLL

Using the STM32 I2C Clock Calculator

This tool provides a user-friendly interface where you can:

1. Select whether you are using an Older STM32 (CCR/TRISE) or Newer STM32 (Timing Register).
2. Enter the Peripheral Clock (PCLK) in Hz.
3. Specify the Target I2C Frequency in Hz.
4. Click "Calculate" to obtain the necessary timing values.

The post STM32 I2C Calculator appeared first on Microcontroller Tutorials.

 This guide will walk you through how to use the tool and then incorporate your designs into an Arduino project using the Arduino_LED_Matrix.h library.

Features of the Web Tool

1. Interactive Grid Interface:
   • A 12x8 grid representing the LED matrix.
   • Each cell corresponds to an individual LED, and you can toggle it on or off.
2. Live Code Generation:
   • Automatically generates an Arduino-compatible byte array based on your design.
3. Export and Import Functionality:
   • Save your matrix designs as JSON files for future use.
   • Load previously saved designs back into the tool.
4. Visual Preview:
   • See your LED pattern instantly as you create it.

Step-by-Step Guide

1. Access the Tool

You’ll see a 12x8 grid of clickable cells representing the LEDs on the Arduino UNO R4’s matrix.

2. Create Your Pattern

• Click on any cell to toggle its state:
  • Green: The LED is turned on.
  • Gray: The LED is turned off.
• Modify the grid until your desired pattern is complete.

3. Copy the Generated Code

• As you create your pattern, the tool generates the corresponding C/C++ code in the following format:

byte frame[8][12] = {
  { 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0 },
  { 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0 },
  { 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0 },
  { 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0 },
  { 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }
};

• Copy the code directly from the tool’s output field.

4. Save or Load Patterns

• Export: Click the export button to download your design as a JSON file.
• Import: Load a previously saved design by selecting the JSON file via the import button.

Integrating with Arduino

To use your generated pattern on the Arduino UNO R4, we recommend the Arduino_LED_Matrix.h library. Follow these steps to bring your pattern to life:

1. Install the Library

• Open the Arduino IDE.
• Go to Sketch > Include Library > Manage Libraries.
• Search for Arduino_LED_Matrix and click Install.

2. Setup the Hardware

Ensure your Arduino UNO R4 WiFi is powered and the LED matrix is properly initialized. The library handles all low-level configurations for you.

3. Upload the Code

Use the following example code to display your pattern:

#include <Arduino_LED_Matrix.h>

ArduinoLEDMatrix matrix;

byte frame[8][12] = {
  { 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0 },
  { 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0 },
  { 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0 },
  { 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0 },
  { 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0 },
  { 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0 },
  { 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0 },
  { 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0 }
};

void setup() {
    matrix.begin();
    matrix.renderBitmap(frame, 8, 12);
}

void loop() {
    // Add animations or additional logic here
}

You can also use a hexadecimal output by checking the box in the tool. This will reduce memory usage because you are now using a 32-bit variable instead of several bytes.
This code will produce the same glyph as the code above:

#include <Arduino_LED_Matrix.h>

ArduinoLEDMatrix matrix;

unsigned long frame[] = {
  0x60660660,
  0x67fe7fe6,
  0x06606606
};

void setup() {
    matrix.begin();
    matrix.loadFrame(frame);
}

void loop() {
    // Add animations or additional logic here
}

4. Modify and Test

• Upload the sketch to your Arduino.
• Observe your custom pattern light up on the LED matrix!

Tips and Tricks

• Animations: To create animations, define multiple frame arrays and cycle through them in the loop() function.
• Brightness Control: Use the library’s brightness functions to adjust the LED intensity.
• Dynamic Patterns: Combine inputs like buttons or sensors to dynamically modify the displayed pattern.

With this tool and guide, you can easily design and program patterns for your Arduino UNO R4’s LED matrix. Have fun experimenting, and bring your ideas to light!

The post Arduino UNO R4 WiFi LED Matrix Tool appeared first on Microcontroller Tutorials.

What Is the Dot Matrix Glyph Creator?

The Dot Matrix Glyph Creator is an interactive tool designed to streamline the process of creating graphics for dot matrix displays. With a visual grid interface, users can toggle individual dots to create custom designs and instantly generate the corresponding code for use in microcontroller projects.

Why Use This Tool?

1. Save Time on Graphics Design

Creating dot matrix glyphs manually can be tedious and prone to errors. This tool eliminates the need for manual calculations, providing a straightforward interface for designing custom patterns.

2. Multi-Platform Compatibility

The tool generates code compatible with MAX7219 libraries, ensuring seamless integration with platforms like Arduino, Raspberry Pi, ESP32, ESP8266, and STM32.

3. Flexible Grid Sizes

With support for commonly used grid dimensions like 8x8, 16x16, and 32x32, this tool adapts to various dot matrix display configurations.

Features of the Dot Matrix Glyph Creator

Interactive Design Interface

The tool features a grid where each dot can be toggled between "on" (lit) and "off" (unlit). Unlit dots appear as black, while lit dots are represented in dark orange to mimic the appearance of an actual dot matrix display.

Customizable Grid Dimensions

Users can select the matrix width and height (e.g., 8x8, 16x16) from a dropdown menu, and the grid dynamically adjusts to the chosen dimensions.

Real-Time Code Generation

After designing a glyph, a simple click generates the corresponding code, ready to be copied and pasted into your project. The output is compatible with MAX7219 library functions, such as:

char glyph[8] = { 0x3C, 0x42, 0x81, 0xA1, 0x81, 0x42, 0x3C, 0x00 };

Realistic Dot Representation

The grid uses circular dots with smooth transitions between states, simulating the look of a physical dot matrix display.

Responsive Design

The tool is fully responsive, ensuring an optimal experience across desktops, tablets, and smartphones.

Who Can Benefit from This Tool?

• Hobbyists and Makers: Perfect for those building fun and creative projects with Arduino or Raspberry Pi.
• Educators and Students: A hands-on way to teach and learn how dot matrix displays work.
• IoT Developers: Ideal for creating custom graphics in ESP32 or ESP8266-based projects.
• Embedded Engineers: Simplifies graphic design for STM32-based systems and beyond.

Conclusion

The Dot Matrix Glyph Creator is a game-changing tool for anyone working with MAX7219 displays. Its intuitive interface, customizable grid, and instant code generation make it an invaluable resource for designing professional-grade graphics in a fraction of the time. Whether you're a hobbyist, educator, or engineer, this tool is here to simplify your workflow and inspire your creativity.

Start creating stunning dot matrix glyphs today and bring your microcontroller projects to life!

The post Dot Matrix Glyph Creator Online appeared first on Microcontroller Tutorials.

Because the tool runs in your browser, there is nothing to install. As a result, you can quickly create icons, logos, symbols, splash screens, and simple display graphics for LCD, OLED, and TFT modules.

What Is an LCD Bitmap Converter?

An LCD bitmap converter turns an image into pixel data that a microcontroller can display on a screen. Instead of manually writing hexadecimal values, you upload or draw an image, choose the display size, and let the tool generate the array for your code.

This is useful when working with displays such as:

• 128x64 monochrome LCDs
• 128x32 and 128x64 OLED displays
• 160x128 TFT displays
• 240x240 TFT displays
• 320x240 TFT displays
• Custom graphical LCD modules

After conversion, the generated output can be copied into Arduino sketches, STM32 projects, ESP32 firmware, or other embedded C/C++ programs.

Key Features

Upload an Image and Convert It

First, upload a JPG, PNG, or BMP image. Then, the tool converts it into bitmap data for your display. It maps the image to your selected resolution, so you can preview how it will appear on the LCD or OLED screen.

After that, you can still edit the pixels before generating the final code. This is helpful if the automatic conversion needs small adjustments.

Draw Directly on the Pixel Grid

You can also create a bitmap from scratch using the interactive pixel grid. Simply click each square to turn a pixel on or off.

Because each pixel can be edited manually, this mode is useful for simple icons, arrows, battery symbols, menu graphics, and small logos.

Set a Custom Display Resolution

Before drawing or converting an image, enter the width and height of your display. This helps the output match your actual screen.

Common resolutions include:

• 128x64 for monochrome graphical LCDs and OLEDs
• 128x32 for small OLED modules
• 160x128 for compact TFT displays
• 240x240 for square TFT displays
• 320x240 for larger TFT LCD screens

For best results, use the same resolution as your actual display.

Generate C and C++ Bitmap Arrays

Once your graphic is ready, click Generate to create a C/C++ array. The output is formatted so you can paste it directly into your firmware.

Example output:

const uint8_t bitmap[] = {
  0xFF, 0x81, 0x81, 0xFF
};

Depending on your display type and library, this array can be used to draw the bitmap on the screen.

Copy the Code Quickly

After generating the array, use the Copy button to copy the code to your clipboard. Then, paste it into your Arduino, STM32, ESP32, or other embedded project. This makes the workflow faster, especially when testing several icons or display graphics.

How to Use the LCD Bitmap Converter

1. Set the Display Size

First, enter the width and height of your LCD, OLED, or TFT display. For example, use 128x64 if you are working with a common monochrome OLED screen.

2. Choose the Display Mode

Next, select the mode that matches your display. Use monochrome mode for simple black-and-white LCDs or OLEDs. Meanwhile, use color mode for TFT display graphics.

3. Draw or Upload an Image

After setting the display size, you can draw directly on the grid or upload an existing image. For best results, use a simple high-contrast image, icon, or logo.

4. Preview and Edit the Bitmap

Then, check the converted image on the grid. If some pixels do not look right, edit them manually before generating the array.

5. Generate the C Array

Once the bitmap looks correct, click Generate to create the bitmap data. The tool will output a C/C++ array that you can use in your microcontroller code.

6. Copy and Paste Into Your Project

Finally, copy the generated code and paste it into your firmware. Then, use your display library to draw the bitmap on the screen.

Supported Display Types

Monochrome LCD Displays

The tool works well with monochrome graphical LCDs, especially displays that use simple on/off pixel data. These are common in menus, meters, embedded control panels, and industrial devices.

OLED Displays

You can use the converter for small OLED screens, including common 128x32 and 128x64 modules used with Arduino, ESP32, and STM32 boards.

TFT LCD Displays

For color display projects, the tool can help prepare image data for TFT modules such as 160x128, 240x240, and 320x240 displays.

Microcontroller Projects

Because the output is a C/C++ array, it can be used in many embedded projects, including:

• Arduino display projects
• ESP32 dashboards
• STM32 user interfaces
• Raspberry Pi Pico display projects
• Sensor menus
• IoT status screens
• Handheld devices
• Custom electronics projects

Tips for Better Bitmap Results

Use simple images with strong contrast. Small LCD and OLED screens have limited resolution, so detailed photos may not convert clearly. Resize the image before uploading if needed. A small icon usually looks better than a large image forced into a tiny display area. For monochrome displays, use black-and-white artwork whenever possible. This makes the converted bitmap easier to read on the screen. For logos and icons, test different sizes until the shape remains clear at your display resolution.

Why Use an Online LCD Image Converter?

An online LCD image converter saves time when creating graphics for embedded systems. You do not need to install separate bitmap software or manually calculate hex values.

This tool gives you a simple workflow:

1. Upload or draw an image.
2. Preview the bitmap.
3. Generate the C/C++ array.
4. Copy the code into your project.

As a result, it becomes easier to add icons, logos, and custom graphics to your LCD, OLED, or TFT display project.

FAQs

Can I use this LCD bitmap converter with Arduino?

Yes. The generated C/C++ array can be copied into Arduino sketches and used with compatible display libraries.

Can this convert images for OLED displays?

Yes. It can be used for common OLED resolutions such as 128x32 and 128x64.

What image format should I upload?

Use JPG, PNG, or BMP. For best results, use simple high-contrast images.

Try the LCD Bitmap Converter

Use the tool above to create your LCD bitmap online. First, set your display size. Then, upload or draw your image. Finally, generate the C/C++ array and paste the result into your microcontroller code.

The post LCD Bitmap Converter Online appeared first on Microcontroller Tutorials.

Understanding STM32 CAN Bus and Configuration Calculations

The Controller Area Network (CAN) bus is a robust communication protocol widely used in automotive, industrial, and embedded systems. STM32 microcontrollers support CAN communication, providing developers with a versatile platform for implementing networked solutions. Configuring the CAN bus in STM32 involves calculating specific parameters that ensure proper communication between devices. This article explains the basics of the CAN bus and details the process of calculating the configuration values for STM32.

What is the CAN Bus?

The CAN bus is a two-wire communication protocol that enables microcontrollers and devices to communicate without a host computer. Key features include:

• Real-time communication: Ensures deterministic message delivery.
• Error detection: Built-in mechanisms ensure reliable data transmission.
• Priority-based messaging: Messages with higher priority are transmitted first.

In an STM32 system, the CAN peripheral handles message transmission and reception, while configuration values define the timing and operation of the CAN bus.

CAN Bus Timing and Configuration Parameters

The CAN bus operates using a clock signal divided into time quanta (TQ), the smallest unit of time used in CAN bit timing. A single bit period consists of:

1. Synchronization Segment (Sync_Seg): Fixed at 1 TQ, marking the start of the bit.
2. Propagation Segment (Prop_Seg): Compensates for signal propagation delay.
3. Phase Segment 1 (Phase_Seg1): Adjusts to synchronize the clock.
4. Phase Segment 2 (Phase_Seg2): Ensures the bit ends correctly.

The total time quanta (TQ) for a bit period is:

The configuration parameters for STM32 CAN bus include:

• Bit Timing Prescaler (BRP): Divides the input clock to produce the CAN clock.
• Time Segment 1 (TS1): Sum of Prop_Seg and Phase_Seg1.
• Time Segment 2 (TS2): Corresponds to Phase_Seg2.

Steps to Calculate STM32 CAN Configuration

1. Determine the Input Clock

The CAN peripheral uses the APB clock of the STM32 microcontroller. Identify this clock frequency, typically defined in the microcontroller’s configuration settings.

2. Define the Desired Bit Rate

The desired bit rate determines how fast the CAN bus transmits data, measured in bits per second (bps). Common values are 125 kbps, 250 kbps, and 1 Mbps.

3. Calculate the Bit Period

The bit period is the reciprocal of the bit rate:

4. Choose the Total Time Quanta (TQ_total)

Select an appropriate number of TQ for the bit period. CAN standards recommend values between 8 and 25 TQ.

5. Calculate the Baud Rate Prescaler (BRP)

The BRP divides the input clock to match the CAN clock. Calculate BRP using:

Round BRP to the nearest integer, ensuring it stays within the allowable range (1 to 1024 for STM32).

6. Distribute Time Quanta

Divide the remaining TQ among Prop_Seg, Phase_Seg1, and Phase_Seg2 while adhering to the following rules:

• TS1 (Prop_Seg + Phase_Seg1) should be 75-87.5% of TQ_total.
• TS2 (Phase_Seg2) should be 12.5-25% of TQ_total.

Example Calculation

Suppose:

• Input Clock = 36 MHz
• Desired Bit Rate = 500 kbps

1. Calculate Bit Period:
2. Choose TQ_total: Assume 16 TQ.
3. Calculate BRP: Round to 4.
4. Distribute TQ:

• TS1 = 13 TQ (includes Prop_Seg and Phase_Seg1)
• TS2 = 2 TQ
• Sync_Seg = 1 TQ

Verifying Configuration

STM32CubeMX or similar tools can validate your configuration. Alternatively, calculate the actual bit rate:

Ensure the calculated value closely matches the desired bit rate.

Common Pitfalls

1. Clock Mismatches: Ensure the input clock matches the actual APB clock frequency.
2. Invalid Configurations: Keep TS1 and TS2 within recommended ranges.
3. Error Tolerance: The calculated bit rate should be within 1% of the desired value.

Conclusion

Configuring the CAN bus on STM32 requires careful calculation of timing parameters to ensure reliable communication. By understanding the principles behind bit timing and using tools like STM32CubeMX, you can efficiently set up the CAN peripheral for your application. Whether you're working on automotive networks or embedded systems, mastering CAN configuration is a valuable skill for any STM32 developer.

The post STM32 CAN Bus Configuration Calculator appeared first on Microcontroller Tutorials.

What is PWM?

Pulse Width Modulation (PWM) is a technique used to generate analog-like signals from a digital source by varying the duty cycle of a square wave. It is widely used in applications like motor control, LED brightness control, and audio signal generation.

In STM32 microcontrollers, PWM signals are typically generated using timers. The timers divide the clock frequency and configure the output pins to create the desired frequency and duty cycle.

Key Concepts of STM32 PWM

1. System Clock Frequency:
   This is the main clock frequency driving the microcontroller, which serves as the base clock for the timers.
2. Prescaler:
   A value that divides the timer input clock. For example, if the system clock is 72 MHz and the prescaler is set to 71, the timer clock will be $\frac{72 \, \text{MHz}}{(71+1)} = 1 \, \text{MHz}$ 

   .

3. Auto-Reload Register (ARR):
   Also known as the timer period, this defines how many timer clock cycles occur before the timer resets and the signal toggles. A higher ARR results in a lower frequency.
4. Duty Cycle:
   This is the percentage of time the signal stays HIGH during one period. The duty cycle is controlled by the Capture/Compare Register (CCR) in STM32.

Formula to Calculate PWM Frequency

The PWM frequency can be calculated using the formula:

$$\text{PWM Frequency} = \frac{\text{System Clock Frequency}}{(\text{Prescaler} + 1) \times (\text{ARR} + 1)}$$

​

Where:

• System Clock Frequency: The frequency of the system clock driving the timer (e.g., 72 MHz for many STM32 devices).
• Prescaler: The value used to divide the clock frequency.
• ARR (Auto-Reload Register): The maximum count value for the timer.

Example Calculation

Scenario:
You have an STM32 microcontroller with the following parameters:

• System Clock Frequency:
  $72 \, \text{MHz}$ 

  
  

• Timer Prescaler:
  $71$ 
• Auto-Reload Register (ARR):
  $999$ 

Steps:

1. Calculate the timer clock:

   $$\text{Timer Clock} = \frac{72 \, \text{MHz}}{\text{Prescaler} + 1} = \frac{72 \, \text{MHz}}{71 + 1} = 1 \, \text{MHz}$$ 

2. Calculate the PWM frequency:

   $$\text{PWM Frequency} = \frac{\text{Timer Clock}}{\text{ARR} + 1} = \frac{1 \, \text{MHz}}{999 + 1} = 1 \, \text{kHz}$$ 

Result: The PWM frequency is 1 kHz.

STM32 Configuration for PWM

To set up PWM in STM32, follow these steps:

1. Initialize the Timer:
   • Set the prescaler and auto-reload values.
   • Configure the timer for PWM mode (e.g., using Timerx_CCMRx registers).
2. Set the Duty Cycle:
   • Configure the Capture/Compare Register (CCR) to control the duty cycle.
     For a 50% duty cycle, set $\text{CCR} = \frac{\text{ARR}}{2}$ 

     
     

3. Start PWM:
   • Enable the timer (e.g., using Timerx_CR1 register) and the output pin.

Applications of PWM in STM32

1. LED Dimming: Control brightness by adjusting the duty cycle.
2. Motor Speed Control: Vary the average voltage applied to the motor.
3. Audio Generation: Create audio signals by varying PWM frequencies.
4. Servo Control: Use PWM to control the position of servo motors

PWM is a versatile feature of STM32 timers, enabling precise control over frequency and duty cycle. By understanding parameters like the system clock, prescaler, and ARR, you can calculate and configure the desired PWM frequency for your application.

The post STM32 PWM Calculator appeared first on Microcontroller Tutorials.