Local Overrides Sample: PTZ Preset Names

This script and style will add a setting to UI Settings which enables the PTZ Preset buttons to be changed to a vertical layout where each preset's number and name is shown.

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

ui3-local-overrides.js

(function ()
{
	// This script modifies PTZ Presets to be a vertical list with labels and small thumbnails.

	/**
	 * Modifies existing preset buttons to contain the preset number and description.
	 */
	function ModifyPresetButtons()
	{
		if (settings.ui3_ptz_presets_single_column === "1" && 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);
				$btn.append('<span class="extPresetText"> ' + num + '. ' + desc + '</span>');
			});
		}
	}

	/**
	 * Reacts to the setting "ui3_ptz_presets_single_column" being toggled in UI Settings.
	 */
	function OnChange_ui3_ptz_presets_single_column()
	{
		if (settings.ui3_ptz_presets_single_column === "1")
			$("#ptzPresetsContent").addClass("singleColumn");
		else
			$("#ptzPresetsContent").removeClass("singleColumn");
		ModifyPresetButtons();
	}

	// Add the "ui3_ptz_presets_single_column" setting which controls PTZ Presets appearing in a vertical list.
	defaultSettings.push({
		key: "ui3_ptz_presets_single_column"
		, value: "0"
		, inputType: "checkbox"
		, label: "PTZ Presets in Single Column"
		, onChange: OnChange_ui3_ptz_presets_single_column
		, category: "General Settings"
	});

	$(function () // Things in this block only occur after certain things are loaded.
	{
		// Attach to events to allow us to inject new markup at the right time.
		var original_UpdatePtzControlDisplayState = ptzButtons.UpdatePtzControlDisplayState;
		ptzButtons.UpdatePtzControlDisplayState = function (loadThumbsOverride)
		{
			original_UpdatePtzControlDisplayState.apply(ptzButtons, arguments);
			ModifyPresetButtons();
		};
		BI_CustomEvent.AddListener("ExecJSON_Success", function (e)
		{
			if (e.args.cmd === "ptz" && typeof e.args.button === "undefined")
			{
				// PTZ preset data hasn't been processed yet, so wait a moment.
				setTimeout(function ()
				{
					// Now we can act.
					if (e.args.camera === videoPlayer.Loading().image.id
						|| e.args.camera === videoPlayer.Loading().cam.extPtzId)
						ModifyPresetButtons();
				}, 0);
			}
		});

		// Initialize from saved setting
		OnChange_ui3_ptz_presets_single_column();
	});
})();

ui3-local-overrides.css

#ptzPresetsContent.singleColumn .fiveByTwoButtonSet
{
	height: auto;
}

	#ptzPresetsContent.singleColumn .fiveByTwoButtonSet:nth-child(2)
	{
		padding-top: 0px;
	}

#ptzPresetsContent.singleColumn .ptzpreset
{
	display: block;
	border: none;
	width: auto;
	height: auto;
	margin-bottom: 0px;
	text-align: left;
}

	#ptzPresetsContent.singleColumn .ptzpreset img
	{
		max-width: 36px;
		max-height: 36px;
	}

#ptzPresetsContent.singleColumn .extPresetText
{
	margin-left: 2px;
}