Local Overrides Scripts and Styles

Experienced web developers can extend UI3 with custom JavaScript and CSS. Of course if you take the most obvious route and modify ui3.js and ui3.css files directly, you would have to re-apply your changes after every update! To solve this problem, UI3 attemps to load two files which do not exist in releases: ui3-local-overrides.js and ui3-local-overrides.css. You can create either or both of these files and place them in the ui3 subdirectory alongside ui3.js and they will be loaded after all the other script and style files, allowing you to conveniently override virtually any default functionality you wish, if you have the skills to do so.

Example Scripts

• Creating a Visual Theme with CSS
• Local Overrides Sample: Add a Dropdown List of Custom Actions to Playback Controls
• Local Overrides Sample: Add Buttons to Playback Controls
• Local Overrides Sample: Add holiday lights on December 24th and 25th
• Local Overrides Sample: Add Hotkeys for Switching Cameras
• Local Overrides Sample: Automatically enable 3D Positioning mode
• Local Overrides Sample: Camera List
• Local Overrides Sample: Disable the Idle Timeout
• Local Overrides Sample: Hide some Main Menu items from non‐admin users
• Local Overrides Sample: Hide some UI Settings from non‐admin users
• Local Overrides Sample: Include Individual Cameras in Group Dropdowns
• Local Overrides Sample: Left click no longer returns to group
• Local Overrides Sample: Manipulate UI3 loading failure handling
• Local Overrides Sample: Mute Events Button in Top Bar
• Local Overrides Sample: Network Delay Triggers Video Restart
• Local Overrides Sample: PTZ on Group Streams
• Local Overrides Sample: PTZ Preset Names
• Local Overrides Sample: Replace Playback Speed Options
• Local Overrides Sample: Rescale Single Camera
• Local Overrides Sample: Show the "Change Group" button in playback controls on all tabs of the UI
• Local Overrides Sample: Sunrise Sunset Calculation

Avoiding caching issues

If you modify an existing local overrides file, then to get the changes to load you need to either clear browser caches or find ui_version in the ui3.htm file, and change its value to be unique. For example if your ui_version is "226", change it to "226-u1". This will cause your browser to request new copies of all supporting files, cached as belonging to version 226-u1. Take care to avoid changing ui_version to a number that belongs to a past or future UI3 release (e.g. "200" or "300") as that could cause problems for you later.