10 min

Display various signal or status properties in the form of a bar graph with JSB-R102510ZR and PIC18F87K22

Let information shine bright - Illuminate data with precision and style

BarGraph Click with UNI Clicker

Published Sep 08, 2023

Click board™

BarGraph Click

Development board

UNI Clicker


NECTO Studio



Create displays that give you quick, easy-to-understand information about various things, like how loud the music is or how much power a device uses



Hardware Overview

How does it work?

BarGraph Click is based on the JSB-R102510ZR, a bar graph LED array with ten red-colored LED segments from Ningbo, and two 74HC595, 8-bit serial-in, parallel-out shift registers with output latches from Texas Instruments to drive the JSB-R102510ZR. The 74HC595 ICs are comprised of a D-type internal storage register, as well as the serial-to-parallel shift register, both 8-bit wide. Each of these registers has its clock line, making it possible to clock in the desired data and then clock it out to the parallel output pins. The JSB-R102510ZR bar graph LED array has 10 red-colored LED segments. Each LED has its anode and cathode routed out, making each LED element absolutely independent so that it can be used in any circuit configuration. However, the JSB-R102510ZR bar graph display is connected as the display with the common cathode, meaning that all LED cathodes are connected to a single point. This LED cathode common line (CC) is connected to the drain of the N channel MOSFET, while its source is connected to the GND. Driving this MOSFET via its gate through the PWM pin of the mikroBUS™ allows dimming of the LED segments. Changing the PWM signal's duty cycle makes it possible to change the brightness of the XGURUGX10D bar graph display. The gate of this MOSFET is

connected to the PWM pin of the mikroBUS™ and it is pulled to VCC, allowing the display to work if the PWM pin is left floating. The Click board™ communicates with the host MCU via the mikroBUS™ SPI interface pins. Two bytes of information (16 bits in total) are pushed through the serial data input pin (DS) of the first 74HC595 IC, and routed to the SDI pin. The 74HC595 construction is such that after receiving 8 bits, clocking in one more bit will shift the existing 8 bits by one place, overflowing the last bit to the Q7S output pin and shifting it out that way. Since the Q7S of the first 74HC595 is connected to the DS pin of the second 74HC595, clocking 16 bits into the first 74HC595 IC will fill up both ICs with required data. Note that only two bits of the second byte will be used since the second shift register only has two outputs connected to the bar graph display (8 from the first IC + 2 from the second). It is worth mentioning that the Q7S of the last 74HC595 IC is routed to the MISO pin of the mikroBUS™, labeled as the SDO, allowing connection of multiple devices in cascade, building more complex setups. Adding more devices in the cascade would require more 8-bit words to be clocked into the first 74HC595 IC in the chain. When the data has been clocked in, the

SPI clock should be stopped, and the CS pin should be driven to a HIGH logic level. The CS pin of the mikroBUS™ is routed to the STCP pin of the 74HC595 ICs and labeled as LT on the Click board™. A rising edge on the STCP input pins of the 74HC595 ICs will latch the data from their internal storage registers to the output pins, polarizing the connected bar graph segment anodes. The onboard resistor pulls the STCP pin to a LOW logic level. If the previously mentioned MOSFET is in a conductive state, the current can flow through the LEDs, and the polarized LED elements will be lit. The #MR pin is used to clear the data in the internal storage register of the ICs. The LOW logic level on this pin will clear the content of this storage register, but it will not turn off the already activated outputs. The #MR pin is routed to the RST pin of the mikroBUS™, labeled as MR, and pulled to a HIGH logic level by the onboard resistor. This Click board™ can operate with either 3.3V or 5V logic voltage levels selected via the VCC SEL jumper. This way, both 3.3V and 5V capable MCUs can use the communication lines properly. Also, this Click board™ comes equipped with a library containing easy-to-use functions and an example code that can be used as a reference for further development.

BarGraph Click hardware overview image

Features overview

Development board

UNI Clicker is a compact development board designed as a complete solution that brings the flexibility of add-on Click boards™ to your favorite microcontroller, making it a perfect starter kit for implementing your ideas. It supports a wide range of microcontrollers, such as different ARM, PIC32, dsPIC, PIC, and AVR from various vendors like Microchip, ST, NXP, and TI (regardless of their number of pins), four mikroBUS™ sockets for Click board™ connectivity, a USB connector, LED indicators, buttons, a debugger/programmer connector, and two 26-pin headers for interfacing with external electronics. Thanks to innovative manufacturing technology, it allows you to build

gadgets with unique functionalities and features quickly. Each part of the UNI Clicker development kit contains the components necessary for the most efficient operation of the same board. In addition to the possibility of choosing the UNI Clicker programming method, using a third-party programmer or CODEGRIP/mikroProg connected to onboard JTAG/SWD header, the UNI Clicker board also includes a clean and regulated power supply module for the development kit. It provides two ways of board-powering; through the USB Type-C (USB-C) connector, where onboard voltage regulators provide the appropriate voltage levels to each component on the board, or using a Li-Po/Li

Ion battery via an onboard battery connector. All communication methods that mikroBUS™ itself supports are on this board (plus USB HOST/DEVICE), including the well-established mikroBUS™ socket, a standardized socket for the MCU card (SiBRAIN standard), and several user-configurable buttons and LED indicators. UNI Clicker is an integral part of the Mikroe ecosystem, allowing you to create a new application in minutes. Natively supported by Mikroe software tools, it covers many aspects of prototyping thanks to a considerable number of different Click boards™ (over a thousand boards), the number of which is growing every day.

UNI clicker double image

Microcontroller Overview

MCU Card / MCU



8th Generation



MCU Memory (KB)


Silicon Vendor


Pin count


RAM (Bytes)


Used MCU Pins

mikroBUS™ mapper

Memory Clear
Data Latch
SPI Clock
Power Supply
PWM Dimming Control
Power Supply

Take a closer look


BarGraph Click Schematic schematic

Step by step

Project assembly

UNI Clicker front image hardware assembly

Start by selecting your development board and Click board™. Begin with the UNI Clicker as your development board.

UNI Clicker front image hardware assembly
Thermo 28 Click front image hardware assembly
SiBRAIN for STM32F745VG front image hardware assembly
Prog-cut hardware assembly
UNI Clicker MB 1 - upright/with-background hardware assembly
Necto image step 2 hardware assembly
Necto image step 3 hardware assembly
Necto image step 4 hardware assembly
Necto image step 5 hardware assembly
Necto image step 6 hardware assembly
Necto image step 7 hardware assembly
Necto No Display image step 8 hardware assembly
Necto image step 9 hardware assembly
Necto image step 10 hardware assembly
Debug Image Necto Step hardware assembly

Track your results in real time

Application Output

After loading the code example, pressing the "DEBUG" button builds and programs it on the selected setup.

Application Output Step 1

After programming is completed, a header with buttons for various actions available in the IDE appears. By clicking the green "PLAY "button, we start reading the results achieved with Click board™.

Application Output Step 3

Upon completion of programming, the Application Output tab is automatically opened, where the achieved result can be read. In case of an inability to perform the Debug function, check if a proper connection between the MCU used by the setup and the CODEGRIP programmer has been established. A detailed explanation of the CODEGRIP-board connection can be found in the CODEGRIP User Manual. Please find it in the RESOURCES section.

Application Output Step 4

Software Support

Library Description

This library contains API for BarGraph Click driver.

Key functions:

  • bargraph_driver_init - Functions for initializes the chip

  • bargraph_reset - Functions for reset the chip

  • bargraph_display - Displays function.

Open Source

Code example

This example can be found in NECTO Studio. Feel free to download the code, or you can copy the code below.

 * \file 
 * \brief BarGraph Click example
 * # Description
 * This application uses a high-quality bar graph LED display.
 * The demo application is composed of two sections :
 * ## Application Init 
 * Initializes driver init and BarGraph init.
 * ## Application Task  
 * Counter passes through the loop and logs the value of the counter on the bargraph display.
 * \author MikroE Team
// ------------------------------------------------------------------- INCLUDES

#include "board.h"
#include "log.h"
#include "bargraph.h"

// ------------------------------------------------------------------ VARIABLES

static bargraph_t bargraph;
static log_t logger;

// ------------------------------------------------------ APPLICATION FUNCTIONS

void application_init ( void )
    log_cfg_t log_cfg;
    bargraph_cfg_t cfg;

     * Logger initialization.
     * Default baud rate: 115200
     * Default log level: LOG_LEVEL_DEBUG
     * @note If USB_UART_RX and USB_UART_TX 
     * are defined as HAL_PIN_NC, you will 
     * need to define them manually for log to work. 
     * See @b LOG_MAP_USB_UART macro definition for detailed explanation.
    LOG_MAP_USB_UART( log_cfg );
    log_init( &logger, &log_cfg );
    log_info( &logger, "---- Application Init ----" );

    //  Click initialization.

    bargraph_cfg_setup( &cfg );
    bargraph_init( &bargraph, &cfg );
    bargraph_reset( &bargraph );

void application_task ( void )
    uint8_t cnt = 0;
    for ( cnt = 0; cnt <= 10; cnt++ )
        bargraph_display( &bargraph, cnt );
        Delay_ms( 500 );

void main ( void )
    application_init( );

    for ( ; ; )
        application_task( );

// ------------------------------------------------------------------------ END

Additional Support