feat: add autoware_web_controller packages (autowarefoundation#97)

* release v0.4.0 * add control mode status (autowarefoundation#709) Signed-off-by: Yamato Ando <yamato.ando@gmail.com> * Change localization diag namespace (autowarefoundation#718) * Change default value of output_diagnostics_topic Signed-off-by: Kenji Miyake <kenji.miyake@tier4.jp> * Remove localization_diagnostic.js from web_controller Signed-off-by: Kenji Miyake <kenji.miyake@tier4.jp> * Integrate localization diag to diagnostic_aggregator Signed-off-by: Kenji Miyake <kenji.miyake@tier4.jp> * Delete old and unused publisher Signed-off-by: Kenji Miyake <kenji.miyake@tier4.jp> * remove ROS1 packages temporarily Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * add sample ros2 packages Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * remove ROS1 packages Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * Revert "remove ROS1 packages temporarily" This reverts commit 741214959ba02ec8650c62538581d9df9116eef8. Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * add COLCON_IGNORE to ros1 packages Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * Port web controller (autowarefoundation#235) * [autoware_web_controller] intial port to ROS2 Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * add missing dependencies Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * remove dependency to ament_cmake_auto and depend on ament_cmake Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * [autoware_web_controller] add messages to exec_depend Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * [autoware_web_controller] moved files in www into autoware_web_controller directory Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * Ros2 v0.8.0 engage (autowarefoundation#342) * [autoware_vehicle_msgs]: Add engage message Signed-off-by: wep21 <border_goldenmarket@yahoo.co.jp> * [as]: Update message Signed-off-by: wep21 <border_goldenmarket@yahoo.co.jp> * [awapi_awiv_adapter]: Update message Signed-off-by: wep21 <border_goldenmarket@yahoo.co.jp> * [web_controller]: Update message Signed-off-by: wep21 <border_goldenmarket@yahoo.co.jp> * [vehicle_cmd_gate]: Update message Signed-off-by: wep21 <border_goldenmarket@yahoo.co.jp> * [autoware_state_monitor]: Update message Signed-off-by: wep21 <border_goldenmarket@yahoo.co.jp> * [autoware_control_msgs]: Remove EngageMode message Signed-off-by: wep21 <border_goldenmarket@yahoo.co.jp> * [simple_planning_simulator]: Update message Signed-off-by: wep21 <border_goldenmarket@yahoo.co.jp> * Fix autoware web controller (autowarefoundation#389) * fix message types Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * fix subscriber for autoware_engage Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * fix vehicle_engage.js Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * fix function syntax for vehicle_engage.js Signed-off-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> * add use_sim-time option (autowarefoundation#454) * Format launch files (autowarefoundation#1219) Signed-off-by: Kenji Miyake <kenji.miyake@tier4.jp> * Remove use_sim_time for set_parameter (autowarefoundation#1260) Signed-off-by: wep21 <border_goldenmarket@yahoo.co.jp> * Add pre-commit (autowarefoundation#1560) * add pre-commit * add pre-commit-config * add additional settings for private repository * use default pre-commit-config * update pre-commit setting * Ignore whitespace for line breaks in markdown * Update .github/workflows/pre-commit.yml Co-authored-by: Kazuki Miyahara <kmiya@outlook.com> * exclude svg * remove pretty-format-json * add double-quote-string-fixer * consider COLCON_IGNORE file when seaching modified package * format file * pre-commit fixes * Update pre-commit.yml * Update .pre-commit-config.yaml Co-authored-by: Kazuki Miyahara <kmiya@outlook.com> Co-authored-by: pre-commit <pre-commit@example.com> Co-authored-by: Kenji Miyake <31987104+kenji-miyake@users.noreply.github.com> * Add markdownlint and prettier (autowarefoundation#1661) * Add markdownlint and prettier Signed-off-by: Kenji Miyake <kenji.miyake@tier4.jp> * Ignore .param.yaml Signed-off-by: Kenji Miyake <kenji.miyake@tier4.jp> * Apply format Signed-off-by: Kenji Miyake <kenji.miyake@tier4.jp> * Improve avoidance algorithm in behavior_path_planner (autowarefoundation#2127) * add debug comment Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * use same clock and logger Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * update Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * remove Frenet struct Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * update Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * change param Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * Correspond exactly to the modified and raw shift points. Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * separate structure file Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * update Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * fix return shift calculation Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * add index info on path marker Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * update returnSHift func Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * update param Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * update findNewShiftPoiint logic by using linear shifter Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * fix return distance calculation Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * fix return shift for steep shape Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * fix for return shift after approval Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * re-fix for return shift after approval Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * re-re-fix for return shift after approval Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * add same object_id shift for parent_ids even if it is not overwrapped. Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * fix clock for approval_handler Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * fix bug: extra_return_shift is not registered Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * update - update logic of unique check for registered shift - update addReturnShift func to support for opposite obstacle case - disable trimSmallShift Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * use relative shift for avoid start point Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * update path_shifter: use end_point shift for relative shift calculation so that the desired shift length is set at shift_point's end_idx (before, it was set at the end point of the path) Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * update: select existing shift point that will be removed before adding a new one Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * fix path_shifter: current_shift for linear shift Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * update - add ignore over-jerk shift function - improve debug print Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * update - add control flag for debug print - add control flag for debug marker Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * TMP: add sparse resampling to reduce computational cost Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * update parameter: min_nominal_avoidance_speed 3.0 -> 5.0 Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * cosmetic change - move some debug functions to debug.cpp - remove temporal debug comment - remove unused params - parametrize some values - align function decleration order Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * add empty avoidance design Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * applly format Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * fix typo Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * fix design.md directory Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * change variable nale sudden, tight -> sharp Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * remove unused param Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * fix default value Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * add design Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * move some functions to util Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * fix design typo Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * remove temporal mutable & adjust function name Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * parametrize some hard-coded params Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * follow ament_uncrustify & cpplint Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * fix parent_id inheritance bug Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * back to experiment config Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * update trim filter: trimSharpReturn Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * add lost-detection compensator Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * resolve todo for empty path Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * change param: set false for debug publisher Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * update debug comment Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * remove unused debug print Signed-off-by: TakaHoribe <horibe.takamasa@gmail.com> * update default param Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * use closest footpoint from ego for avoidance point Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * cosmetic change Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * fix format Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * fix typo Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * move lateral and longitudinal distance calculation to util Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * simplify mergeShift function Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * fix format Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * fix typo Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * fix readme style Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * revert unexpected changes Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * - remove unused comment - translate to english Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * apply format Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * fix typo Signed-off-by: Takamasa Horibe <horibe.takamasa@gmail.com> * Fix/update velocity limit topic name (autowarefoundation#2223) * Add COLCON_IGNORE (autowarefoundation#500) Signed-off-by: Kenji Miyake <kenji.miyake@tier4.jp> * autoware_web_controller port to .auto (autowarefoundation#522) * Porting to .auto * Modified web url * [autowere_web_controller/autoware_state_monitor/emergency_handler]fix some packages (autowarefoundation#603) * fix vehicle_engage.js * fix autoware_state_monitor param * fix emergency_handler * oh * update autoware_state.js * [autoware_web_controller]add readme (autowarefoundation#611) * add png * add readme * Update common/util/web_controller/autoware_web_controller/README.md Co-authored-by: Kazuki Miyahara <kmiya@outlook.com> * apply format * fix type Co-authored-by: Kazuki Miyahara <kmiya@outlook.com> * fix depend * ci(pre-commit): autofix Co-authored-by: mitsudome-r <ryohsuke.mitsudome@tier4.jp> Co-authored-by: YamatoAndo <yamato.ando@gmail.com> Co-authored-by: Kenji Miyake <31987104+kenji-miyake@users.noreply.github.com> Co-authored-by: Ryohsuke Mitsudome <43976834+mitsudome-r@users.noreply.github.com> Co-authored-by: Daisuke Nishimatsu <42202095+wep21@users.noreply.github.com> Co-authored-by: Keisuke Shima <19993104+KeisukeShima@users.noreply.github.com> Co-authored-by: Kazuki Miyahara <kmiya@outlook.com> Co-authored-by: pre-commit <pre-commit@example.com> Co-authored-by: Takamasa Horibe <horibe.takamasa@gmail.com> Co-authored-by: Satoshi OTA <44889564+satoshi-ota@users.noreply.github.com> Co-authored-by: Yohei Mishina <66298900+YoheiMishina@users.noreply.github.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Takeshi Miura <57553950+1222-takeshi@users.noreply.github.com>
mkuri · Dec 3, 2021 · e68bd81 · e68bd81
1 parent bd4111f
commit e68bd81
Show file tree

Hide file tree

Showing 15 changed files with 878 additions and 0 deletions.
diff --git a/common/autoware_web_controller/CMakeLists.txt b/common/autoware_web_controller/CMakeLists.txt
@@ -0,0 +1,13 @@
+cmake_minimum_required(VERSION 3.5)
+project(autoware_web_controller)
+
+find_package(ament_cmake REQUIRED)
+
+install(DIRECTORY
+  launch
+  www
+  DESTINATION share/${PROJECT_NAME}/
+)
+
+ament_package(
+)
diff --git a/common/autoware_web_controller/README.md b/common/autoware_web_controller/README.md
@@ -0,0 +1,42 @@
+# autoware_web_controller
+
+## Purpose
+
+This packages is for visualizing the status of Autoware and sending topics for Autoware from a web page.
+
+## Inputs / Outputs
+
+### Input
+
+| Name                                               | Type                                            | Description                  |
+| -------------------------------------------------- | ----------------------------------------------- | ---------------------------- |
+| `/control/current_gate_mode`                       | `autoware_control_msgs::msg::GateMode`          | Gate mode (AUTO or EXTERNAL) |
+| `/autoware/state`                                  | `autoware_auto_system_msgs::msg::AutowareState` | State of Autoware            |
+| `/autoware/engage`                                 | `autoware_auto_system_msgs::msg::Engage`        | Engage signal for Autoware   |
+| `/vehicle/engage`                                  | `autoware_auto_system_msgs::msg::Engage`        | Engage signal for a vehicle  |
+| `/planning/scenario_planning/max_velocity_default` | `autoware_planning_msgs::msg::VelocityLimit`    | Max velocity of Autoware     |
+
+### Output
+
+| Name                                                                                                    | Type                                         | Description                                                                               |
+| ------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `/planning/scenario_planning/lane_driving/behavior_planning/behavior_path_planner/path_change_approval` | `autoware_planning_msgs::msg::Approval`      | Send an approval signal for path change request such as lane change or obstacle avoidance |
+| `/autoware/engage`                                                                                      | `autoware_auto_system_msgs::msg::Engage`     | Send an engage signal for Autoware                                                        |
+| `/vehicle/engage`                                                                                       | `autoware_auto_system_msgs::msg::Engage`     | Send an engage signal for a vehicle                                                       |
+| `/planning/scenario_planning/max_velocity_default`                                                      | `autoware_planning_msgs::msg::VelocityLimit` | Set a max velocity of Autoware                                                            |
+
+## Parameter
+
+### Core Parameters
+
+None
+
+## Assumptions / Known limits
+
+TBD.
+
+## Usage
+
+1. Access to <http://localhost:8085/autoware_web_controller> after launching Autoware.
+   ![select_panel](./images/web_controller.png)
+2. Check the status of Autoware or send topics by the buttons.
diff --git a/common/autoware_web_controller/images/web_controller.png b/common/autoware_web_controller/images/web_controller.png
diff --git a/common/autoware_web_controller/launch/autoware_web_controller.launch.xml b/common/autoware_web_controller/launch/autoware_web_controller.launch.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<launch>
+  <!-- Web Controller -->
+
+  <executable cmd="python3 -m http.server 8085" cwd="$(find-pkg-share autoware_web_controller)/www" name="web_server"/>
+  <node pkg="rosbridge_server" exec="rosbridge_websocket" name="rosbridge_server_node">
+  </node>
+</launch>
diff --git a/common/autoware_web_controller/package.xml b/common/autoware_web_controller/package.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<?xml-model href="http://download.ros.org/schema/package_format3.xsd" schematypens="http://www.w3.org/2001/XMLSchema"?>
+<package format="3">
+  <name>autoware_web_controller</name>
+  <version>0.1.0</version>
+  <description>The autoware_web_controller package</description>
+
+  <maintainer email="yukihiro.saito@tier4.jp">Yukihiro Saito</maintainer>
+  <license>Apache License 2.0</license>
+
+  <buildtool_depend>ament_cmake</buildtool_depend>
+
+  <exec_depend>autoware_auto_system_msgs</exec_depend>
+  <exec_depend>autoware_control_msgs</exec_depend>
+  <exec_depend>autoware_planning_msgs</exec_depend>
+  <exec_depend>rosbridge_server</exec_depend>
+  <exec_depend>std_msgs</exec_depend>
+
+  <export>
+    <build_type>ament_cmake</build_type>
+  </export>
+</package>
diff --git a/...autoware_web_controller/www/autoware_web_controller/css/autoware_web_controller_style.css b/...autoware_web_controller/www/autoware_web_controller/css/autoware_web_controller_style.css
@@ -0,0 +1,62 @@
+.menu {
+  position: absolute;
+  float: left;
+  left: 3%;
+  top: 50pt;
+}
+
+.time {
+  font-size: small;
+}
+
+.contents {
+  position: absolute;
+  left: 200pt;
+  right: 10%;
+  float: right;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#wrapper {
+  width: 80%;
+  margin: 0 auto 0 20px;
+}
+
+h1 {
+  height: auto;
+  margin: 40px 0 10px 20px;
+  padding: 0;
+  color: #444444;
+  font-size: 30px;
+  font-weight: bold;
+  border-top: 0;
+  line-height: 1.5;
+}
+
+h2 {
+  margin: 60px 0 10px 0;
+  padding: 0 0 0 15px;
+  font-size: 26px;
+  font-weight: bold;
+  border-width: 0 0 0 4px;
+  border-style: solid;
+  border-color: #0f5296;
+}
+
+h3 {
+  padding: 20px 0 5px 0px;
+  font-size: 22px;
+  font-weight: bold;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  border-color: #e6e6e6;
+}
+
+form {
+  display: inline-block;
+  margin: 0 5px;
+}
diff --git a/common/autoware_web_controller/www/autoware_web_controller/icon/autoware.ico b/common/autoware_web_controller/www/autoware_web_controller/icon/autoware.ico
diff --git a/common/autoware_web_controller/www/autoware_web_controller/index.html b/common/autoware_web_controller/www/autoware_web_controller/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
+    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+    <title>Autoware WEB Controller</title>
+    <link rel="shortcut icon" href="icon/autoware.ico" />
+    <link rel="stylesheet" href="css/autoware_web_controller_style.css" type="text/css" />
+    <script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
+    <script src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
+    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
+    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
+    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
+    <script type="text/javascript" src="js/autoware_state.js"></script>
+    <script type="text/javascript" src="js/autoware_engage.js"></script>
+    <script type="text/javascript" src="js/vehicle_engage.js"></script>
+    <script type="text/javascript" src="js/velocity_limit.js"></script>
+    <script type="text/javascript" src="js/path_change_approval.js"></script>
+    <style>
+      .ui-menu {
+        min-width: 90px;
+        max-width: 150px;
+      }
+
+      .ui-menu .ui-menu-item {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- menu -->
+    <ul id="menu" class="menu">
+      <li id="menu_autoware"><a href="#autoware">Autoware</a></li>
+      <li id="menu_vehicle"><a href="#vehicle">Vehicle</a></li>
+      <li>
+        <a href="https://gitlab.com/autowarefoundation/autoware.auto/AutowareAuto" target="_blank"
+          >Github</a
+        >
+      </li>
+      <li><a href="https://webviz.io/app/" target="_blank">Webviz</a></li>
+      <li class="ui-state-disabled"><a href="#">Amesville</a></li>
+    </ul>
+    <div class="contents">
+      <h1>Status： <label id="state">Disconnect</label></h1>
+      <div id="autoware">
+        <h2>Autoware</h2>
+
+        <h3>Autoware State : <span id="autoware_state"> - </span></h3>
+        <textarea readonly id="autoware_state_msg" rows="20" , cols="200"></textarea>
+
+        <h3>Autoware Engage :<span id="autoware_engage_info"> - </span></h3>
+        <form action="javascript:AutowareEngagePublisher.send('Engage');" id="ui">
+          <input type="submit" value="Engage" id="btn" /><br />
+        </form>
+        <form action="javascript:AutowareEngagePublisher.send('Disengage');" id="ui">
+          <input type="submit" value="Disengage" id="btn" /><br />
+        </form>
+        <div>
+          <span>Status:</span>
+          <span id="autoware_engage_status"> - </span>
+        </div>
+        <h3>Vehicle Engage</h3>
+        <form action="javascript:VehicleEngagePublisher.send('Engage');" id="ui">
+          <input type="submit" value="Engage" id="btn" /><br />
+        </form>
+        <form action="javascript:VehicleEngagePublisher.send('Disengage');" id="ui">
+          <input type="submit" value="Disengage" id="btn" /><br />
+        </form>
+        <div>
+          <span>Status:</span>
+          <span id="vehicle_engage_status"> - </span>
+        </div>
+        <div>
+          <span>Control Mode:</span>
+          <span id="vehicle_control_mode_status"> - </span>
+        </div>
+        <h3>Velocity Limit : <span id="velocity_limit_info"> - </span></h3>
+        <form action="javascript:VelocityLimitPublisher.send();" id="ui" name="velocity_limit_form">
+          <input type="text" name="velocity_limit" />
+          <input type="submit" value="Send" id="btn" /><br />
+        </form>
+        <div>
+          <span>Status:</span>
+          <span id="velocity_limit_status"> - </span>
+          <span>km/h</span>
+        </div>
+        <h3>Path Change Approval : <span id="path_change_approval_info"> - </span></h3>
+        <form action="javascript:PathChangeApprovalPublisher.send();" id="ui">
+          <input type="submit" value="Approve" id="btn" /><br />
+        </form>
+        <div>
+          <span>Status:</span>
+          <span id="path_change_approval_status"> - </span>
+        </div>
+      </div>
+      <div id="vehicle">
+        <h2>Vehicle</h2>
+        <hr size="2" color="#333333" width="100%" />
+      </div>
+    </div>
+  </body>
+  <script type="text/javascript" src="js/menu.js"></script>
+</html>
diff --git a/common/autoware_web_controller/www/autoware_web_controller/js/autoware_engage.js b/common/autoware_web_controller/www/autoware_web_controller/js/autoware_engage.js
@@ -0,0 +1,94 @@
+if (!AutowareEngagePublisher) {
+  var AutowareEngagePublisher = {
+    ros: null,
+    name: "",
+    init: function () {
+      this.ros = new ROSLIB.Ros();
+      this.ros.on("error", function (error) {
+        document.getElementById("autoware_engage_info").innerHTML = "Error";
+      });
+      this.ros.on("connection", function (error) {
+        document.getElementById("autoware_engage_info").innerHTML = "Connected";
+      });
+      this.ros.on("close", function (error) {
+        document.getElementById("autoware_engage_info").innerHTML = "Closed";
+      });
+      this.ros.connect("ws://" + location.hostname + ":9090");
+    },
+    send: function (value) {
+      var pub = new ROSLIB.Topic({
+        ros: this.ros,
+        name: "/autoware/engage",
+        messageType: "autoware_auto_vehicle_msgs/Engage",
+        latch: "true",
+      });
+
+      if (value == "Engage") {
+        var str = new ROSLIB.Message({
+          stamp: {
+            sec: 0,
+            nanosec: 0,
+          },
+          engage: true,
+        });
+        pub.publish(str);
+      } else {
+        var str = new ROSLIB.Message({
+          stamp: {
+            sec: 0,
+            nanosec: 0,
+          },
+          engage: false,
+        });
+        pub.publish(str);
+      }
+    },
+  };
+  AutowareEngagePublisher.init();
+
+  window.onload = function () {};
+  window.onunload = function () {
+    AutowareEngagePublisher.ros.close();
+  };
+}
+if (!AutowareEngageStatusSubscriber) {
+  var AutowareEngageStatusSubscriber = {
+    ros: null,
+    name: "",
+    init: function () {
+      this.ros = new ROSLIB.Ros();
+      this.ros.on("error", function (error) {
+        document.getElementById("state").innerHTML = "Error";
+      });
+      this.ros.on("connection", function (error) {
+        document.getElementById("state").innerHTML = "Connect";
+      });
+      this.ros.on("close", function (error) {
+        document.getElementById("state").innerHTML = "Close";
+      });
+      this.ros.connect("ws://" + location.hostname + ":9090");
+
+      var sub = new ROSLIB.Topic({
+        ros: this.ros,
+        name: "/autoware/engage",
+        messageType: "autoware_auto_vehicle_msgs/Engage",
+      });
+      sub.subscribe(function (message) {
+        const div = document.getElementById("autoware_engage_status");
+        if (div.hasChildNodes()) {
+          div.removeChild(div.firstChild);
+        }
+        var res = message.engage;
+        var el = document.createElement("span");
+        el.innerHTML = res;
+        document.getElementById("autoware_engage_status").appendChild(el);
+      });
+    },
+  };
+  AutowareEngageStatusSubscriber.init();
+
+  window.onload = function () {};
+  window.onunload = function () {
+    AutowareEngageStatusSubscriber.ros.close();
+  };
+}
diff --git a/common/autoware_web_controller/www/autoware_web_controller/js/autoware_state.js b/common/autoware_web_controller/www/autoware_web_controller/js/autoware_state.js
@@ -0,0 +1,45 @@
+if (!AutowareStateSubscriber) {
+  var AutowareStateSubscriber = {
+    ros: null,
+    name: "",
+    init: function () {
+      this.ros = new ROSLIB.Ros();
+      this.ros.connect("ws://" + location.hostname + ":9090");
+
+      var sub = new ROSLIB.Topic({
+        ros: this.ros,
+        name: "/autoware/state",
+        messageType: "autoware_auto_system_msgs/AutowareState",
+      });
+
+      sub.subscribe(function (message) {
+        var res = "";
+        if (message.state == 1) {
+          res = "INITIALIZING";
+        } else if (message.state == 2) {
+          res = "WAITING_FOR_ROUTE";
+        } else if (message.state == 3) {
+          res = "PLANNING";
+        } else if (message.state == 4) {
+          res = "WAITING_FOR_ENGAGE";
+        } else if (message.state == 5) {
+          res = "DRIVING";
+        } else if (message.state == 6) {
+          res = "ARRIVED_GOAL";
+        } else if (message.state == 7) {
+          res = "FINALIZING";
+        } else {
+          res = "Undefined";
+        }
+
+        document.getElementById("autoware_state").innerHTML = res;
+      });
+    },
+  };
+  AutowareStateSubscriber.init();
+
+  window.onload = function () {};
+  window.onunload = function () {
+    AutowareStateSubscriber.ros.close();
+  };
+}