| ROS Resources: Documentation | Support | Discussion Forum | Index | Service Status | ros @ Robotics Stack Exchange |
Hello Community,
Hope you are doing all fine with all what is happening. I am starting to develop a webpage with roslib and rosbridge to receive data from a topic. I just succeeded in visualising a string from topic to html. I would like to publish lots of topics like every 1 second and read it in real time in HTML. How can i do that please, i'm stuck.
Thank you !
Sounds like you already understand the basics and able to show string data in HTML page using roslibjs, standard ROS JavaScript library, by following tutorial "Basic ROS functionality with roslibjs"
From my experience visualizing ROS data in HTML is pretty much real time for the applications I have built in the past if you have good network connection between browser and backend ROS system. This will be especially true if you are planning to show 1Hz data (i.e. once a second)
roslibjs is working along with rosbridge_server that exposes all topics, services and parameters to the browser. rosbridge_server ensures that every time data is published to a topic in backend ROS system, your subscription in the browser will get a callback and that is when you can update your HTML with the new data from the topic
There is a lot of ways to update HTML and it is beyond scope of ROS. It can be standard HTML approach as well as any framework designed for dynamic HTML updates (e.g., jQuery, KnockoutJS, AngularJS, ReactJS, etc, etc)
I personally like KnockoutJS for simple pages because it can be simple addition to standard HTML/JavaScript pages. However, as I said, there is a lot of good frameworks outthere if you are planning to build some serious web apps on top of ROS.
If you are looking for something out of the box that will help you visualize ROS data in the browser without much programming you could consider webviz.io (https://webviz.io/) - recently built by Cruise team and they recently enabled live data to ROS backend via rosbridge_server . I have not personally tried it but it looks solid as it has been developed by a serious organization. They also presented about WebViz on the latest RosCon2019 - video is here and slides are here
Hopefully this will give you enough information to achieve what you have in mind
Asked: 2020-04-13 10:02:27 -0500
Seen: 1,169 times
Last updated: Apr 18 '20
ROS Answers is licensed under Creative Commons Attribution 3.0 Content on this site is licensed under a Creative Commons Attribution Share Alike 3.0 license.
Sounds like you already understand the basics and able to show string data in HTML page
Can you be more specific what you are looking for in this question ?
From my experience visualizing ROS data in HTML is pretty much real time for the applications I have built in the past especially if you are planning to show1Hz data (i.e. once a second)
Hello Sir, Thank you so much for your reply. Means alot. I have followed the tutorial in this link of showing the "Hello World' text into html using roslib.js and rosbridge: http://wiki.ros.org/roslibjs/Tutorial.... So about my requirements, i want to send a topic (or more) that contains lots of data (Strings, numbers) in realtime and be able to visualise that in my Html page in real time. And after that i can use that data in html divs. Hope i was more clear. I really do need help. Thank you again & stay safe !
Sorry but it did not clarify what you are struggling with. You mentioned that you already visualized string topic in HTML. That is, you already know how to get data from a topic and how to assign it into HTML. What else are you looking for ? Are you looking for more help on HTML or ROS messages side ?
I want to send a topic with a frequency and being able to show it in the web console with that frequency. Because in the tutorial, i have succeeded at showing the "Hello world" only once in the console. And after that, i would like to show what is showing the web in a div or multiple divs in an interactive way ( I want to see data changing, here i don't know if i should use something like Jquery or is there a better solution maybe using ROS ? )