• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Formular Fernsteuerung

SFlepp

New member
Hallo zusammen

Ich habe mich zwahr etwas umgesehen aber nichts gefunden was mir helfen könnte... Wir benutzen im Geschäft für unsere Medienaufzeichnungen sogenannte AJA Recorder, diese lassen sich durch aufrufen der IP konfigurieren wie man es auch von diversen Switchs kennt. Da sich immer mehrere dieser Geräte im Einsatz befinden ist es umständlich, immer alle einzeln aufzurufen und zb zu formatieren... Daher hat mich mein Arbeitgeber gebeten, meine geringen Programmierkünste einzusetzen und ein simples HTML file zu schreiben wo dies möglich sein sollte alles auf einer Seite zu verbinden. Ich habe auch soweit alles geschafft, nur weiss ich nicht wie ich den Webbefehl des Gerätes absenden kann... Optik spielt keine Rolle, Funktionalität ist wichtig ;) Langer Rede kurzer Sinn, ich lade Euch den Code mal hoch... Wenn ihr das Ganze testet werdet ihr schnell merken was die Idee dahinter war...
HTML:
<!DOCTYPE html>

<html>
    <head>
        <title>Aja Recorder</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body{
                max-width: 70%;
                margin: 0 auto;
                margin-top: 5rem;
                background-color: lightblue;
            }
            .wrapper{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
            .container{
                margin-top: 1rem;
            } 
            form{
                padding: 0.5rem;
                width: 11rem;
            }
            input, select, textarea, checkbox {
                margin-bottom: 10px;
            }
            button{
                height: 3rem;
            }
            .ausgabe{
                width: 25rem;
                min-height: 3rem;
                background-color: #fff;
                margin: 2rem;
                margin-left: 0;
            }
            #notiz{
                padding: 10px;    
            }

        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="container">
                <fieldset>
                    <legend>Recorder-Auflistung</legend>
                    <form>
                        <input id="checkbox1" type="checkbox" value="192.167.1.2"><label for="checkbox1">192.167.1.2</label><br/>
                        <input id="checkbox2" type="checkbox" value="192.167.1.171"><label for="checkbox2">192.167.1.171</label><br/>
                        <input id="checkbox3" type="checkbox" value="192.167.1.172"><label for="checkbox3">192.167.1.172</label><br/>
                        <input id="checkbox4" type="checkbox" value="192.167.1.173"><label for="checkbox4">192.167.1.173</label><br/>
                        <input id="checkbox5" type="checkbox" value="192.167.1.174"><label for="checkbox5">192.167.1.174</label><br/>
                        <input id="checkbox6" type="checkbox" value="192.167.1.175"><label for="checkbox6">192.167.1.175</label><br/>
                        <input id="checkbox7" type="checkbox" value="192.167.1.176"><label for="checkbox7">192.167.1.176</label><br/>
                    </form>
                    <button onclick="allCheck()" id="all">Anwählen</button>
                    <button onclick="allUncheck()" id="all">Abwählen</button>
                </fieldset>
                <div class="container">
                    <button onclick="formatieren()">Formatieren</button> 
                </div>
            </div>
            <div class="container">
                <fieldset>
                    <legend>Inputs</legend>
                    <form>
                        <label for="IPinput">IP Eingabe</label>
                        <input id="IPinput" type="text" placeholder="XXX.XXX.X.XXX" value="0" >
                        <label for="TakeNr">Take Nummer</label><br>
                        <input id="TakeNr" type="text" placeholder="Nummer"><br>

                        <label for="TakeName">Take Name</label><br>
                        <input id="TakeName" type="text" placeholder="Name"><br>

                    </form>
                    <button onclick="takeNr()">Take Nr</button>
                    <button onclick="takeName()">Take Name</button>
                </fieldset>   

            </div>
            <div class="container">
                <div class="ausgabe">
                    <div id="notiz"></div>
                </div>
            </div>
        </div>


        <script>

            function formatieren() {
                var count = 0;
                var ip = document.forms[0];
                var notizelement = document.getElementById("notiz");
                notizelement.innerHTML = "";
                var IPinput = document.getElementById("IPinput");
                for (var i = 0; i < ip.length; i++) {
                    if (ip[i].type === 'checkbox' && ip[i].checked) {
                        console.log(ip[i].value);
                        var notiz = notizelement.innerHTML;
                        notiz = notiz + ip[i].value + " wird formatiert...<br>";
                        notizelement.innerHTML = notiz;
                        count++;
                                          }
                }

                if (count === 0 && IPinput.value == 0) {
                    alert("Es muss mindestens eine Checkbox aktiviert worden sein oder eine IP manuell eingetragen werden");
                }
                if (IPinput.value != 0) {
                    var notiz = notizelement.innerHTML;
                    notiz = notiz + IPinput.value + " wird formatiert...<br>";
                    notizelement.innerHTML = notiz;
                }
                count = 0;
            }
            function takeNr() {
                var count = 0;
                var nummer = document.getElementById('TakeNr').value;
                var notizelement = document.getElementById("notiz");
                var IPinput = document.getElementById("IPinput");
                notizelement.innerHTML = "";
                if (nummer != null && nummer >= 1) {
                    var ip = document.forms[0];
                    for (var i = 0; i < ip.length; i++) {
                        if (ip[i].type === 'checkbox' && ip[i].checked) {
                            count++;
                            var notiz = notizelement.innerHTML;
                            notiz = notiz + ip[i].value + " erhält die Take Nummer " + nummer + " <br>";
                            notizelement.innerHTML = notiz;
                            console.log(ip[i].value + " Take Nummer " + nummer);
                            //  ip[i].checked = false;
                        }
                    }
                }
                if (IPinput.value != 0) {
                    var notiz = notizelement.innerHTML;
                    notiz = notiz + IPinput.value + " erhält die Take Nummer " + nummer + " <br>";
                    notizelement.innerHTML = notiz;
                }
                if (count === 0 && IPinput.value == 0) {
                    alert("Es muss mindestens eine Checkbox aktiviert oder eine IP manuell eingegeben worden sein");
                }
                if (nummer <= 0) {
                    alert("Es muss eine Nummer eingegeben werden!");
                }
                //document.getElementById('TakeNr').value = null;
                count = 0;
            }


            function takeName() {
                var count = 0;
                var name = document.getElementById('TakeName').value;
                var notizelement = document.getElementById("notiz");
                var IPinput = document.getElementById("IPinput");
                notizelement.innerHTML = "";
                if (count === 0 && IPinput.value == 0) {
                    alert("Es muss mindestens eine Checkbox aktiviert oder eine IP manuell eingegeben worden sein");
                }
                if (name.length >= 1) {
                    var ip = document.forms[0];
                    for (var i = 0; i < ip.length; i++) {
                        if (ip[i].type === 'checkbox' && ip[i].checked) {
                            count++;
                            var notiz = notizelement.innerHTML;
                            notiz = notiz + ip[i].value + " erhält die Take Bezeichung " + name + " <br>";
                            notizelement.innerHTML = notiz;
                            console.log(ip[i].value + " Take Name " + name);
                            //  ip[i].checked = false;
                        }
                    }
                } else {
                    alert("Es muss eine Bezeichnung eingegeben werden!");
                }
                if (IPinput.value != 0) {
                    var notiz = notizelement.innerHTML;
                    notiz = notiz + IPinput.value + " erhält die Take Bezeichnung " + name + " <br>";
                    notizelement.innerHTML = notiz;
                }
                // document.getElementById('TakeName').value = null;
                count = 0;
            }

            function allCheck() {
                var ip = document.forms[0];
                for (var i = 0; i < ip.length; i++) {
                    ip[i].checked = true;

                }
            }

            function allUncheck() {
                var ip = document.forms[0];
                for (var i = 0; i < ip.length; i++) {
                    ip[i].checked = false;

                }
            }
        </script>
    </body>
</html>

Der Webbefehl um die Recorder zu formatieren wäre -> http://192.168.1.xxx/config?action=...ageCommand&value=4&configid=0&_=1495798877169
Die IP müsste dynamisch in den Webbefehl eingefügt werden können und es soll kein Fenster geöffnet werden durch den Link

Ich hoffe Ihr habt ungefähr verstanden was ich brauche :D und könnt mir dabei helfen..
Ach ja und der Code wird wohl nicht Perfekt sein.... Aber bin noch Anfänger :)

Freundliche Grüsse
Sandro
 
Zuletzt bearbeitet von einem Moderator:
AW: Bisschen überfordert

Ich würde die URL einfach in einem verstecken iFrame aufrufen. AJAX ist wegen der SOP hier nicht zu empfehlen.
 
AW: Bisschen überfordert

ok, ich werde mir das bei gelegenheit mal ansehen... hast du evtl codebeispiele wie ich die url aufrufe und die ip dynamisch anpassen kann?

vielen dank für die mühen
 
AW: Bisschen überfordert

Vielen Dank für die prompten Antworten stets :)

Ich habe es in der Klasse besprochen, und habe es trotz deiner Empfehlung mit AJAX geschrieben... Funktioniert soweit auch alles ganz gut :)

Nun habe ich ein neues Problem, welches ich nicht verstehe.... Ich habe eine for Schlaufe mit einer Variablen i, die mir die IPs und ein Textfeld auslesen soll damit ich diese kombinieren kann. Die IPs werden korrekt ausgelesen, aber bei den Textfeldern wird irgendwie nur jedes zweite ausgegeben... Irgendwas stimmt mit der Iteration von i nicht ganz, aber ich krieg einfach nicht raus was es ist!

HTML:
  function takeName() {
                var count = 0;
                var name = document.getElementById('TakeName').value;
                var notizelement = document.getElementById("notiz");
                var IPinput = document.getElementById("IPinput");
                notizelement.innerHTML = "";
                var ip = document.forms[0];
                var lokal = document.getElementsByName('lokal');
                
                if (name.length >= 1) {
                    for (var i = 0; i < lokal.length; i++) {
                         if (ip[i].type === 'checkbox' && ip[i].checked && lokal[i].value !== "") { 

                                console.log("Variable i ist " + i);
                                    var request = new XMLHttpRequest();
                                      request.addEventListener('load', function(event) {
                                      if (request.status >= 200 && request.status < 300) {
                                      console.log(request.responseText);
                                      } else {
                                      console.warn(request.statusText, request.responseText);
                                      }
                                      });
                            
                                        
                                        var notiz = notizelement.innerHTML;
                                        notiz = notiz + ip[i].value + " erhält die Take Bezeichnung " + lokal[i].value + "_" + name + " <br>";
                                        notizelement.innerHTML = notiz;

                                        request.open("GET","http://"+ ip[i].value + "/config?action=set&paramid=eParamID_CustomClipName&value="+ lokal[i].value + "_" + name + "&configid=0&_=1496218056512");
                                        request.send();
                                        count++;
                                      }
                         if(ip[i].type === 'checkbox' && ip[i].checked && lokal[i].value === "") {
                    alert("Es fehlt eine Bezeichnung!");
                        }
                    }
                } 
                else{
                    alert("Es muss ein Take Name eingegeben werden!");
                }
                if (IPinput.value !== "") {
                    var notiz = notizelement.innerHTML;
                    notiz = notiz + IPinput.value + " erhält die Take Bezeichnung " + name + " <br>";
                    notizelement.innerHTML = notiz;
                    
                    request.open("GET","http://"+ IPinput.value + "/config?action=set&paramid=eParamID_CustomClipName&value=" + name + "&configid=0&_=1496218056512");
                    request.send();
                    
                }
                if (count === 0 && IPinput.value === "") {
                    alert("Es muss mindestens eine Checkbox aktiviert oder eine IP manuell eingegeben worden sein");
                }
                count = 0;
            }

Vielen Dank für Deine/Eure Hilfe und Geduld

- - - Aktualisiert - - -

das Problem hat sich gelöst... :) hab den fehler gefunden in der if abfrage...

Vielen dank für die Hilfe
 
Zurück
Oben