Added basic control panel
This commit is contained in:
284
frontend/views/control/index.html
Normal file
284
frontend/views/control/index.html
Normal file
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NTSH Control</title>
|
||||
|
||||
<link rel="stylesheet" href="/material-symbols/index.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<script defer src="./script.js" defer></script>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/cloud_thick.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="ntsh">
|
||||
<div class="ntsh-wrapper">
|
||||
<div class="ntsh-inlay">
|
||||
<div class="ntsh-topbar">
|
||||
<div class="ntsh_menubar">
|
||||
<div class="ntsh_menubar-item selected" tabid="home">
|
||||
HOME
|
||||
</div>
|
||||
<div class="ntsh_menubar-item" tabid="advanced">
|
||||
ADVANCED
|
||||
</div>
|
||||
</div>
|
||||
<img src="/img/logo.png">
|
||||
|
||||
<div class="ntsh-separator"></div>
|
||||
</div>
|
||||
|
||||
<div class="ntsh_tabs">
|
||||
<div class="ntsh_tab visible" tabid="home">
|
||||
<h2>1. SYSTEM CHECKLIST</h2>
|
||||
<h3>
|
||||
Check if all lights are green.
|
||||
<br>
|
||||
If not? Reboot!
|
||||
</h3>
|
||||
|
||||
<div class="ntsh-checklist">
|
||||
<div class="ntsh-checklist-row" status="CAMERAPC">
|
||||
<div class="ntsh-checklist-row-status"></div>
|
||||
|
||||
<div class="ntsh-checklist-row-text">
|
||||
<h4>CAMERA PC</h4>
|
||||
<p>Status...</p>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-checklist-row-buttons">
|
||||
<div class="ntsh-checklist-row-button start">
|
||||
START
|
||||
</div>
|
||||
<div class="ntsh-checklist-row-button stop">
|
||||
STOP
|
||||
</div>
|
||||
<div class="ntsh-checklist-row-button reboot">
|
||||
REBOOT
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-checklist-row" status="CAMERAPROCESS">
|
||||
<div class="ntsh-checklist-row-status"></div>
|
||||
|
||||
<div class="ntsh-checklist-row-text">
|
||||
<h4>CAMERA PROCESS</h4>
|
||||
<p>Status...</p>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-checklist-row-buttons">
|
||||
<div class="ntsh-checklist-row-button start">
|
||||
START
|
||||
</div>
|
||||
<div class="ntsh-checklist-row-button stop">
|
||||
STOP
|
||||
</div>
|
||||
<div class="ntsh-checklist-row-button reboot">
|
||||
REBOOT
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-checklist-row" status="CAMERAUNITYSTREAM">
|
||||
<div class="ntsh-checklist-row-status"></div>
|
||||
|
||||
<div class="ntsh-checklist-row-text">
|
||||
<h4>CAMERA/UNITY STREAM</h4>
|
||||
<p>Status...</p>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-checklist-row-buttons">
|
||||
<div class="ntsh-checklist-row-button start">
|
||||
START
|
||||
</div>
|
||||
<div class="ntsh-checklist-row-button stop">
|
||||
STOP
|
||||
</div>
|
||||
<div class="ntsh-checklist-row-button reboot">
|
||||
REBOOT
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-checklist-row" status="UNITYBUILD">
|
||||
<div class="ntsh-checklist-row-status"></div>
|
||||
|
||||
<div class="ntsh-checklist-row-text">
|
||||
<h4>UNITY BUILD</h4>
|
||||
<p>Status...</p>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-checklist-row-buttons">
|
||||
<div class="ntsh-checklist-row-button start">
|
||||
START
|
||||
</div>
|
||||
<div class="ntsh-checklist-row-button stop">
|
||||
STOP
|
||||
</div>
|
||||
<div class="ntsh-checklist-row-button reboot">
|
||||
REBOOT
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-checklist-row" status="REPLAYFUNCTION">
|
||||
<div class="ntsh-checklist-row-status"></div>
|
||||
|
||||
<div class="ntsh-checklist-row-text">
|
||||
<h4>REPLAY FUNCTION</h4>
|
||||
<p>Status...</p>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-checklist-row-buttons">
|
||||
<div class="ntsh-checklist-row-button start">
|
||||
START
|
||||
</div>
|
||||
<div class="ntsh-checklist-row-button stop">
|
||||
STOP
|
||||
</div>
|
||||
<div class="ntsh-checklist-row-button reboot">
|
||||
REBOOT
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-fullreboot">
|
||||
<div class="ntsh-fullreboot-button">
|
||||
FULL REBOOT
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-support">
|
||||
<p>If reboot doesn't help:</p>
|
||||
<img src="/img/call.png">
|
||||
</div>
|
||||
|
||||
<div class="ntsh-separator"></div>
|
||||
<h2>2. CALIBRATION CHECK</h2>
|
||||
<h3>
|
||||
Look if the top plate of the installation precisely aligns with the pink rectangle.
|
||||
<br>
|
||||
If not? Reposition the physical installation.
|
||||
</h3>
|
||||
|
||||
<div class="ntsh-calibration">
|
||||
<img src="/calibrationImage">
|
||||
</div>
|
||||
|
||||
<h1 style="margin-bottom:30px;">Thank you for checking! :)</h1>
|
||||
</div>
|
||||
|
||||
<div class="ntsh_tab" tabid="advanced">
|
||||
<h2>OUT OF SERVICE MODE</h2>
|
||||
<h3>Display the 'out of service' message and mute the sound.</h3>
|
||||
<div class="ntsh-outofservicemode">
|
||||
<h4>OUT OF SERVICE MODE</h4>
|
||||
|
||||
<label class="switch">
|
||||
<input type="checkbox" class="ntsh-outofservicemode-input">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-separator"></div>
|
||||
|
||||
<h2>SET TIMER</h2>
|
||||
<h3>Please set timer in order to schedule the daily reboot.</h3>
|
||||
<br>
|
||||
<h3>Advise: fill in 30 minutes before opening and 30 minutes after closing of exhibition.</h3>
|
||||
|
||||
<div class="ntsh-timer">
|
||||
<div class="ntsh-timer-row">
|
||||
<h4>Start up</h4>
|
||||
|
||||
<input type="time" class="ntsh-timer-startup">
|
||||
</div>
|
||||
<div class="ntsh-timer-row">
|
||||
<h4>Shut down</h4>
|
||||
|
||||
<input type="time" class="ntsh-timer-shutdown">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-separator"></div>
|
||||
|
||||
<h2>COLOR SETTINGS</h2>
|
||||
<h3>If lighting at the exhibition location changes during the day (for example in daylight)</h3>
|
||||
|
||||
<div class="ntsh-autolighting">
|
||||
<h4>AUTO LIGHTING</h4>
|
||||
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="ntsh_lightingsettings-container disabled">
|
||||
<h3>FIXED LIGHTING SETTINGS</h3>
|
||||
<div class="ntsh_lightingsettings">
|
||||
<div class="ntsh_lightingsettings-row">
|
||||
<h4>Brightness</h4>
|
||||
|
||||
<input type="range" min="-100" max="100" value="0">
|
||||
</div>
|
||||
<div class="ntsh_lightingsettings-row">
|
||||
<h4>Gain</h4>
|
||||
|
||||
<input type="range" min="-100" max="100" value="0">
|
||||
</div>
|
||||
<div class="ntsh_lightingsettings-row">
|
||||
<h4>White Balance</h4>
|
||||
|
||||
<input type="range" min="-100" max="100" value="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ntsh-separator"></div>
|
||||
|
||||
<h2>SOUND SETTINGS</h2>
|
||||
<h3>Adjust sound settings according to acoustics of location. (Take in account changes during
|
||||
the
|
||||
day and adjust to an average.)</h3>
|
||||
|
||||
<div class="ntsh_soundsettings disabled">
|
||||
<div class="ntsh_soundsettings-row">
|
||||
<h4>Volume</h4>
|
||||
|
||||
<input type="range" min="0" max="100" value="0">
|
||||
</div>
|
||||
<div class="ntsh_soundsettings-row">
|
||||
<h4>EQ low</h4>
|
||||
|
||||
<input type="range" min="-100" max="100" value="0">
|
||||
</div>
|
||||
<div class="ntsh_soundsettings-row">
|
||||
<h4>EQ mid</h4>
|
||||
|
||||
<input type="range" min="-100" max="100" value="0">
|
||||
</div>
|
||||
<div class="ntsh_soundsettings-row">
|
||||
<h4>EQ high</h4>
|
||||
|
||||
<input type="range" min="-100" max="100" value="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ntsh_soundsettings-resetcontainer">
|
||||
<div class="ntsh_soundsettings-reset">
|
||||
RESET
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user