Extending edgertronic capabilities - Extending or replacing the web UI
Latest Software Release Summary
- Quick Overview
- Extending the functions
- Extending the web UI
- Latest Software Release Summary
- Updating camera software
- Contact Us
- 1 Overview
- 2 Web UI modes of operation
- 3 Developer hints
- 4 Visual elements summary
- 5 Web UI event handling
You can examine the Web UI code by browsing to the camera, right mouse click outside the live preview or setting modal window, and select view source. The 2500 or so lines of code can be referred to as you read the Web UI design information provided below. This documentation is for developers who want to customize the edgertronic web look and feel.
For the most part, the Web UI code, along with CAMAPI, follow the model-view-controller paradigm. This means you can have multiple computers browsing to the camera at the same time. For example, when the camera is triggered, all Web UI instances will properly update their display. As a developer, you can use the included Web UI code for overall camera setup and control while deploying a customized simpler user interface, allowing the camera to be used in a kiosk type setting.
Web UI modes of operation
The Web UI allows the user to configure, monitor, and control the camera.
The normal mode of operation is for live preview to be displayed with several boxes providing status and control. Live preview is simulated by repeatedly fetching a JPEG image from the camera. The choice to use endless JPEG fetching over a movie format is due to the poor browser support for low latency live video. The main purpose of live preview is to allow the user to frame the video to be captured and adjust focus.
Live preview is a bit of a misnomer as the save progress is also displayed in the lie preview window.
For lack of a better name, the floating box containing the trigger button is called the button box. In addition to providing buttons allowing the camera to be controlled, the button box display the camera's current state and information about the active storage device. The camera state and camera status flags are used in deciding which buttons to display. The following javacript functions are used when updating the button box:
The button box is only displayed during live preview
Current settings box
When capturing video, the mutishot box displays how many video have been captured and how the total number of buffers available to hold videos. When the camera is saving videos, the multishot box shows which video is being saved and the total number of videos that were captured. The contents of the multishot box are updated by update_multishot_status(). The multishot box is only displayed if multishot capture is enabled.
The progress bars provide a simple way for user's to better comprehend the camera capturing uncompressed video to a very large buffer, with a user controlled pre-trigger fill level set somewhere in the buffer. The progress bars also give the user feedback on the difference between capturing video and saving video, with the wait time during saved being available as well. The progress bars are updated by update_progress_bars().
When live preview is active, monitor_camera() is polling the camera once a second to get the current camera status and updating the display appropriately. The global variable disable_monitor_update is used to stop the polling. All the box update functions are called by monitor_camera() after the current camera status has been fetched.
Box automatic hiding
The user can set a timeout which auto-hides the boxes when there is no user interaction with the web page. Mouse movements and hooving over the button box are monitored to keep the boxes displayed. The boxes are also displayed when the camera is unable to capture videos. The auto-hide timing logic can be found in UpdateDisplayingButtonBox.
The settings modal serves two purposes. First, the modal allows the user to configure the camera parameters that effect how the video will be captured. Second, the modal helps guide the user though the unusual configuration approach where you tell the camera what you want (requested values) and the camera tells you want it can do (allowed values). This approach requires the allowed values to be updated each time the user changes any setting. This is accomplished by update_settings() being called when there is a change in any input box.
When the settings modal is displayed, the live preview and related boxes are hidden.
Playing the last recorded video is done using the HTML5 video tag. About the nicest thing you can say is it works. Lots of key functionality is missing, including selecting which video to play, changing the playback speed, zooming in on a region of interest, etc.
When the movie playback modal is displayed, the live preview and related boxes are hidden.
Lost connectivity handling
For camera deployments that use WiFi, the connection between the Web UI and the camera may come and go as part of normal operation. All requests to the camera include a timeout and an error handler if a timeout occurs. The error handler stops all normal communication with the camera, displays an error message, and polls the camera to detect when the connection is working again. The camera resumes where it left off (live preview, settings modal, or movie playback) when the connection is restored.
Other Web UI functionality
There is a lot more functionality which hasn't been described. This functionality – including unmounting storage, displaying camera device details, setting the camera clock, etc – all of which is fairly straight forward. Read the code to see what you are missing.
Replace the correct IP address of your camera in place of 10.11.12.13.
Accessing the code
The code is in the camera's file system in the /home/root/ss-web/templates directory. The embedded web server exposes that directory in the http://10.11.12.13/static/templates URL. The home page causes the sanstreak.html file to be returned, with the other HTML files poured into sanstreak.html by app.py using the flask render_template() logic. You can view app.py at the URL http://10.11.12.13/static/sdk/camera.
Debugging Web UI code
Deploying customized Web UI code
Another approach is to store the Web UI code on another web server, with the Web UI code knowing the camera's IP address. This works great with two caveat: Access to CAMAPI needs to be to the camera, not your local machine and the lighttpd web server in the camera needs to allow cross-origin resource sharing.
Starting in version 2.1, you can add your own URLs to the camera, effectively extending app.py. An example can be found at http://10.11.12.13/static/sdk/app_ext/app_ext_example.py. Copy the file to the big SD card, then power cycle the camera and browse to http://10.11.12.13/monitor. You will see live preview, but no status or control boxes. You can find other useful examples in http://10.11.12.13/static/sdk/app_ext.
Visual elements summary
The visual elements are listed in each row with the camera states listed in the right most columns. There is an X in the cell if the visual element is displayed when the condition exists and the camera is in the corresponding state. There are more camera states than listed below, but they are not visible via the Web UI. The group column indicates where in the Web UI the visual element is displayed. The status box lists only the highest priority text message - other status conditions may exist as well.
Note A: Playback and download buttons only shown if the removable storage device contains at least one movie file.
Web UI event handling
|Mouse movement||Button box
|If the control and status boxes are not shown, moving the mouse causes them to be displayed again.|
|Inactivity timeout||Button box
|If no high priority message is displayed, then the status and control boxes are hidden. The inactivity timeout value can be set in the Settings -> Options -> Status timeout text box.|
|Resize browser window||Preview window||The preview window is rescaled to keep the display aspect ratio accurate.|
|Hide browser window||All||No change in handling|
|Show browser window||All||No change in handling|
|Click on button||Varies||See section describing each button|
|Lost connection to camera||All|
|Change in camera state||Varies||See sections on camera state handling and camera status handling|
Latest Software Release Summary