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 
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)'>❮</button>"
html += "<button class='w3-button w3-black w3-display-right' onclick='plusDivs(1)'>❯</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
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
- Create a folder watcher for the image folder in configuration.yaml
- Create an automation with two folder watch triggers - one for ‘creation’ and one for ‘deletion’
- The automation action fires the event ‘HASS_FOLDER_WATCH’ referred to in the Appdaemon.script.
Thanks, I think it is the event firing part that is new to me. I have the folder watcher going, here is what i have for the automation and I don’t think it is working:
- id: '1569591328937'
alias: Rebuild image index
trigger:
- event_data:
event_type: created
event_type: folder_watcher
platform: event
condition: []
action:
- event: HASS_FOLDER_WATCH
event_data:
name: hassfolder
It is working, I was just having issues with browser cache. Thanks all
I put a fork of @ken.d solution on Github, works slightly differently but same basic idea
However I cannot get the images to render every time
hi
thx for all the work.
i can open index.html and i can see the pictures and move right and left.
but
when i use iframe i cant open it it have a logo of broken picture
i think its an access issue.
how do i solve it?
thx