GUI in the TympanRemote App

I used JSON object to generate GUI on Android and it works great for buttons. However, I wonder how to display a changing number on android app. For example, for Gain Seetings (high, mid, low),I want to know current gain for high and display it on the screen. Every time I touch ~+, the current gain changes accordingly.

Thanks much in advance.

Sanqing

Hi tony9773,

Take a look at the example 01-BasicGain_wApp, which provides app buttons for changing the gain. It also demonstrates a library (TympanRemoteFormatter.h) for adding buttons without writing out the JSON-like string yourself.

I’m glad you wrote in, as I discovered a bug in the Tympan Library, Bugfix: TympanRemoteFormatter.h, that prevented this example from working.

If you wait a little longer, I will add to the example to demonstrate coding a numerical indicator. Then walk through what the Tympan sends to communicate the button layout to the GUI. (Isn’t it cool that you can configure an app from the Tympan? I was so thrilled when our developer revealed this feature).

I’ve updated the example, 01-BasicGain_wApp, to show an indicator for digital gain. You can see what I added by viewing the recent commit:

An indicator is a button that doesn’t do anything. To update the label of the button, use the following line:

myTympan.println(“TEXT=BTN:” + btnId + “:”+text);

If you are running into trouble, enter ‘j’ to print out the JSON-like serial command that sets up the App’s interface. For the example above, the print statement is shown (with indentions and line breaks added). You can always resort to sending this command as one string instead of using the (TympanRemnoteFormatter.h library. Careful of all the brackets and braces!

JSON={'icon':'tympan.png','pages':
[{'title':'MyFirstPage',
    cards':[{'name':'Change Loudness',
        'buttons': [{'label':'-','cmd':'K','id':'minusButton','width':'4'},
            {'label':'0.00','cmd':'','id':'gainIndicator','width':'4'},
            {'label':'+','cmd':'k','id':'plusButton','width':'4'}
         ]
    }]
}],

'prescription':{'type':'BoysTown','pages':['serialMonitor','plot']}}