The following is the HTML snippet that creates a textbox to enter the teleoperation topic and base frame ID inside the web application. When the button is pressed, the teleop object will start publishing Twist messages to the given input teleoperation topic.
<form >
Teleop topic:<br>
<input type="text" name="Teleop Topic" id='tele_topic'
value="/cmd_vel_mux/input/teleop">
<br>
Base frame:<br>
<input type="text" name="Base frame" id='base_frame_name'
value="/odom">
<br>
<input type="button" onmousedown="submit_values()" value="Submit">
</form>
The following code tries to load the init() function when the web page is loaded, but we've coded it in a way that it will initialize only when the Submit button is pressed:
<body onload="init()">
The slider and 3D viewer are displayed in the following HTML:
<div id="speed-label"></div>
<div id="speed-slider"></div>
<div id="urdf"></div>