[PROJECT] Google Photos integration for dashboard image slide-show

roger89 · March 16, 2022, 12:24am

Thanks. I got it working. And I do see photos from my album, however, the hub hung or crashed. My hub never got this kind of state for over 2 years.

Is this App causing performance issue?

My hub is a secondary hub of a mesh, and all of the z wave and zigbee devices are all on the other primary hub. Most of the apps are on the primary hub. So, this secondary hub is pretty idle most of the time before I added this Google Photos App.

dkilgore90 · March 16, 2022, 12:53am

First report I've seen of a performance issue, but that doesn't mean there isn't some bug. Can you provide logs (debug for App), the App metrics on the hub, and all settings values applied in the app?

roger89 · March 16, 2022, 3:54am

I removed the App as soon as I rebooted the HE hub, let me reinstall the App and get the info for you.

P.S. I selected a Google Album that has over 10,000 photos, not sure if this was the culprit.

Thanks in advance.

markbellkosel84 · June 3, 2022, 7:46pm

Loving the possibilities with this! I do have a question though. Is there a way to easily format so my photos don't get cut off? I seem to be ok with width scaling correctly but the vertical dimensions are getting cut off.

dkilgore90 · June 7, 2022, 3:48pm

Based on the Google Photos API specs, the "c" param would crop photos, which we don't specify when building the image attribute iframe html.

This was a side project, I don't use it for anything in my own dashboards - but let me dust it off and see what I can find...

dkilgore90 · July 27, 2022, 1:12am

I haven't forgotten about this -- you could play with the "Preferred image resolution" preferences to match your dashboard tile size, this will work to statically resize the images. Doesn't help if you have video clips, though.

Alternatively, I've restructured the html a bit to dynamically resize images inside the dashboard tile in a custom branch, feel free to try it out -- but this likely breaks the parsing applied by @jpage4500 in his native dashboard app. Again, no love for video clips yet.

There has to be some combination of HTML/CSS that accomplishes the desired goal -- haven't found it yet, though

jpage4500 · July 28, 2022, 2:29pm

I'm happy to update my app to support any changes you want to make. Just let me know!

Here's what I'm doing today if it helps at all.. I wanted to always show an image on the main dashboard and then if it was a video, play the video when the tile was opened full-screen.

pull out the image URL from the image attribute and load that image for the tile
look at mediaType attribute; if it's video and this is the main dashboard, I'm changing the URL to show an image only (I know this was what you were doing originally sorry!)

                            // change video URL to an image
                            // from "=dv" to "=w2048-h1024"

However, if it's a 'video' and this is a fullscreen tile I'm showing the video
In fullscreen mode, clicks to the right side of the screen will call next command and left side calls previous command

jpage4500 · October 11, 2022, 8:11pm

@dkilgore90 - I'm having an issue getting something to work and was wondering if you have any ideas. I already have 3 google photos integrations which I'm displaying on my dashboard.. 2 of them as large tiles and the other one as the background image. All of these had been working well for months.

Today I decided I'd replace the background images and use some Halloween themed ones so I removed all of the images from my Google Photos folder and then added a couple spooky ones.

I went to the Photos driver and hit Refresh but nothing happened. I then tried re-selecting the folder from the Photos hub app and still nothing.. I ended up removing the Hub app/driver and re-adding it but it's still not fetching any images. I even created a new Google Photos album to see if that was the issue.

I also don't see anything in the logs.. any ideas?

dkilgore90 · October 12, 2022, 12:17am

The app caches IDs/links to the photos in the selected album, and the refresh command on the device page simply pulls the next cached ID (functionally equivalent to next).

When changing the album (or its contents), you need to click the Load Photos from Album button on the App page in order to reload the cached IDs - otherwise if the "Refresh nightly" toggle is enabled, it will update automaticallt at 11pm.

jpage4500 · October 12, 2022, 2:05pm

I clicked on Load Photos button too yesterday (forgot to mention that as well). This morning the newly created photos driver still doesn't have an image set.

logs from hitting Load Photos on app and then 'next' on device:

logs from this morning:

Is there some extra debugging I can do to maybe see where something's going wrong?

jpage4500 · October 12, 2022, 2:21pm

I figured something out.. I modified the app driver to add the else() case below (last line in snippet below)

def handlePhotoGet(resp, data) {
...
        def respJson = resp.getJson()
        device = getChildDevice(state.deviceId)
        if (respJson?.mediaMetadata?.photo) {
            def w = imgWidth ?: 2048
            def h = imgHeight ?: 1024
            sendEvent(device, [name: 'image', value: '<img src="' + "${respJson.baseUrl}=w${w}-h${h}" + '" />'])
            sendEvent(device, [name: 'mediaType', value: 'photo'])
        } else if (respJson?.mediaMetadata?.video) {
            sendEvent(device, [name: 'image', value: '<video autoplay loop><source src="' + "${respJson.baseUrl}=dv" + '" type="' + "${respJson.mimeType}" + '"></video>'])
            sendEvent(device, [name: 'mediaType', value: 'video'])
        } else {
            log.warn("Unknown response: ${respJson}")
        }
    }
}

Now I'm seeing this else case printed out:

app:7662022-10-12 10:16:12.544 AMwarnUnknown response: [id:ANAJ_-sVT6eaKQnIPG7rNQ1MsMmVJUDzIZ1Op_gIb7b0W_uHFfEYDeWU1cfL8pCoaPfLPj9RucxfvdM5jJGK_kjMldz8OyNygQ, productUrl:https://photos.google.com/lr/photo/ANAJ_-sVT6eaKQnIPG7rNQ1MsMmVJUDzIZ1Op_gIb7b0W_uHFfEYDeWU1cfL8pCoaPfLPj9RucxfvdM5jJGK_kjMldz8OyNygQ, baseUrl:https://lh3.googleusercontent.com/lr/AGiIYOVTWFJF-Bt1LBkZZtere6vhM7YG5tYjElaZhdFOmvx7uf1h8EzBrCkpLGD2L2mIK3NiMd7-GAy-7bK-iH1yhvkiKmQNf6SL3owCPDMa8T-NoxyatzPy1b8yj3mb6nA53whWEBCp3iX2qky2D1n8reo41eBhqql3FT-_MhqR1Pkmk3qKT4yeH6sFFWOMwllUi6J63Q7BkAngtHJRFcQZJ1w2EOlX1ksBbAliQvYT0qO9Om8zO9WEW1HXfZoI7na7kUr7aBdcNdWAACvTj9iN_urZpMHx5YAlmnCX1Jw0sGQFxuEr0ZiRd12kJ7e7ZxWAgl2WdDBoTqlq4xuNcYihcYd0Aw2Mhv-3__6OmKuswFzu30ZAvkWVkGnhSunuDbgU9mQzM5xr_EZQYCUOET3CzcKXIQqbh-JNw9RrrwWi0PcqRNg5JxR4opzppUGIzSvE-jJA9LDu7uc3wvUO8BuL5FlJiWOhB_vuUzEKtDo4Vtwa0gGdo2EFm10_Ef-kl-EN1g4cYrFPXKRv6eKFeCOrSA17EmzSAyWi_HCrJCh548bN59hOb2MfzEmwiNodHxWudCKRQHGvx6bVVAxNLV0qm5M7VchsY1H1yOO8hpd9O8iWh3GEiOYgw770F6USIMPn0XIRic1b7gxitCtsIqkinM96v-n-CIE0M5msNynfqaspQ70H9vYxXpT5PD2mt_KcJSAClb1zPlIo0uOU0yW340amvBx9egD9Bs26ggRol-JkAma4R_YoWxw8eN9tu5yW_R4xxbj1R5kBDRxea--LS0B5it9Bejnp8qCdpAPd_eqzss1qPcQ54J4XsSpBsmFeniq8kdlS4D7Fb0Gh7goWJlsO06u0_X1o4FJiCsZbKucXuJRGAcbKtJ-TGAorWhzFFDRemmg-tSUmzp2-Ni_6jqkqopkJ_FK99KM5bptz7m-IUebWnPbEtWNrrCNbrYL7u5FpZ9VvJL2XrRysR7pRXx9HaDRxsd21Uzn9LPkNcqdWnrJ8Ar4, mimeType:image/jpeg, mediaMetadata:[creationTime:2022-10-11T14:20:57Z, width:4618, height:3464, photo:[:]], filename:rafael-garcin-wlOv3cf41iE-unsplash.jpg]

You can open the URL's above (guessing they'll expire after some time though). They're of this image which I added:

jpage4500 · October 12, 2022, 2:29pm

last update.. I was able to get this to work by modifying the code just a little to always assume a photo. Not sure if it's going to break at some point in the future but at least for now it seems good. Just wanted to mention it in case it helps anyone else

def handlePhotoGet(resp, data) {
...
        if (respJson?.mediaMetadata?.video) {
            sendEvent(device, [name: 'image', value: '<video autoplay loop><source src="' + "${respJson.baseUrl}=dv" + '" type="' + "${respJson.mimeType}" + '"></video>'])
            sendEvent(device, [name: 'mediaType', value: 'video'])
        } else {
            def w = imgWidth ?: 2048
            def h = imgHeight ?: 1024
            sendEvent(device, [name: 'image', value: '<img src="' + "${respJson.baseUrl}=w${w}-h${h}" + '" />'])
            sendEvent(device, [name: 'mediaType', value: 'photo'])
        }
    }
}

dkilgore90 · October 12, 2022, 2:41pm

Thanks for this - I see what is happening now. The mediaMetadata.photo is returning an empty object/map, so Groovy truth evaluates as false and skips the logic within that clause. I should simply check the existence of the key, instead of relying on Groovy evaluation of the value.

Navat604 · October 30, 2022, 9:32pm

Not sure what happened. I now get this

app:15302022-10-30 14:20:44.560 warnExcluded attribute image size of attribute > 1024 characters

when adding the device to the dashboard device list without even have it on the dashboard. Just add the google photo device to the dashboard app list. The dashboard when shows this instead of the photo

going into the device detail does show me the photo.
The app setting is this

dkilgore90 · October 30, 2022, 10:12pm

Hmm, I see the same. Looks like Google has made their URLs longer such that it no longer fits within the 1024 char attribute limit for Hubitat dashboards... Will see what can be done to work around this...

Navat604 · December 6, 2022, 5:57pm

Any luck with this or anything I could do to help?

dkilgore90 · December 10, 2022, 1:10am

Haven't spent a ton of time on it... Conceptually would need to use a url shortener like tinyurl to stay under the dashboard 1024 char limit...

Food for thought - maybe I'll find some time to implement over the holidays: TinyURL.com - shorten that long URL into a tiny URL

jpage4500 · October 15, 2023, 6:42pm

@dkilgore90 - this is just a random request while I'm thinking of it. I have several Google Photo's apps installed and just wondering if there was an easy way to give each instance a name to differentiate between them. Or, maybe 1 app that can manage multiple child devices (I imagine that's more work though)

Anyway, it's not a big deal by any means.. this app/driver has worked great for me for a long time now!!

dkilgore90 · October 20, 2023, 2:46am

Try the new App code just posted, v0.3.2

For now I have added a few lines to auto-update the name of each App/Device pair, when you click "Done" in the App page, with the selected album name -- this should hopefully make it easy to differentiate them.

Also included in this update are some changes to the image attribute when displaying an image -- to help combat any cropping effects, particularly on vertical images -- instead scaling to fit within a tile. Hopefully this doesn't add any significant rework on your end. Likely it is mostly irrelevant to native Hubitat dashboard users, since I haven't circled back on URL shortening

jpage4500 · October 22, 2023, 12:05am

just got the chance to try this -- perfect! thanks for this!

Images still work for me in HD+ dashboard.

This seems new to me (unless I missed it above) - what does it do?