This thread has been locked.

If you have a related question, please click the "Ask a related question" button in the top right corner. The newly created question will be automatically linked to this question.

GUI Composer,CCSv6.2: Possible to Concatenate multple target variables into one text box?

Guru 20045 points

Hello,

I have multiple target variables that I would like to combine and show in a text box. 

For example (two variables):

Variable1 = WindSpeed

Variable 2 = Air Temperature

Shown in the text box as: The WindSpeed is 20 Knots and the Air Temperature is 27 Degrees Celsius.

Also, I may want to show WindSpeed and Air Temperature on a separate line in the text box, i.e.

The WindSpeed is 20 Knots.

The Air Temperature is 27 Degrees Celsius.

So, here is what I need to know:

1. Each widget only allows for one variable, so how does a widget get information from two or more variable for display in a text box. I was thinking that I could get the data from two hidden widgets, but I'm not sure how to do that.

2. How do I format the data in the text box as mentioned above?

Stephen

  • Stephen,

    One way to do this could be using GUI Vars. GUI Vars allow you to bind to a target variable without a widget. You can tell it to perform an action when the value of the variable changes. 

    An example of using GUI Vars is in slide 61-64 of the presentation found here. That example writes out text to a text box widget based on the value of the variable.

    The onPropertyChanged function can be customized per your needs. So if you needed to print out your variable in addition to some text, you would change the example to something like this:


    var t = $TI.GUIVars;
    var var0 = t.getValue('Variable1');

    dijit.byId('widget1').set('value', "WindSpeed is " + var0);

  • Hello AartiG,

    It's not working. The text box is showing "Windspeed is undefined".

    I performed the steps shown below.  

    Stephen

    I did the following:

    There isn't an OnPropertyChanged function, however, there is a onchange in Widget's Events tab.

    I added a function name to the Widget's onchange, i.e.

    I then added the following to the app.js:

    function ValueChanged()
    {
    	var t = $TI.GUIVars;
    	var var0 = t.getValue('Windspeed');
    	dijit.byId('widget_12186').set('value', "Windspeed is " + var0);
    }

    The textbox widget:

  • Also, is there a way to have the GUI composer to work with the CCS5.5 simulator. It would be much easier to test out the GUI without having to download it to the actual target every time.
  • stevenh said:
    There isn't an OnPropertyChanged function, however, there is a onchange in Widget's Events tab.

    The OnPropertyChanged function is tied to GUIVars, not to the TextBox widget. Please have a look at the presentation I linked to in my previous post. Slides 61-64 show how to create GUIVars and set the OnPropertyChanged function.

  • For some reason, I wasn't able to access the presentation this morning.

    That works for one line of text.

    How do I create more than one line of text in the text box?

    Also, is it possible to run the GUI composer with the CCS5.5 simulator?

    Stephen
  • stevenh said:
    How do I create more than one line of text in the text box?

    I tried a few things but couldn't get it to do multiple lines. I will try to ask around about this.

    stevenh said:
    Also, is it possible to run the GUI composer with the CCS5.5 simulator?

    Yes I believe GUI Composer was supported with the CCS 5.5 simulator.

  • For some reason all the GUI components have disappeared off of a tabbed container. However, app.html still shows that they exists.
  • I am confused. Where is GUI composer getting my GUI source from. When I click the source button I don't see the the same source as I see in app.html.
  • stevenh said:
    How do I create more than one line of text in the text box?

    For multiple lines, you can use the TextArea widget instead. You can use \n for line break.

    dijit.byId('widget_12186').set('value', "Windspeed is " + var0 + "\nTemperature is " + var1);

  • I tried that previously and it didn't work. I will try it again. However, I have a more pressing issue now as mentioned in my previous post.
    Thanks,
    Stephen
  • Your example (i.e.dijit.byId('widget_12186').set('value'"Windspeed is " + var0 + "\nTemperature is " + var1);)  doesn't cause GUI composer to print the output on two lines.  GUI composer seems to be ignoring \n.

    Also, the components on the Tabbed GUI have disappeared.

    When I click the source button I don't see the the same source as I see in app.html.

    Why is the contents of app.html (contained in the GUI Composer project directory)different than the source shown in the GUI composer?

  • stevenh said:
    Your example (i.e.dijit.byId('widget_12186').set('value'"Windspeed is " + var0 + "\nTemperature is " + var1);)  doesn't cause GUI composer to print the output on two lines.  GUI composer seems to be ignoring \n.

    Did you make sure to use the TextArea widget instead of the TextBox widget?

    stevenh said:
    Why is the contents of app.html (contained in the GUI Composer project directory)different than the source shown in the GUI composer?

    I'll have to get some help on this and get back to you.

  • Ok, It works with the TextArea Widgit.

    AartiG said:

    I'll have to get some help on this and get back to you.

    Ok.

  • The GUI might be cached in the browser's memory, do you still see the differences after restarting CCS?
  • I have restarted CCS multiple times and the source content in GUI Composer is still different than what is in app.html located in the projects directory.
  • Hello Patrick,

    Do you have any idea why app.html doesn't match GUI Composer's source?

    Stephen
  • Hi Stephen,

    Sorry for the delay, I wasn't in the office last friday.

    Did you save the design before comparing app.html with the source view? There is an app.html.workingcopy file, which should match the source view while the design is modified and not saved.

    Patrick

  • I didn't save the design after I noticed the missing controls.  I opened and closed CCS several times and that didn't correct the issue.  

    Last Friday, I copied what was in app.html into the source view and now the design (GUI) contains the controls, however, it doesn't have the changes I had previously made to the GUI.  What's interesting is that the app.js file DOES contain additional functions that I had added to supplement the changes to the GUI.

    Stephen

  • Javascript file doesn't have workingcopy. While app.html file has a workingcopy file.
    Patrick
  • Ok, I guess the app.html file and the working copy got disconnected somehow.

    I did find a version of the html file that had the controls in a tabbed frame. I guess I'll have to start committing the files to version control more often.

    I am hoping that TI doesn't get rid of the CCS version of GUI Composer. I would rather not have to store my GUI composer files on the cloud.