Image Listing

Format:
YYYY "-" MM "-" DD "T" HH ":" mm
Download listing as ""

New HPWREN Camera Interface User Guide

Video tutorial: https://youtu.be/HQNBZaF47-o

Under the Cameras menu there are links to see all cameras from all sites or all cameras of a given type (e.g., All Mobotix color, All Mobotix monochrome, All PTZ). These pages list sites alphabetically and list all cameras (of the given type) from each site. Clicking on the name of the site will open a custom view where all cameras from the given site are displayed. The custom view has three tabs: Real-Time, Images (to get the archive images), Videos (to get the archive videos) explained further below.

You can also create your own Custom View by selecting only the cameras you want to monitor. There are drop down lists to select the site, then select the camera. You can use to add the new camera to the list of Selected Cameras and repeat the process of adding more cameras. When you click Show Selected Cameras, the Real Time view will display the current images from these cameras and will continue to refresh every minute. There is a button in front of each camera from the list of Selected Cameras; clicking on removes that camera from the list. Clicking on clears the entire list.

In the Images tab, you can select the date, hour, and minute (user timezone) to see the images retrospectively. There are arrows and next to the date selector to easily navigate a day before/after from the displayed date (going in the future will be displayed as an error). There is a Now button to quickly reset to today and current time. HPWREN cameras are in Pacific timezone. Clicking on an image opens it at full resolution with a slider at the bottom to use what we call the Interactive Image Flow Interface (IIFI): moving the slider allows to quickly go back and forth to see changes in the images. IIFI preloads some images before/after your current time selection but not all images; moving at different points in the timeline requires loading a new set of images, so you may see the image canvas "blink" while reloading. A similar "IIFI" is integrated in the Images page where multiple cameras are displayed. Moving either slider will automatically refresh the selected images, but the caching here is up to the browser so the images may "blink" at each slider drag.

IIFI Keyboard shortcuts

Key Command
Go forward 1 minute
Go back 1 minute
Go forward 10 minutes
Go back 10 minutes
Go forward 1 hour
Go back 1 hour
Go forward 1 day
Go back 1 day
[ Go to start time
] Go to end time
{ Set start time
} Set end time
G Go to
S Copy share link
L Toggle live mode
? Open help
Mouse wheel Zoom

In the Videos tab, you can select the 3h interval to see the archived videos (Pacific time). Currently the image and video archive is available for the last 30 days, but we are working on making it accessible for a longer time.

Note: Switching in the Camera menu between the Custom View and various All cameras views will clear the Custom View selection and start fresh. You can use the back button in the browser to go back to your previous view. If you want to keep your custom view, we recommend opening it in a new tab. You can create several custom views in different tabs and the system will remember your selection.

Changelog

10/13/2024

Image Listing
  • Can now be invoked from the URL bar.
  • Format: #list=siteId_camId&lst=YYYY-MM-DDTHH.mm&lend=YYYY-MM-DDTHH.mm
IIFI
  • Shift + left/right arrows move by 1 hour on the timeline.
  • Shift + up/down arrows move by 1 day on the timeline.
  • You cannot go more that 90 days into the past (the current MTA limit).
  • Help button inside IIFI auto-scrolls to the IIFI section.

10/06/2024

Image Listing
  • New button in the upper right (next to Map).
  • Generates list of filenames with images for a selected camera between two date/times.
  • Shows each 3h slot as it is retrieved from the server (empty fill = in progress, green = successful, red = timeout/error).
  • The listing can span several time slots and will output only the files between the start and end times.
  • The output is a text file with the URL of each image, and can be downloaded when all of the time slots have been retrieved or timed out (10 seconds).
  • If you already have a Custom view created, the camera dropdown shows only the Selected Cameras (from the sidebar).
  • From the overview pages with all sites (All Mobotix Color, All PTZ, etc), the camera dropdown shows all the cameras of the current type (only Mobotix color, only PTZ, etc).
IIFI
  • Up/down arrows move by 10 minutes on the timeline.
  • Help dialog can be accessed from within IIFI.
  • Share URL also encodes the overlay image (if selected). If you want to share a single image (with overlay), click both Select start and Select end as the same image.
  • New Download image list button available next to Go, which preselects camera and start and end times.
General UI
  • UI version shown in the top right next to the Map button.
  • Changelog added to help dialog.
  • Help dialog is now narrower (75% of the viewport width instead of fullscreen).
  • Site elevation is now displayed in both meters and feet.

9/22/2024

Map
  • The map is now found above the camera view and can be toggled by the Map button in the top right. This setting is also preserved, just like the light/dark theme setting.
  • The cameras can be filtered using the buttons on the left.
  • Click on any marker to select/deselect that camera.
  • PTZ cameras are indicated by red dots. If a site has multiple PTZs, the circle has a number inside it, and clicking it will select all the PTZs at that site.
  • The other cameras are indicated with quarter-circle sectors, in concentric rings (red/yellow PTZ in the middle, then gray/green monochrome, then blue/cyan color). Experimental cameras are indicated with purple/magenta quarter-circle sectors.
  • Fires larger than 5 acres are outlined in red and labeled. These also can be toggled using the filter buttons.
  • If you click anywhere on the map that is not a camera, a green pin and gray circle appear. The pin can be dragged around and the size of the circle can be changed with the Range slider.
  • For every site in range that can see the location of the pin, the line is light green if line of sight is uninterrupted. Otherwise, the line is dark green up to how far the camera can see, and red for the rest.
  • Click on Center on target to center the map on the pin, or Clear map to remove the pin and lines.
  • Click on Select cameras to select all the cameras that can see the pin. Cameras with uninterrupted line of sight appear first in the Selected Cameras sidebar.
  • The map also has a fullscreen button, useful on mobile devices.
IIFI
  • Real-time view is now integrated in IIFI. Click the LIVE button to see the camera in real-time.
  • Clicking on an image in Real Time mode opens IIFI with live mode already enabled.
  • Zoom and overlay are also available with live view.
  • Note: You cannot activate live view if End is selected. You can't set the overlay baseline image while live is enabled (you can still change the transparency with the slider).
  • Dragging the slider, using the Go button, or using keyboard shortcuts that change the time will exit live mode at one minute before now.
  • You can Share IIFI in live view if the Start and End are not selected.

9/16/2024

Full resolution images
  • Changed the icon on the Download button in the title above the image thumbnails to make it obvious that's how to get the full resolution images
Rounding GPS coordinates
  • Due to regulations, we have to round the coordinates of most sites to 2 decimal places. This rounding is now done on the server side when generating the sites.js file that is used on the website.
IIFI
  • Adjusted the Zoom speed when using the mouse wheel.
Weather
  • If the view has cameras only from a site, the weather details are added by inserting as an iframe the sensor html from the main website. Some locations don't have weather measurements or the sensors are offline, which now produces a 404 error. We will be working on fixing that and redesigning the weather data completely.
Tutorial

8/31/2024

IIFI
  • Zoom slider - click the leftmost “magnifying glass” icon to zoom the image.
  • Image panning - use either scroll or drag.
  • Zoom with mouse - hold alt/option key and scroll the mouse wheel.

8/27/2024

IIFI
  • Usability on mobile - when the screen gets too narrow the controls rearrange to have the slider full width and above the other buttons.
  • Black-screen bug (loading image) - if an image hasn't loaded the code will check every second until the image has loaded, then redraw the canvas.
  • Black-screen bug (no image) - if there exists an image listing for a 3h slot but an image isn't found, it will say “No image!” instead of remaining black-screen.
  • Current time indicator - it is now an actual <div> instead of being drawn on the canvas, so it will wrap on small screens. It also changes color based on loading status: yellow = waiting for image list, red = no image, dark green = loading image, bright green = image loaded (is shown on canvas).

8/21/2024

General UI
  • Timezone support for Image tab & IIFI: the user specifies the local time and the system converts in PT. In contrast, the video tab is all in PT because the videos are generated in 3h intervals in PT.
  • Preferences for thumbnail size and theme (light/dark) are saved into the browser so they persist across sessions/tabs.
IIFI
  • the 3h range selector is replaced with an infinity slider that can be used to go anywhere. Just drag it left and right and then it snaps back to center, you drag some more, etc.
  • advanced keyboard support for quick navigation (such as Shift+Arrows to jump 20 min, see help button for more), also fixed focus so that the keys work right away.
  • there is a “Go” button on the left that can be used to quickly jump to an arbitrary time (e.g., 2024-08-15T10:43).
  • there are two buttons to the sides of the slider. Click on them to select the start and end of the range of interest (use the slider or the Go button to find the image you want and then click on start/end to store the current selection). After selecting both, the infinity slider becomes the standard video-like slider so that you can go through your range as before.
  • to the right, there is an overlay button. You first use the slider to pick the image you want to use as baseline. Then you click the overlay button and the current image will be displayed over all other images as you move around. And you can choose your desired opacity with the vertical slider.
  • if you find something cool to share, click the left-most button and a link to the selected range will be automatically copied to your clipboard.
  • Example: Lenticular clouds