Display Node
The Display Node is responsible for implementing the AI Robot Web Controller. It provides a web interface for the AI Robot, providing operational views on the current running state of the robot. This node provides a browser interface, implemented as a Flask based web application.
Implementation
To support the web browser features, this node starts a web application in flask:
loading...
The web application and the variables used by the route actions are at a global level
The remainder of the implementation is split between the node implementation and the route actions supporting the web application pages.
Index Page
loading...
The web application is a single page application described by the index page template.
loading...
In this template we have a block called body that is provided by a partial template. This route to this partial is described by the name parameter passed to this page. For example: /nodes returns the partial for the node status page.
Home Page
loading...
This route returns the partial template for the home page:
loading...
On this page we show the video feed and the current status of the robot. The video feed is made to a call to the route action /video_feed and the status is populated through an AJAX call to the action /status
Video Feed
loading...
This action is called from the home and controller pages to display the video. This page returns a video stream to the calling page which is displayed in an image tag.
To stream is generated to a call to the generate method:
loading...
This method waits for a frame to be available and then yields the frame as a steam content of image/jpg mime type.
Status
loading...
This endpoint is called to return the current status of the robot. This is called from the home page as a AJAX call and returns a JSON payload for the status information.
Node Status Page
loading...
This page displays the current running status of the registered nodes. This page uses the nodes template:
loading...
The page displays a tbody variable which contains the markup for the table listing the nodes and their status. This markup is generated by the route action by iterating the list of nodes and building table rows from this data.
Shutdown Page
loading...
This page is called when the Shutdown button is pressed. the route action publishes a shutdown event and then loads the partial shutdown.html indicating the system is shutting down:
loading...
The shutdown page may show for little or no time as the event to shutdown results in the web application being shut down.
Robot Controller Page
loading...
This page displays the controls for manually controlling the robot. The route action is called to load the controller.html partial:
loading...
Toggling Manual / Automatic Mode
On the page, Javascript is used to control the showing and hiding of the controls and the toggling between manual and automatic control:
loading...
Toggling the mode results in an AJAX call to the toggle manual mode endpoint:
loading...
Video Feed
When in manual mode, the video feed is available. This works in the same way as implemented on the main page:
loading...
Drive Update
The controls on the page allow the user to move the robot in compass directions and rotate the robot left and right. This calls Javascript to send commands to move the robot:
loading...
This is handled by the Drive Update endpoint:
loading...
Node Implementation
The Display Node implements a Node based class. This class subscribes to the events display-node-frame and system-status. The frame is used to setup the frame to render on the home page and control page:
loading...
In this callback the frame to render is converted to an image and the function then sets up a signal to process the frame.
On receiving a system-status event, the callback status_update is called to update the global status data:
loading...
As well as handling events, the node starts a thread to run the web application under:
loading...