Gui composer dynamically bind widgets

Albert Smit

I am trying to create a Gui with Gui composer that can change the binding of a widget during runtime. In other words I want to dynamically bind a widget to different variables while the gui is running. Application example is having a text box or a dropdown list from which I can select different variables that I want to plot on a LineGraph. Instead of having the linegraph binded to only one target variable, I want to be able to select it on the gui. I have tried to do this by adding the following line of code in the document.addEventListener section or in a button click event:

gc.databind.registry.bind('widget.ti_widget_numberbox.value',templateObj.$.ti_widget_droplist1.selectedText);

It seems to work, but when I change the binding from the initial target variable to the new target variable the two global variables in my target are linked, and both take on the value of the new variable.

Is there a way to accomplish what I am trying here and what is the correct way?

over 6 years ago

0 Patrick Chuong over 6 years ago

TI__Genius 16220 points

Hi Albert,

In the JavaScript file, you can do something like this. Add listeners to the target variables, update the my_widget text box conditionally.

document.addEventListener('gc-databind-ready', function() {
  gc.databind.registry.getBinding('my_model.myvariable_name_1', {
    onDataRecieved: function(value) {
      if (show_myvariable_name_1)
        document.querySelector('#my_widget_id').value = value;
    }
  });

  gc.databind.registry.getBinding('my_model.myvariable_name_2', {
    onDataRecieved: function(value) {
      if (show_myvariable_name_2)
        document.querySelector('#my_widget_id').value = value;
    }
  });
});

Regards,
Patrick

0 Patrick Chuong over 6 years ago in reply to Patrick Chuong

TI__Genius 16220 points

Hi Albert,

There is a more elegant solution to unbind the text widget from a target variable. In the JavaScript code, you can bind and unbind a widget to a target variable.

Example:

/* bind the target variable myVariable to the text widget's value */
var myBinder = gc.databind.registry.bind('widget.mytext.value', 'my_model.myVariable');

/* unbind the text widget using the cached binder variable */
gc.databind.registry.unbind(myBinder);

Regards,
Patrick

0 Albert Smit over 6 years ago in reply to Patrick Chuong

Intellectual 730 points

Thanks, it works perfect!

Code Composer Studio™︎

Code Composer Studio forum

Gui composer dynamically bind widgets