CUSTOMIZATION of PTZoptics OBS controls

 CUSTOMIZATION of PTZoptics OBS controls

In this post I talk about how to get control of PTZ optics cameras in OBS

This post is about how to customize those same controls they offer to, perhaps, make them more conducive to your environment.

I found the majority of the buttons too big, or too much information being displayed for users that wasn't necessary.  Since most of their code is in HTML, you could make some modifications relatively easy.

Instead of one big controller, I wanted smaller ones to fit into my OBS screen.

Here's some additional things that might make your PTZoptics cameras in OBS a little easier to control.

You can see here I've modified just the HTML code that they provide for the buttons to alter them to fit within the UI view that I have.  This is to make it easier for operators and not to have to scroll around a large PTZ dispaly

I'm using these controls in conjunction with a plug-in called "Source Dock" Source Dock | OBS Forums (obsproject.com) to give me dedicated preview shots above the controls for that camera. 

The operator to can select tabs at the bottom of each camera view to make it easier to select a variety of preset positions, PTZ buttons 

You may notice that I've removed the "FOCUS" button from my PTZ control.  I also removed the "Auto Pan" feature as these are things we never use, so I prevent users from accessing them accidently.

I separated the preferences and preset assignments to a separate tab in OBS.  So these can be still fully accessible, but don't clutter up the normal day-day usage of the PTZ system.

This was all done by ONLY changing the HTML code provided by PTZ optics.  Was not hard at all and works perfectly.

Its easy to customize the buttons...here's how you would change the code text name and the camera preset you want to have it activate when you click it.  You can alter this in NOTEPAD.  Make a backup of the file in case you make some HTML mistakes.

By default it looks kind of like this:

<a class="call_preset preset_button preset-1" data-preset="1" href="#preset-1">Button1</a>

Change "data-preset" and "#preset-1" to be the preset saved position you would have programmed into your camera.  In this case, the value is 1, but if preset position is 22, change these values both to "22"

Then "Button1" is the descriptive name you see in OBS.  Make it whatever you want, i think the max i 8 characters though

In the example below, I've made the first 3 buttons do presets 1-3,

however buttons 4-6 activate presets 10-12 and 7-9 do presets 13-15

<form role="form" class="form-horizontal">

<fieldset class="presets">

<div class="row">

<a class="call_preset preset_button preset-1" data-preset="1" href="#preset-1">Pulpit</a>

<a class="call_preset preset_button preset-2" data-preset="2" href="#preset-2">Communion Table</a>

<a class="call_preset preset_button preset-3" data-preset="3" href="#preset-3">Lecturn</a>

</div>

<div class="row">

<a class="call_preset preset_button preset-10" data-preset="10" href="#preset-10">Organ</a>

<a class="call_preset preset_button preset-11" data-preset="11" href="#preset-11">Stairs</a>

<a class="call_preset preset_button preset-12" data-preset="12" href="#preset-12">12</a>

</div>

<div class="row">

<a class="call_preset preset_button preset-13" data-preset="13" href="#preset-13">13</a>

<a class="call_preset preset_button preset-14" data-preset="14" href="#preset-14">14</a>

<a class="call_preset preset_button preset-15" data-preset="15" href="#preset-15">Control</a>

</div>

</fieldset>

Here's a google drive link to some of these files to help give you some ideas perhaps.

https://drive.google.com/drive/folders/1n-G4Vk4Lkfzp6Nl7pGJy1UwYpF37OPz2?usp=sharing

Drop them into the appropriate "Camera X" folder(s) that is created when you extract the PTZOptics download, and then install them using this method :

You should know have some similar examples available in your OBS as is pictured above.