mirror of
https://github.com/Amateur-Radio-Club-Graz/openWebTrX.git
synced 2025-12-30 08:11:18 +01:00
initial commit
This commit is contained in:
arcg
13
htdocs/index.html
Normal file
13
htdocs/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="/tx/owt.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tx/owt.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="owt_head"> <div id="owt_button"><div class="openwebrx-button" onclick='owt_start();' >connect TX</div></div>
|
||||
<div id="owt_pids"></div></div><div id="owt_msg"></div>
|
||||
</body>
|
||||
</html>
|
||||
44
htdocs/owt.css
Normal file
44
htdocs/owt.css
Normal file
@@ -0,0 +1,44 @@
|
||||
#owt_head
|
||||
{
|
||||
display: inline-block;
|
||||
padding: 0px;
|
||||
vertical-align: top;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#owt_head a
|
||||
{
|
||||
font-size: 11px;
|
||||
text-decoration: underline;
|
||||
color: #ccccff;
|
||||
}
|
||||
#owt_pids
|
||||
{
|
||||
width: 200px;
|
||||
}
|
||||
.owt_pid
|
||||
{
|
||||
width: calc(10% - 10px);
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
margin-right: 1px;
|
||||
background-color: #e6e7e8;
|
||||
}
|
||||
#owt_button
|
||||
{
|
||||
display: inline-block
|
||||
}
|
||||
#owt_ptt
|
||||
{
|
||||
background: #ff0000;
|
||||
}
|
||||
@media only screen and (max-height: 400px) {
|
||||
#owt_head
|
||||
{
|
||||
margin-top: 3px !important;
|
||||
}
|
||||
#owt_ptt
|
||||
{
|
||||
margin-right: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
207
htdocs/owt.js
Normal file
207
htdocs/owt.js
Normal file
@@ -0,0 +1,207 @@
|
||||
var owt_protocol = 'ws://';
|
||||
if(window.location.toString().indexOf('https://') == 0){
|
||||
owt_protocol = 'wss://';
|
||||
}
|
||||
owt_url1=owt_protocol+window.location.href.split("://")[1]
|
||||
owt_lastslash = owt_url1.lastIndexOf('/');
|
||||
owt_firstslash= owt_url1.indexOf('/',6);
|
||||
owt_url2=owt_url1.substr(0,owt_firstslash)
|
||||
//owt_url2=owt_url1.substr(0,owt_lastslash)
|
||||
owt_ws_url=owt_url2+"/tx/ws/";
|
||||
owt_button_orig=""
|
||||
var owt_webSocket;
|
||||
var owt_mediaRecorder
|
||||
function owt_start_ws(start_audio) {
|
||||
owt_webSocket = new WebSocket(owt_ws_url);
|
||||
owt_webSocket.binaryType = 'blob';
|
||||
|
||||
owt_webSocket.onmessage= function (event) {
|
||||
console.log('Message from server ', event.data);
|
||||
owt_make_msg(event.data);
|
||||
}
|
||||
owt_webSocket.onclose =function (event) {
|
||||
console.log('ws closed :(', event.data);
|
||||
owt_make_button_orig();
|
||||
owt_make_msg('TX connection closed!');
|
||||
owt_destroy_ws()
|
||||
}
|
||||
if(start_audio) {
|
||||
//owt_webSocket.onopen =owt_start_audio();
|
||||
if (MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')) {
|
||||
mimeType="audio/ogg;codecs=opus";
|
||||
} else {
|
||||
mimeType="audio/webm;codecs=opus";
|
||||
}
|
||||
|
||||
//function owt_start_audio(){
|
||||
owt_webSocket.onopen = event => {
|
||||
console.log("[open] Audio Node-RED websocket connection established");
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ audio: true, video: false, channelCount: 1, sampleRate: 12000, sampleSize: 16 })
|
||||
.then(stream => {
|
||||
owt_mediaRecorder = new MediaRecorder(stream, {
|
||||
//audioBitsPerSecond : 128000,
|
||||
audioBitsPerSecond : 64000,
|
||||
//mimeType: 'audio/webm;codecs=opus',
|
||||
//mimeType: 'audio/ogg;codecs=opus',
|
||||
mimeType: mimeType,
|
||||
});
|
||||
owt_mediaRecorder.addEventListener('dataavailable', event => {
|
||||
if (event.data.size > 0) {
|
||||
//console.log(event.data.length)
|
||||
owt_webSocket.send(event.data);
|
||||
}
|
||||
});
|
||||
owt_mediaRecorder.start(100);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
function owt_stop_ws() {
|
||||
track=owt_mediaRecorder.stream.getAudioTracks()
|
||||
track.forEach(function(track) { track.stop(); });
|
||||
|
||||
owt_webSocket.close()
|
||||
owt_make_button_orig()
|
||||
}
|
||||
function owt_destroy_ws() {
|
||||
if (typeof owt_mediaRecorder === "object" ) {
|
||||
a=owt_mediaRecorder.stream.getAudioTracks();
|
||||
owt_mediaRecorder.stream.removeTrack(a[0]);
|
||||
owt_mediaRecorder.removeEventListener('dataavilable',Element)
|
||||
owt_mediaRecorder.stop()
|
||||
owt_mediaRecorder=0
|
||||
console.log("audio destroyed")
|
||||
}
|
||||
owt_webSocket=0;
|
||||
console.log("ws destroyed")
|
||||
}
|
||||
function owt_make_button_running() {
|
||||
//PTT button, close link
|
||||
document.getElementById('owt_button').innerHTML="<div class='openwebrx-button' id='owt_ptt' onmousedown='owt_ptt_on();' onmouseup='owt_ptt_off();' ontouchstart='owt_ptt_on();' ontouchend='owt_ptt_off();' >PTT</div> <a onclick='owt_stop_ws();' >disconnect</a>"
|
||||
}
|
||||
function owt_make_button_orig() {
|
||||
//connect button from variable
|
||||
document.getElementById('owt_button').innerHTML=owt_button_orig
|
||||
}
|
||||
function owt_make_msg(data) {
|
||||
//if data contains config:, status: => ignore
|
||||
//else if containts msg: => split and print
|
||||
document.getElementById('owt_msg').innerHTML=""
|
||||
//else print
|
||||
}
|
||||
function owt_start() {
|
||||
//owt_vumeter()
|
||||
owt_button_orig= document.getElementById('owt_button').innerHTML
|
||||
owt_start_ws(1);
|
||||
//owt_start_audio();
|
||||
owt_make_button_running();
|
||||
}
|
||||
|
||||
function owt_ptt_on() {
|
||||
mute=false;
|
||||
toggleMute();
|
||||
owt_webSocket.send("SET:PTT=1")
|
||||
document.getElementById('owt_ptt').style.background="#fff"
|
||||
document.getElementById('owt_ptt').style.color="#f00"
|
||||
}
|
||||
function owt_ptt_off() {
|
||||
mute=true;
|
||||
toggleMute();
|
||||
owt_webSocket.send("SET:PTT=0")
|
||||
document.getElementById('owt_ptt').style.background="#f00"
|
||||
document.getElementById('owt_ptt').style.color="#fff"
|
||||
}
|
||||
//keypress
|
||||
//keydown
|
||||
//keyup
|
||||
//left 37
|
||||
//right 39
|
||||
//up 38
|
||||
//down 40
|
||||
document.addEventListener('keydown', function(e) {
|
||||
var keynum = e.keyCode || e.which;
|
||||
console.log(keynum)
|
||||
if(keynum == 32) {
|
||||
owt_ptt_on()
|
||||
}
|
||||
});
|
||||
document.addEventListener('keyup', function(e) {
|
||||
var keynum = e.keyCode || e.which;
|
||||
console.log("up"+keynum)
|
||||
if(keynum == 32) {
|
||||
owt_ptt_off()
|
||||
}
|
||||
});
|
||||
document.addEventListener('keypress', function(e) {
|
||||
var keynum = e.keyCode || e.which;
|
||||
console.log("press"+keynum)
|
||||
// if(keynum == 32) {
|
||||
// owt_ptt_off()
|
||||
// }
|
||||
});
|
||||
|
||||
//https://stackoverflow.com/questions/33322681/checking-microphone-volume-in-javascript
|
||||
function owt_vumeter() {
|
||||
document.getElementById('owt_pids').innerHTML=`
|
||||
<div class='owt_pid'></div>
|
||||
<div class='owt_pid'></div>
|
||||
<div class='owt_pid'></div>
|
||||
<div class='owt_pid'></div>
|
||||
<div class='owt_pid'></div>
|
||||
<div class='owt_pid'></div>`;
|
||||
|
||||
navigator.mediaDevices.getUserMedia({
|
||||
audio: true,
|
||||
video: false,
|
||||
})
|
||||
.then(function(stream) {
|
||||
const audioContext = new AudioContext();
|
||||
const analyser = audioContext.createAnalyser();
|
||||
const microphone = audioContext.createMediaStreamSource(stream);
|
||||
const scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
|
||||
analyser.smoothingTimeConstant = 0.8;
|
||||
analyser.fftSize = 1024;
|
||||
|
||||
microphone.connect(analyser);
|
||||
analyser.connect(scriptProcessor);
|
||||
scriptProcessor.connect(audioContext.destination);
|
||||
scriptProcessor.onaudioprocess = function() {
|
||||
const array = new Uint8Array(analyser.frequencyBinCount);
|
||||
analyser.getByteFrequencyData(array);
|
||||
const arraySum = array.reduce((a, value) => a + value, 0);
|
||||
const average = arraySum / array.length;
|
||||
//console.log(Math.round(average));
|
||||
owt_colorPids(average);
|
||||
};
|
||||
})
|
||||
.catch(function(err) {
|
||||
/* handle the error */
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
function owt_colorPids(vol) {
|
||||
//console.log('vu'+vol);
|
||||
const allPids = [...document.querySelectorAll('.owt_pid')];
|
||||
const numberOfPidsToColor = Math.round(vol / 20);
|
||||
const pidsToColor = allPids.slice(0, numberOfPidsToColor);
|
||||
for (const pid of allPids) {
|
||||
pid.style.backgroundColor = "#e6e7e8";
|
||||
}
|
||||
for (const pid of pidsToColor) {
|
||||
//console.log(pid[i]);
|
||||
pid.style.backgroundColor = "#00ce00";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//TODO
|
||||
// //on websocket rx
|
||||
// display MSG (on air, problem [rigctl, high-swr, other user took over], ....)
|
||||
// on websocket close => display msg
|
||||
// fkt:
|
||||
// display msg
|
||||
// get parameters from ws-rx and update gui if gui present
|
||||
// send parameters from gui to ws (relay shift, ctcss, power, external IO)
|
||||
|
||||
Reference in New Issue
Block a user