Jabieraru0
New Member
Hello: I have obs_overlay_mqtt.html configured, but I can't get it to work properly.
Here are my details:
<!DOCTYPE html>
<script>
let plutoAdrress = "192.168.2.1";
let dateFormat = 'DD-MM-YYYY HH:mm'
let callsign = 'EA2ARU'
</script>
<style>
:root {
--textColor: #f5ed00;
--backGroundColor: #ffffff00;
--fontSize: 36px;
--fontFamily: 'Arial Regular';
}
</style>
<html>
<head>
<meta charset="UTF-8">
<title>Clock for OBS and PlutoSDR ON AIR tracker</title>
</head>
<body translate="no">
<div id="output" style="
display: inline-block;
font-family: var(--fontFamily);
font-size: var(--fontSize);
text-align: left;
color: var(--textColor);
border-radius: 3px;
padding: 5px;
align-items: left;
background-color: var(--backGroundColor);
width: 800px;
">
</div>
<div id="stats" style="
display: inline-block;
font-family: var(--fontFamily);
font-size: var(--fontSize);
text-align: left;
color: var(--textColor);
border-radius: 3px;
padding: 5px;
align-items: left;
background-color: var(--backGroundColor);
width: 800px;
">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
let urlParams;
let intervalFunction;
let onAir = 1;
let firstTransmission = false;
let transmissionStart = moment();
let end = moment();
let txTime = moment.duration(0, 'seconds');
let output = document.getElementById("output");
let stats = document.getElementById("stats");
let temp = "";
let frequency = "";
let gain = "";
let nco = "";
let queue = "";
let fec = "";
let sr = "";
let bitrate = "";
let constel = "";
let url = `ws://${plutoAdrress}:9001`
const options = {
// Clean session
clean: true,
connectTimeout: 4000,
// Authentication
clientId: 'pluto',
username: 'root',
password: 'analog',
}
const client = mqtt.connect(url, options)
client.on('connect', function () {
// console.log('Connected')
// Subscribe to a topic
client.subscribe(`dt/pluto/${callsign}/tx/mute`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/frequency`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/gain`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/nco`, () => { })
client.subscribe(`dt/pluto/${callsign}/temperature_ad`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/queue`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/constel`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/fec`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/ts/bitrate`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/ts/bitrate`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/sr`, () => { })
})
console.log(client);
(function () {
let match,
pl = /\+/g,
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
if (urlParams["style"]) output.setAttribute("style", urlParams["style"]);
if (urlParams["bodyStyle"]) document.body.setAttribute("style", urlParams["bodyStyle"]);
client.on('message', function (topic, message) {
// message is Buffer
if (topic === `dt/pluto/${callsign}/tx/mute`) {
const r = parseInt(message.toString());
if (r === 1) firstTransmission = false;
if (r === 0) {
if (!firstTransmission) {
firstTransmission = true;
transmissionStart = moment();
};
};
onAir = r;
}
if (topic === `dt/pluto/${callsign}/temperature_ad`) {
temp = `${parseInt(message.toString()) / 1000}°C`;
}
if (topic === `dt/pluto/${callsign}/tx/frequency`) {
frequency = `${parseInt(message.toString())} Hz`;
}
if (topic === `dt/pluto/${callsign}/tx/gain`) {
gain = `${parseFloat(message.toString()).toFixed(2)} dBm`;
}
if (topic === `dt/pluto/${callsign}/tx/nco`) {
nco = `${parseInt(message.toString())} Hz`;
}
if (topic === `dt/pluto/${callsign}/tx/dvbs2/queue`) {
queue = `${parseInt(message.toString())} frames`;
}
if (topic === `dt/pluto/${callsign}/tx/dvbs2/fec`) {
fec = `${message.toString()}`;
}
if (topic === `dt/pluto/${callsign}/tx/dvbs2/sr`) {
sr = `${message.toString()}`;
}
if (topic === `dt/pluto/${callsign}/tx/dvbs2/ts/bitrate`) {
bitrate = `${parseInt(message.toString()) / 1000} kbits/s`;
}
if (topic === `dt/pluto/${callsign}/tx/dvbs2/constel`) {
constel = `${message.toString()}`;
}
// client.end()
});
setInterval(
intervalFunction = function () {
end = moment();
txTime = parseInt(onAir) === 0 ? moment.utc(end.diff(transmissionStart)).format('mm:ss') : "00:00";
output.innerText = `ON AIR : ${txTime} : ${moment.utc().format(urlParams["format"] || dateFormat)} `
stats.innerText =
`\nTS Bit Rate: ${bitrate}` +
`\nFrequency: ${frequency}` +
`\nSymbol Rate: ${Number(sr)/1000} kS/s` +
`\nConstel: ${constel.toUpperCase()}` +
`\nFEC: ${fec}` +
`\nGain ${gain}` +
`\nNCO: ${nco}` +
`\nBBFRAME Queue: ${queue}` +
`\nTuner: ${temp}`;
}, 1);
intervalFunction();
</script>
</body>
</html>
Does anyone have any solution please?
Regards de Jabi, ea2aru.
Here are my details:
<!DOCTYPE html>
<script>
let plutoAdrress = "192.168.2.1";
let dateFormat = 'DD-MM-YYYY HH:mm'
let callsign = 'EA2ARU'
</script>
<style>
:root {
--textColor: #f5ed00;
--backGroundColor: #ffffff00;
--fontSize: 36px;
--fontFamily: 'Arial Regular';
}
</style>
<html>
<head>
<meta charset="UTF-8">
<title>Clock for OBS and PlutoSDR ON AIR tracker</title>
</head>
<body translate="no">
<div id="output" style="
display: inline-block;
font-family: var(--fontFamily);
font-size: var(--fontSize);
text-align: left;
color: var(--textColor);
border-radius: 3px;
padding: 5px;
align-items: left;
background-color: var(--backGroundColor);
width: 800px;
">
</div>
<div id="stats" style="
display: inline-block;
font-family: var(--fontFamily);
font-size: var(--fontSize);
text-align: left;
color: var(--textColor);
border-radius: 3px;
padding: 5px;
align-items: left;
background-color: var(--backGroundColor);
width: 800px;
">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
let urlParams;
let intervalFunction;
let onAir = 1;
let firstTransmission = false;
let transmissionStart = moment();
let end = moment();
let txTime = moment.duration(0, 'seconds');
let output = document.getElementById("output");
let stats = document.getElementById("stats");
let temp = "";
let frequency = "";
let gain = "";
let nco = "";
let queue = "";
let fec = "";
let sr = "";
let bitrate = "";
let constel = "";
let url = `ws://${plutoAdrress}:9001`
const options = {
// Clean session
clean: true,
connectTimeout: 4000,
// Authentication
clientId: 'pluto',
username: 'root',
password: 'analog',
}
const client = mqtt.connect(url, options)
client.on('connect', function () {
// console.log('Connected')
// Subscribe to a topic
client.subscribe(`dt/pluto/${callsign}/tx/mute`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/frequency`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/gain`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/nco`, () => { })
client.subscribe(`dt/pluto/${callsign}/temperature_ad`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/queue`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/constel`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/fec`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/ts/bitrate`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/ts/bitrate`, () => { })
client.subscribe(`dt/pluto/${callsign}/tx/dvbs2/sr`, () => { })
})
console.log(client);
(function () {
let match,
pl = /\+/g,
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
if (urlParams["style"]) output.setAttribute("style", urlParams["style"]);
if (urlParams["bodyStyle"]) document.body.setAttribute("style", urlParams["bodyStyle"]);
client.on('message', function (topic, message) {
// message is Buffer
if (topic === `dt/pluto/${callsign}/tx/mute`) {
const r = parseInt(message.toString());
if (r === 1) firstTransmission = false;
if (r === 0) {
if (!firstTransmission) {
firstTransmission = true;
transmissionStart = moment();
};
};
onAir = r;
}
if (topic === `dt/pluto/${callsign}/temperature_ad`) {
temp = `${parseInt(message.toString()) / 1000}°C`;
}
if (topic === `dt/pluto/${callsign}/tx/frequency`) {
frequency = `${parseInt(message.toString())} Hz`;
}
if (topic === `dt/pluto/${callsign}/tx/gain`) {
gain = `${parseFloat(message.toString()).toFixed(2)} dBm`;
}
if (topic === `dt/pluto/${callsign}/tx/nco`) {
nco = `${parseInt(message.toString())} Hz`;
}
if (topic === `dt/pluto/${callsign}/tx/dvbs2/queue`) {
queue = `${parseInt(message.toString())} frames`;
}
if (topic === `dt/pluto/${callsign}/tx/dvbs2/fec`) {
fec = `${message.toString()}`;
}
if (topic === `dt/pluto/${callsign}/tx/dvbs2/sr`) {
sr = `${message.toString()}`;
}
if (topic === `dt/pluto/${callsign}/tx/dvbs2/ts/bitrate`) {
bitrate = `${parseInt(message.toString()) / 1000} kbits/s`;
}
if (topic === `dt/pluto/${callsign}/tx/dvbs2/constel`) {
constel = `${message.toString()}`;
}
// client.end()
});
setInterval(
intervalFunction = function () {
end = moment();
txTime = parseInt(onAir) === 0 ? moment.utc(end.diff(transmissionStart)).format('mm:ss') : "00:00";
output.innerText = `ON AIR : ${txTime} : ${moment.utc().format(urlParams["format"] || dateFormat)} `
stats.innerText =
`\nTS Bit Rate: ${bitrate}` +
`\nFrequency: ${frequency}` +
`\nSymbol Rate: ${Number(sr)/1000} kS/s` +
`\nConstel: ${constel.toUpperCase()}` +
`\nFEC: ${fec}` +
`\nGain ${gain}` +
`\nNCO: ${nco}` +
`\nBBFRAME Queue: ${queue}` +
`\nTuner: ${temp}`;
}, 1);
intervalFunction();
</script>
</body>
</html>
Does anyone have any solution please?
Regards de Jabi, ea2aru.