Blue Iris UI3

[bp2008]

@actran

Your first request is complicated. The preset controls are complex little beasts, making it difficult to add an alternative layout for them. And if this were to be done, it would make those controls all the more complex and difficult to maintain.

Your second request is simple enough. If you haven't got one already, create a ui3-local-overrides.js file as described in the help file here: UI3 Help

Paste into it this script:

// Move the "Current Group" controls in the live view tab to the top of the scrollable section.
$(function ()
{
    var $liveScrollable = $('#layoutleftLiveScrollable');
    var $currentGroup = $liveScrollable.find('div[name="currentGroup"]').parent();
    $liveScrollable.children(".leftBarTopPadding").first().after($currentGroup);
});

 

[jaydeel]

Note that you can currently mouseover the preset controls (or long-press on touch devices) to view the preset names.

 

[actran]

@actran

Your first request is complicated. The preset controls are complex little beasts, making it difficult to add an alternative layout for them. And if this were to be done, it would make those controls all the more complex and difficult to maintain.

[/CODE]

@bp2008 When I use BI console or BI mobile app, I can get a list of PTZ preset names as a dropdown. Is that possible?

P.S. Thanks for the code snippet for 2nd request. I'll try that.

 

[actran]

Note that you can currently mouseover the preset controls (or long-press on touch devices) to view the preset names.

@jaydeel That's just too hard to do. And especially when there is an active event, I want to switch PTZ profiles as quick as possible.

 

[jaydeel]

I understand; you don't want to be mousing over several preset controls to find a specific one.

@bp2008 ... Just a thought... If a dropdown control is too unwieldy (I think Blue Iris allows up to 40 presets), perhaps you could add "Presets" as a label above the current controls and have it show a numbered list of all the preset names on a mouseover/long-press.

This is what I do in a custom webapp.

 

[bp2008]

Well here's a quick mod which totally changes the preset layout to use large thumbnails in a single vertical column. With additional modifications, this could be made into a UI setting so it could be toggled on or off on a per-device basis.

This goes in a ui3-local-overrides.css file (not .js) as described in the help file.

#ptzPresetsContent .fiveByTwoButtonSet
{
    height: auto;
}
#ptzPresetsContent .fiveByTwoButtonSet:nth-child(2)
{
    padding-top: 0px;
}
#ptzPresetsContent .squareButton
{
    display: block;
    border: none;
    width: auto;
    height: auto;
    margin-bottom: 10px;
}

Normal vs Modified

 

[bp2008]

It is substantially more difficult to add preset numbers or names into the layout since the stock UI3 behavior doesn't include those in the markup. So maybe this larger-thumbnail layout is sufficient?

 

[actran]

@bp2008 Large thumbnails shown above may be a bit too large to jump from 1 preset to another quickly without alot of scrolling

If BI is not giving you a list of PTZ preset names, can I just define a hard-code list of clickable links for left-side panel?
What would code for ui3-local-overrides.js look like?

 

[bp2008]

I think you misunderstand. BI does give me the list of preset names (UI3 shows them on mouseover). They just aren't written into the button markup on the page so it isn't trivial to show the names.

I've cooked up some new script which, I think, does what you want. I've put it into the ui3 wiki on github: bp2008/ui3

It is a bit sloppy and not quite up to my usual standards, hence why it is an override script and not going to be an official feature.

 

[actran]

@bp2008 Awesome!!! Thank you for an early Christmas gift.

I made 2 minor tweaks to your code for my situation:
#1: I removed the thumbnails since it was making some of my longer preset names to wrap to next line.
#2: Empty presets were still displayed and taking up screen space. I added some code so that those presets are not displayed.

Thank you again for code. It has made PTZ presets more accessible on a touch-screen tablet.

//************************************
function ModifyPresetButtons()
{
if (ptzButtons.isEnabledNow())
{
ptzButtons.Get$PtzPresets().each(function (idx, ele)
{
var $btn = $(ele);
$btn.children(".extPresetText").remove();
var num = parseInt($btn.attr("presetnum"));
var desc = ptzButtons.GetPresetDescription(num).replace(/\_/g," ");
if (/^Preset /.test(desc) || desc == "") {
$btn.empty();
} else {
$btn.html('<span class="extPresetText"> ' + num + '. ' + desc + '</span>');
}
});
} else {
ptzButtons.Get$PtzPresets().each(function (idx, ele)
{
var $btn = $(ele);
$btn.empty();
});
}
}
//************************************

 

[actran]

@bp2008 No urgency. Just trying to always improve.

3rd request: When I have a group selected in live view tab, the PTZ control on left-side panel is displayed but disabled. Not very functional IMHO.

What if 1 camera in my group is a PTZ? Can I somehow display my PTZ preset list even if I am viewing group?

Any custom code that can provide this enhancement?

 

[bp2008]

What if 1 camera in my group is a PTZ? Can I somehow display my PTZ preset list even if I am viewing group?

Another tricky one, but it was fun to implement and I might use it myself.

Here is the override script.

To accomplish this cleanly I needed to change a private method to public in ui3.js, so this script will only work fully in UI3 version 63 and newer. I'll build that release shortly.

 

[bp2008]

Releases - bp2008/ui3
To install releases from github, download the release zip and extract it to Blue Iris 4/www, overwriting all files.

Version 63

• Changed a private method to public to enable it to be overridden by a UI extension.
• Minor console logging cleanup.

 

[JNDATHP]

I’m sure this question has been asked, but I haven’t found it.

Is there a way to resize camera frames in UI3? And, is there a way to rearrange the camera frames?

Thanks,

Michael

 

[bp2008]

I’m sure this question has been asked, but I haven’t found it.

Is there a way to resize camera frames in UI3? And, is there a way to rearrange the camera frames?

Thanks,

Michael

This is discussed in UI3's help file under Camera Layout. Here is a link to a hosted copy of the help file on github.

 

[actran]

Another tricky one, but it was fun to implement and I might use it myself.

Here is the override script.

To accomplish this cleanly I needed to change a private method to public in ui3.js, so this script will only work fully in UI3 version 63 and newer. I'll build that release shortly.

@bp2008 I upgraded to v63. I added this code along with the other code to my override script and restarted BI. In Chrome, I cleared browser history/cache and clicked on UI3 reset all settings to be sure.

When I toggle "PTZ Presets in Single Column", I then see my camera PTZ preset list (on left-side pane) when in group view and the preset links work!

But if I switch to different group or click on a camera and then go back to that group, it's not displaying my camera PTZ preset list.

If I toggle "PTZ Presets in Single Column" again, I can get my camera PTZ preset list in group view again.

Could the other code in my override script perhaps conflict with this latest code?

Here is my override script on GDrive.

P.S. If I have group in live view and switch to Alerts/Clips tab and then go back to Live View, my camera PTZ preset list is still there, so that behavior is good.

P.S. #2: The PTZ dialpad (up,down,left,right) does control my camera PTZ in group view, whether the PTZ preset list is displayed or not.

 

[bp2008]

@actran you are right. There were bugs when using both extensions together. Should be fixed in this version:

 

[actran]

@actran you are right. There were bugs when using both extensions together. Should be fixed in this version:

@bp2008 Thank you. This version works as desired. Very nice.

 

[giomania]

FYSA: I purchased an Amazon echo show second generation and when the UI3 interface is running on the Silk browser, the echo show has an issue responding to voice requests; the audio is cut off after a couple of seconds.

Let’s say I asked for the time which is 8:07 for example. The response is “The time is eigh”, so the audio cuts out.

I am thinking there is not enough memory or processor power to handle both tasks simultaneously.

Also, When I launch UI3 on the Silk browser, I have to “tap to start HTML 5” (something to that effect) on the silk browser, and I don’t get that message using the Silk browser on my fire HD 8 tablet.

Mark


Sent from my iPhone using Tapatalk Pro

 

[bp2008]

FYSA: I purchased an Amazon echo show second generation and when the UI3 interface is running on the Silk browser, the echo show has an issue responding to voice requests; the audio is cut off after a couple of seconds.

Let’s say I asked for the time which is 8:07 for example. The response is “The time is eigh”, so the audio cuts out.

I am thinking there is not enough memory or processor power to handle both tasks simultaneously.

Also, When I launch UI3 on the Silk browser, I have to “tap to start HTML 5” (something to that effect) on the silk browser, and I don’t get that message using the Silk browser on my fire HD 8 tablet.

Mark

Interesting. I thought the echo show did not officially support a web browser so they probably didn't put much time into making sure everything worked nicely. Some thoughts, you could make sure UI3's audio is muted so UI3 isn't doing anything with audio at all. You could also choose a lower resolution stream to save resources.

You'll likely be seeing more of those warnings about clicking to begin playback as more browsers implement user-input requirements before allowing audio and/or video to play.