Web application elements for the Innovation Space Bachelor End Project (ISBEP)
Custom HTML elements in this repository allow robot data received from the ISBEP-Server to be dynamically displayed in a web app interface. The scripts are easily added and integrated into existing displays, as is shown with the example web app in this repository. The custom elements are fully written in pure javascript and do not require any additional frameworks, thus allowing them to be integrated directly into any HTML site.
Data-Receiver
The data receiver element makes a websocket client connection to receive data. The element uses its defined host-address attribute to know where to check for the web socket server. After establishing a connection the data receiver will emit a custom event named 'receivedata' that contains the received data.
Data-Listener
The data listener element is linked to a data receiver using the receiver-id attribute, which should represent the id attribute of the data receiver element. When the 'receivedata' event occurs the data listener will call the classes _receiveDataHandler() method, which a custom HTML element that extends the data listener class should implement.
Robot-Receiver and Robot-Listener
The robot receiver and robot listener elements extend the functionality of the data listener and receiver by filtering for a specific robot. These elements utilize the custom serial-number attribute to specify what robot to filter for. Therefore the robot receiver and listener will only emit the 'receivedata' event and call the _receiveDataHandler() method respectively when either the serial tag in the root of a JSON object does not exists or matches the specified number in the serial-number attribute.
Map-Situation
The map situation element provides a way to specify an area in which markers can be displayed with a specific position. Inside the map situation element map markers can be specified. The map can use the background-src attribute to specify what the background image should be and the situation-width, situation-height, situation-left-position and situation-top-position attributes to specify what area the map image represents.
Map-Marker
The map marker element can represent robot in an area defined by a map situation parent. The map marker is a robot listener with additional attributes that can specify the display icon (icon-src), horizontal position (x-position), and vertical position (z-position) of the marker.
Robot-Sensor
The robot sensor element is a robot listener that can display a value, which is also accessible as attribute, received from JSON data for a specified sensor key. The sensor-key attribute specifies for what key to recreive a value from a sensor named dictionary in the received robot data.
Robot-Camera
The robot camera element is a robot listener that retrieves and display an image element from data at the camera-key attribute location in received robot data.
In order to try out the example that functioned as part of the demonstrator follow the next steps.
- [1] Clone this repository locally using Git, for example by Git clone command
- [2] Ensure all dependencies are present
- [3] Open command prompt terminal in the local repository folder
- [4] Run command to execute web socket server script with Node.js
- [5] Send start command in server terminal
- [6] Click the index.html to start the web app
- [7] Send broadcast command in server terminal
- [8] Send position or sensor example data that will update the display
git clone https://github.com/marnikdenouden/ISBEP-WebApp
node webSocketServer.js
start
broadcast
{"serial": "00000000", "position": {"x": -0.5313510894775391, "y": 0.03349997103214264, "z": 0.7212914824485779}}
{"serial": "00000000", "sensor": {"temp":112.8743, "co":0.3927944, "ch4":0.5296978, "pressure":100.46093, "humid":18.7352333, "flow":1.67795694}}
The example web app interface as defined by the index.html, style.css, styleguide.css and globals.css was generated using the Anima Figma plugin from the Figma designed made by two psychology and technology students during the ISBEP project. Of course the custom HTML elements specified by this project were added after generation, as well as the script tag to showcase how to switch between the page robot.
The example web app uses Node.js in order to make a web socket server, while the custom HTML elements use the browser accepted WebSocket for a web socket connection as a client. The server requires Node.js for using the ws module.
Download and install the following software.