Getting Started With Renesas RA Family/FSP - Part3 Visual Expressions

by Panos_V in Circuits > Microcontrollers

12 Views, 0 Favorites, 0 Comments

Getting Started With Renesas RA Family/FSP - Part3 Visual Expressions

collection.JPG

In this part of the series, we look at a very helpful debugging feature inside e² studio: Visual Expressions.

Visual Expressions let you watch and modify variables in real time, without stopping the CPU.

This makes it easy to observe timers, counters, flags, and state-machine transitions exactly as they happen.

We’ll go through enabling the Visual Expressions view, adding variables, and building a small demo.

Supplies

While this tutorial works with any Renesas RA microcontroller, we'll be walking through the steps using the Evaluation Kit for RA6M4 as our example.

Import the Project From Part 2 (RTT)

In this part of the series, we will continue working with the same project created in Part 2 RTT Viewer

If you already have that project in your workspace, you can skip this step.

If not, please refer to Step 1 from Part 2 RTT Viewer

Build and Run the Project

With the Part 2 RTT project imported, the next thing we need to do is get into the Debug perspective.

Some readers may have already built and run this project earlier, so don’t worry, there’s no need to repeat work unless something is out of date.

  1. In the Project Explorer, click once on the Part 2 RTT project to make sure it’s the active one.
  2. If you haven’t built the project in this workspace yet, go to:
  3. Project → Build Project
  4. (If the project was already built previously, you can skip this.)
  5. Click the Debug icon (the green bug) to start a new debug session.
  6. e² studio will switch views automatically and open the Debug perspective.
  7. Give it a moment until the program stops at the first breakpoint inside hal_entry().

You should now see the familiar layout used in earlier parts:

the source window at the top, debug controls on the left, and the Expressions / Variables / Breakpoints windows at the right.

From here, we’re ready to open the Visual Expressions panel in the next step.

Open the Visual Expressions Panel

Screenshot_1.png

With the debugger paused at the start of the program, we can now bring up the Visual Expressions panel.

This tool isn’t shown by default, so we need to enable it once.

  1. At the top of e² studio, open the menu:
  2. Renesas Views → Debug → Visual Expressions
  3. A new tab will appear at the bottom area of the workspace.
  4. This is your Visual Expressions window.
  5. On the left side of that window, you’ll see a vertical strip of icons, meters, knobs, LEDs, sliders, and other widgets.
  6. These are the building blocks for your “live dashboard.”

We need to add variables before anything comes to life, and we’ll do that in the next step.

You're now ready to start turning raw variables into visual indicators you can watch while the MCU is running.

Add Variables to the Expressions View

Before we can attach anything to Visual Expressions, we need the variables to show up in the regular Expressions view.

Please add the following lines after #iclude directives

/* ------------------------ */
/* Added for Visual Expressions */
volatile uint32_t timer_tick_count = 0;
/* ------------------------ */

Also, add these lines inside your coolTimer call

timer_tick_count++;

The project now includes a useful global:

  1. timer_tick_count – increases every time the GPT interrupt fires

This is how e² studio knows which values you want to watch or control.

  1. Look for the Expressions tab in the Debug perspective.
  2. (It’s usually next to Variables or Registers. If it’s hidden, you can open it from:
  3. Window → Show View → Expressions.)
  4. Click the Add new expression button (small “+” icon).
  5. Type the name of each variable you want to monitor.
  6. For example, if you’re using the modified sample code from earlier parts, add them:

If the variable appears with a value next to it, you’re good.

If it shows an error, double-check that the variable is:

  1. Global (not declared inside a function)
  2. Spelled correctly
  3. Built in the current Debug configuration

Once the variables appear in the Expressions list, they become available for Visual Expressions.

We can now turn them into meters, LEDs, or dials in the next step.

Create a Meter for the Timer Tick Counter

Screenshot_3.png

Now that timer_tick_count is visible in the Expressions view, we can start turning them into live visual indicators.

We’ll begin by showing the timer interrupts on a meter.

  1. Go to the Visual Expressions panel you opened earlier.
  2. You’ll see a column of icons on the left side, gauges, meters, LEDs, sliders, and so on.
  3. Find the Meter icon and drag it into the main Visual Expressions area.
  4. Right-click the meter and choose Properties.
  5. Set a reasonable Maximum value.
  6. Since the timer fires continuously, something like 5000 or 10000 works well.
  7. Click OK to apply the settings.
  8. Right-click the meter again and choose Set Expression.
  9. Type:

timer_tick_count

Press Enter.

If your debugger is currently running, you'll immediately see the needle climbing as interrupts occur.

If paused, press Resume and watch the meter come to life.

The meter now shows the timer activity in real time, without halting the CPU.

Add a Dial to Adjust the Timer Frequency

Screenshot_4.png

So far, we’ve only monitored values.

In this step, we’ll use Visual Expressions to modify a variable in real time and change the timer’s frequency without stopping the CPU.

To do this, we need a variable that holds the desired frequency.

Let’s add one to the project.

1. Add a frequency variable to the top of your file

Place this with your other global variables:


volatile uint32_t timer_frequency_hz = 1; // Default = 1 Hz

2. Update your timer configuration to use this variable

Inside your timer callback, or in your main loop, you can recalculate period based on this variable.

Here is the simplest and safest place: inside the callback.

Add this just before the LED toggling logic:


/* Update timer period based on timer_frequency_hz */
uint32_t period_ms = (1000 / timer_frequency_hz);
R_GPT_PeriodSet(&coolTimer_ctrl, period_ms);
Note:
1 Hz = LED toggle every 500 ms (period counts adjust automatically).
You can refine this later depending on your board clock.

3. Create a Dial to control the frequency

  1. In the Visual Expressions panel, find the Dial icon.
  2. Drag it into your Visual Expressions workspace.
  3. Right-click → Properties.
  4. Set:
  5. Minimum: 1
  6. Maximum: 5
  7. (1–5Hz is a practical range for a visible LED blink.)
  8. Click OK.
  9. Right-click again → Set Expression.
  10. Enter:

timer_frequency_hz

Press Enter.

4. Test it

If the debugger was paused, press Resume.

Now rotate the dial:

  1. Turning the dial to higher values speeds up the LED blinking.
  2. Turning it down slows the timer.

The timer period updates automatically every time the dial writes a new frequency value.

Summary

In this part of the series, you learned how to use Visual Expressions in e² studio to watch and control variables while the MCU keeps running.

We added a few helpful global variables, connected them to meters and indicators, and finally used a Dial to adjust the LED blink rate in real time.

Here’s what you completed:

  1. Opened the Visual Expressions panel
  2. Added timer_tick_count to the Expressions view
  3. Displayed the timer activity using a Meter
  4. Created an LED indicator that follows the actual board LED
  5. Added a timer_frequency_hz variable to control the blink speed
  6. Used a Visual Expressions Dial to adjust the LED blink rate without stopping the CPU
  7. Updated the timer period on the fly inside the callback

With these tools, you now have a small “live dashboard” running directly inside e² studio.

This approach is extremely useful when tuning timing, testing control loops, checking state machines, or monitoring interrupts, especially when you want to avoid cluttering your code with print statements.