kuba/fm-dx-webserver
1
0
Fork 0
mirror of https://github.com/KubaPro010/fm-dx-webserver.git synced 2026-02-26 22:13:53 +01:00
Code Issues Activity
Files
298a868ef71e1efb736d698baf595b43f9ea0ad7
fm-dx-webserver/web/index.ejs
NoobishSVK 298a868ef7 bugfix pack, server logs
2024-03-28 22:44:24 +01:00

473 lines
30 KiB
Plaintext
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<title>FM-DX Webserver [<%= tunerName %>]</title>
<link href="css/entry.css" type="text/css" rel="stylesheet">
<link href="css/flags.min.css" type="text/css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="FM-DX WebServer [<%= tunerName %>]">
<meta property="og:type" content="website">
<meta property="og:image" content="favicon.png">
<meta property="og:description" content="Server description: <%= tunerDescMeta %>.">
<script src="js/init.js"></script>
<!-- 3LAS Scripts for Audio streaming -->
<script src="js/3las/util/3las.helpers.js"></script>
<script src="js/3las/util/3las.logging.js"></script>
<script src="js/3las/fallback/3las.liveaudioplayer.js"></script>
<script src="js/3las/fallback/3las.formatreader.js"></script>
<script src="js/3las/fallback/formats/3las.formatreader.mpeg.js"></script>
<script src="js/3las/fallback/formats/3las.formatreader.wav.js"></script>
<script src="js/3las/util/3las.websocketclient.js"></script>
<script src="js/3las/fallback/3las.fallback.js"></script>
<script src="js/3las/3las.js"></script>
<script src="js/3las/main.js"></script>
<script type="text/javascript">
window.addEventListener('load', Init, false);
document.ontouchmove = function(e){
e.preventDefault();
}
</script>
</head>
<body>
<div id="wrapper">
<div class="panel-100 no-bg tuner-info">
<h1 id="tuner-name"><%= tunerName %>
<% if (!publicTuner) { %><i class="fa-solid fa-key pointer tooltip" data-tooltip="Only people with tune password can tune."></i>
<% } if (tunerLock) { %><i class="fa-solid fa-lock pointer tooltip" data-tooltip="Tuner is currently locked to admin."></i>
<% } %>
</h1>
<p id="tuner-desc">
<%- tunerDesc %>
<% if(tuningLimit && tuningLimit == true){ %>
<br><span class="text-small">Limit: <span class="color-4"><%= tuningLowerLimit %> MHz - <%= tuningUpperLimit %> MHz</span></span><br>
<% } %>
</p>
<div style="clear: both"></div>
</div>
<div class="canvas-container hide-phone">
<canvas id="signal-canvas"></canvas>
</div>
<div class="flex-container">
<div class="panel-100 bg-none" style="margin-top: 0;">
<div class="flex-container">
<div class="panel-75 flex-container no-bg">
<div class="panel-10 no-bg h-100 m-0 m-right-20 hide-phone" style="width: 100px;margin-right: 20px !important;">
<button class="playbutton" aria-label="Play / Stop Button"><i class="fa-solid fa-play fa-lg"></i></button>
</div>
<div class="panel-100 m-0 hover-brighten flex-center tooltip" id="ps-container" style="height: 90px;" data-tooltip="Clicking on the RDS PS will copy the RDS info into the clipboard.">
<span class="text-big" id="data-ps"></span>
</div>
</div>
<div id="flags-container-desktop" class="panel-33 user-select-none">
<h2 class="show-phone">
<div class="data-pty text-color-default"></div>
</h2>
<h3 style="margin-top:0;margin-bottom:0;" class="color-4 flex-center">
<span class="data-tp">TP</span>
<span style="margin-left: 15px;" class="data-ta">TA</span>
<div style="display:inline-block">
<span style="margin-left: 20px;display: block;margin-top: 2px;" class="data-flag"></span>
</div>
<span class="pointer stereo-container" style="position: relative;">
<span style="margin-left: 20px;" class="data-st">ST</span>
<span class="overlay tooltip" data-tooltip="Stereo / Mono toggle. <br><strong>Click to toggle."></span>
</span>
<span style="margin-left: 15px;" class="data-ms">MS</span>
</h3>
</div>
</div>
<div class="flex-container">
<div class="panel-33 hover-brighten tooltip" id="pi-code-container" data-tooltip="Clicking on the PI code will show the current station on a map.">
<h2>PI CODE</h2>
<span id="data-pi" class="text-big text-uppercase"></span>
</div>
<div class="panel-33 hover-brighten" id="freq-container">
<h2>FREQUENCY</h2>
<span id="data-frequency" class="text-big"></span>
</div>
<div class="panel-33">
<h2 class="signal-heading">SIGNAL</h2>
<div class="text-small text-gray highest-signal-container">
<i class="fa-solid fa-arrow-up"></i>
<span id="data-signal-highest"></span>
<% if (device == 'sdr') { %> <span>dB SNR</span> <% } else { %> <span class="signal-units"></span> <% } %>
</div>
<div class="text-big">
<span id="data-signal"></span><!--
--><span id="data-signal-decimal" class="text-medium-big" style="opacity:0.7;"></span>
<% if (device == 'sdr') { %> <span class="text-medium">dB SNR</span> <% } else { %> <span class="signal-units text-medium">dBf</span> <% } %>
</div>
</div>
</div>
<div class="flex-container flex-phone flex-phone-column">
<div class="panel-33 no-bg filter-controls" style="height: 48px;">
<div class="flex-container flex-phone h-100">
<div class="panel-75 no-bg h-100 m-0 hide-desktop m-right-20 button-play-mobile" style="margin-right: 20px;">
<button class="playbutton" aria-label="Play/Stop"><i class="fa-solid fa-play"></i></button>
</div>
<% if (antennas.enabled == true) { %>
<div class="panel-50 no-bg h-100 m-0 dropdown" id="data-ant" style="margin-right: 25px;">
<input type="text" placeholder="Ant A" readonly>
<ul class="options">
<% if(antennas.ant1.enabled == true) { %><li data-value="0" class="option"><%= antennas.ant1.name %></li><% } %>
<% if(antennas.ant2.enabled == true) { %><li data-value="1" class="option"><%= antennas.ant2.name %></li><% } %>
<% if(antennas.ant3.enabled == true) { %><li data-value="2" class="option"><%= antennas.ant3.name %></li><% } %>
<% if(antennas.ant4.enabled == true) { %><li data-value="3" class="option"><%= antennas.ant4.name %></li><% } %>
</ul>
</div>
<% } %>
<div class="panel-50 no-bg h-100 m-0 button-eq">
<% if (device == 'tef') { %><button id="data-eq" style="border-radius: 30px 0px 0px 30px;" class="tooltip" aria-label="EQ Filter" data-tooltip="<strong>The cEQ filter can reduce bandwidth below 56 KHz.</strong><br><br>Useful for weak stations next to strong ones,<br>although it may pick up more interference."><span class="text-bold">cEQ</span></button><% } %>
<% if (device == 'xdr') { %><button id="data-eq" style="border-radius: 30px 0px 0px 30px;" class="tooltip" aria-label="RF+ Filter" data-tooltip="<strong>The RF+ filter increases gain by 5dB</strong>"><span class="text-bold">RF+</span></button><% } %>
</div>
<div class="panel-50 no-bg h-100 m-0 button-ims">
<% if (device == 'tef') { %><button id="data-ims" style="border-radius: 0px 30px 30px 0px;" class="tooltip" aria-label="iMS + Filter" data-tooltip="<strong>The iMS filter reduces multipath audio artifacts.</strong><br><br>It's recommended to leave it on most of the time."><span class="text-bold">iMS</span></button><% } %>
<% if (device == 'xdr') { %><button id="data-ims" style="border-radius: 0px 30px 30px 0px;" class="tooltip" aria-label="IF+ Filter" data-tooltip="<strong>The IF+ filter increases gain by 6dB</strong>"><span class="text-bold">IF+</span></button><% } %>
</div>
</div>
</div>
<div class="panel-33 flex-container flex-phone" id="tune-buttons">
<button id="freq-down" aria-label="Tune down by 100 KHz"><i class="fa-solid fa-chevron-left"></i></button>
<input type="text" id="commandinput" inputmode="numeric" placeholder="Frequency" autocomplete="off" aria-label="Current frequency: ">
<button id="freq-up" aria-label="Tune up by 100 KHz"><i class="fa-solid fa-chevron-right"></i></button>
</div>
<div class="panel-33 hide-phone no-bg">
<div class="flex-container">
<% if(device === 'other' || bwSwitch == false) { %>
<span class="panel-100 m-0 h-100" style="height: 48px;width: 100%;">
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" aria-label="Volume slider">
</span>
<% } else { %>
<span class="panel-100 m-0" style="margin-right: 15px !important;height: 48px;">
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" aria-label="Volume slider">
</span>
<% } %>
<% if (device == 'tef' && bwSwitch == true) { %>
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;">
<input type="text" placeholder="Auto BW" readonly>
<ul class="options open-top">
<li data-vlaue="0" class="option">Auto</li>
<li data-value="56000" class="option">56 KHz</li>
<li data-value="64000" class="option">64 KHz</li>
<li data-value="72000" class="option">72 KHz</li>
<li data-value="84000" class="option">84 KHz</li>
<li data-value="97000" class="option">97 KHz</li>
<li data-value="114000" class="option">114 KHz</li>
<li data-value="133000" class="option">133 KHz</li>
<li data-value="151000" class="option">151 KHz</li>
<li data-value="184000" class="option">184 KHz</li>
<li data-value="200000" class="option">200 KHz</li>
<li data-value="217000" class="option">217 KHz</li>
<li data-value="236000" class="option">236 KHz</li>
<li data-value="254000" class="option">254 KHz</li>
<li data-value="287000" class="option">287 KHz</li>
<li data-value="311000" class="option">311 KHz</li>
</ul>
</div>
<% } %>
<% if (device == 'xdr' && bwSwitch == true) { %>
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;">
<input type="text" placeholder="Auto BW" readonly>
<ul class="options open-top">
<li data-vlaue="0" class="option">Auto</li>
<li data-value="9000" class="option">9 KHz</li>
<li data-value="15000" class="option">15 KHz</li>
<li data-value="17000" class="option">17 KHz</li>
<li data-value="20000" class="option">20 KHz</li>
<li data-value="24000" class="option">24 KHz</li>
<li data-value="27000" class="option">27 KHz</li>
<li data-value="32000" class="option">32 KHz</li>
<li data-value="36000" class="option">36 KHz</li>
<li data-value="42000" class="option">42 KHz</li>
<li data-value="48000" class="option">48 KHz</li>
<li data-value="55000" class="option">55 KHz</li>
<li data-value="63000" class="option">63 KHz</li>
<li data-value="73000" class="option">73 KHz</li>
<li data-value="83000" class="option">83 KHz</li>
<li data-value="90000" class="option">90 KHz</li>
<li data-value="95000" class="option">95 KHz</li>
<li data-value="108000" class="option">108 KHz</li>
<li data-value="125000" class="option">125 KHz</li>
<li data-value="142000" class="option">142 KHz</li>
<li data-value="159000" class="option">159 KHz</li>
<li data-value="177000" class="option">177 KHz</li>
<li data-value="194000" class="option">194 KHz</li>
<li data-value="211000" class="option">211 KHz</li>
<li data-value="229000" class="option">229 KHz</li>
<li data-value="246000" class="option">246 KHz</li>
<li data-value="263000" class="option">263 KHz</li>
<li data-value="281000" class="option">281 KHz</li>
<li data-value="298000" class="option">298 KHz</li>
<li data-value="309000" class="option">309 KHz</li>
</ul>
</div>
<% } %>
<% if (device == 'sdr' && bwSwitch == true) { %>
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;">
<input type="text" placeholder="Auto BW" readonly>
<ul class="options open-top">
<li data-vlaue="0" class="option">Auto</li>
<li data-value="4000" class="option">4 KHz</li>
<li data-value="8000" class="option">8 KHz</li>
<li data-value="10000" class="option">10 KHz</li>
<li data-value="20000" class="option">20 KHz</li>
<li data-value="30000" class="option">30 KHz</li>
<li data-value="50000" class="option">50 KHz</li>
<li data-value="75000" class="option">75 KHz</li>
<li data-value="100000" class="option">100 KHz</li>
<li data-value="125000" class="option">125 KHz</li>
<li data-value="150000" class="option">150 KHz</li>
<li data-value="175000" class="option">175 KHz</li>
<li data-value="200000" class="option">200 KHz</li>
<li data-value="225000" class="option">225 KHz</li>
</ul>
</div>
<% } %>
</div>
</div>
</div>
<div class="flex-container flex-phone flex-phone-column">
<div class="panel-75 hover-brighten" id="rt-container" style="height: 100px;">
<h2 style="margin-top: 4px;">RADIOTEXT</h2>
<div id="data-rt0">
<span></span>
</div>
<div id="data-rt1">
<span></span>
</div>
<hr class="hide-desktop">
</div>
<div class="panel-33 hover-brighten tooltip" data-tooltip="This panel contains the current TX info when RDS is loaded.<br><strong>Clicking on this panel copies the info into the clipboard.</strong>">
<div id="data-station-container">
<h2 style="margin-top: 0;" class="mb-0">
<span id="data-station-name"></span>
</h2>
<h4 class="m-0">
<span id="data-station-city" style="font-size: 16px;"></span> <span class="text-small">[<span id="data-station-itu"></span>]</span>
</h4>
<span class="text-small">
<span id="data-station-erp"></span> kW [<span id="data-station-pol"></span>] <span class="text-gray">•</span> <span id="data-station-distance"></span> km <span class="text-gray">•</span> <span id="data-station-azimuth"></span>°
</span>
</div>
</div>
</div>
</div>
<div class="panel-10 bg-none" style="margin-top: 0;">
<div class="panel-100 w-100">
<h2>AF</h2>
<div id="af-list" class="p-bottom-20" style="text-align: center;">
<ul style="height: 251px;">
</ul>
</div>
</div>
<% if (chatEnabled) { %>
<div class="panel-10 no-bg h-100 hide-phone" style="width: 100px; height: 100px;">
<button class="chatbutton bg-color-2"><i class="fa-solid fa-comments fa-lg"></i> (<span class="chat-messages-count">0</span>)</button>
</div>
<% } %>
</div>
</div>
<div id="flags-container-phone" class="panel-33">
<h2 class="show-phone">
<div class="data-pty text-color-default"></div>
</h2>
<h3 style="margin-top:0;margin-bottom:0;" class="color-4 flex-center">
<span class="data-tp">TP</span>
<span style="margin-left: 15px;" class="data-ta">TA</span>
<div style="display:inline-block">
<span style="margin-left: 20px;display: block;margin-top: 2px;" class="data-flag"></span>
</div>
<span class="pointer stereo-container" style="position: relative;">
<span style="margin-left: 20px;" class="data-st">ST</span>
<span class="overlay tooltip" data-tooltip="Stereo / Mono toggle. <br><strong>Click to toggle."></span>
</span>
<span style="margin-left: 15px;" class="data-ms">MS</span>
</h3>
</div>
</div>
<button id="settings" aria-label="Settings"><i class="fa-solid fa-gear"></i></button>
<% if (chatEnabled) { %>
<button class="chatbutton hide-desktop bg-color-2"><i class="fa-solid fa-comments fa-lg"></i> (<span class="chat-messages-count">0</span>)</button>
<% } %>
<button id="users-online-container" class="hide-phone" aria-label="Online users"><i class="fa-solid fa-user"></i> <span class="users-online"></span></button>
<% if (isAdminAuthenticated) { %>
<div class="admin-quick-dashboard hide-phone">
<div class="icon tooltip <% if (tunerLock) { %>active<% } %>" id="dashboard-lock-admin" onClick="toggleAdminLock()" data-tooltip="Toggle admin lock<br>Lasts until restart">
<i class="fa-solid fa-lock"></i>
</div>
<div class="icon tooltip <% if (!publicTuner) { %>active<% } %>" id="dashboard-lock-tune" onClick="togglePasswordLock()" data-tooltip="Toggle password lock<br>Lasts until restart">
<i class="fa-solid fa-key"></i>
</div>
<div class="icon tooltip" data-tooltip="Go to admin menu" onClick="window.open('./setup', '_blank').focus();">
<i class="fa-solid fa-user"></i>
</div>
</div>
<% } %>
<div id="myModal" class="modal">
<div class="modal-panel">
<div class="flex-container flex-phone" style="height: calc(100% - 100px)">
<div class="modal-panel-sidebar hover-brighten flex-center text-medium-big closeModal"><i class="fa-solid fa-chevron-right"></i></div>
<div class="modal-panel-content">
<h1 class="top-25">Settings</h1>
<div class="form-group top-25">
<label for="themes"><i class="fa-solid fa-palette"></i> Theme:</label>
<div class="dropdown" id="theme-selector">
<input type="text" placeholder="Default" readonly>
<ul class="options">
<li class="option" data-value="theme1">Default</li>
<li class="option" data-value="theme2">Cappuccino</li>
<li class="option" data-value="theme3">Nature</li>
<li class="option" data-value="theme4">Ocean</li>
<li class="option" data-value="theme5">Terminal</li>
<li class="option" data-value="theme6">Nightlife</li>
<li class="option" data-value="theme7">Blurple</li>
<li class="option" data-value="theme8">Construction</li>
<li class="option" data-value="theme9">AMOLED</li>
</ul>
</div>
</div>
<% if (device !== 'sdr') { %>
<div class="form-group top-25">
<label for="signal"><i class="fa-solid fa-signal"></i> Signal units:</label>
<div class="dropdown" id="signal-selector">
<input type="text" placeholder="dBf" readonly>
<ul class="options">
<li class="option" data-value="dbf">dBf</li>
<li class="option" data-value="dbuv">dBuV</li>
<li class="option" data-value="dbm">dBm</li>
</ul>
</div>
</div><br>
<% } %>
<div class="form-group checkbox">
<input type="checkbox" id="extended-frequency-range">
<label for="extended-frequency-range">Add decimals manually</label>
</div>
<div class="form-group checkbox">
<input type="checkbox" id="ps-underscores">
<label for="ps-underscores">Add underscores to RDS PS</label>
</div>
<div class="form-group checkbox">
<input type="checkbox" id="smooth-signal">
<label for="smooth-signal">Smooth signal</label>
</div>
<div class="form-group bottom-20 hide-desktop" style="float: none;">
<label for="users-online"><i class="fa-solid fa-user"></i> Users online:</label>
<span class="users-online" name="users-online">0</span>
</div>
<% if (isAdminAuthenticated) { %>
<p>You are logged in as an adminstrator.<br>
<a href="./setup" target="_blank">Setup</a> • <a class="logout-link" href="#">Logout</a>
</p>
<% } else if (isTuneAuthenticated) { %>
<p>You are logged in and can control the receiver.<br><a class="logout-link" href="#">Logout</a></p>
<% } else { %>
<form action="./login" method="post" id="login-form" class="top-25">
<label for="password">Password:</label>
<input type="password" id="password" name="password" style="width: 200px;" required><br>
<button type="submit" class="br-0 w-100 top-10" style="height: 44px">Login</button>
</form>
<% } %>
<div id="login-message"></div>
<h2>Time</h2>
<p class="m-0">Server: <span class="color-3" id="server-time"></span></p>
<p class="m-0">Local: <span class="color-3" id="client-time"></span></p>
<p class="text-small" id="current-ping"></p>
<div class="version-info">
<p class="text-small">FM-DX WebServer <br>by <a href="https://noobish.eu" target="_blank">Noobish</a>, <a href="https://fmdx.pl" target="_blank">kkonradpl</a> & the OpenRadio community.</p>
<% if (device == 'tef') { %><p class="m-0">Device: TEF668x</p> <% } %>
<% if (device == 'xdr') { %><p class="m-0">Device: Sony XDR</p> <% } %>
<% if (device == 'sdr') { %><p class="m-0">Device: SDR</p> <% } %>
<span style="color: var(--color-3);" class="version-string"></span><br>
<span class="text-small" style="color: var(--color-3);">[<a href="https://list.fmdx.pl" target="_blank">Receiver Map</a>]</span>
<br>
<br>
<% if(ownerContact){ %>
<span>Owner contact:</span><br>
<span class="text-small m-0"><%= ownerContact %></span>
<% } %>
</div>
</div>
</div>
<div class="modal-panel-footer flex-container flex-phone">
<div class="modal-panel-sidebar" style="font-size: 22px;">
<div class="flex-center" style="height: 50px">
<i class="fa-solid fa-hand-holding-medical"></i>
</div>
<div class="flex-center" style="height: 50px">
<i class="fa-brands fa-discord"></i>
</div>
</div>
<div class="modal-panel-content">
<div class="hover-brighten br-0 bg-color-1" style="height: 50px;padding:12px;" onclick="window.open('https://buymeacoffee.com/noobish')">
<strong>Support</strong> the developer!
</div>
<div class="hover-brighten br-0 bg-color-1" style="height: 50px;padding:12px;" onclick="window.open('https://discord.com/invite/ZAVNdS74mC')">
Join our <strong>OpenRadio Discord</strong> community!
</div>
</div>
</div>
</div>
<div class="modal-panel-chat">
<div class="modal-panel-sidebar hover-brighten flex-center text-medium-big closeModal"><i class="fa-solid fa-chevron-down"></i></div>
<div class="modal-panel-content text-left">
<div style="text-align: center;">
<input type="text" id="chat-nickname" name="chat-nickname" placeholder="Nickname">
<button class="br-0 w-100 top-10" style="height: 44px" id="chat-nickname-save">Save</button>
<p style="margin: 5px;">
Current identity: <span style="color: #bada55;" id="chat-admin"></span> <strong id="chat-identity-nickname">Anonymous User</strong>
</p>
</div>
<div id="chat-chatbox" class="bg-color-1" style="height: 270px;padding: 10px;overflow-y: auto;">
</div>
<div class="flex-container flex-phone" style="align-content: stretch;">
<input class="bg-color-2" type="text" id="chat-send-message" name="chat-send-message" placeholder="Send message..." style="background-color: var(--color-2);width: 100%;">
<button class="chat-send-message-btn br-0" style="width: 80px; height: 45px;"><i class="fa-solid fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
<script src="js/webserver.js"></script>
</body>
</html>
View Git Blame Copy Permalink