node-red-contrib-mog
Version:
mog
392 lines (331 loc) • 17.5 kB
HTML
<script type="text/javascript">
var init = 0;
var database = {
nodes: [],
};
var this_index;
RED.nodes.registerType('video-switcher',{
category: 'mog',
color: '#f3b567',
defaults: {
name: {value:"video-switcher"},
device: {value:"", validate:RED.validators.regex(/\w*[0-9]\w*/)},
devices: {value:""},
input_services: {value:""},
output_services: {value:""},
current_device: {value:""},
validate_outputs: {value:"", validate:RED.validators.regex(/[1]{1}/)},
validate_inputs: {value:"", validate:RED.validators.regex(/[1]{1}/)},
video_ips: {value:""},
video_ports: {value:""}
},
inputs:1,
outputs:1,
outputLabels: ["video"],
inputLabels: ["video"],
icon: "icons/valve.png",
label: function() {
return this.name||"video-switcher";
},
oneditsave: function(){
var selectedDevice = $("select#node-input-devices option:checked").val();
this.current_device = $("input#node-input-device").val();
database.nodes[this_index].video_ips = [];
database.nodes[this_index].video_ports = [];
database.nodes[this_index].input_services = [];
database.nodes[this_index].output_services = [];
$('#node-input-validate_outputs').val('1');
$('#node-input-validate_inputs').val('1');
for(var i=0; i<database.nodes[this_index].n_video_outputs; i++) {
var n = parseInt(i)+1;
var insertedvideoIP = $("input#node-input-video_ip_"+n).val();
var insertedvideoPort = $("input#node-input-video_port_"+n).val();
var insertedvideoService = $("select#node-input-output_services"+n+" option:checked").val();
var check_a_ip = /([0-9]{1,3}\.){3}[0-9]{1,3}/.test(insertedvideoIP);
var check_a_port = /[0-9]{4}/.test(insertedvideoPort);
var check_service = /\w*[0-9]\w*/.test(insertedvideoService);
database.nodes[this_index].video_ips.push(insertedvideoIP);
database.nodes[this_index].video_ports.push(insertedvideoPort);
database.nodes[this_index].output_services.push(insertedvideoService);
if(!(check_a_ip && check_a_port && check_service)){
$('#node-input-validate_outputs').val('0');
}
}
this.video_ips = database.nodes[this_index].video_ips;
this.video_ports = database.nodes[this_index].video_ports;
this.output_services = database.nodes[this_index].output_services;
for(var i=0; i<database.nodes[this_index].n_input_video_outputs; i++) {
var n = parseInt(i)+1;
var insertedvideoService = $("select#node-input-input_services"+n+" option:checked").val();
var check_service = /\w*[0-9]\w*/.test(insertedvideoService);
database.nodes[this_index].input_services.push(insertedvideoService);
if(!check_service){
$('#node-input-validate_inputs').val('0');
}
}
this.input_services = database.nodes[this_index].input_services;
const url = "http://localhost:3000/";
fetch(url, {
method : "POST",
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body : JSON.stringify(database.nodes[this_index])
})
.then(response => console.log('Status code:', response.status))
.catch(error => console.error('Error:', error));
if(selectedDevice != undefined && selectedDevice != "") {
document.getElementById("node-input-device").value = selectedDevice;
database.nodes[this_index].device = selectedDevice;
}
},
oneditprepare: function(){
var exec = async() => {
const url = 'http://localhost:3000/database';
const request = async() => {
const response = await fetch(url)
.then(function(response) {
console.log('Status code:', response.status);
return response.json();
})
.then(function(myJson) {
var data = JSON.parse(JSON.stringify(myJson));
database = data;
})
.catch(error => console.error(error));
}
await request();
}
async function start() {
if(init == 0) {
init = 1;
await exec();
}
};
async function proceed(id) {
await start();
console.log(database);
var find = 0;
for(var i = 0; i<database.nodes.length;i++){
if(database.nodes[i].id == id){
find = 1;
this_index = i;
break;
}
}
if(!find){
database.nodes.push({
id: id,
type: "video-switcher",
device: "",
input_services: [],
output_services: [],
n_video_outputs: 1,
video_ips: [],
video_ports: [],
n_input_video_outputs: 1,
input_video_ips: [],
input_video_ports: [],
});
this_index = database.nodes.length-1;
}
$('input#node-input-validate_outputs').hide();
$('input#node-input-validate_inputs').hide();
loadvideoOutputs();
const url = 'http://localhost:3000/devices/?type=tcp';
fetch(url)
.then(function(response) {
console.log('Status code:', response.status);
return response.json();
})
.then(function(myJson) {
var data = JSON.parse(JSON.stringify(myJson)).devices;
console.log(data);
for (i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'> " + data[i] + "</option>").appendTo("#node-input-devices");
}
})
.catch(error => console.error(error));
}
proceed(this.id);
}
});
</script>
<script type="text/x-red" data-template-name="video-switcher">
<div class="form-row">
<label for="node-input-name-device"><i class="icon-tag"></i> Current Device</label>
<input type="text" id="node-input-device" placeholder="Not defined" readonly>
</div>
<div class="form-row">
<label for="node-input-devices"><i class="icon-tag"></i> Available Devices</label>
<select id="node-input-devices" onchange="readvideoServices();">
<option value></option>
</select>
</div>
<input type="text" id="node-input-validate_outputs">
<input type="text" id="node-input-validate_inputs">
<div class="form-row">
<br/><br/>
<label for="node-input-number_video_inputs"> #video_inputs</label>
<select id="node-input-number_video_inputs" onchange="showvideoinputProperties();">
</select>
<div id="videoIn"></div>
</div>
<div class="form-row">
<br/><br/>
<label for="node-input-number_video_outputs"> #video_outputs</label>
<select id="node-input-number_video_outputs" onchange="showvideoProperties();">
</select>
<div id="video"></div>
</div>
</script>
<script type="text/javascript">
function readvideoServices() {
if(database.nodes[this_index]!=undefined){
var aux = document.getElementById("node-input-devices");
var device = aux.options[aux.selectedIndex];
if(device != undefined && device != ""){
device = device.value;
}
if(device == undefined || device == "") {
device = database.nodes[this_index].device;
}
if(device != ""){
var url = 'http://localhost:3000/services/?type=output&deviceID=' + device;
fetch(url)
.then(function(response) {
console.log('Status code:', response.status);
return response.json();
})
.then(function(myJson) {
var data = JSON.parse(JSON.stringify(myJson));
console.log(data);
for(var k = 0; k<database.nodes[this_index].n_input_video_outputs; k++){
var num = k+1;
$("#node-input-input_services"+num).find("option").not(":selected").remove();
for (i = 0; i < data.services.length; i++) {
if(data.available[i]){
$("<option value='" + data.services[i] + "'> " + data.services[i] + "</option>").appendTo("#node-input-input_services"+num);
} else {
$("<option disabled value='" + data.services[i] + "' style=\"background-color: grey; color: white\">" + data.services[i] + "</option>").appendTo("#node-input-input_services"+num);
}
}
}
})
.catch(error => console.error(error));
url = 'http://localhost:3000/services/?type=input&deviceID=' + device;
fetch(url)
.then(function(response) {
console.log('Status code:', response.status);
return response.json();
})
.then(function(myJson) {
var data = JSON.parse(JSON.stringify(myJson));
console.log(data);
for(var k = 0; k<database.nodes[this_index].n_video_outputs; k++){
var num = k+1;
$("#node-input-output_services"+num).find("option").not(":selected").remove();
for (i = 0; i < data.services.length; i++) {
if(data.available[i]){
$("<option value='" + data.services[i] + "'> " + data.services[i] + "</option>").appendTo("#node-input-output_services"+num);
} else {
$("<option disabled value='" + data.services[i] + "' style=\"background-color: grey; color: white\">" + data.services[i] + "</option>").appendTo("#node-input-output_services"+num);
}
}
}
})
.catch(error => console.error(error));
}
}
}
</script>
<script>
function showvideoProperties() {
var e = document.getElementById("node-input-number_video_outputs");
var numInputs = e.options[e.selectedIndex].value;
var prev_num = database.nodes[this_index].n_video_outputs;
database.nodes[this_index].n_video_outputs = parseInt(numInputs);
if(numInputs>=prev_num) {
for (var i = prev_num; i < numInputs; i++){
var n = parseInt(i)+1;
$("<div id='video" + n + "'><div class='form-row'><label><i class='icon-tag'></i> Sender</label><select id='node-input-output_services" + n + "'></select></div>"+
"<div class='form-row'><label for='node-input-video-ip'>IP " + n + "</label>"+
"<input type='text' id='node-input-video_ip_" + n + "' placeholder='Not defined' pattern='([0-9]{1,3}\.){3}[0-9]{1,3}' required></div>"+
"<div class='form-row'><label for='node-input-video-port'>Port " + n + "</label>"+
"<input type='text' id='node-input-video_port_" + n + "' placeholder='Not defined' pattern='[0-9]{4}' required></div></div>").appendTo("#video");
}
readvideoServices();
} else {
for(var i = prev_num; i > numInputs; i--){
$("#video" + i).remove();
}
}
}
</script>
<script>
function showvideoinputProperties() {
var e = document.getElementById("node-input-number_video_inputs");
var numInputs = e.options[e.selectedIndex].value;
var prev_num = database.nodes[this_index].n_input_video_outputs;
database.nodes[this_index].n_input_video_outputs = parseInt(numInputs);
if(numInputs>=prev_num) {
for (var i = prev_num; i < numInputs; i++){
var n = parseInt(i)+1;
$("<div id='videoIn" + n + "'><div class='form-row'><label><i class='icon-tag'></i> Receiver</label><select id='node-input-input_services" + n + "'></select></div>"+
"</div>").appendTo("#videoIn");
}
readvideoServices();
} else {
for(var i = prev_num; i > numInputs; i--){
$("#videoIn" + i).remove();
}
}
}
</script>
<script>
function loadvideoOutputs() {
for(var i = 1; i <= 5; i++){
if(i == database.nodes[this_index].n_video_outputs){
$("<option selected='selected' value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_video_outputs");
} else {
$("<option value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_video_outputs");
}
}
if(database.nodes[this_index].n_video_outputs!=0){
$("#video").append("<br/><p id='video_title'>video OUTPUTS ADRESSES AND PORTS</p>");
for (var i = 0; i < database.nodes[this_index].n_video_outputs; i++){
var n = parseInt(i)+1;
$("<div id='video" + n + "'><div class='form-row'><label><i class='icon-tag'></i> Sender</label><select id='node-input-output_services" + n + "'></select></div>"+
"<div class='form-row'><label for='node-input-video-ip'>IP " + n + "</label>"+
"<input type='text' id='node-input-video_ip_" + n + "' value='"+ database.nodes[this_index].video_ips[n-1] + "' pattern='([0-9]{1,3}\.){3}[0-9]{1,3}' required></div>"+
"<div class='form-row'><label for='node-input-video-port'>Port " + n + "</label>"+
"<input type='text' id='node-input-video_port_" + n + "' value='"+database.nodes[this_index].video_ports[n-1] + "' pattern='[0-9]{4}' required></div></div>").appendTo("#video");
$("<option selected='selected' value='" + database.nodes[this_index].output_services[n-1] + "'> " + database.nodes[this_index].output_services[n-1] + "</option>").appendTo("#node-input-output_services"+n);
}
}
for(var i = 1; i <= 5; i++){
if(i == database.nodes[this_index].n_input_video_outputs){
$("<option selected='selected' value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_video_inputs");
} else {
$("<option value='" + i + "'> " + i + "</option>").appendTo("#node-input-number_video_inputs");
}
}
if(database.nodes[this_index].n_input_video_outputs!=0){
$("#videoIn").append("<br/><p id='video_title'>video RECEIVERS</p>");
for (var i = 0; i < database.nodes[this_index].n_input_video_outputs; i++){
var n = parseInt(i)+1;
$("<div id='videoIn" + n + "'><div class='form-row'><label><i class='icon-tag'></i> Receiver</label><select id='node-input-input_services" + n + "'></select></div>"+
"</div>").appendTo("#videoIn");
$("<option selected='selected' value='" + database.nodes[this_index].input_services[n-1] + "'> " + database.nodes[this_index].input_services[n-1] + "</option>").appendTo("#node-input-input_services"+n);
}
}
readvideoServices();
}
</script>
<script type="text/x-red" data-help-name="video-switcher">
<p></p>
</script>
<script type="text/x-red" data-description-name="video-switcher">
<p></p>
</script>