How to add time series chart and image display in the circle scenario example in python ?

I’m trying to add a time series chart and image (video) visualisation in the python example. Here are the changes I made so far

in circle.py add the stream definition

         (builder.stream("/vehicle/velocity")
                 .category(xviz.CATEGORY.TIME_SERIES)
                 .type(xviz.SCALAR_TYPE.FLOAT)
                 .unit('m/s'))
 
             (builder.stream("/vehicle/acceleration")
                 .category(xviz.CATEGORY.TIME_SERIES)
                 .type(xviz.SCALAR_TYPE.FLOAT))
 
             (builder.stream("/camera/front")
                .category(xviz.CATEGORY.PRIMITIVE)
                 .type(xviz.PRIMITIVE_TYPES.IMAGE)
                )

and some sample data

        builder.time_series('/vehicle/velocity').timestamp(timestamp).value(5.0)
        builder.time_series('/vehicle/acceleration').timestamp(timestamp).value(0.1)
        with open("image.png", "rb") as img_data:
            builder.primitive("/camera/front").image(data=img_data.read())

These stream appears in the stream tree of the UI but the chart nor the image as shown below

How to make them show up in the GUI ?

[hfukada]

I know this thread is old and I hate reviving old threads, but:

import xviz_avs.builder
...
# Build your metadata message with the UIBuilder.

            ui_builder = xviz_avs.builder.XVIZUIBuilder()
            graphs = ui_builder.panel('Metrics')
            graphs.child(ui_builder.metric(["/vehicle/velocity"], title="Metrics", description="Vehicle Velocity"))
            ## Add more children for more graphs.
            ui_builder.child(graphs)
            builder = xviz_avs.XVIZMetadataBuilder()   
            builder.stream('/vehicle/velocity').category(xviz_avs.CATEGORY.TIME_SERIES).type(xviz_avs.SCALAR_TYPE.FLOAT).unit('km/h')

Is working for me.

The UIBuilder declarative UI is hooking up to the ReactComponent

          <XVIZPanel log={log} name="Metrics" />                                                          

At least in the “getting started” lab/examples, hooking in your own data requires you to declare the stream_id <-> Metric.name portions as part of the process.

I also found it confusing how I had to do both react and seemingly python declarative UI, but it’s like a container in a container. GL

[twojtasz]

The python Declarative UI bindings is recent. I have an example but it’s in a different repository. I’ll verify it today and let you know.

On Mon, Aug 10, 2020 at 9:13 AM aalibasic [e-mail] wrote:

@twojtasz https://github.com/twojtasz - an example would be awesome - I was not able to find documentation on how to add these bindings.

If I can get your example working, maybe I will add a specific example via a PR on how to get the camera image going so it is more clear to others in the future.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/uber/xviz/issues/607#issuecomment-671448609, or unsubscribe https://github.com/notifications/unsubscribe-auth/AALUBXATTMKH34PATI4DN6DSAAMA5ANCNFSM4PGEZ63A .