Extending edgertronic capabilities - Extending or replacing the web UI

←

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

Optional settings

Some settings are only shown in pro mode. Some settings are only shown for specific camera models. The following table lists the dependencies.

Setting	Camera Model	Sensor	Memory	Easy / Pro Mode	Visibility
Force Monochrome	Any	Color	Any	Any	Visible
Overclocking	SC2	Any	8G	Any	Hidden
Multi-frame Rate Capture	Any	Any	Any	Pro	Visible
Enhanced Dynamic Range	SC1	Any	Any	Pro	Visible
Sub Sampling	SC1	Any	Any	Pro	Visible
Raw Video Encoding	Any	Monochrome	Any	Pro	Visible
Custom Video Encoding	Any	Any	Any	Pro	Visible
Genlock External	Any	Any	Any	Pro	Visible
Horizontal and Vertical Offsets	Any	Any	Any	Pro	Visible
File Format	Any	Any	Any	Pro	Visible
Playback Framerate	Any	Any	Any	Pro	Visible
Trigger Debounce	Any	Any	Any	Pro	Visible
Gamma Correction	Any	Any	Any	Pro	Visible

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 10.11.12.13 with the IP address being used by your camera.

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			X
Live preview	Preview window				X	X	X
Save preview	Preview window							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				X	X	X	X
Saving bar	Progress bar							X
Playback button	Button				A	A
Download button	Button				A	A
Settings button	Button				X	X
Eject button	Button				X	X
Help button	Button				X	X	X	X
Multi-save button	Button
Trigger button	Button				X	X
Multi-trigger button	Button				X	X
Cancel button	Big button						X
Trim	Big button							X
Easy	button			Top of settings modal
Pro	button			Top of settings modal
Reset	button			Top of settings modal

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