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 -- what is the model to bind with to get data from CustomCodec?



I'm following directions to add CustomCodec. However, the instructions to bind this to the GUI references how it's done for XDS. The example for XDS simply states:

"...

you will need to add your own gc.databind.registry.bind( function calls. There are a number of examples provided in javascript file.

..."

So, I do... but the even the example in the video simply reference two widgets, so both target and model are widgets.

What's the model name for my CustomCodec? What I really want to know is where the jsonObj ends up after target(jsonObj) is called. I assume it ends up where I bind it... hence where I'm stuck..

What I'm ultimately trying to do is simply display the Ascii output from the LaunchPad. Instead of Putty I just want the data displayed here. The reason is that we want to interleave Ascii encoded data with some other JSON data that is used by an existing GC application.

I see there's a console log. How is this displayed?

I see there's code to enable console output from customCodec_0.js: "gc.console.setCookie('CustomCodec',5);", but where should this be called from?

Is there a main() file with a reasonable init function?

  • Torbjorn,

    I have brought this to the attention of our GUI Composer experts and they should respond here. Thanks for your patience.

  • Name for custom codec: There is a name and an ID. Name is simply "custom" . It is registered in init function of customCodec_0.js file i.e. look for this line 

    gc.databind.registerCustomCodec("custom",CustomCodec, baseCodecs);

    The ID is what you would need to use when creating a binding between widgets and fields of your JSON object. The easiest way to obtain the ID is to open Project->Properties and navigate to 3rd page of the wizard where you can add transport/models. If you have just one transport (most likely) then right hand pane should show what the model options are including its ID. It most likely would be something like "my_usb_uart" . 

    The customCodecs "decode" function is inserted into middle of the flow and it is called whenever a custom codec is registered (see above) and it receives data. THe decode function will then need to parse/interpret the data and create a JSON object which then gets passed on to the model, which will then trigger widget updates. 

    Thus to connect it all together once you add a widget and want to connect to some field in your JSON object, you would select the widget, open the property page and select field that you want to populate (usually "value" ) and then select the model id (e.g. "my_usb_uart") from drop down and then enter the field of your JSON object. e.g. if you had a very simple {"led":0} object, then in right side edit box you would enter "led". Then if you target sends 0 or 1 values, then you could have a blink led display in your GUI. 

    Another way of approaching "decode" function is to parse, collect data, maybe perform some transformation and then start assigning results to widget's properties directly. 

    Console log is displayed when you open debugger (i.e. preview your application to run it, then hit F12 to open debugger, you can then click on Console tab to see the output. You can also set breakpoints in your CustomCodec implementation by opening a file e.g. CTRL+P and start typing Custom... 

    Martin

  • Thanks Martin,

    I notice the console log ends with "Failed to find id template_obj in the Application". It doesn't look like this should be a show stopper, and my guess is that this is a way to get access to widgets from within this CustomCodec module? However, nothing more happens in the program, although I'm at a minimum logging all data received on UART to console. Not even that happens, so I suspect the program doesn't go any further, and my_transport isn't connected. I see my_programloader changed to connected, but my_transport stays in "connecting" state.

  • After googling I found that it could have to do with something called DOM. So I changed to "my_element" which I found in index.gui, and now the error message is gone. I still have 7 errors related to CustomCodec. 6 are 404, and one is window.onload() never called.
  • Hi Martin,

    A little hickup. The output from our SimpleLink Display_ and Log_ drivers are ANSI coded. Could you help assess whether it would be possible to get a widget that can view HTML? I found a javascript ANSI to HTML codec; github.com/.../ansi_up. What I'm ultimately trying to do is have a Putty-like experience in a GC application. We plan to send both ANSI and JSON. (Might wrap one in the other to get it to work I guess). What we want is to keep the application "Display" alongside other data output.
  • Hi Torbjorn, 

    My apologies for delayed response. I was on vacation past couple of weeks. 

    Please let me know if you were able to get past the getting text. I would probably first make sure that the target is sending data through UART (e.g. using putty), then I would run the app and set a breakpoint right at the beginning of decode function, then hit F5 to restart the app. You should then hit the breakpoint and see what data is coming in, this may require adjustments to how data is parsed. 

    You are right that you would probably need to wrap ANSI data somehow. I would probably try to stick ANSI data in some JSON field, rather than the other way around. It is a bit easier to parse and extract information out of JSON strings. 

    Regarding displaying ANSI data. You could certainly use the converter that you found. I think you would need to upload the js file that does the conversion. I was thinking that we would need a new widget type to then display converted HTML, but another developer suggested using an iframe and settings its content to output of ansi_up. There is no graphical widget that you could drag and drop for an iframe, but you could switch from graphical design mode into text edit mode and add iframe directly to html. You would also need to add some CSS styling to control size/position. I would add any widget position it, switch to text mode (by pressing <> on GC Designer main toolbar) and then replace its tag with iframe (there should be examples on the web for what the tag needs to be). 

    Martin