I made a better remote-live-view page [OLD]

[Robert M]

Ah, that was it. I added a second camera to the group and it shows up now. Thanks!

 

[Robert M]

I was testing this one out, but doesn't seem to work. I did name it correctly as well once I discovered I needed to drop the -template.. just in case of caching I restarted blue iris, but still doesn't show the individual cameras.

// Show individual cameras in Current Camera dropdown
function PopulateHomegroupSelector()
{
    var box = $("#homegroupselector");
    box.empty();
    if (typeof (lastCameraListResponse.data) == "undefined" || lastCameraListResponse.data.length == 0)
        return;
    for (var i = 0; i < lastCameraListResponse.data.length; i++)
    {
        var displayName = lastCameraListResponse.data[i].optionDisplay;
        if (CameraIsGroupOrCycle(lastCameraListResponse.data[i]) || lastCameraListResponse.data[i].isEnabled)
        {
            var thisGroupId = JavaScriptStringEncode(lastCameraListResponse.data[i].optionValue);
            var thisGroupName = CleanUpGroupName(lastCameraListResponse.data[i].optionDisplay);
            var thisGroupSelected = currentlySelectedHomeGroupId == lastCameraListResponse.data[i].optionValue;

            box.append('<div' + (thisGroupSelected ? ' class="selected"' : '')
             + ' onclick="SelectCameraGroup(\'' + thisGroupId + '\')">' + thisGroupName + '</div>');
        }
    }
}
// Allow clicking individual cameras in Current Camera dropdown
function SelectCameraGroup(groupId)
{
    $("#homegroupselector").hide();

    for (var i = 0; i < lastCameraListResponse.data.length; i++)
    {
        if (lastCameraListResponse.data[i].optionValue == groupId)
        {
            if (CameraIsGroupOrCycle(lastCameraListResponse.data[i]) || lastCameraListResponse.data[i].isEnabled)
            {
                settings.ui2_defaultCameraGroupId = currentlySelectedHomeGroupId = groupId;
                currentlyLoadingCamera = lastCameraListResponse.data[i];

                UpdateSelectedLiveCameraFields();
                break;
            }
        }
    }
}

 

[bp2008]

A browser may cache the js files, but Blue Iris does not.

Also, you copied more than the code block, which would have resulted in a script error and could be the reason for your trouble.

 

[Robert M]

Sorry, that extra text was just in the post.. I stripped out the non JS code on the server... I'll try clearing cache from browser.. the forced reload (Ctrl Reload) didn't seem to do anything...

 

[Robert M]

I resolved the issue. Apparently when I saved the .js originally it was in the wrong location.. fixed that and your code (of course) works as expected.

Thanks!

 

[Robert M]

Slight hack to first javascript function (I wanted to see a sorted camera list) -- I'm guessing there's a more elegant way to do this, but this works for me:

// Show individual cameras in Current Camera dropdown
function PopulateHomegroupSelector()
{
    var box = $("#homegroupselector");
    box.empty();
    if (typeof (lastCameraListResponse.data) == "undefined" || lastCameraListResponse.data.length == 0)
        return;
    var boxArray = [];
    for (var i = 0; i < lastCameraListResponse.data.length; i++)
    {
        var displayName = lastCameraListResponse.data[i].optionDisplay;
        if (CameraIsGroupOrCycle(lastCameraListResponse.data[i]) || lastCameraListResponse.data[i].isEnabled)
        {
            var thisGroupId = JavaScriptStringEncode(lastCameraListResponse.data[i].optionValue);
            var thisGroupName = CleanUpGroupName(lastCameraListResponse.data[i].optionDisplay);
            var thisGroupSelected = currentlySelectedHomeGroupId == lastCameraListResponse.data[i].optionValue;

            boxArray.push('##' +thisGroupName + '##\n<div' + (thisGroupSelected ? ' class="selected"' : '')
             + ' onclick="SelectCameraGroup(\'' + thisGroupId + '\')">' + thisGroupName + '</div>');
//            box.append('<div' + (thisGroupSelected ? ' class="selected"' : '')
//             + ' onclick="SelectCameraGroup(\'' + thisGroupId + '\')">' + thisGroupName + '</div>');
        }
    }
    boxArray.sort();
    for (i = 0; i < boxArray.length; i++) {
       box.append(boxArray[i].replace(/##.*##/g,"");
    }
}

 

[bitNine]

I threw this into my BI setup today to check it out, but got this error first, followed by a bunch of others. I could dig into the JS, but I figured I'd post here first.

EDIT: Never mind. I first tried to use it in IE, because I've been using the ActiveX control for BI. It works fine in Chrome

 

[TWallace]

This may be a question for Blue Iris usage rather than the live view page. I recently switched to using portrait mode monitors at home. When I view the "all cams" view, the layout of cameras is undesirable with a ton of empty space above and below the view. The view shows the 12 cameras in a 4x3 grid. I'd prefer to have it as a 2x6 grid. I believe this may not be possible on the client side, as the server is generating this 4x3 image. Here's what it looks like.

Even in landscape mode, 4x3 is less desirable as it still results in wasted space above/below. I'd prefer 3x4 in the case of landscape mode monitor.

If this can't be altered with the live view, anyone know if it can be altered within Blue Iris?

 

[bp2008]

You can adjust the resolution of the group views Blue Iris sends out, and keep tweaking until BI lays out the cameras the way you want them and with a minimum of empty black space. For the best results, keep the dimensions to multiples of 16.

Spoiler: Multiples of 16 from 0 to 3000

16 32 48 64 80 96 112 128 144 160 176 192 208 224 240 256 272 288 304 320 336 352 368 384 400 416 432 448 464 480 496 512 528 544 560 576 592 608 624 640 656 672 688 704 720 736 752 768 784 800 816 832 848 864 880 896 912 928 944 960 976 992 1008 1024 1040 1056 1072 1088 1104 1120 1136 1152 1168 1184 1200 1216 1232 1248 1264 1280 1296 1312 1328 1344 1360 1376 1392 1408 1424 1440 1456 1472 1488 1504 1520 1536 1552 1568 1584 1600 1616 1632 1648 1664 1680 1696 1712 1728 1744 1760 1776 1792 1808 1824 1840 1856 1872 1888 1904 1920 1936 1952 1968 1984 2000 2016 2032 2048 2064 2080 2096 2112 2128 2144 2160 2176 2192 2208 2224 2240 2256 2272 2288 2304 2320 2336 2352 2368 2384 2400 2416 2432 2448 2464 2480 2496 2512 2528 2544 2560 2576 2592 2608 2624 2640 2656 2672 2688 2704 2720 2736 2752 2768 2784 2800 2816 2832 2848 2864 2880 2896 2912 2928 2944 2960 2976 2992

Warning: Setting too large of a frame size may make the official mobile apps unable to decode the group camera streams.

 

[TWallace]

Thanks, bp2008. I was able to get it to show a 3x4 grid instead of 4x3. Was not able to get a 2x6, but will try again when I have more time.

 

[bp2008]

I'm sure you can get a 2x6, you'll just have to shrink the width further or increase the height further, or both.

 

[Ted Clendenin]

I am getting this error when logging in

 

[bp2008]

Re-extract everything and make sure all files get overwritten. Then refresh and clear browser cache if necessary.

 

[ItechashardasIcanbro]

This is Wonderfull! Thank you so much)

Also to avoid any wrong doings, be sure to create a backup by exporting the setting of your Bi machine before you start extracting to the WWW folder)

 

[bp2008]

While it is always a good idea to make backups, nothing about the www folder is involved in a BI settings backup (which is all registry data).

 

[Bapski]

Date and times are off...

I've seen this before but i thought i was just seeing things beacause when i re-check dates and time synced with system time.

Just wondering what setting i've messed up.

 

[kwhy]

haven't had a chance to read all the threads here, but was wondering if the sidebar close/open (default tilde key) is also suppose to reset your screen back to the LIVE camera mode when pressed as well. If I'm viewing a clip/alert and want to close the sidebar it also resets view back to main LIVE camera screen. Would like to look at alerts/clips (no sidebar).

I haven't had a chance to look at the java script (using latest chrome on win 10 (server/clients)) yet, but wanted to ask if this is a bug/limitation before proceeding.

great UI though.

 

[bp2008]

haven't had a chance to read all the threads here, but was wondering if the sidebar close/open (default tilde key) is also suppose to reset your screen back to the LIVE camera mode when pressed as well. If I'm viewing a clip/alert and want to close the sidebar it also resets view back to main LIVE camera screen. Would like to look at alerts/clips (no sidebar).

I haven't had a chance to look at the java script (using latest chrome on win 10 (server/clients)) yet, but wanted to ask if this is a bug/limitation before proceeding.

great UI though.

That was intentional because with the side bar closed you would pretty much be limited to the one clip you already had open. If you just want to get the bar out of the way and keep viewing a clip, try dragging it nearly closed with your mouse.

 

[dmadesign]

Hello,
First I wanted to thank bp2008 for all of his hard work. I am having trouble getting your ui2.htm page to load when going through a reverse proxy (NGINX). I thing it has something to do with css and js not being server correctly by NGINX. I was hoping you might have so sort of idea what is going on. By the way, I am able to load the page fine if I bypass the reverse proxy. I attached what errors I could find from Chrome below.

Spoiler

Spoiler

 

[bp2008]

The 404 errors are normal (those files are intentionally left out of releases in case you want to add your own customizations and have them survive updates). Your problem is the "strict MIME type checking" part. I don't think Blue Iris is sending the correct Content-Type header with .js files. I will let the developer know, and maybe he'll fix it soon.

Likely, Chrome is requiring the MIME type to be correct (text/javascript) for sites loaded via https.