Introduction

The Commander Environment is a versatile environment which enables you to create an entire project on the TIMI-96 module that can be controlled by simple serial commands. The project can be simply and quickly created by selecting ready-made pages from the included library or custom pages created in the Architect or Genius environments.

Each page can be tested fully by connecting to the BBM TIMI-96 module via the PC and easily setting the individual widgets values by entering values or playing a sequence of values, from the minimum to the maximum value that the widget allows. All this can be achieved without entering a single piece of code and in many cases, with the vast library of ready-made pages, no need for any design work to quickly bring your project to life ready to accept simple serial commands from your chosen MCU.

How it works

When using the Commander Environment, a serial link is established between the PC and the BBM TIMI-96 module via the USB cable. Controlling messages are sent to the module to activate the widgets on the selected page displaying the values entered in the widget value control. Pages are selected from the included library or can be created in the Architect or Genius Environments. A project can consist of one or more pages and each page can be individually selected with its widget value controls displayed relative to the selected page.

1. BBM TIMI-96 Module
2. BBM PROG
3. Breadboard
4. 5-way pin header
4. USB cable

Implementation

Connecting everything together

Refer to the suggested layout below. Laying out the breadboard this way will leave a convenient space for your chosen MCU to be fitted on the left. The TIMI-96 Module should be inserted into the centre of the breadboard allowing both set of pins to be connected to separate breadboard strips top and bottom. Insert the 5-way right angled pin header above the BBM TIMI-96 module connecting from RES to 5V. The BBM PROG can then be inserted onto the pin header taking note that RES connects to RES. With the BBM PROG being face up in this layout ensures the proper connection is made. The BBM PROG has a convenient jumper or switch to enable programming operation or host operation. Whilst using the Commander environment the jumper or switch needs to be set to programming operation as shown below.

Connect the USB cable to the BBM PROG and to the PC. If this is the first time you have connected the BBM PROG to your PC Windows will attempt to install the latest driver which should happen automatically. Please take note of the created serial port as you will need to know the com port number later. You can also check the new com port in Windows Device Manager under Ports (COM & LPT)

If there is an issue with the driver you will find the latest drivers here

https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers

If this is the first time using the BBM TIMI-96 Module you will be presented with a rolling demo on the TIMI display showing a nicely animated selection of some of the available ready-made pages. This rolling demo is available as an example project in the Genius Environment.

Creating a Commander Project

When you start BBM Mates Studio you will be prompted to select your product.

Click on TIMI-96 and a graphical representation of the BBM TIMI-96 will appear on the right- hand panel.

You can select from the 4 different orientations of the display by clicking on this image. The available pages in the library will change according to orientation selected. Once the desired orientation has been selected click on CONFIRM. If you have previously created a project and would like to edit or install it onto the display then you can simply click on ‘Browse Recent Projects’ or ‘Browse Computer’ instead of selecting product type.

After clicking CONFIRM you will be presented with the SELECT ENVIRONMENT page.

Again, you have the option to ‘Browse Recent Projects’ or ‘Browse Computer’ if you have previously created a project.

Click on the Commander Environment Icon.

You will now be presented with the Commander Environment blank project layout screen.

If the com port shown at the top right is different to the com port number you noted earlier, it can be easily changed by clicking here.

And then select the correct port.

It isn’t necessary to click on ‘Connect’ at this time.

As this is a new project, the panel on the left has a single rectangular button with a ‘+’ symbol that matches the chosen orientation of the TIMI module. Moving your mouse pointer over this object will cause it to change to BROWSE LIBRARY which you can now click on and the ‘SELECT PAGE(S) FROM LIBRARY’ page will open.

The library contains many graphical pages that can bring your project to life from simple a LED Digit display to more complicated gauges. In addition, custom pages can easily be created in the Architect or Genius environments by simply dragging and dropping a widget into place and modifying to the desired look. In this tutorial we will be creating a two-page project selecting ready-made pages from the many categories available.

Click on the ‘Environmental’ tab.

You are now able to preview the page which will appear in the right-hand panel by simply clicking on the desired pages shown in the list. Click to select the ‘Temperature Humidity with Text areas’ page. The preview for this page is shown on the right. Click on CONFIRM.

The selected page, page 0, has now been added to the project. The right-hand panel has now been populated with full details of the widgets used on the page along with suggested MCU library commands to control the pages via the MCU host. This information is extremely useful in the preparation of your own code if needed. The absolute minimum and maximum values for each widget is shown in the table on the right. Widgets that contain changeable text are also shown in this table without minimum maximum values. Text strings can be of variable length and will be aligned depending on the parameters set when the page was designed. In this page, the text is centre aligned.

To add another page, click on the ‘+’ (BROWSE LIBRARY) rectangular button.

Click on the Audio tab, then Media Spectrum L to R followed by CONFIRM.

The 2nd page, page 1, has now been added to the project. The full details of the widget used in page 1 are populating the right-hand panel. The project is now complete and ready for uploading to the display.

Demonstration

Controlling Commander Project

In order to control the individual widgets and change page using the Commander environment, the project needs to be uploaded to the BBM TIMI-96 Module. As the correct com port was selected earlier, clicking on the ‘Upload Project’ button is all that is needed to start the uploading process.

You will be prompted to save the project.

Enter a project name and then click on Save to continue the Upload.

Click on ‘Proceed’

When the Upload procedure has finished the display will be showing page 0 with all widgets at their default state.

Now that the project is running on the display, the Commander environments mode can be changed to Control mode by clicking on the ‘Control’ tab.

The Commander screen will then change to control layout showing a page selection panel on the left. The current page and respective widget value controls will be displayed next followed by a Serial communications panel on the right which will be empty as the display is not presently connected.

Click on Connect.

The Led to the left will illuminate and the Commander environment will start communicating with the display.

Immediately, you will notice that the display carried out a reset procedure and page 0 returns shortly after. The Comms panel will now start displaying serial communication and if successful ‘Device is ready’ followed by the value 06 will be shown. The value of 06 is an important acknowledgement from the display and is an indication that the display is ready to receive commands.

Now the display is ready to accept your serial commands by entering the values directly into widget value controls. All output to these changes will be visible on the display. Enter a value of 50 in MediaGauge0,

And then click on ‘SET’ and you will notice the gauge has changed to a midway position based on the minimum maximum values as shown in the table in the project mode.

Clicking on the Play button will cycle through all values from minimum to maximum showing the gauge sweeping through its range.

Text in the text areas can be simply changed by typing in the new text and clicking on SET.

You will notice that the communication panel has recorded all serial messages back and forth.

To change page from Page 0 to Page 1 simply click on the Page 1 button in the left-hand panel.

Page 1 with widget input controls will be displayed.

All spectrums, regardless of the amount of bars will only have a single widget input control but contain a 2nd value to set the required bar with a value.

In this page, bar 3 will be the 4th from the top. Setting the 1st value to 3 and the 2nd value 100 will set the bar to full sacale on the display.

Clicking on the Play button will create a random effect on the spectrum.

Commander Menu Items

You can select a Commander Menu Item to create a New Project.

Open a previously created project.

Or save the current project.

There is also a Tools & Configuration button to further customize your project.

Load PmmC – This will update the firmware on the connected module. Mates Studio will check the version available with the version loaded and recommend a compatible firmware which can be installed by clicking on ‘Upload’.

The project will need to be re-uploaded again after this operation.

Reverse Orientation – This will rotate the view on the display by 180 degrees. The current Orientation is shown in the top centre of the Commander page.

The project will need to be re-uploaded to see the effects of the change.

Page Transition – This will allow you to change the method used for transitioning between page changes.

Selecting Fade will allow the current page to dim to an off state and then brighten before showing the newly selected page. The project will need to be re-uploaded to see the effects of the change.

Baudrate – The baud rate at which the display communicates can be set from 9600 to 256000 baud.

Changing the baud rate here will set the display and the Commander environment to the same speed. If the project is to be used with an attached MCU then the MCU will need to have a matching baud rate. The project will need to be re-uploaded to see the effects of the baud rate change.

Runtime Mode – This setting allows you to change from the fixed parameters at page design time to an advanced edit mode with selected modifiable parameters.

After selecting the Editable mode and re-uploading the project a button will appear on the widget value control on widgets that have this functionality.

Clicking here will open another control with the available runtime editable options shown.

After making a change and clicking on SET, the change will be visible on the display.

Back to Resource Centre

Share this article on socials

Introduction

The Commander Environment is a versatile environment which enables you to create an entire project on the TIMI-96 module that can be controlled by simple serial commands. The project can be simply and quickly created by selecting ready-made pages from the included library or custom pages created in the Architect or Genius environments.

Each page can be tested fully by connecting to the BBM TIMI-96 module via the PC and easily setting the individual widgets values by entering values or playing a sequence of values, from the minimum to the maximum value that the widget allows. All this can be achieved without entering a single piece of code and in many cases, with the vast library of ready-made pages, no need for any design work to quickly bring your project to life ready to accept simple serial commands from your chosen MCU.

How it works

When using the Commander Environment, a serial link is established between the PC and the BBM TIMI-96 module via the USB cable. Controlling messages are sent to the module to activate the widgets on the selected page displaying the values entered in the widget value control. Pages are selected from the included library or can be created in the Architect or Genius Environments. A project can consist of one or more pages and each page can be individually selected with its widget value controls displayed relative to the selected page.

1. BBM TIMI-96 Module
2. BBM PROG
3. Breadboard
4. 5-way pin header
4. USB cable

Implementation

Connecting everything together

Refer to the suggested layout below. Laying out the breadboard this way will leave a convenient space for your chosen MCU to be fitted on the left. The TIMI-96 Module should be inserted into the centre of the breadboard allowing both set of pins to be connected to separate breadboard strips top and bottom. Insert the 5-way right angled pin header above the BBM TIMI-96 module connecting from RES to 5V. The BBM PROG can then be inserted onto the pin header taking note that RES connects to RES. With the BBM PROG being face up in this layout ensures the proper connection is made. The BBM PROG has a convenient jumper or switch to enable programming operation or host operation. Whilst using the Commander environment the jumper or switch needs to be set to programming operation as shown below.

Connect the USB cable to the BBM PROG and to the PC. If this is the first time you have connected the BBM PROG to your PC Windows will attempt to install the latest driver which should happen automatically. Please take note of the created serial port as you will need to know the com port number later. You can also check the new com port in Windows Device Manager under Ports (COM & LPT)

If there is an issue with the driver you will find the latest drivers here

https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers

If this is the first time using the BBM TIMI-96 Module you will be presented with a rolling demo on the TIMI display showing a nicely animated selection of some of the available ready-made pages. This rolling demo is available as an example project in the Genius Environment.

Creating a Commander Project

When you start BBM Mates Studio you will be prompted to select your product.

Click on TIMI-96 and a graphical representation of the BBM TIMI-96 will appear on the right- hand panel.

You can select from the 4 different orientations of the display by clicking on this image. The available pages in the library will change according to orientation selected. Once the desired orientation has been selected click on CONFIRM. If you have previously created a project and would like to edit or install it onto the display then you can simply click on ‘Browse Recent Projects’ or ‘Browse Computer’ instead of selecting product type.

After clicking CONFIRM you will be presented with the SELECT ENVIRONMENT page.

Again, you have the option to ‘Browse Recent Projects’ or ‘Browse Computer’ if you have previously created a project.

Click on the Commander Environment Icon.

You will now be presented with the Commander Environment blank project layout screen.

If the com port shown at the top right is different to the com port number you noted earlier, it can be easily changed by clicking here.

And then select the correct port.

It isn’t necessary to click on ‘Connect’ at this time.

As this is a new project, the panel on the left has a single rectangular button with a ‘+’ symbol that matches the chosen orientation of the TIMI module. Moving your mouse pointer over this object will cause it to change to BROWSE LIBRARY which you can now click on and the ‘SELECT PAGE(S) FROM LIBRARY’ page will open.

The library contains many graphical pages that can bring your project to life from simple a LED Digit display to more complicated gauges. In addition, custom pages can easily be created in the Architect or Genius environments by simply dragging and dropping a widget into place and modifying to the desired look. In this tutorial we will be creating a two-page project selecting ready-made pages from the many categories available.

Click on the ‘Environmental’ tab.

You are now able to preview the page which will appear in the right-hand panel by simply clicking on the desired pages shown in the list. Click to select the ‘Temperature Humidity with Text areas’ page. The preview for this page is shown on the right. Click on CONFIRM.

The selected page, page 0, has now been added to the project. The right-hand panel has now been populated with full details of the widgets used on the page along with suggested MCU library commands to control the pages via the MCU host. This information is extremely useful in the preparation of your own code if needed. The absolute minimum and maximum values for each widget is shown in the table on the right. Widgets that contain changeable text are also shown in this table without minimum maximum values. Text strings can be of variable length and will be aligned depending on the parameters set when the page was designed. In this page, the text is centre aligned.

To add another page, click on the ‘+’ (BROWSE LIBRARY) rectangular button.

Click on the Audio tab, then Media Spectrum L to R followed by CONFIRM.

The 2nd page, page 1, has now been added to the project. The full details of the widget used in page 1 are populating the right-hand panel. The project is now complete and ready for uploading to the display.

Demonstration

Controlling Commander Project

In order to control the individual widgets and change page using the Commander environment, the project needs to be uploaded to the BBM TIMI-96 Module. As the correct com port was selected earlier, clicking on the ‘Upload Project’ button is all that is needed to start the uploading process.

You will be prompted to save the project.

Enter a project name and then click on Save to continue the Upload.

Click on ‘Proceed’

When the Upload procedure has finished the display will be showing page 0 with all widgets at their default state.

Now that the project is running on the display, the Commander environments mode can be changed to Control mode by clicking on the ‘Control’ tab.

The Commander screen will then change to control layout showing a page selection panel on the left. The current page and respective widget value controls will be displayed next followed by a Serial communications panel on the right which will be empty as the display is not presently connected.

Click on Connect.

The Led to the left will illuminate and the Commander environment will start communicating with the display.

Immediately, you will notice that the display carried out a reset procedure and page 0 returns shortly after. The Comms panel will now start displaying serial communication and if successful ‘Device is ready’ followed by the value 06 will be shown. The value of 06 is an important acknowledgement from the display and is an indication that the display is ready to receive commands.

Now the display is ready to accept your serial commands by entering the values directly into widget value controls. All output to these changes will be visible on the display. Enter a value of 50 in MediaGauge0,

And then click on ‘SET’ and you will notice the gauge has changed to a midway position based on the minimum maximum values as shown in the table in the project mode.

Clicking on the Play button will cycle through all values from minimum to maximum showing the gauge sweeping through its range.

Text in the text areas can be simply changed by typing in the new text and clicking on SET.

You will notice that the communication panel has recorded all serial messages back and forth.

To change page from Page 0 to Page 1 simply click on the Page 1 button in the left-hand panel.

Page 1 with widget input controls will be displayed.

All spectrums, regardless of the amount of bars will only have a single widget input control but contain a 2nd value to set the required bar with a value.

In this page, bar 3 will be the 4th from the top. Setting the 1st value to 3 and the 2nd value 100 will set the bar to full sacale on the display.

Clicking on the Play button will create a random effect on the spectrum.

Commander Menu Items

You can select a Commander Menu Item to create a New Project.

Open a previously created project.

Or save the current project.

There is also a Tools & Configuration button to further customize your project.

Load PmmC – This will update the firmware on the connected module. Mates Studio will check the version available with the version loaded and recommend a compatible firmware which can be installed by clicking on ‘Upload’.

The project will need to be re-uploaded again after this operation.

Reverse Orientation – This will rotate the view on the display by 180 degrees. The current Orientation is shown in the top centre of the Commander page.

The project will need to be re-uploaded to see the effects of the change.

Page Transition – This will allow you to change the method used for transitioning between page changes.

Selecting Fade will allow the current page to dim to an off state and then brighten before showing the newly selected page. The project will need to be re-uploaded to see the effects of the change.

Baudrate – The baud rate at which the display communicates can be set from 9600 to 256000 baud.

Changing the baud rate here will set the display and the Commander environment to the same speed. If the project is to be used with an attached MCU then the MCU will need to have a matching baud rate. The project will need to be re-uploaded to see the effects of the baud rate change.

Runtime Mode – This setting allows you to change from the fixed parameters at page design time to an advanced edit mode with selected modifiable parameters.

After selecting the Editable mode and re-uploading the project a button will appear on the widget value control on widgets that have this functionality.

Clicking here will open another control with the available runtime editable options shown.

After making a change and clicking on SET, the change will be visible on the display.

Back to Resource Centre

Share this article on socials