Blue Iris UI3

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,666
Reaction score
14,005
Location
USA
I have 10 cams, probably will end up with 12. I attached a screenshot showing a mockup of how we should be able to get up to 16 cams on the left menu, when PTZ is gone - more like 12 or 13 with PTZ

Also, unless the person has a TON of cams, you can also see there is a lot of black/open space on the top and bottom that could hold 20+ cams in horizontal button rows

thanks for considering, I suspect others would find this very useful too.
This is really funny because all those years ago when I first started "improving" the default BI web interfaces, my main goal was to never again have to select cameras by clicking the list of camera names. I always hated the thing. And then you come along and want the list of camera names back. :rofl:

It really goes against my idea of what UI3 should be, so I'm not going to add it. But that doesn't mean you can't have it. It is actually quite easy to create a camera list like this in the left control panel, so here is a local overrides script that injects it into the left bar of the Live View tab. Just create a file named "ui3-local-overrides.js" and paste this script into it. Put the file in the "/ui3beta/ui3" directory. If you had installed beta versions b1 or b2, you will already have a "ui3-local-overrides.js" file because I accidentally included it in those earlier beta releases. But the file is supposed to be left out of UI releases by design so that people can use it to inject custom script into the UI and not have to deal with it getting overwritten with every update.

Code:
(function ()
{
    /// <summary>
    /// This local-overrides script for UI3 adds a text list of all available cameras to the bottom of the left bar on the live view tab.
    /// </summary>

    $(function ()
    {
        var injectedCameraList = false;
        var $box = $('<div class="leftBarBox" style="padding-bottom: 3px;"></div>');
        var $cameraList = $('<div class="leftBarInnerBox" style="overflow: hidden; text-overflow: ellipsis;"></div>');
        BI_CustomEvent.AddListener("CameraListLoaded", function (response)
        {
            if (injectedCameraList)
                return;
            for (var i = 0; i < response.data.length; i++)
            {
                if (cameraListLoader.CameraIsGroup(response.data[i]))
                    continue;
                if (cameraListLoader.CameraIsCycle(response.data[i]))
                    continue;
                if (!response.data[i].isEnabled)
                    continue;
                if (!response.data[i].webcast)
                    continue;
                var $link = $('<a class="leftBarHeading" style="display: block; color: #0097F0; margin-bottom: 3px;"></a>');
                $link.attr('href', 'javascript:videoPlayer.ImgClick_Camera(cameraListLoader.GetCameraWithId("' + response.data[i].optionValue + '"))');
                $link.text(response.data[i].optionDisplay);
                $cameraList.append($link);
            }
            $cameraList.attr("size", $cameraList.children('a').length);
            injectedCameraList = true;
        });
        $box.append($cameraList);
        $('#layoutleftLiveScrollable').append($box);
    });
})();

If you don't like the color or the spacing or something, find the line with the text "leftBarHeading" and change the margin or hex color value. This helps with picking colors: color picker - Google Search

If you can't get changes to take effect, try a full refresh (Ctrl + F5 in some browsers) or clear the browser cache.
 

LTek

Getting the hang of it
Joined
Jul 28, 2015
Messages
112
Reaction score
41
This is really funny because all those years ago when I first started "improving" the default BI web interfaces, my main goal was to never again have to select cameras by clicking the list of camera names. I always hated the thing. And then you come along and want the list of camera names back. :rofl:

It really goes against my idea of what UI3 should be, so I'm not going to add it. But that doesn't mean you can't have it. It is actually quite easy to create a camera list like this in the left control panel, so here is a local overrides script that injects it into the left bar of the Live View tab. Just create a file named "ui3-local-overrides.js" and paste this script into it. Put the file in the "/ui3beta/ui3" directory. If you had installed beta versions b1 or b2, you will already have a "ui3-local-overrides.js" file because I accidentally included it in those earlier beta releases. But the file is supposed to be left out of UI releases by design so that people can use it to inject custom script into the UI and not have to deal with it getting overwritten with every update.
Thank you! Works GREAT. Saves clicks and way faster compared to not having it. UI3 is fantastic!
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,666
Reaction score
14,005
Location
USA
I downloaded Firefox 57 today and tried it with UI3. It supports H.264 in UI3 but only if you turn on two settings in about:config. dom.streams.enabled and javascript.options.streams

I can't have the UI change these preferences automatically, so for now Firefox is basically incompatible with H.264 in UI3 until such time as Mozilla enables the feature by default, which has no ETA.
 

Philip Gonzales

Getting comfortable
Joined
Sep 20, 2017
Messages
697
Reaction score
551
Hmmm OK. Is this something that can be added? I put my cameras in a strip down the side of my desktop. UI2 works so well because I can remove the interface and see only the cameras, whereas UI3 doesn't work so well as you can see.

EX:
How do you put cameras in a strip? Do you just resize it? How do you get cameras to be in one column?
 

Tinman

Known around here
Joined
Nov 2, 2015
Messages
1,208
Reaction score
1,472
Location
USA
Tested beta 8 for about a hour with my brother remotely using chrome and everything worked and was VERY fast loading clips & alerts. GREAT job !!
 

PatPend

Pulling my weight
Joined
Jul 10, 2016
Messages
158
Reaction score
193
I downloaded Firefox 57 today and tried it with UI3. It supports H.264 in UI3 but only if you turn on two settings in about:config. dom.streams.enabled and javascript.options.streams

I can't have the UI change these preferences automatically, so for now Firefox is basically incompatible with H.264 in UI3 until such time as Mozilla enables the feature by default, which has no ETA.

I just tried FF 57 with these settings. Works ok until you click on a live camera in full frame view to return to all camera view, then hangs on the reload. Have to close the tab and re-open the page.

Other than that - any downside to simply enabling these features in FF permanently?
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,666
Reaction score
14,005
Location
USA
I just tried FF 57 with these settings. Works ok until you click on a live camera in full frame view to return to all camera view, then hangs on the reload. Have to close the tab and re-open the page.

Other than that - any downside to simply enabling these features in FF permanently?
Indeed, upon further testing, Firefox has a lot of trouble changing streams in H.264 mode. This kind of thing is to be expected with new APIs that aren't yet standard, I suppose. It could be worse. It could be Microsoft Edge.

I don't see any harm to leaving those flags enabled in FF.
 

LTek

Getting the hang of it
Joined
Jul 28, 2015
Messages
112
Reaction score
41
Indeed, upon further testing, Firefox has a lot of trouble changing streams in H.264 mode. This kind of thing is to be expected with new APIs that aren't yet standard, I suppose. It could be worse. It could be Microsoft Edge.

I don't see any harm to leaving those flags enabled in FF.
I don't plan to update to FF v57 ... staying at 56, they are breaking too many legacy plugins that make FF worth using. Without those legacy plugins, FF is nothing special IMO. I highly suggest people stay on FF 56 until Mozilla removed head from tush.
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,666
Reaction score
14,005
Location
USA
I daresay Firefox is doing pretty poorly lately. Even 56 doesn't do terribly well in UI3, achieving about half the frame rate in jpeg mode compared to Chrome. I'm going to take it off the recommended list in the About panel.
 

Tinman

Known around here
Joined
Nov 2, 2015
Messages
1,208
Reaction score
1,472
Location
USA
I daresay Firefox is doing pretty poorly lately. Even 56 doesn't do terribly well in UI3, achieving about half the frame rate in jpeg mode compared to Chrome. I'm going to take it off the recommended list in the About panel.
Yup, and IE11 is hanging on by a thread....if it weren't for the activex and cameras it would be gone. Too bad about Edge, wouldn't it be nice to have a OS that had everything in one package :)
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,666
Reaction score
14,005
Location
USA
Firefox 57 and the latest Edge both seem to have the same problem with H.264 streaming. The streaming connections stay open when they are supposed to be closed. The Blue Iris Status panel, Connections tab shows the FPS for my session keep going up further and further when I change streams.

Turns out these browsers may require a different method to close the streams than the method that works in Webkit-based browsers like Chrome and Safari.

Update: My first impression is that Firefox 57 works fine and correctly closes streams after implementing the new stream abort method. Edge does close the streams eventually, too, but goes responsive for other unknown reasons and general performance even in jpeg mode is simply unacceptable.
 
Last edited:

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,666
Reaction score
14,005
Location
USA
Beta b9 is now available in the first post.

Changes include:
* Removed notices about Alert playback being unfinished.
* Added warning for users on the current latest Edge version, which can't handle UI3 well.
* Fixed H.264 stream cancellation in Firefox 57 (with streams preferences enabled).
* Fixed bug in some browsers where the playback controls settings panel would close if you moused over the white part of the settings icon.
 

Hokiecow

n3wb
Joined
Nov 14, 2017
Messages
5
Reaction score
0
After logging in, it shows a status and never makes it past "Checking Session Status - Fail" and at the lower right is a message that says "Unable to contact Blue Iris server to check session status". Is there anything I need to change in the software? It does this both on my network and externally. I can use the default BI web interface fine.

upload_2017-11-14_21-18-21.png
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,666
Reaction score
14,005
Location
USA
After logging in, it shows a status and never makes it past "Checking Session Status - Fail" and at the lower right is a message that says "Unable to contact Blue Iris server to check session status". Is there anything I need to change in the software? It does this both on my network and externally. I can use the default BI web interface fine.

View attachment 23603
Are you using any kind of proxy server to access Blue Iris? Something that might not be handling 'POST' requests correctly?
 

Hokiecow

n3wb
Joined
Nov 14, 2017
Messages
5
Reaction score
0
The only thing I use to access the computer Blue Iris is on is Team Viewer; otherwise I don't use a proxy server.
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,666
Reaction score
14,005
Location
USA
The only thing I use to access the computer Blue Iris is on is Team Viewer; otherwise I don't use a proxy server.
I mean when you connect via the browser. But I guess if you used a proxy server for that then you would have known what I meant :)

I added some more detail to that error message. Download this file, extract it and replace the ui3.js located in ui3beta/ui3/

Be sure to reload the page -- if you don't get more detail in the error message, clear your browser cache and try again.
 

Attachments

MEZERR

Young grasshopper
Joined
Dec 26, 2014
Messages
33
Reaction score
6
Recently upgraded from Beta 4 to Beta 8, and now when viewing any Alert, I get "Fail response when getting clip stats from server. This alert may have inaccurate duration"

 
Top