Blue Iris UI3

piconut

BIT Beta Team
Joined
Feb 17, 2015
Messages
176
Reaction score
63
Location
Austin, TX
@piconut But you should also be able to manually update UI3 to the latest version with minimal repercussions and use the original override script. The new "search" box over the clip list won't work but otherwise most things should still be fine.
@bp2008 as always, thank you for that suggestion (to manually update UI3). That worked fine to get that functionality. I vaguely thought about doing that, but since my BI version is more than a year old, I figured it probably wouldn't work and I didn't want to mess anything up.
 

bigscout79

n3wb
Joined
Mar 30, 2018
Messages
7
Reaction score
1
I'm still seeing: these errors a couple of times a day, but not consistently:

Code:
alertlist response did not indicate "success" result: {"result":"fail","session":"598676f876463a4064d238f3308f3a25","data":{"reason":"Camera or group not found"}}
UI3 version 255, Blue Iris version: 5.8.0.10

Thanks (I LOVE UI3)
 

dtm

n3wb
Joined
Jun 25, 2017
Messages
13
Reaction score
7
This may have been suggested before, but I failed to find it while searching. I like to use an Amazon Show 5 to view my cameras in ui3 using the built in Silk browser. It works pretty well except that the browser will close itself after a few minutes of inactivity. I found this script called "Keep Silk Open" DaGammla / Keep Silk Open · GitLab I added the script tags in the head of ui3 but instead of referencing it over the web, I just put a local copy of the keep.js file in the www folder. <script defer src="keep.js"></script>
---
It works great. I do know that the next time I take a ui3 update though I will have to modify the ui3.htm file again. Just wondering if this could be officially added to ui3 perhaps as a configuration option.
 

actran

Getting comfortable
Joined
May 8, 2016
Messages
806
Reaction score
732
I want to add a dropdown like the one highlighted in the screenshot below.

It will be a defined list of dropdown options. When a user selects a dropdown option, it triggers a call to Javascript function to execute different HTTP GET/POSTs. Essentially, I want dropdown options to trigger different actions in Home Assistant.

Is it possible to do this by adding some code to ui3-local-overrides.js file or do I need to modify other files? If so, what would this code look like?

dropdown.png
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,678
Reaction score
14,031
Location
USA
I want to add a dropdown like the one highlighted in the screenshot below.

It will be a defined list of dropdown options. When a user selects a dropdown option, it triggers a call to Javascript function to execute different HTTP GET/POSTs. Essentially, I want dropdown options to trigger different actions in Home Assistant.

Is it possible to do this by adding some code to ui3-local-overrides.js file or do I need to modify other files? If so, what would this code look like?

View attachment 178052
Absolutely it is possible. Let me whip up a template for you.
 

Ri22o

Known around here
Joined
Jul 30, 2020
Messages
1,442
Reaction score
2,900
Location
Indiana
Using UI3 on my iPhone is proving difficult for the 3 cameras across the top of the row (still having issues with the max/min in the lower corner as well). No matter how many times I tap the cameras it will not load them singularly. Is there anything I can change or do? They are being loaded in a Safari bookmark, if that matters.
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,678
Reaction score
14,031
Location
USA
@actran

Here you go: Local Overrides Sample: Add a Dropdown List of Custom Actions to Playback Controls

It requires UI3-257 which I just published so it can easily hook into the correct part of the dropdown list initialization code. There wasnt a convenient way to do that yet so I added an event for that purpose.

If you aren't sure how to send commands to home assistant, I suggest using Bing Chat with a prompt like this one:

Write a JavaScript function with no external dependencies that uses the fetch API to turn on a light in Home Assistant. The code should be compatible with ES5, not utilizing any features that require ES6 or newer language support.
I ran that and tweaked the output slightly to create this function which shows the result of the Home Assistant API interaction in a toast message. I haven't tested the code at all though:

Code:
function homeAssistant_turnOnLight(entityId)
{
    var url = 'http://your-home-assistant:8123/api/services/light/turn_on';
    var headers = {
        'Authorization': 'Bearer ' + 'your-long-lived-access-token',
        'content-type': 'application/json',
    };
    var body = JSON.stringify({
        entity_id: entityId
    });
 
    fetch(url, {
        method: 'POST',
        headers: headers,
        body: body
    }).then(function (response)
    {
        if (!response.ok)
            throw new Error('Network response was not ok');
        return response.json();
    }).then(function (data)
    {
        toaster.Success(data);
    }).catch(function (error)
    {
        toaster.Error(error);
    });
}
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,678
Reaction score
14,031
Location
USA
Using UI3 on my iPhone is proving difficult for the 3 cameras across the top of the row (still having issues with the max/min in the lower corner as well). No matter how many times I tap the cameras it will not load them singularly. Is there anything I can change or do? They are being loaded in a Safari bookmark, if that matters.
Without knowing the cause of the issue, I'm not sure how much I can help. It sounds to me like you're having touchscreen sensitivity problems.

There are a few things you can do:

1. Long press the video, choose Group Settings. Force an aspect ratio that is wide enough to create black bars above and below the video. This would move the cameras away from the top and bottom edges of the screen.
2. In UI3's main menu, choose UI Settings. Find the "Playback Controls: Extra Padding" option. It will make the buttons in the playback controls bar easier to hit.

1700269496632.png
 

actran

Getting comfortable
Joined
May 8, 2016
Messages
806
Reaction score
732
@bp2008 Thank you for responding to my code request.

I manually upgraded "C:\Program Files\Blue Iris 5\www" to UI3-257

version.png

Stopped Blue Iris and restarted.
Launched Chrome v119 in Incognito mode (on Macbook) and UI3 looks good, no errors in dev console.
I even cleared browser cache/history to be sure.

Then I added your code from Local Overrides Sample: Add a Dropdown List of Custom Actions to Playback Controls to the end of my ui3-local-overrides.js (attached here as a zip). Stopped Blue Iris and restarted.
Launching Chrome in Incognito again, cleared browser cache/history, got this error:
console.log.png

Let me know how to fix.

I assumed it is ok to copy your sample code as-is as a starting point, to see new dropdown with 2 options appear. Once I see that, I would modify.
 

Attachments

Ri22o

Known around here
Joined
Jul 30, 2020
Messages
1,442
Reaction score
2,900
Location
Indiana
Without knowing the cause of the issue, I'm not sure how much I can help. It sounds to me like you're having touchscreen sensitivity problems.

There are a few things you can do:

1. Long press the video, choose Group Settings. Force an aspect ratio that is wide enough to create black bars above and below the video. This would move the cameras away from the top and bottom edges of the screen.
2. In UI3's main menu, choose UI Settings. Find the "Playback Controls: Extra Padding" option. It will make the buttons in the playback controls bar easier to hit.

View attachment 178057
I can long press over the three cameras at the top without issue, so it's registering my touch in that area.

What am I looking to change in #1?
Turning on extra padding then makes it difficult to click on the two cameras at the bottom of the screen.
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,678
Reaction score
14,031
Location
USA
@bp2008 Thank you for responding to my code request.

...

I added your code from Local Overrides Sample: Add a Dropdown List of Custom Actions to Playback Controls to the end of my ui3-local-overrides.js (attached here as a zip). Stopped Blue Iris and restarted.
Launching Chrome in Incognito again, cleared browser cache/history, got this error:
View attachment 178064

Let me know how to fix.

I assumed it is ok to copy your sample code as-is as a starting point, to see new dropdown with 2 options appear. Once I see that, I would modify.
Find the line $("#changeGroupButton").removeClass("showOnlyOnTimeline") and put a semicolon at the end. Should fix the error you are getting.
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,678
Reaction score
14,031
Location
USA
I can long press over the three cameras at the top without issue, so it's registering my touch in that area.

What am I looking to change in #1?
Turning on extra padding then makes it difficult to click on the two cameras at the bottom of the screen.
Turn off "Fit to Viewport" and then reduce the Height value.
 

actran

Getting comfortable
Joined
May 8, 2016
Messages
806
Reaction score
732
@bp2008

Status update: Semicolon was the issue. I understand why now.

Your dropdown code works as desired. And the home assistant code worked as well after I dealt with Access-Control-Allow-Origin on Home Assistant side.

Thank you again. It's beautiful when code works!
 
Joined
Oct 16, 2018
Messages
1,676
Reaction score
5,523
Location
Florida, USA
I’m getting the clock icon pretty consistently. I tried lowering to 720p but didn’t help much. This is on a tablet that has been working well at 1080p for months.
 

actran

Getting comfortable
Joined
May 8, 2016
Messages
806
Reaction score
732
Brian, any chance userid is available from ui3-local-overrides scope so this custom dropdown only appears for a controlled list of users?
Code:
i.e.   if (/^(dylan|bryan|emily)/i.test(userid)) {

              //blah

         }
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,678
Reaction score
14,031
Location
USA
Brian, any chance userid is available from ui3-local-overrides scope so this custom dropdown only appears for a controlled list of users?
Code:
i.e.   if (/^(dylan|bryan|emily)/i.test(userid)) {

              /blah

         }
Yup, the user name is available, but it only becomes available a while after dropdown boxes are initialized, so it will be a little tricky for you to use it as intended.

Here's a function that safely retrieves the user name if it is available, otherwise it returns an empty string:

Code:
function GetUserName()
{
    var r = sessionManager ? sessionManager.GetLastResponse() : null;
    if (r && r.data && r.data.user)
        return r.data.user;
    else
        return "";
}
Here is an updated local overrides script where the list of items is created while executing the rebuildItems method, the items are conditional based on the user name, and the rebuildItems method gets called again each time UI3 loads a new session data object.

This forum mangles double forward slashes in code pastes so I've put the script in pastebin: Ugh, that code won't work exactly, one sec.
 
Last edited:
Top