Run XVIZ in live mode

[sriselva21-mbrdi]

I am trying to run the below commands to make xviz server in live mode
UI - "yarn start-live or npm run start-live" in path of streetscape.gl-master\examples\get-started
Server - "python xviz-master\python\examples\serve_scenarios.py
The server is passing the metadata and state_update json to the UI in the websocket request, if i pass only one state_update the metrics are displayed in the UI, If i pass multiple state_update with different timestamp the UI is not loading, can anyone help me or correct me if made any mistake.

Metadata:
{'type': 'xviz/metadata', 'data': {'version': '2.0.0', 'streams': {'/vehicle/velocity': {'category': 'TIME_SERIES', 'units': 'm/s^2', 'scalar_type': 'FLOAT'}, '/vehicle/acceleration': {'category': 'TIME_SERIES', 'units': 'm/s^2', 'scalar_type': 'FLOAT'}, '/vehicle/wheel_angle': {'category': 'TIME_SERIES', 'units': 'm/s^2', 'scalar_type': 'FLOAT'}}, 'ui_config': {'Metrics': {'name': 'Metrics', 'config': {'type': 'PANEL', 'children': [{'type': 'CONTAINER', 'children': [{'type': 'METRIC', 'streams': ['/vehicle/velocity'], 'title': '/vehicle/velocity', 'description': '/vehicle/velocity'}, {'type': 'METRIC', 'streams': ['/vehicle/acceleration'], 'title': '/vehicle/acceleration', 'description': '/vehicle/acceleration'}, {'type': 'METRIC', 'streams': ['/vehicle/wheel_angle'], 'title': '/vehicle/wheel_angle', 'description': '/vehicle/wheel_angle'}], 'name': 'Metrics Panel', 'layout': 'vertical'}], 'name': 'Metrics'}}}}}

State Updates:
{'type': 'xviz/state_update', 'data': {'update_type': 'snapshot', 'updates': [{'timestamp': 1317042372.349, 'time_series': [{'timestamp': 1317042372.349, 'streams': ['/vehicle/velocity', '/vehicle/acceleration', '/vehicle/wheel_angle'], 'values': {'doubles': [103.5147680214713, 99.6941896903947, 108.34400237629795]}}]}]}}
{'type': 'xviz/state_update', 'data': {'update_type': 'snapshot', 'updates': [{'timestamp': 1317042472.349, 'time_series': [{'timestamp': 1317042472.349, 'streams': ['/vehicle/velocity', '/vehicle/acceleration', '/vehicle/wheel_angle'], 'values': {'doubles': [203.5147680214713, 199.6941896903947, 208.34400237629794]}}]}]}}

Data with one timestamp value

Data with multiple timestamp value

I am using windows 10 operating system

[prakhar114]

Hey, can you tell me how to pass the data from the server side to client in live mode?

[sriselva21-mbrdi]

Hey, can you tell me how to pass the data from the server side to client in live mode?

Use npm/yarn run start-live for streetscape.gl
Run server-scenario.py for websocket server
Default port 8081 is configured in log-from-live.js

[prakhar114]

Hey, So I changed the following in the code to pass the data->

async def main(self):
        #metadata = self._scenario.get_metadata()
        metadata = {'type': 'xviz/metadata', 'data': {'version': '2.0.0', 'streams': {'/vehicle/velocity': {'category': 'TIME_SERIES', 'units': 'm/s^2', 'scalar_type': 'FLOAT'}, '/vehicle/acceleration': {'category': 'TIME_SERIES', 'units': 'm/s^2', 'scalar_type': 'FLOAT'}, '/vehicle/wheel_angle': {'category': 'TIME_SERIES', 'units': 'm/s^2', 'scalar_type': 'FLOAT'}}, 'ui_config': {'Metrics': {'name': 'Metrics', 'config': {'type': 'PANEL', 'children': [{'type': 'CONTAINER', 'children': [{'type': 'METRIC', 'streams': ['/vehicle/velocity'], 'title': '/vehicle/velocity', 'description': '/vehicle/velocity'}, {'type': 'METRIC', 'streams': ['/vehicle/acceleration'], 'title': '/vehicle/acceleration', 'description': '/vehicle/acceleration'}, {'type': 'METRIC', 'streams': ['/vehicle/wheel_angle'], 'title': '/vehicle/wheel_angle', 'description': '/vehicle/wheel_angle'}], 'name': 'Metrics Panel', 'layout': 'vertical'}], 'name': 'Metrics'}}}}}
        await self._socket.send(json.dumps(metadata))

this works, but what I want to do is have a live session where my real-time data gets stored in the json file and then the json file is passed to the client.

[sriselva21-mbrdi]

Hey, So I changed the following in the code to pass the data->

async def main(self):
        #metadata = self._scenario.get_metadata()
        metadata = {'type': 'xviz/metadata', 'data': {'version': '2.0.0', 'streams': {'/vehicle/velocity': {'category': 'TIME_SERIES', 'units': 'm/s^2', 'scalar_type': 'FLOAT'}, '/vehicle/acceleration': {'category': 'TIME_SERIES', 'units': 'm/s^2', 'scalar_type': 'FLOAT'}, '/vehicle/wheel_angle': {'category': 'TIME_SERIES', 'units': 'm/s^2', 'scalar_type': 'FLOAT'}}, 'ui_config': {'Metrics': {'name': 'Metrics', 'config': {'type': 'PANEL', 'children': [{'type': 'CONTAINER', 'children': [{'type': 'METRIC', 'streams': ['/vehicle/velocity'], 'title': '/vehicle/velocity', 'description': '/vehicle/velocity'}, {'type': 'METRIC', 'streams': ['/vehicle/acceleration'], 'title': '/vehicle/acceleration', 'description': '/vehicle/acceleration'}, {'type': 'METRIC', 'streams': ['/vehicle/wheel_angle'], 'title': '/vehicle/wheel_angle', 'description': '/vehicle/wheel_angle'}], 'name': 'Metrics Panel', 'layout': 'vertical'}], 'name': 'Metrics'}}}}}
        await self._socket.send(json.dumps(metadata))

this works, but what I want to do is have a live session where my real-time data gets stored in the json file and then the json file is passed to the client.

Instead of sending json file just send the json data in another socket.send method but calling a while loop until the data is sent

t = 0
while True:
message = self._scenario.get_message(t)
await self._socket.send(json.dumps(message))

        t += 0.5
        await asyncio.sleep(0.5)

In the place of message you send ,your json data.

[prakhar114]

Thanks for the help, it worked! though I found that foxglove was easier to implement and hence I shifted to that.
Thank you again for the help.

[sriselva21-mbrdi]

Thanks for the help, it worked! though I found that foxglove was easier to implement and hence I shifted to that. Thank you again for the help.

Nice to hear that, I am also just started to look into foxglove and will be setting up foxglove in my local machine, If you could share the json schema or data flow of foxglove, it would be help full for me to use my customized data into json and test it. Since i was not able to find any sample complete data flow used by foxglove

[prakhar114]

Hey! I have started learning about it and for now I am using protobuff to keep a standardized data structure across all my files, as of the schemas for now I have been playing with these link

Once Completed I will share the same with you.

Best Regards
Prakhar

[sriselva21-mbrdi]

Thanks for the update, Actually i am looking for data layer/flow for foxglove, In uber avs they xviz and how the raw data is converted into xviz, how xviz is connected to ui and streams the data is clearly mentioned the data layer diagram. So i want to understand similar kind of for foxglove.

Xviz Data layer/Flow

[sriselva21-mbrdi]

I am passing lat, long values for map, But the position of the vehicle goes out of the path. I checked with lat & long coordinates in google map, the pin point to path.
Lat - 48.719744, Long - 8.879752
Is orientation value is mandatory to pass, How to get orientation values from lat & long values.