Image file browser/view for HA front-end

Hi all
Has anyone got a nice solution for browsing/viewing image files on the HA front end? I am saving images from a usb webcam on motion detection and want to view them. Happy with a Hassio addon.
Cheers

You can use the camera.local_file component to display images in HA

I’ve set up an automation to take a series of 5 photos at 2 second intervals when motion is detected.
These images are then displayed in 5 separate camera.local_file in HA.

The only downside from your perspective is that the file name must be set in the configuration.yaml and hence is not editable after HA has started.

I use the command_line: component to capture and rename the image files to what HA is expecting

Thanks for your suggestion, however I should have clarified that the images have timestamped file names, and therefore cannot be added as local_file cameras ahead of capture. Probably I will need a Hassio addon

1 Like

Are the files saved to that location automatically by the camera, or is Home Assistant requesting the files from the camera ?

Point the camera to a local file, and then have a command line (or python) function take the new file and overwrite the old one.

I’m using the motion addon for Hassio to capture the images. I’m using a shell command to copy them within the folder. Full description here.
Cheers

Any luck finding anything for this? I’ve found a few overly complicated (for my needs) image galleries on git, maybe I’ll have to look into it. My images are also timestamped so the filenames change… really just need to show like last 10 images or so.

1 Like

Hi @Bartem
I do wonder if lovelace can be used to create an image gallery…?
Alternatively I made a couple of suggestions here.
Cheers

That’s a good idea… I never really looked into the custom cards and stuff. I’ll have to dust off my Dreamweaver cd-rom :joy: as i haven’t done html in over 15 years … I guess parsing the filenames from the dir would probably be my sticking point but I did see a couple examples in git.

…eww its JS… I’ll fool around thanks for the suggestion

1 Like

you come up with solution for this?
I am using tensorflow component to capture images and am trying to figure out good method for accessing the images.

EDIT
I found usable solution. I am using DOODS tensorflow component from another post and have images from object detection w/ bounding box that I want to keep for some period and also want to view.
I was previously using motioneye and decided it easy to drop the photos into motioneye and use motioneye as frontend for viewing. That actually works well. Also give me ability to trigger recording with motioneye, auto delete images after specified period, etc. Motioneye camera viewer was slow in past with large photo qty but it is currently running faster so maybe it is not issue

1 Like

I just stick the images on Google drive, allows me to process them from there also

I’ve been thinking about this for some time and think I’ve found an answer:

My front door camera stores images in the /config/www/images folder. I have created an AppDaemon script that looks at the images in the folder and creates an index.html file in /config/www

import appdaemon.plugins.hass.hassapi as hass
import glob
import os
import datetime


class Index_Files(hass.Hass):
    


    def initialize(self):
         self.listen_event(self.create_html, 'HASS_FOLDER_WATCH')
         self.create_html()
         self.log("Index is running")


    def create_html(self, *args, **kwargs):
         html = "<!DOCTYPE html><html><title>Front Door Images</title>"
         html += "<meta name='viewport' content='width=device-width, initial-scale=1'>"
         html += "<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>"
         html += "<link rel='stylesheet' href='css/mycss.css'>"
         html += "<body><div class='w3-content w3-display-container'>"
         searchedfile = glob.glob("/config/www/images/*.jpg")
         files = sorted( searchedfile, key = lambda file: os.path.getctime(file), reverse=True)
         for f in files:
             label = os.path.basename(f).replace("front_door_","")
             label = label.replace(".jpg","")
             label = datetime.datetime.strptime(label, "%Y-%m-%d_%H.%M.%S").strftime('%A %d %b %Y %I:%M%p')
             html += "<span class='myDate'>" + label + "</span>"
             html += "<img class='mySlides' src='images/" + os.path.basename(f) + "' style='width:100%'>"
         html += "<button class='w3-button w3-black w3-display-left' onclick='plusDivs(-1)'>&#10094;</button>"
         html += "<button class='w3-button w3-black w3-display-right' onclick='plusDivs(1)'>&#10095;</button>"
         html += "</div><script src='js/myscripts.js'></script></body></html>"
#         print(html)
         f = open("/config/www/index.html",'w')
         f.write(html)

I then have a Lovelace iframe card to display the index.html file. To keep the index.html file up to date I have added Folder Watcher and an automation to fire the HASS_FOLDER_WATCH event to refresh the html.

3 Likes

@ken.d very nice. This lists the filenames right?

Forgot to add that index.html requires css and js files in folders names css and js:

.mySlides {display:none;}
.myDate {display:none;position: relative;top:45px;left:14px;color:orange;font-size:20px;}

and


var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var y = document.getElementsByClassName("myDate");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
    y[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";
  y[slideIndex-1].style.display = "block";  
}

Here’s a screenshot of the iframe

4 Likes

This is awesome!!! I have it running but my files are not coming thru in sorted order. What does this do?

 key = lambda file: os.path.getctime(file)

Never mind, did some googling, changed it getmtime and seems to be working for my directory

Good to hear.

1 Like

Would you mind sharing your automation to kick off the appdaemon process, appdaemon is new to me.

You could use an automation and a shell command + python script rather than appdaemon I believe

I can’t fully access the files to quote them - on holiday!

The basic set up involves

  1. Create a folder watcher for the image folder in configuration.yaml
  2. Create an automation with two folder watch triggers - one for ‘creation’ and one for ‘deletion’
  3. The automation action fires the event ‘HASS_FOLDER_WATCH’ referred to in the Appdaemon.script.