Blue Iris UI3

actran said:
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
Click to expand...

Absolutely it is possible. Let me whip up a template for you.
 
  • Like
  • Love
Reactions: looney2ns and actran
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.
 
@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.
Click to expand...

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);
    });
}
 
  • Wow
Reactions: actran
Ri22o said:
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.
Click to expand...

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
 
@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

bp2008 said:
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
Click to expand...
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.
 
actran said:
@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.
Click to expand...

Find the line $("#changeGroupButton").removeClass("showOnlyOnTimeline") and put a semicolon at the end. Should fix the error you are getting.
 
  • Like
Reactions: actran
Ri22o said:
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.
Click to expand...

Turn off "Fit to Viewport" and then reduce the Height value.
 
@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!
 
  • Like
Reactions: hikky_b, looney2ns and bp2008
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

         }
 
actran said:
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

         }
Click to expand...

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:
  • Like
Reactions: actran
Am I just having a brain fart here? My wife told me that when she selects a single camera in UI3, it no longer stretches to fill the whole screen (even though it makes the aspect ratio a little wonky, she prefers it in full screen). I'm thinking that it always used to stretch, but I sure as heck can't remember for sure and don't see a setting to make it do so. Has it never done so or have I inadvertently changed a setting in BI that screwed it up (since I checked other tablets and computers running UI3 and it isn't stretching cams in those either) ? Despite searching, I can't find anything.
 
  • Like
Reactions: bp2008
Ah ok, thanks! Now I can feel a little saner again. :p
 
@bp2008 Thanks. Your GetUserName code works.

Question: If user is not on regex list, any chance the code does not display the dropdown icon at all?
(Currently, icon is always shown but dropdown list is empty for those users not on on regex list)
 
Where can I find the url parameters documentation for the livestream.htm entry point? I found them for ui3.htm, but they do not seem to work with livestream.htm
I am wanting to be able to start livestream with the following conditions:

1) Specify a group or camera name
2) Have it start without having to press the big Play button that shows up in the middle of the screen

Also, does livestream.htm require a logged in session, or can it work without having to login?

I'm asking about this because I want to put a small tablet by the front door that continually displays a group, and since non-computer types will be using it, I want to keep it as simple as possible, such as not requiring a login.
 
You must log in or register to reply here.
Top Bottom