Local Overrides Sample: Camera List

If this script is pasted into your ui3-local-overrides.js file, it will add a list of camera names to the left bar of the Live View tab. When each camera name is clicked, that camera stream will be opened in the video area.

To learn more about ui3-local-overrides.js, see: Local Overrides Scripts and Styles

ui3-local-overrides.js

(function ()
{
	/// <summary>
	/// This local-overrides script for UI3 adds a text list of all available cameras to the bottom of the left bar on the live view tab.
	/// </summary>
	var EmbedInCollapsibleContainer = false;

	BI_CustomEvent.AddListener("UI_Loading_Start", function ()
	{
		var injectedCameraList = false;
		var $box = $('<div class="leftBarBox" style="padding-bottom: 3px;"></div>');
		if (EmbedInCollapsibleContainer)
			$box.append('<div class="leftBarHeading collapsibleTrigger" collapsibleid="cameraLinkList">Camera List</div>');
		var $cameraList = $('<div class="leftBarInnerBox" style="overflow: hidden; text-overflow: ellipsis;"></div>');
		BI_CustomEvent.AddListener("CameraListLoaded", function (response)
		{
			if (injectedCameraList)
				return;
			for (var i = 0; i < response.data.length; i++)
			{
				if (cameraListLoader.CameraIsGroup(response.data[i]))
					continue;
				if (cameraListLoader.CameraIsCycle(response.data[i]))
					continue;
				if (!response.data[i].isEnabled)
					continue;
				if (!response.data[i].webcast)
					continue;
				var $link = $('<a class="leftBarHeading" style="display: block; color: #0097F0; margin-bottom: 3px;"></a>');
				$link.attr('href', 'javascript:videoPlayer.ImgClick_Camera(cameraListLoader.GetCameraWithId("' + response.data[i].optionValue + '"))');
				$link.text(response.data[i].optionDisplay);
				$cameraList.append($link);
			}
			$cameraList.attr("size", $cameraList.children('a').length);
			injectedCameraList = true;
		});
		$box.append($cameraList);
		$('#layoutleftLiveScrollable').append($box);
		if (EmbedInCollapsibleContainer)
			$box.prev(".leftBarBox").css("padding-bottom", "");
	});
})();