Extending edgertronic capabilities - Extending or replacing the web UI

From edgertronic high speed video camera
Jump to: navigation, search


Home

Latest Software Release Summary




Overview

Browsing to the edgertronic embedded web server's home page retrieves HTML, CSS, and JavaScript code that collectively provide the camera's Web UI. The code builds on JQuery and bootstrap. The Web UI code can be viewed as a client using the CAMAPI interface.

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.

Live preview

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 done by assigned the delayed_refresh_video() javascript code to be invoked each time the browser has finished loading the current JPEG image. The delay is to set the refresh rate to 15 fps (although the chrome javascript console tool network diagram shows a frame rate of 5 fps). To stop live preview, set the global variable live_video_enabled to false.

Live preview is a bit of a misnomer as the save progress is also displayed in the lie preview window.

Button box

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:

  • update_status_text()
  • update_displayed_buttons()
  • update_storage_display

The button box is only displayed during live preview

Current settings box

A floating informational only box containing the current camera settings is also displayed during live preview. The current settings are updated when the settings modal is closed by the javascript displayCurrentSettings() function.

Multishot 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.

Progress bars

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().

Camera polling

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.

Setting modal

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.

Movie playback

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.

Developer hints

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

Chrome's javascript console is your best friend for debugging the Web UI code. A human readable version of the current status is displayed along with logging each user initiated event. These are controlled by the debug_log() function.

Deploying customized Web UI code

There are several ways to deploy customized Web UI code. You can completely control the Web UI experience by replacing the HTML / javascript / CSS code that ships with the camera.

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.

Element Group Visual Priority Camera State
Calibrating Running
Filling-
pre-trigger-
buffer
Running Triggered Saving Selective-
saving
Reviewing
Calibration preview Preview window Calibration-no-labels.png X
Live preview Preview window Pre-trigger-full-labeled.png X X X
Save preview Preview window Save-labeled.png X
Saving text Status box Saving video 1 X
Flushing text Status box Writing to memory card 2 X
No genlock text Status box Camera not receiving
genlock signal
3 X X X
Genlock configuration
error text
Status box Genlock configuration error 4 X X X
Memory card bad text Status box Memory card unusable 5 X X X
Memory card missing text Status box Insert memory card 6 X X X
Memory card full text Status box Memory card full 7 X X X
Calibration text Status box Calibrating camera 8 X
Filling pre-trigger buffer text Status box Pre-trigger fill 9 X
Filling post-trigger buffer text Status box Post-trigger fill 10 X
Truncating video text Status box Truncating Video 11 X
Buffer fill bar Progress bar Buffer-fill-bar.png X X X X
Saving bar Progress bar Save bar.png X
Playback button Button Playback button 20150518222117.png A A
Download button Button Download button 20150518222117.png A A
Settings button Button Settings button 20150518222117.png X X
Eject button Button Eject button 20150518222117.png X X
Help button Button Help button 20150518222117.png X X X X
Multi-save button Button Multi save button.png
Trigger button Button Trigger 20150518222117.png X X
Multi-trigger button Button Multi trigger button.png X X
Cancel button Big button Cancel Button 20150518222117.png X
Trim Big button Trim button 20150518222117.png X

Note A: Playback and download buttons only shown if the removable storage device contains at least one movie file.

Web UI event handling

The following table documents all event sources and how the javascript handles those events.

Event Affected
visual
element
Action
Mouse movement Button box
Active Settings
Multshot box
(if active)
If the control and status boxes are not shown, moving the mouse causes them to be displayed again.
Inactivity timeout Button box
Active Settings
Multshot box
(if active)
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[1] handling and camera status[2] handling

[1] Camera states
[2] Camera status-LEDs



Home

Latest Software Release Summary