Pretty WebUI
This commit is contained in:
DylanSpeiser-BMD
parent
e778410dd5
commit
2dcf3f1fe4
6 changed files with 839 additions and 0 deletions
409
web-ui/BMD-Camera-Control.js
Normal file
409
web-ui/BMD-Camera-Control.js
Normal file
|
|
@ -0,0 +1,409 @@
|
||||||
|
class BMDCamera {
|
||||||
|
// Pretty name and network hostname (strings)
|
||||||
|
name;
|
||||||
|
hostname;
|
||||||
|
APIAddress;
|
||||||
|
|
||||||
|
// Camera index, used for muticam support
|
||||||
|
index;
|
||||||
|
|
||||||
|
// == TODO: Having trouble with the codec and video formats on the SC 6K Pro ==
|
||||||
|
// Codec and Video Formats (JSON objects)
|
||||||
|
codecFormat;
|
||||||
|
videoFormat;
|
||||||
|
|
||||||
|
// Supported Codecs/Videos (arrays)
|
||||||
|
supportedCodecFormats;
|
||||||
|
supportedVideoFormats;
|
||||||
|
// ============================================================================
|
||||||
|
|
||||||
|
// Current Transport Mode (string)
|
||||||
|
transportMode;
|
||||||
|
|
||||||
|
// Whether the transport is playing or not (boolean)
|
||||||
|
isPlaying;
|
||||||
|
|
||||||
|
// Playback state (JSON object)
|
||||||
|
playbackState;
|
||||||
|
|
||||||
|
// Record state (JSON object)
|
||||||
|
recordState;
|
||||||
|
|
||||||
|
// Timecode (JSON Object)
|
||||||
|
timecode;
|
||||||
|
// (pack the source into here also)
|
||||||
|
|
||||||
|
// Presets (JSON object)
|
||||||
|
presets;
|
||||||
|
activePreset;
|
||||||
|
|
||||||
|
// Iris (floats)
|
||||||
|
apertureStop;
|
||||||
|
apertureNormalised;
|
||||||
|
|
||||||
|
// Zoom (floats)
|
||||||
|
zoomMM;
|
||||||
|
zoomNormalised;
|
||||||
|
|
||||||
|
// Focus (float)
|
||||||
|
focusNormalised;
|
||||||
|
|
||||||
|
// ISO (int)
|
||||||
|
ISO;
|
||||||
|
|
||||||
|
// Gain (int)
|
||||||
|
gain;
|
||||||
|
|
||||||
|
// White Balance (ints)
|
||||||
|
WhiteBalance;
|
||||||
|
WhiteBalanceTint;
|
||||||
|
|
||||||
|
// ND Filter (int, string)
|
||||||
|
NDStop;
|
||||||
|
NDMode;
|
||||||
|
|
||||||
|
// Shutter (JSON object)
|
||||||
|
shutter;
|
||||||
|
// has to be an object because it either returns with shutterSpeed or shutterAngle
|
||||||
|
|
||||||
|
// AE Mode (JSON Object)
|
||||||
|
AutoExposureMode;
|
||||||
|
|
||||||
|
// Basic Color Correction (JSON objects w/ RGBL)
|
||||||
|
CClift;
|
||||||
|
CCgamma;
|
||||||
|
CCgain;
|
||||||
|
CCoffset;
|
||||||
|
|
||||||
|
// Other Color Correction (JSON objects w/ 2 numbers)
|
||||||
|
CCcontrast;
|
||||||
|
CCcolor;
|
||||||
|
CClumacontribution;
|
||||||
|
|
||||||
|
// ============= CONSTRUCTOR ================
|
||||||
|
constructor(hostname, index) {
|
||||||
|
this.hostname = hostname;
|
||||||
|
this.index = index;
|
||||||
|
this.APIAddress = "http://"+hostname+"/control/api/v1";
|
||||||
|
this.name = this.hostname.replace(".local","").replaceAll("-"," ");
|
||||||
|
|
||||||
|
this.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Important refreshing function
|
||||||
|
refresh() {
|
||||||
|
this.getAllInfo();
|
||||||
|
sleep(500).then(() =>
|
||||||
|
this.updateUIAll()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wrapper for API call, returns the JSON object from the camera
|
||||||
|
async pullData(endpoint) {
|
||||||
|
return await sendRequest("GET",this.APIAddress+endpoint,"");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wrapper for API call, returns whatever the camera sent back in response
|
||||||
|
async pushData(endpoint, data) {
|
||||||
|
return await sendRequest("PUT",this.APIAddress+endpoint,data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ======= UI Updaters ==========
|
||||||
|
updateUIAll() {
|
||||||
|
this.updateUIname();
|
||||||
|
this.updateUIhostname();
|
||||||
|
this.updateUICodecFormat();
|
||||||
|
this.updateUIVideoFormat();
|
||||||
|
this.updateUISupportedCodecFormats();
|
||||||
|
this.updateUISupportedVideoFormats();
|
||||||
|
this.updateUITransportMode();
|
||||||
|
this.updateUIisPlaying();
|
||||||
|
this.updateUIPlaybackState();
|
||||||
|
this.updateUIRecordState();
|
||||||
|
this.updateUITimecode();
|
||||||
|
this.updateUIPresets();
|
||||||
|
this.updateUIActivePreset();
|
||||||
|
this.updateUIAperture();
|
||||||
|
this.updateUIZoom();
|
||||||
|
this.updateUIFocus();
|
||||||
|
this.updateUIISO();
|
||||||
|
this.updateUIgain();
|
||||||
|
this.updateUIWhiteBalance();
|
||||||
|
this.updateUINDStop();
|
||||||
|
this.updateUIshutter();
|
||||||
|
this.updateUIAutoExposureMode();
|
||||||
|
this.updateUIColorCorrection();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIname() {
|
||||||
|
document.getElementsByClassName("cameraName")[this.index].innerHTML = this.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIhostname() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUICodecFormat() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIVideoFormat() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUISupportedCodecFormats() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUISupportedVideoFormats() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUITransportMode() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIisPlaying() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIPlaybackState() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIRecordState() {
|
||||||
|
if (this.recordState.recording) {
|
||||||
|
document.getElementsByClassName("cameraControlsContainer")[this.index].classList.add("liveCam");
|
||||||
|
} else {
|
||||||
|
document.getElementsByClassName("cameraControlsContainer")[this.index].classList.remove("liveCam");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUITimecode() {
|
||||||
|
var tcString = parseInt(this.timecode.timecode.toString(16),10).toString().match(/.{1,2}/g).join(':');
|
||||||
|
|
||||||
|
document.getElementsByClassName("timecodeLabel")[this.index].innerHTML = tcString;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIPresets() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIActivePreset() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIAperture() {
|
||||||
|
document.getElementsByClassName("irisRange")[this.index].value = this.apertureNormalised;
|
||||||
|
document.getElementsByClassName("apertureStopsLabel")[this.index].innerHTML = this.apertureStop.toFixed(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIZoom() {
|
||||||
|
document.getElementsByClassName("zoomRange")[this.index].value = this.zoomNormalised;
|
||||||
|
document.getElementsByClassName("zoomMMLabel")[this.index].innerHTML = this.zoomMM;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIFocus() {
|
||||||
|
document.getElementsByClassName("focusRange")[this.index].value = this.focusNormalised;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIISO() {
|
||||||
|
// TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIgain() {
|
||||||
|
var gainString = "";
|
||||||
|
|
||||||
|
if (this.gain >= 0) {
|
||||||
|
gainString = "+"+this.gain+"db"
|
||||||
|
} else {
|
||||||
|
gainString = this.gain+"db"
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementsByClassName("gainSpan")[this.index].innerHTML = gainString;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIWhiteBalance() {
|
||||||
|
document.getElementsByClassName("whiteBalanceSpan")[this.index].innerHTML = this.WhiteBalance+"K";
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUINDStop() {
|
||||||
|
document.getElementsByClassName("ndFilterSpan")[this.index].innerHTML = this.NDStop;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIshutter() {
|
||||||
|
var shutterString = ""
|
||||||
|
|
||||||
|
if ('shutterSpeed' in this.shutter) {
|
||||||
|
shutterString = "1/"+this.shutter.shutterSpeed
|
||||||
|
} else {
|
||||||
|
var shangleString = this.shutter.shutterAngle.toString();
|
||||||
|
shutterString = shangleString.slice(0,3)+(shangleString.slice(3,4) == '0' ? '' : "."+shangleString.slice(3,4))+"°"
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementsByClassName("shutterSpan")[this.index].innerHTML = shutterString;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIAutoExposureMode() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUIColorCorrection() {
|
||||||
|
//TBD
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============== GETTERS ==================
|
||||||
|
|
||||||
|
// name, hostname, APIaddress, index handled by constructor
|
||||||
|
|
||||||
|
getCodecFormat() {
|
||||||
|
this.pullData("/system/codecFormat").then((value) => {this.codecFormat = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getVideoFormat() {
|
||||||
|
this.pullData("/system/videoFormat").then((value) => {this.videoFormat = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getSupportedCodecFormats() {
|
||||||
|
this.pullData("/system/supportedCodecFormats").then((value) => {this.supportedCodecFormats = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getSupportedVideoFormats() {
|
||||||
|
this.pullData("/system/supportedVideoFormats").then((value) => {this.supportedVideoFormats = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getTransportMode() {
|
||||||
|
this.pullData("/transports/0").then((value) => {this.transportMode = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getIsPlaying() {
|
||||||
|
this.pullData("/transports/0/play").then((value) => {this.isPlaying = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getPlaybackState() {
|
||||||
|
this.pullData("/transports/0/playback").then((value) => {this.playbackState = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getRecordState() {
|
||||||
|
this.pullData("/transports/0/record").then((value) => {this.recordState = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getTimecode() {
|
||||||
|
this.pullData("/transports/0/timecode").then((value) => {this.timecode = value});
|
||||||
|
this.pullData("/transports/0/timecode/source").then((value) => {this.timecode.source = value.source});
|
||||||
|
}
|
||||||
|
|
||||||
|
getPresets() {
|
||||||
|
this.pullData("/presets").then((value) => {this.presets = value.presets});
|
||||||
|
}
|
||||||
|
|
||||||
|
getActivePreset() {
|
||||||
|
this.pullData("/presets/active").then((value) => {this.activePreset = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getAperture() {
|
||||||
|
this.pullData("/lens/iris").then((value) => {this.apertureStop = value.apertureStop; this.apertureNormalised = value.normalised});
|
||||||
|
}
|
||||||
|
|
||||||
|
getZoom() {
|
||||||
|
this.pullData("/lens/zoom").then((value) => {this.zoomMM = value.focalLength; this.zoomNormalised = value.normalised});
|
||||||
|
}
|
||||||
|
|
||||||
|
getFocus() {
|
||||||
|
this.pullData("/lens/focus").then((value) => {this.focusNormalised = value.normalised});
|
||||||
|
}
|
||||||
|
|
||||||
|
getISO() {
|
||||||
|
this.pullData("/video/iso").then((value) => {this.ISO = value.iso});
|
||||||
|
}
|
||||||
|
|
||||||
|
getGain() {
|
||||||
|
this.pullData("/video/gain").then((value) => {this.gain = value.gain});
|
||||||
|
}
|
||||||
|
|
||||||
|
getWhiteBalance() {
|
||||||
|
this.pullData("/video/whiteBalance").then((value) => {this.WhiteBalance = value.whiteBalance});
|
||||||
|
this.pullData("/video/whiteBalanceTint").then((value) => {this.WhiteBalanceTint = value.whiteBalanceTint});
|
||||||
|
}
|
||||||
|
|
||||||
|
getND() {
|
||||||
|
this.pullData("/video/ndFilter").then((value) => {this.NDStop = value.stop});
|
||||||
|
this.pullData("/video/ndFilter/displayMode").then((value) => {this.NDMode = value.displayMode});
|
||||||
|
}
|
||||||
|
|
||||||
|
getShutter() {
|
||||||
|
this.pullData("/video/shutter").then((value) => {this.shutter = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getAutoExposureMode() {
|
||||||
|
this.pullData("/video/autoExposure").then((value) => {this.AutoExposureMode = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getColorCorrection() {
|
||||||
|
this.pullData("/colorCorrection/lift").then((value) => {this.CClift = value});
|
||||||
|
this.pullData("/colorCorrection/gamma").then((value) => {this.CCgamma = value});
|
||||||
|
this.pullData("/colorCorrection/gain").then((value) => {this.CCgain = value});
|
||||||
|
this.pullData("/colorCorrection/offset").then((value) => {this.CCoffset = value});
|
||||||
|
this.pullData("/colorCorrection/contrast").then((value) => {this.CCcontrast = value});
|
||||||
|
this.pullData("/colorCorrection/color").then((value) => {this.CCcolor = value});
|
||||||
|
this.pullData("/colorCorrection/lumaContribution").then((value) => {this.CClumacontribution = value});
|
||||||
|
}
|
||||||
|
|
||||||
|
getAllInfo() {
|
||||||
|
this.getCodecFormat();
|
||||||
|
this.getVideoFormat();
|
||||||
|
this.getSupportedCodecFormats();
|
||||||
|
this.getSupportedVideoFormats();
|
||||||
|
this.getTransportMode();
|
||||||
|
this.getIsPlaying();
|
||||||
|
this.getPlaybackState();
|
||||||
|
this.getRecordState();
|
||||||
|
this.getTimecode();
|
||||||
|
this.getPresets();
|
||||||
|
this.getActivePreset();
|
||||||
|
this.getAperture();
|
||||||
|
this.getZoom();
|
||||||
|
this.getFocus();
|
||||||
|
this.getISO();
|
||||||
|
this.getGain();
|
||||||
|
this.getWhiteBalance();
|
||||||
|
this.getND();
|
||||||
|
this.getShutter();
|
||||||
|
this.getAutoExposureMode();
|
||||||
|
this.getColorCorrection();
|
||||||
|
}
|
||||||
|
|
||||||
|
// =============== Other Commands =======================
|
||||||
|
doAutoFocus() {
|
||||||
|
this.pushData("/lens/focus/doAutoFocus")
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Timer Stuff */
|
||||||
|
everySecond() {
|
||||||
|
this.refresh();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Helper Functions */
|
||||||
|
async function sendRequest(method, url, data) {
|
||||||
|
const xhttp = new XMLHttpRequest();
|
||||||
|
var responseObject;
|
||||||
|
|
||||||
|
// TODO: Add error code handling
|
||||||
|
xhttp.onload = function() {
|
||||||
|
if (this.responseText) {
|
||||||
|
responseObject = JSON.parse(this.responseText);
|
||||||
|
} else {
|
||||||
|
responseObject = {"status": this.statusText};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
xhttp.open(method, url, false);
|
||||||
|
xhttp.send(JSON.stringify(data));
|
||||||
|
|
||||||
|
return responseObject;
|
||||||
|
}
|
||||||
|
|
||||||
|
function sleep(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
102
web-ui/index.html
Normal file
102
web-ui/index.html
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- Page title and metadata -->
|
||||||
|
<title>Blackmagic Camera Control WebUI</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="description" content="JS-based web interface for controlling Blackmagic Design cameras via the official REST API">
|
||||||
|
<meta name="author" content="Dylan Speiser">
|
||||||
|
|
||||||
|
<!-- Linking the stylesheet -->
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body onload="bodyOnLoad()">
|
||||||
|
<!-- JavaScript Linking -->
|
||||||
|
<script src="BMD-Camera-Control.js"></script>
|
||||||
|
<script src="web-ui.js"></script>
|
||||||
|
|
||||||
|
<!------ Page Content ------>
|
||||||
|
|
||||||
|
<!-- Header Div -->
|
||||||
|
<div class="flexContainerH" id="headerContainer">
|
||||||
|
<h1>Blackmagic Camera Control WebUI</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Camera Select Bar -->
|
||||||
|
<div class="flexContainerH" id="cameraSelectContainer">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Camera Controls Box -->
|
||||||
|
<div class="flexContainerH" id="allCamerasContainer">
|
||||||
|
<div class="flexContainerV cameraControlsContainer">
|
||||||
|
<div class="flexContainerH cameraControlHeadContainer">
|
||||||
|
<h2 class="cameraName">CAM1</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexContainerH cameraControlColorCorrectionContainer">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexContainerH cameraControlExposureContainer">
|
||||||
|
<div class="ccExposureSettingContainer">
|
||||||
|
<span class="exposureControlLabel">FILTER</span>
|
||||||
|
<!-- Add control arrows -->
|
||||||
|
<span class="ndFilterSpan">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="ccExposureSettingContainer">
|
||||||
|
<span class="exposureControlLabel">GAIN</span>
|
||||||
|
<!-- Add control arrows -->
|
||||||
|
<span class="gainSpan">+0db</span>
|
||||||
|
</div>
|
||||||
|
<div class="ccExposureSettingContainer">
|
||||||
|
<span class="exposureControlLabel">SHUTTER</span>
|
||||||
|
<!-- Add control arrows -->
|
||||||
|
<span class="shutterSpan">1/50</span>
|
||||||
|
</div>
|
||||||
|
<div class="ccExposureSettingContainer">
|
||||||
|
<span class="exposureControlLabel">BALANCE</span>
|
||||||
|
<!-- Add control arrows -->
|
||||||
|
<span class="whiteBalanceSpan">5600K</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexContainerH cameraControlLensContainer">
|
||||||
|
<div class="lensSliderContainer">
|
||||||
|
<span>FOCUS</span>
|
||||||
|
<input type="range" orient="vertical" max="1" min="0" step="0.001" class="focusRange">
|
||||||
|
<button onclick="cameras[ci].doAutoFocus()">AF</button>
|
||||||
|
</div>
|
||||||
|
<div class="lensSliderContainer">
|
||||||
|
<span>IRIS</span>
|
||||||
|
<input type="range" orient="vertical" max="1" min="0" step="0.001" class="irisRange">
|
||||||
|
<span class="apertureStopsLabel">X.X</span>
|
||||||
|
</div>
|
||||||
|
<div class="lensSliderContainer">
|
||||||
|
<span>ZOOM</span>
|
||||||
|
<input type="range" orient="vertical" max="1" min="0" step="0.001" class="zoomRange">
|
||||||
|
<span class="zoomMMLabel">XXmm</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexContainerV cameraControlsContainerExpanded">
|
||||||
|
<div class="flexContainerH cameraControlExpandedHeadContainer">
|
||||||
|
<h2 class="timecodeLabel">TIMECODE</h2>
|
||||||
|
</div>
|
||||||
|
<div class="connectionContainer">
|
||||||
|
<span>Hostname: </span>
|
||||||
|
<input type="text" value="Studio-Camera-6K-Pro.local" class="hostnameInput" onkeydown="textInputTrigger(this)">
|
||||||
|
<button onclick='cameras[ci] = new BMDCamera(document.getElementsByClassName("hostnameInput")[ci].value,ci);'>Connect</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer Div -->
|
||||||
|
<div class="flexContainerH" id="footerContainer">
|
||||||
|
<button onclick="cameras.forEach((element) => {element.refresh()});">Refresh</button>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
web-ui/resources/NotoSansDisplay-VariableFont_wdth,wght.ttf
Normal file
BIN
web-ui/resources/NotoSansDisplay-VariableFont_wdth,wght.ttf
Normal file
Binary file not shown.
BIN
web-ui/resources/NotoSansDisplay-VariableFont_wdth,wght.woff
Normal file
BIN
web-ui/resources/NotoSansDisplay-VariableFont_wdth,wght.woff
Normal file
Binary file not shown.
218
web-ui/style.css
Normal file
218
web-ui/style.css
Normal file
|
|
@ -0,0 +1,218 @@
|
||||||
|
/* Load NotoSansDisplay Font from resources */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'NotoSansDisplay';
|
||||||
|
src: url('resources/NotoSansDisplay-VariableFont_wdth\,wght.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||||
|
url('resources/NotoSansDisplay-VariableFont_wdth\,wght.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'NotoSansDisplay', sans-serif;
|
||||||
|
margin: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #181818;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Page Body Flexboxes */
|
||||||
|
.flexContainerH {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexContainerV {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Horizontal Container Styles */
|
||||||
|
#headerContainer {
|
||||||
|
background: #181818;
|
||||||
|
background: linear-gradient(0deg, #181818 0%, #303030 100%);
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
width: 100%;
|
||||||
|
height: 7.77vh;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerContainer h1 {
|
||||||
|
font-weight: 100;
|
||||||
|
color: white;
|
||||||
|
margin-left: 1.3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cameraSelectContainer {
|
||||||
|
background: #222222;
|
||||||
|
border: 1px solid black;
|
||||||
|
width: 100%;
|
||||||
|
height: 3.53vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#allCamerasContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 83.1vh;
|
||||||
|
|
||||||
|
overflow-x: scroll;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
scrollbar-color: #202020 #151515;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footerContainer {
|
||||||
|
background: #181818;
|
||||||
|
background: linear-gradient(0deg, #181818 0%, #303030 100%);
|
||||||
|
border: 1px solid black;
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Camera Controls Container */
|
||||||
|
.cameraControlsContainer {
|
||||||
|
width: 15vw;
|
||||||
|
height: 100%;
|
||||||
|
background: #282828;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid black;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cameraControlsContainer.selectedCam {
|
||||||
|
background: #323232;
|
||||||
|
}
|
||||||
|
|
||||||
|
.liveCam .cameraControlHeadContainer {
|
||||||
|
background: rgb(184,3,16);
|
||||||
|
background: linear-gradient(90deg, rgba(184,3,16,1) 0%, rgba(255,0,19,1) 15%, rgba(255,0,19,1) 85%, rgba(184,3,16,1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cameraControlHeadContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
border-bottom: 2px solid black;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cameraName {
|
||||||
|
font-weight: 100;
|
||||||
|
color: white;
|
||||||
|
margin-inline-start: 0.6em;
|
||||||
|
margin-inline-end: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color Correction Section */
|
||||||
|
.cameraControlColorCorrectionContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 33vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Exposure Section */
|
||||||
|
.cameraControlExposureContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 4.4vh;
|
||||||
|
background-color: #171717;
|
||||||
|
border-top: 1px solid #2d2d2d;
|
||||||
|
border-bottom: 1px solid #2d2d2d;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectedCam .cameraControlExposureContainer {
|
||||||
|
border-top: 1px solid #3a3a3a;
|
||||||
|
border-bottom: 1px solid #3a3a3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ccExposureSettingContainer {
|
||||||
|
display: flex;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.86em;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 0.5vh;
|
||||||
|
padding-top: 0.25vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exposureControlLabel {
|
||||||
|
color: #6e6e6e;
|
||||||
|
font-size: 0.666em;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lens Stuff */
|
||||||
|
.cameraControlLensContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 41.9vh;
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lensSliderContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lensSliderContainer span {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lensSliderContainer button {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=range][orient=vertical] {
|
||||||
|
-webkit-appearance: slider-vertical;
|
||||||
|
width: 2vw;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Right side (expanded) */
|
||||||
|
.cameraControlsContainerExpanded {
|
||||||
|
width: 84.75vw;
|
||||||
|
height: 100%;
|
||||||
|
background: #282828;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid black;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cameraControlExpandedHeadContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
border-bottom: 2px solid black;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timecodeLabel {
|
||||||
|
font-weight: 100;
|
||||||
|
color: white;
|
||||||
|
margin-inline-start: 0.6em;
|
||||||
|
margin-inline-end: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Connection Settings */
|
||||||
|
.connectionContainer {
|
||||||
|
margin: 1.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text] {
|
||||||
|
border-radius: 0.5vh;
|
||||||
|
background: rgb(30, 30, 30);
|
||||||
|
color: white;
|
||||||
|
height: 2em;
|
||||||
|
width: 10vw;
|
||||||
|
border: 1px solid rgb(20, 20, 20);
|
||||||
|
margin-left: 1vw;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'NotoSansDisplay', sans-serif;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text]:focus {
|
||||||
|
border: 1px solid rgb(150, 58, 0);
|
||||||
|
}
|
||||||
110
web-ui/web-ui.js
Normal file
110
web-ui/web-ui.js
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
/* Global variables */
|
||||||
|
var cameras = [];
|
||||||
|
var ci = 0;
|
||||||
|
|
||||||
|
function bodyOnLoad() {
|
||||||
|
//let intervalID = setInterval(timerCallFunction, 1000);
|
||||||
|
|
||||||
|
let newCamHostname = document.getElementsByClassName("hostnameInput")[ci].value;
|
||||||
|
|
||||||
|
if (newCamHostname) {
|
||||||
|
cameras[ci] = new BMDCamera(newCamHostname,ci);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// function timerCallFunction() {
|
||||||
|
// cameras.forEach((camera) => camera.everySecond());
|
||||||
|
// }
|
||||||
|
|
||||||
|
function textInputTrigger(element) {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
cameras[ci] = new BMDCamera(element.value, ci);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeFakeCamera() {
|
||||||
|
cam = new BMDCamera("Studio-Camera-6K-Pro.local",0)
|
||||||
|
return Object.assign(cam,{
|
||||||
|
"name": "Studio Camera 6K Pro",
|
||||||
|
"hostname": "Studio-Camera-6K-Pro.local",
|
||||||
|
"APIAddress": "http://Studio-Camera-6K-Pro.local/control/api/v1",
|
||||||
|
"index": 0,
|
||||||
|
"transportMode": {
|
||||||
|
"mode": "InputPreview"
|
||||||
|
},
|
||||||
|
"isPlaying": false,
|
||||||
|
"playbackState": {
|
||||||
|
"loop": false,
|
||||||
|
"position": 0,
|
||||||
|
"singleClip": false,
|
||||||
|
"speed": 0,
|
||||||
|
"type": "Play"
|
||||||
|
},
|
||||||
|
"recordState": {
|
||||||
|
"recording": false
|
||||||
|
},
|
||||||
|
"timecode": {
|
||||||
|
"clip": 0,
|
||||||
|
"timecode": 289550880,
|
||||||
|
"source": "Clip"
|
||||||
|
},
|
||||||
|
"presets": {
|
||||||
|
"presets": []
|
||||||
|
},
|
||||||
|
"activePreset": "default",
|
||||||
|
"apertureStop": 4.400000095367432,
|
||||||
|
"apertureNormalised": 0.021739130839705467,
|
||||||
|
"zoomMM": 18,
|
||||||
|
"zoomNormalised": 0,
|
||||||
|
"focusNormalised": 0.5,
|
||||||
|
"ISO": 400,
|
||||||
|
"gain": 0,
|
||||||
|
"NDStop": 0,
|
||||||
|
"NDMode": "Fraction",
|
||||||
|
"shutter": {
|
||||||
|
"continuousShutterAutoExposure": false,
|
||||||
|
"shutterSpeed": 50
|
||||||
|
},
|
||||||
|
"AutoExposureMode": {
|
||||||
|
"mode": "Off",
|
||||||
|
"type": ""
|
||||||
|
},
|
||||||
|
"CClift": {
|
||||||
|
"blue": 0,
|
||||||
|
"green": 0,
|
||||||
|
"luma": 0,
|
||||||
|
"red": 0
|
||||||
|
},
|
||||||
|
"CCgamma": {
|
||||||
|
"blue": 0,
|
||||||
|
"green": 0,
|
||||||
|
"luma": 0,
|
||||||
|
"red": 0
|
||||||
|
},
|
||||||
|
"CCgain": {
|
||||||
|
"blue": 1,
|
||||||
|
"green": 1,
|
||||||
|
"luma": 1,
|
||||||
|
"red": 1
|
||||||
|
},
|
||||||
|
"CCoffset": {
|
||||||
|
"blue": 0,
|
||||||
|
"green": 0,
|
||||||
|
"luma": 0,
|
||||||
|
"red": 0
|
||||||
|
},
|
||||||
|
"CCcontrast": {
|
||||||
|
"adjust": 1,
|
||||||
|
"pivot": 0.5
|
||||||
|
},
|
||||||
|
"CCcolor": {
|
||||||
|
"hue": 0,
|
||||||
|
"saturation": 1
|
||||||
|
},
|
||||||
|
"CClumacontribution": {
|
||||||
|
"lumaContribution": 1
|
||||||
|
},
|
||||||
|
"WhiteBalance": 5600,
|
||||||
|
"WhiteBalanceTint": 0
|
||||||
|
})
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue