Blue Iris UI3

[bp2008]

The Blue Iris web interface has gotten a refresh!

UI3 comes with Blue Iris 4.7.3 or newer, first released April 20, 2018. It should be the default web interface in all browsers except Internet Explorer. If it isn't coming up, you can load it manually by opening this path in your web browser, replacing xxxxxx with your Blue Iris server's IP address or host name and port number if necessary.

http://xxxxxx/ui3.htm

UI3 is also available on GitHub at GitHub - bp2008/ui3: A powerful, modern HTML5 web interface for Blue Iris.

Hint
Because UI3 uses some relatively new web APIs, not all browsers can run all the features. The best experience is in Chrome.

UI3 works quite well on Android (in Chrome), but some features are missing on iOS due to Apple's restrictions placed on browsers.

Special Thanks
My thanks go out to everyone who helped beta-test this UI, and also to @ruppmeister who created the original visual design and layout of this UI. He also created most of the icons used within.

Help File

UI3 has a help file linked in its main menu. Here is an online copy hosted by GitHub: UI3 Help

The help file includes a list of URL parameters, but people often don't think to look there, so I'm including a copy here for convenience:

URL Parameters

Several URL parameters can change UI3's startup behavior.

Parameter	Effect	Example
maximize=1	UI3 loads with the left and top control bars hidden.	ui3.htm?maximize=1
tab=live	The "Live" tab is loaded.	ui3.htm?tab=live
tab=alerts	The "Alerts" tab is loaded.	ui3.htm?tab=alerts
tab=clips	The "Clips" tab is loaded.	ui3.htm?tab=clips
group=groupname	The group with the specified name is loaded.	ui3.htm?group=index
cam=shortName	The camera with the specified "Short name" is loaded.	ui3.htm?cam=porch

See the help file for a full list of URL parameters.

Multiple parameters can be combined. Separate multiple parameters with "&", like this: ui3.htm?tab=alerts&cam=porch&maximize=1




Q & A
Some questions I have received, and their answers:

Q: Can UI3 start in full-screen mode automatically?
A: No. Web browsers require user input to enter full-screen mode, and loading a page doesn't count as user input. Several browsers have command-line options to enable this type of functionality from a desktop shortcut. Use google to search for things like "chrome start fullscreen" or "chrome kiosk".

Q: Can you add the ability to delete a clip?
A: No, because that ability is already there! It is in a context menu. Right click on a clip, or long-press if using a touchscreen. Hint: You can hold CTRL and/or SHIFT when clicking clips to select multiple and delete them all at once!

Q: The "preset reference image" is really a nice feature and I applaud you on that. Would it be possible to have a daytime pic and night time pic stored so that time of day would determine which "preset reference image" displayed?
A: Possible, yes, but it won't happen. I can think of too many reasons why this wouldn't work well. 1) The UI doesn't know if it is day or night. 2) You'd have to assign each preset once during the day and once at night. 3) Too confusing.

Q: It would be nice if there was update available notifications like there is in ui2.
A: This UI is released as part of Blue Iris, so any updates to the UI are obtained just by updating Blue Iris. Therefore I don't think an update notification system is necessary.

---------------------------------------------------------------------------------------------

People won't stop asking how to donate.

Nobody has to donate. All my custom Blue Iris pages are and always will be free. Seriously folks, put your money toward more cameras or a CPU upgrade or something.

If you really can't help but give me some of your money, use this link:

Pay Brian Pearce using PayPal.Me

 

[Philip Gonzales]

The Blue Iris web interface is getting a refresh, but it isn't quite done yet!

For over a year, I have been quietly working in loose collaboration with Ken (the developer of Blue Iris) on a new web interface which I've been calling UI3. The goal has always been to make it official when it is finished. I have now finished almost everything I planned for this UI, and am just waiting on a few last things from Ken before I can complete the last of it.

I need beta testers to help me find all the bugs and sharp edges before this UI gets distributed to thousands of unwitting Blue Iris users.

Anyone can be a beta tester, as long as you have a recent (preferably latest) version of Blue Iris 4. Just follow these steps:

Step 1
Download from here: http://ipcamtalk.com/bp08/ui3_beta_b1.zip

Step 2
Extract everything to your Blue Iris 4/www directory. Overwrite as necessary -- don't worry, the parts being overwritten are just for the login page that I've already been including in UI2 for ages now and I'm confident that it works.

Step 3
Open this path in your web browser, replacing xxxxxx with your Blue Iris server's IP address or host name and port number if necessary.

http://xxxxxx/ui3beta/ui3.htm

Step 4: Test



Use this web UI as you would any other. Push all the buttons and see what they do. Many things can be right-clicked to open a context menu. If anything is terribly unclear, that may be a sign that I did not make it intuitive enough, and I'd like to hear about those things as much as bugs.

If you find any defects or have feedback about the UI, you can post it here. I have also set up a google form that is linked within UI3 where you can submit feedback or a bug report, so you don't even need to be an ipcamtalk member to give feedback.

Hint
Because UI3 uses some relatively new web APIs, not all browsers can run all the features. The best experience is in Chrome, Opera, or Edge. However please use any browser you like, because bugs often only occur in one browser or another and every bug we fix in beta is one fewer bug that everyone has to deal with at release.

Special Thanks
My thanks go out to everyone who helps beta-test this UI, and also to @ruppmeister who created the original visual design and layout of this UI. He also created most of the icons used within.

Quick question. Following these steps will still allow me to use the regular Blue Iris Web interface if I want to?

 

[bp2008]

Quick question. Following these steps will still allow me to use the regular Blue Iris Web interface if I want to?

Absolutely, yes. Only the login page is being totally replaced, and you don't even have to replace the login page if you don't want to.

 

[Philip Gonzales]

Absolutely, yes. Only the login page is being totally replaced, and you don't even have to replace the login page if you don't want to.

Ok, great. I have followed the instructions and WOW do I love your UI compared to the default one. I was afraid I wasn't going to like it, so wanted to make sure I could use the old webui if that was the case. For anyone on the fence about installing @bp2008 's UI do it, you won't regret it.

 

[gregbert]

As expected, I liked the UI appearance, but am having issues with the video quality.

The UI3 video is really compressed and blocky, especially when I move a PTZ or select a different camera. Once it becomes a more static image, the quality improves close to that of UI2.

I am running on a bit of a slow network (Denver hotel back to Dallas system using my VPN). I ran a speed test and am only getting about 5Mbs right now, but again, the UI2 images are good.

Here's a sample of the UI2 and UI3 images. I even tried to capture a shot of the PTZ in motion. The UI2 one shows the actual blurring of the image as it move whereas the UI3 one goes totally blocky even when it stops.

U3-b image is the UI3 capture.
U2-b1 and U2-b2 are the two captures of UI2 as it moves and then stops.

I notice the FPS in the UI3 lower-left varies down to as low as 5FPS.

Forgot to add:
Client browser is Chrome Version 61.0.3163.100 (Official Build) (64-bit) on Win10 (Surface 4)

 

[bp2008]

UI3 in Chrome by default streams H.264 using the profile "Streaming 0" that is set up in Blue Iris Options on the web server tab, advanced button. Blue Iris defaults this to only 0.5 Mbps and that is the cause of your poor quality. Inconsistent frame rate is the result of a poor connection and I can do nothing about that short of forcing there to be video delay which I won't do

 

[Nashional]

First impression... It's great! My only request/suggestion is to have the clips snapshot image larger. I like to review some outdoor cameras for wildlife/etc. and the small size makes it hard to determine if there is anything there or if it was just a false alert from passing cards/bugs...

 

[bp2008]

First impression... It's great! My only request/suggestion is to have the clips snapshot image larger. I like to review some outdoor cameras for wildlife/etc. and the small size makes it hard to determine if there is anything there or if it was just a false alert from passing cards/bugs...

Thanks for trying the UI!

Alas, sizing the thumbnails is a tricky compromise. As you make them bigger, it also means you can't fit as many items in the list at once and that makes it harder to work with. I'm just saying things are the way they are for many reasons

The good news is these thumbnails have a fairly high resolution source (426x240 pixels for a 16:9 camera) and you can take advantage of that with browser zoom.

Try:

1. Zoom the page with your browser's built-in zoom. This is typically available in the browser's main menu or by CTRL+Mouse Wheeling while you are not hovering over the video player.
2. Once you've zoomed in enough, the UI will almost certainly switch to "Small" scale which shrinks the thumbnails and is counter-productive for your purpose. In the UI Settings, there is an option to manually set the UI scale. "Medium" scale is ideal for maximizing space-efficiency since it has the same size of thumbnails as "Large" scale.
3. Collapse the "Filter Clips by" and "Server Status" areas by clicking their titles. This grants more vertical space to the clip list.
4. Full-screen the browser (F11) to increase vertical space further.
5. Buy a bigger monitor, one with higher DPI, or both. I'm a big fan of the LG 43ud79-b.

Something I have considered before, and may still try in the future, is to totally redesign the Alerts/Clips tabs to utilize most of the screen for listing the clips in rows and columns instead of just one column. This would be a totally different experience than people are used to, but maybe there is some value in it since it would mean much more room for large thumbnails among other things. But there are downsides too. Most notably the time it would take for me to design and build it With no space for a decently sized live view, people would be forced to switch between tabs a lot more often. And the layout would change drastically when you actually opened a clip. Lots of unsolved problems there.

 

[Nashional]

Thanks for the quick response! Zooming isn't really practical in my usage unfortunately. And it's not the vertical space that's an issue (I had already collapsed the other elements on the page). I have a BenQ GW2765HT monitor (1440p @ 27") and I had the browser window maximized. It's just the thumbnail images themselves are smaller than even my iPhone so it's hard to tell what's in them at a glance at that small size.

I know how hard it is to program/design things like this (it's what I do for a living - mostly PHP and SQL applications) and sometimes compromises have to be made and that's completely understandable. For me, it would be nice to have an option to have larger thumbnail images in the clips area to better see what may be in them without having to watch them.

Keep up the great work!

 

[bp2008]

For me, it would be nice to have an option to have larger thumbnail images in the clips area to better see what may be in them without having to watch them.

I will think about this. I could probably build an option for oversized clip tiles where the thumbnail takes up the full width of the column and the time and camera name get moved below each thumbnail. Do you think that would work for you? It would make each clip take up about 3 times as much vertical space in the list.

 

[Nashional]

That sounds like it may work and someone could then quickly scroll through them and see a clear image of what is in the thumbnail.

FWIW, my BI is on a local server and my development computer is what I use throughout the day so this new interface is very welcome and removes most (if not all) of the reasons I remote into my server to view BI.

I haven't found any issues so far and I've been using it a bit this morning. Really great work!

 

[nosup4u]

works fine in IE but getting the following error in chrome. i dont think this is a ui3 thing, the same thing happened in ui2, but jpegpull.htm always worked fine for me so i left it at that. now that is also giving the same message.

uncaught referenceerror: $ is not defined
url:// bla bla bla ui3.htm
line 105
char 3

 

[bp2008]

works fine in IE but getting the following error in chrome. i dont think this is a ui3 thing, the same thing happened in ui2, but jpegpull.htm always worked fine for me so i left it at that. now that is also giving the same message.

uncaught referenceerror: $ is not defined
url:// bla bla bla ui3.htm
line 105
char 3

$ is jQuery which is the very first javascript library this UI (or UI2) tries to load. Something is wrong with your Chrome installation. Maybe a horribly misbehaving extension.

 

[nosup4u]

disabled all extensions (adblock, ublock origin, https everywhere, google calendar and translate) same thing.
happens everywhere, work pc (win7), surface pro (w10).

however it does work directly on the server and internal network using local ip/dns.

this issue seems to be getting introduced with my reverse proxy and external access. fairly standard nginx / lets encrypt.

 

[bp2008]

this issue seems to be getting introduced with my reverse proxy and external access. fairly standard nginx / lets encrypt.

If you don't mind setting up a temporary user account for me and sending the connection details in a PM, I'd be happy to look at it and see if I can find out what is going wrong.

 

[anijet]

First impression... It's great! My only request/suggestion is to have the clips snapshot image larger. I like to review some outdoor cameras for wildlife/etc. and the small size makes it hard to determine if there is anything there or if it was just a false alert from passing cards/bugs...

I'll add to @Nashional comment. I really miss the larger clip thumbs but, what I miss even more is the animated thumbnails. I use those every morning to see if I need to investigate further any events happening during the night. I would continue to use UI2 if this feature was not available in UI3. I understand compromise would probably just use both UI2 and UI3.

Thanks for all your effort. UI2 has been an excellent add to BI!

 

[bp2008]

I'll add to @Nashional comment. I really miss the larger clip thumbs but, what I miss even more is the animated thumbnails. I use those every morning to see if I need to investigate further any events happening during the night. I would continue to use UI2 if this feature was not available in UI3. I understand compromise would probably just use both UI2 and UI3.

Thanks for all your effort. UI2 has been an excellent add to BI!

Larger clip thumbs? They were no larger in UI2 ... unless you were using chrome and dragged the clip list wider I guess.

The problem with the animated thumbnail feature, and the reason it isn't in UI3, is that it is extremely inefficient and interferes with normal video streaming. It caused lot of performance problems. I asked Ken for a more efficient way to do a clip preview animation ages ago, but the web UI has never been a high priority for him so most of the things I've asked for have basically been ignored and this particular thing I stopped asking for about a year ago.

 

[bp2008]

Just installed it! I like it. I updated BI at the same time so now I'm on 4.6.4.6. Seems to be working well once I figured out to change the BI settings for the default stream. I'm using chrome as well. So far I like it! Nice work! I've tested live view, playback, clip download. All seems to work!

I'm glad to hear it!

I agree with whoever asked for larger clip thumbnails though. With the old interface I would use that to scroll through and see what happened at night occasionally.

Noted.

The full screen option is awesome! I don't think we had that before did we? This is giving me thought to having a tablet placed in the house somewhere as a secondary monitor.

No, not really, you just had the browser's normal full-screen ability and of course in UI2 if you collapsed the side bar all the way it would hide the top bar as well which was kind of like the fullscreen mode in UI3.

 

[bp2008]

I am guessing you don't even get paid to do this.

Yeah, I wanted this UI to actually happen so I made Ken a deal, he doesn't pay me and I don't pay him ever again either (for BI licenses). Which is a real bargain for him considering...

 

[anijet]

Larger clip thumbs? They were no larger in UI2 ... unless you were using chrome and dragged the clip list wider I guess. .......

Yep, that's the only browser I use UI2 in so I thought they were all (browsers) the same. Too bad on the animations.
Thanks again!