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 Fixed FOV color, All Fixed FOV 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
␣ Play / pause
O Toggle overlay
- Decrease overlay transparency
= Increase overlay transparency
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

02/26/2025

Weather

  • A weather plot is displayed in Custom View if one or more cameras are selected from a single site. The plot provides a site-level view of the weather data across time.
  • In the Real Time tab, the weather plot shows data for the last 48 hours and it keeps refreshing every 30 seconds to add any new values that may have arrived.
  • In the Images tab, the plot shows the day selected and it is possible to add more days from the calendar navigation. Clicking the arrows and goes to the previous/next day and adds the data for that day to the plot. If a new date is selected from the calendar, then the hour slider needs to be moved at least once to trigger the refresh of the plot.
  • Currently, the plots show wind speed (min, max, average), temperature, and relative humidity, all on the same canvas.
  • The horizontal axis shows the timestamps, and the vertical axis shows the imperial units for all three metrics. The axes automatically scale based on the data.
  • The size of the plot automatically scales to the size of the window.
  • The plot has pan/zoom features. Scrolling vertically zooms in/out and scrolling horizontally pans left/right. You can also pan by right-clicking and dragging. On mobile, use two fingers to pan/zoom.

02/06/2025

General UI

  • Added a new camera imager "Thermal". Currently displayed under All Experimental and filtered by the experimental button on the map.

Weather

  • Added a "Santa Ana winds" warning displayed as a red border around the ellipse wind plume. It is displayed for each sensor that meets the criteria: humidity < 25 %RH & wind direction 10 - 110° & wind speed > 25 mph. For example, go to 01/23/2025 to see the Santa Ana winds marked on the map.
  • Added an attribute for active/inactive sensors. If a sensor is inactive, it is not displayed on the map. If a sensor is active, but doesn't have data at the specific time, then it is displayed as a white circle.
  • The weather summary is displayed in IIFI after the camera title in both retrospective and live mode. Moving the slider updates both the images and the weather.

02/04/2025

Map

  • The weather data is now available retrospectively when the Images tab is active.
  • When you drag the hour or minute slider or change the date, the whole map refreshes and shows the weather at that time.
  • The weather button in the map sidebar has a loader icon while weather data is being fetched.
  • Fixed the auto-zoom on the map that happened in some cases when the time sliders were dragged. Now the map will recenter and auto-zoom only when you modify the Selected Cameras and there is a single site selected.
  • Note: You need to have at least one camera selected in the Custom View to make the map refresh when you change the time.

01/09/2025

Map

  • The wind direction plumes now point the direction the wind is going. The sensor reports where the wind is coming from — for example, a 90° wind is coming from East so the plume is shown as starting from the camera and going West.
  • The weather tooltip also shows the timestamp of the sensor data.
  • The green pin (that you drop and can drag around) now has a tooltip that shows its coordinates and each site that can see it. For each site, it shows how far and in what direction the target is.

IIFI

  • The Go To button works even if you are in Live mode.
  • If you click Play, it will automatically switch to Live when the time reaches present.

General UI

  • The help button now has an icon instead of a ?.

12/26/2024

Map

  • The camera markers increase size if you zoom in.
  • The markers show the full FOV for Experimental cameras.
  • The map is restricted to the HPWREN cameras region — you cannot pan/zoom outside of the area.
  • Real-time temperature, wind direction, and wind speed averages are depicted on the map at each location.
  • The temperature is represented as a fading gradient (for example, 30°F = purple - 75°F = red).
  • The the gradient's shape represents the wind intensity — circle for no wind, increasingly elongated ellipse for stronger wind. The wind direction is indicated by the direction of the ellipse.
  • For easier identification of small temperature differences between locations, the temperature ranges are illustrated within monthly averages (for example, Jan 30°F - 75°F, Jul 50°F - 100°F).
  • Custom tooltips have been added to each camera and sensor independently.
  • Note: The weather indicators are not shown on the map if the Mode (in the sidebar) is not Real Time.

General UI

  • The image/video caption is moved below the image/video so that the images/videos will remain aligned if the caption text wraps.

12/08/2024

Sensor data

  • The sensor data is now read from a JSON file (updated every minute for all sites) instead of using an embedded <iframe>.
  • All R0 measurements are displayed:
    • Wind direction minimum
    • Wind direction average
    • Wind direction maximum
    • Wind speed minimum
    • Wind speed average
    • Wind speed maximum
    • Air temperature
    • Relative humidity
    • Air pressure
    • Rain accumulation
    • Rain duration
    • Rain intensity
    • Hail accumulation
    • Hail duration
    • Hail intensity
  • If the sensor doesn't transmit a value, it is omitted. If the sensor reports an invalid value, it is shown as Unavailable.
  • Units are converted for:
    • m/s mph
    • °C °F
    • hPa (millibars) inHg.
  • The sensor data refresh is synced with the Real Time image refresh. Data is uploaded every minute and the website refreshes every 30 seconds.

Map

  • Temperature, wind, humidity, and pressure are shown (if available) as tooltip when hovering on a camera marker.
  • Fixed bug on mobile where dragging a camera marker would select the camera and pan the map.

General UI

  • The overview pages for all cameras (All Fixed FOV Color, All PTZ, etc.) displays in the heading for each site also the weather summary if available. The weather refresh is synced with the RT image refresh.
  • The title for a "site view" also shows the same weather summary, if you are in Real Time mode. The weather is not displayed for Images, Videos, or IIFI.
  • The Image List, Map, Thumbnail Size, etc. buttons maintain their size no matter the size of the title.
  • Font size of headings reduced.

Image Listing

  • If you are in a Custom View, the Camera dropdown for the Image Listing shows first the Selected Cameras from the sidebar, followed by all the other cameras.

11/16/2024

IIFI

  • Zooming with the slider is centered on the middle of the screen instead of the top-left corner. Zooming with the mouse is centered on the cursor position.
  • New button to Play images automatically and new dropdown to select the Playback FPS. Press space ␣ to play / pause.
  • On narrow screens, the controls are rearranged to fit better.

10/27/2024

General UI

  • Clicking the thumbnail size button now shows a slider for resizing the thumbnails.

IIFI

  • New keyboard shortcuts: O toggles overlay and - / = change overlay transparency

10/19/2024

Image Listing

  • New options added to get the listing for only one image each day at the specified time (end time) or for the whole 3h block containing that time each day.
  • The Start and End are initially prefilled with the current time and then in subsequent requests they are preserved with the same values from the previous requests.
  • The listing is not generated automatically (except in IIFI, see below); you can change Start and End and then click Generate Listing.

General UI

  • On the pages for a site, the title lists the site information (name, lat/long, elevation), not just "Custom View".
  • You can get to the page for a site by clicking on the site name from the overview pages. Also, when you create a Custom View and add cameras from only one site, that page is considered to be a site view and the title is updated.
  • The text with the UI version is now in the top right, above the buttons, to make space for the longer title.
  • Information was added regarding which sites have sensors. The weather info is now displayed only for sites that have sensors (if some sensors are broken, there could still be a 404 error on the website for now).
  • As some sites have sensors but not cameras, the drop down list for sites displays only sites with cameras.
  • Terminology was revised. Mobotix is a camera brand, and the references to Mobotix were replaced with the generic name Fixed FOV (field of view). In the drop down lists, it is shortened to FFOV.
  • The camera dropdown in the sidebar has new options to Select all FFOV Color, Select all FFOV Monochrome, and Select all PTZ. These options appear only if the site has at least two cameras of that type.

IIFI

  • Lat/long and elevation are also displayed in IIFI at the bottom after the camera name.
  • The Download icon leads to the full size image.
  • A new button called List is used for the Image Listing.
  • If a Start time and End time are selected and you click on List, the Image Listing is prefilled with the Start and End from IIFI and the listing is generated automatically for that interval. Otherwise, the Start and End are preserved from the previous requests, and the listing is not generated automatic — you can change the Start and End times and then click Generate Listing.

Map

  • A new button is added to Recenter the map on the currently selected cameras. This is different from Center on Target, which centers on the green pin.

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 + / arrows move by 1 hour on the timeline.
  • Shift + / 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 Fixed FOV Color, All PTZ, etc.), the camera dropdown shows all the cameras of the current type (only Fixed FOV color, only PTZ, etc.).

IIFI

  • / 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