Web Interface for ROS

Hey @marco.nc.arruda , I am having the same problem as before on the next section.

Here is a link to the github https://github.com/grantjohnson13/Web-Interface-for-Ros
This is the exact code that they had me copy.

Here is what the console looks like,


I think the html is wrong, both files have javascript code.

yes that is my fault, I copied it wrong into the github. However it is correct on the simulation. I updated the github so you should be able to see the correct version now.

Great, I just tried and it worked for me.

Can you check if your main.js file is at the same folder as index.html?

Could you take a screenshot of your Network tab? Open it and reload the page, so we can see if all the files are being loaded properly. Check the image below, this is the expected result (Please, ignore the favicon error, it is not related at all):


I can assure you that they are in the same folder because I am getting errors from the javascript file and seeing some of the html


Thank you for the screnshots.

I just tried the webpage you have running in your current academy session. It seems to be working properly.

Are you trying the same webpage in a different environment?It may need a different configuration, if you are using another http server.

I am just using the command webpage_address is that what you are doing? @marco.nc.arruda

Yes, this is your current webpage address:

And rosbridge address:

Are you trying to connect to this address? In the video below, I’m connecting to your webpage and your rosbridge server at your current academy session:

I am wondering if maybe restarting the program will work because I was having similar issues to this but I came back after the weekend and it worked. What is the best way to restart everything? @marco.nc.arruda

@marco.nc.arruda I am also getting this error in the console and you are not. Could this be the source of my problems?

Download the Vue Devtools extension for a better development experience:


This is not an error, just informing you that you could use Vue Debugger tools, but it is not necessary.

So, could it be that you tried to open the page and maybe your academy session was closed due to inactivity?

Was it working right now like the video I posted?

Could you record a video?

I can not record a video today, but I likely could tomorrow. I am following what you did in the video and can show you in the screenshot.

Hi @granty100 ,

I can’t see the URL, if it is correct. I accessed the exactly same webpage and got it working.

Do you have any plugins installed in your browser? Which browser are you working with?
Are you connected through any firewalls?

The message says vueApp is not defined, it could be a typo in main.js file, but I don’t see that error in the version you sent to github.

@marco.nc.arruda I am using chrome and it seems to be working today. I do not know why this keeps happening but when I come back after leaving the computer for the night, it works.

Hi @granty100 ,

Are you leaving the course page opened?
If so, our system will save your files and close the session assigned to you, so it should stop working.

I recommend you saving everything you have opened and close the webpage whenever you finish your daily studying. Whenever you come back, the system will turn everything on and it must work 100% of the times. But leaving the system tab open does not guarantee rosbridge and simulation running.

No, I do not leave the page open. I have to reopen it where the simulation and terminals are reset, then it seems to work.

I understand.

That is the correct procedure, whenever you need terminals and simulation, make sure you have them running in the webpage.

Please, let me know if I can help with anything else.