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

That did it! Took me a bit to find that setting. I'm still learning BI, it's a pretty complex software. I now have the all camera view and the all camera cycle view available. Thanks for sticking with me and troubleshooting it. I appreciate all the work you've put into this! Just curious, when you do your updates is it one file that you update and can be replaced, or should they all be copied over? Thanks again.
 
Any of the files may be modified in one of my updates, so you always want to replace / overwrite them all. Just for example, this most recent update included modifications to the change log text file, ui2.htm, ui2.js, ui2-util.js, ui2.css, ui2-local-overrides-template.js, and I updated the toastr library so the two files starting with "toastr" are updated as well.
 
we're still getting cases where live view stops and it's just a broken image... I can't pinpoint the cause.... can you explain the logic / js to me or kinda point me in the right direction? maybe looking at your code might help us solve this
 
I really have no idea why that would happen. The json page is likely an attempt to get a status update. Does that error occur more than once?

Just about the only thing that would cause the live view to show a broken image is if Blue Iris refuses to send an image. Perhaps your session expired and the status update loop broke. Normally the status update loop is what detects when a session has expired, and causes the page to reload. But if it broke then UI2 would likely not discover the session was bad.
 
pull up a live stream, then disable your NIC for 10 seconds and then re-enable. same error with broken image and it never "reconnects"
 
That tilda key to hide the left clip bar is fantastic. Is it possible to have it call f11 (fullscreen)?

Alternatively, is there a way to get a double-click to make that particular camera (whether live or playback) go full screen (no clip bar or other information)?

Hitting the tilda, and then f11 works for now, but it's a little cumbersome to get back out of full screen quickly.
 
That tilda key to hide the left clip bar is fantastic. Is it possible to have it call f11 (fullscreen)?

Not currently. I will add another hotkey which toggles in and out of fullscreen mode, and you could bind it to the same key as the sidebar toggle so they both take effect at the same time. It would be possible to get your full-screen state out of sync with your sidebar state this way, but you could correct it by pressing F11 which is the browser's hotkey, not UI2's hotkey. If you bind anything to F11 in UI2, it overrides the browser's binding for that key.

Alternatively, is there a way to get a double-click to make that particular camera (whether live or playback) go full screen (no clip bar or other information)?

Thanks for the suggestion, but I will not be implementing this. It could happen too easily by accident and leave someone not knowing why the rest of the UI had vanished.
 
Oh, right, the browser doesn't ever tell the script that the mjpeg stream failed, and it doesn't try to restart the stream on its own.
 
Thanks for the suggestion, but I will not be implementing this. It could happen too easily by accident and leave someone not knowing why the rest of the UI had vanished.

Understood - but how about making it a 'hidden' feature that only those who know the 'easter egg' password can activate? I really do miss that capability to quickly toggle to max image size in the stock viewer.
 
only way I can figure out to get it to reconnect is with a setInterval

Code:
$(function() {

    var refreshInterval = setInterval(function() {
        $('#caming').attr('src', 'mjpg/main/video.mjpg');
    }, 10000);

});


I don't think any events ever fire?
 
Last edited by a moderator:
can that be added in the next update? :)

I can have it work so that a failed status update will trigger mjpeg stream restart after the next successful status update. This isn't 100% foolproof but it should help.
 
Understood - but how about making it a 'hidden' feature that only those who know the 'easter egg' password can activate? I really do miss that capability to quickly toggle to max image size in the stock viewer.

Okay, I wrote this up for you. It is a little clunky (one of the reasons I don't want to add it officially) but it may do what you want. Create a file named ui2-local-overrides.js in the www/ui2 folder. Paste in it this content:

Code:
// This code overrides the ImgClick function to add double-clicking support
var cameraDoubleClickTime = 750; // maximum milliseconds between clicks to create a double-click
var lastImgClickTime = 0;
var original_ImgClick = ImgClick;
var ImgClick = function(event, ele)
{
	var timeNow = new Date().getTime();
	if (timeNow - lastImgClickTime < cameraDoubleClickTime)
	{
		lastImgClickTime = 0;
			
		if (!isFullScreen())
		{
			requestFullScreen();
			$("#layoutleft").css("width", "0px");
		}
		else
		{
			exitFullScreen();
			$("#layoutleft").css("width", layoutLeftOriginalWidth + "px");
		}
		
		resized();
	}
	else
	{
		lastImgClickTime = timeNow;
		original_ImgClick(event, ele);
	}
};
// Here is some full-screen toggling functionality that isn't in UI2 version 0.9.3.
function toggleFullScreen()
{
	if (!isFullScreen())
		requestFullScreen();
	else
		exitFullScreen();
}
function isFullScreen()
{
	return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
}
function requestFullScreen()
{
	if (document.documentElement.requestFullscreen)
		document.documentElement.requestFullscreen();
	else if (document.documentElement.msRequestFullscreen)
		document.documentElement.msRequestFullscreen();
	else if (document.documentElement.mozRequestFullScreen)
		document.documentElement.mozRequestFullScreen();
	else if (document.documentElement.webkitRequestFullscreen)
		document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
function exitFullScreen()
{
	if (document.exitFullscreen)
		document.exitFullscreen();
	else if (document.msExitFullscreen)
		document.msExitFullscreen();
	else if (document.mozCancelFullScreen)
		document.mozCancelFullScreen();
	else if (document.webkitExitFullscreen)
		document.webkitExitFullscreen();
}
// Here we override the goLive function to prevent recordings from being closed when hiding the clips bar.
var original_goLive = goLive;
var goLive = function()
{
}
// Here we restore the original functionality of the context menu option "Go Live" which appears when long-pressing the image during recording playback.  Otherwise the override above will disable that context menu.
function onRecordContextMenuAction()
{
	switch (this.data.alias)
	{
		case "golive":
			original_goLive();
			break;
	}
}
 
Unreal how you just put this together. You have my complete envy. It works like a charm. I just tried it on the BI server in my coach - and it pulls up the camera full screen. THANK YOU!
 
This UI is so much better to look at than the default. It is much more intuitive, and the CPU display has been a great addition. I do have a question though. Is is possible to add focus adjustments to the interface? With the Blue Iris program we can adjust the focus of our cameras, but we have never been able to do so through the web views.
 
This UI is so much better to look at than the default. It is much more intuitive, and the CPU display has been a great addition. I do have a question though. Is is possible to add focus adjustments to the interface? With the Blue Iris program we can adjust the focus of our cameras, but we have never been able to do so through the web views.

Answer me this: can you adjust focus in the mobile apps (Android or iOS)? If so, then in theory I could make focus adjustable in UI2. I would just have to reverse engineer how it worked.