Blue Iris UI3

Discussion in 'Blue Iris' started by bp2008, Nov 1, 2017.

Share This Page

  1. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    The Blue Iris web interface has gotten a refresh!

    [​IMG]

    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.

    Code:
    http://xxxxxx/ui3.htm
    Hint
    Because UI3 uses some relatively new web APIs, not all browsers can run all the features. The best experience is in Chrome. Next best I'd say is Opera. Then perhaps Safari (on Mac). Microsoft Edge and Firefox have HTML5 streaming issues and are not recommended. If you want to try Firefox anyway, turn on the dom.streams.enabled and javascript.options.streams settings in about:config, otherwise you will be limited to jpeg streaming modes with no audio.

    UI3 works quite well on Android (in Chrome), but many 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.

    ParameterEffectExample
    maximize=1UI3 loads with the left and top control bars hidden.ui3.htm?maximize=1
    tab=liveThe "Live" tab is loaded.ui3.htm?tab=live
    tab=alertsThe "Alerts" tab is loaded.ui3.htm?tab=alerts
    tab=clipsThe "Clips" tab is loaded.ui3.htm?tab=clips
    group=groupnameThe group with the specified name is loaded.ui3.htm?group=index
    cam=shortNameThe camera with the specified "Short name" is loaded.ui3.htm?cam=porch
    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
     
    Last edited: Oct 26, 2018
  2. Philip Gonzales

    Philip Gonzales Pulling my weight

    Joined:
    Sep 20, 2017
    Messages:
    443
    Likes Received:
    227
    Quick question. Following these steps will still allow me to use the regular Blue Iris Web interface if I want to?
     
  3. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    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 likes this.
  4. Philip Gonzales

    Philip Gonzales Pulling my weight

    Joined:
    Sep 20, 2017
    Messages:
    443
    Likes Received:
    227
    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. ;)
     
    bp2008 likes this.
  5. gregbert

    gregbert Young grasshopper

    Joined:
    Jan 9, 2017
    Messages:
    55
    Likes Received:
    23
    Location:
    Lewisville, TX
    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)
     

    Attached Files:

    Last edited: Nov 2, 2017
  6. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    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 :)
     
    Mike, Philip Gonzales and fenderman like this.
  7. Nashional

    Nashional n3wb

    Joined:
    Jun 13, 2016
    Messages:
    12
    Likes Received:
    5
    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...
     
    andrew@carmelbythesea and anijet like this.
  8. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    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.
     
  9. Nashional

    Nashional n3wb

    Joined:
    Jun 13, 2016
    Messages:
    12
    Likes Received:
    5
    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!
     
  10. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    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.
     
  11. Nashional

    Nashional n3wb

    Joined:
    Jun 13, 2016
    Messages:
    12
    Likes Received:
    5
    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!
     
  12. nosup4u

    nosup4u n3wb

    Joined:
    Oct 9, 2015
    Messages:
    2
    Likes Received:
    0
    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
     
  13. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    $ 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.
     
  14. nosup4u

    nosup4u n3wb

    Joined:
    Oct 9, 2015
    Messages:
    2
    Likes Received:
    0
    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.
     
  15. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    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.
     
  16. anijet

    anijet Getting the hang of it

    Joined:
    Mar 10, 2014
    Messages:
    176
    Likes Received:
    50
    Location:
    CA
    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!
     
    skarragallagher likes this.
  17. drunkpenguin

    drunkpenguin Getting comfortable

    Joined:
    Mar 31, 2017
    Messages:
    826
    Likes Received:
    601
    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 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.

    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.
     
  18. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    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.
     
  19. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    I'm glad to hear it!

    Noted.

    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.
     
  20. drunkpenguin

    drunkpenguin Getting comfortable

    Joined:
    Mar 31, 2017
    Messages:
    826
    Likes Received:
    601
    Appreciate the explanation on the clip viewer size. I won't be pushy. I appreciate what you do! Especially since I am guessing you don't even get paid to do this.
     
  21. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    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...
     
  22. anijet

    anijet Getting the hang of it

    Joined:
    Mar 10, 2014
    Messages:
    176
    Likes Received:
    50
    Location:
    CA
    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!
     
  23. Q™

    Q™ Known around here

    Joined:
    Feb 16, 2015
    Messages:
    3,507
    Likes Received:
    1,892
    Location:
    Megatroplis, USA


    The ads suck smiley4.gif
     
  24. drunkpenguin

    drunkpenguin Getting comfortable

    Joined:
    Mar 31, 2017
    Messages:
    826
    Likes Received:
    601
    What ads?

    Question, ui3 is reporting that my CPU is not fast enough to support the stream, but the stream for 10 cams is coming in fluid and clear. In fact theres a wasp crawling around on one right now and it's not choppy at all. I have BI setup with no restrictions on bandwidth. It does report my CPU is running at 80%, what is the threshold to decide to pop up that message?
     
  25. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    The ads he was talking about are from imgur which I used as the image host for the screenshot. Imgur has been going downhill lately. Not content to simply host images anymore, now they are redirecting people who try to load "just the image" to a page with a bunch of ads in the margin.

    That message is triggered when the device you are viewing with can't decode the H.264 video as fast as it is coming in. It may still look smooth, but in reality the video is falling further and further behind. Specifically, that message comes up when the video is 3 or more seconds delayed. It happens easily on basically all phones, most tablets, and a fair number of low end laptops too. It can be eliminated in many cases by setting up one of the 3 streaming profiles with "ultrafast" encoding and a fairly low bit rate limit, and being sure to choose that streaming profile on the slower devices. I'd like to be able to fix this automatically by reducing resolution or something, but Blue Iris hasn't given me that power and I don't have high hopes that Ken will provide it.

    There is a similar message for when your network connection is too slow for the stream, and again the only recourse is to ask the user to fix it :(
     
  26. drunkpenguin

    drunkpenguin Getting comfortable

    Joined:
    Mar 31, 2017
    Messages:
    826
    Likes Received:
    601
    Oh ok, so my client is too slow not the server? That makes sense, I'm sitting in front of an all-in-one pc at the moment thats several years old. Playing with the settings is no problem for me, as long as I know which ones to play with. Thanks again.
     
  27. reverend

    reverend Pulling my weight

    Joined:
    Jun 18, 2015
    Messages:
    198
    Likes Received:
    100
    I've just installed this but now I see "Unable to contact Blue Iris server" in red at the bottom of the login page - I never backed up the old page either first - d'oh!

    ..:: Edit ::..
    Oh wait that's when I go through my external IP which is reverse proxied via a Sophos UTM - it works direct to the Blue Iris IP address, I'll do some digging.
     
  28. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    Ugh. That isn't supposed to happen, of course. Are you doing anything fancy with your network configuration, like a reverse proxy or Stunnel?
     
  29. bp2008

    bp2008 Staff Member

    Joined:
    Mar 10, 2014
    Messages:
    7,485
    Likes Received:
    4,035
    Aha. Well reverse proxies often complicate things, particularly if they inject a folder path into the URL (like instead of http://xxxxxx/login.htm you have http://xxxxxx/BlueIris/login.htm). I thought I had that taken care of and working, so if you have an example where it does not work then it is something I may be able to fix.
     
  30. reverend

    reverend Pulling my weight

    Joined:
    Jun 18, 2015
    Messages:
    198
    Likes Received:
    100
    Just edited my previous post, yes it goes via Sophos UTM which is basically reverse proxying.

    I've tried direct to the Blue Iris server from my Macbook and the login page now works but when I log in I get this:

    Screen Shot 2017-11-02 at 20.59.49.png

    I've just turned off AdBlock etc but still getting the same error