Universal KeyPad für Webfront

Aus gegebenen Anlass habe ich ich mir eine Zahlentastatur (KeyPad) auf Basis einer externen HTML-Seite und Javaskript zusammengebastelt.

Die Tastatur nimmt die eingegeben Zahlen auf und sendet diese nach betätigen des „Senden-Buttons“ in eine Variable nach IPS. Wird 10 Sekunden keine Taste mehr betätigt wird der Inhalt des Zahlenfeldes gelöscht, muss ja nicht jeder sehen was man eingegeben hat. (Danke Raketenschnecke für die Idee)

Es gibt nicht viel zu installieren deshalb habe ich auf ein Installerskript verzichtet.

In beiliegendem Archiv den enthaltenen Ordner „keyboard“ nach "/webfront/user/ " kopieren.

Dieses Skript, oder das aus dem Archiv, in IPS erstellen, 2 STRING-Variablen anlegen, entsprechendes Profil darauf legen und 1x starten. Sollte nachträglich etwas in diesem Skript geändert werden muss es einfach nochmal gestartet werden damit der String in die Variable übertragen wird.

<?
// Installationsanleitung des Javascript KeyPads
// 1. String-Variable erstellen mit Profil ~HTMLBox für Aufnahme der Tastatur ($id_KeyboardHTMLBox)
// 2. String-Variable erstellen ohne Profil für Aufnahme der Eingabe über die Tastatur ($id_Value)
// 3. Höhe des iFrames eintragen (anpassen an die Breite in der css-Datei)
// 4. Breite des iFrames eintragen (anpassen an die Breite in der css-Datei)
// 5. Ausführen zum befüllen der HTML-Box. Muss auch bei Änderung dieses Skriptes nochmals ausgeführt werden
// Das Aussehen der Tastatur kann komplett in der /webfront/user/keyboard/css/style geändert werden

// Anfang Config

// ID der String-Variable zur Aufnahme der Tastatur (Profil: ~HTML-Box)
$id_KeyboardHTMLBox  = 45719;

// ID der String-Variable die den eingegebenen Passcode bekommt.
$id_Value     = 13059;

// Maße des iFrames wie es in der HTMLBox angezeigt wird.
$height_iframe       = 300;
$width_iframe        = 180;

// Ende Config

// String-Variable mit HTML-Code befüllen
SetValue($id_KeyboardHTMLBox,'<center><iframe src="user/keyboard/index.html?ipsValue='.$id_Value.'" frameborder=0 height='.$height_iframe.'px width='.$width_iframe.'px></iframe></center>');
?>

Das KeyPad macht nichts anderes als die eingegeben Zahlen nach IPS in eine Variable zu schreiben, für eine Auswerte-Logik muss jeder selbst sorgen.

Ich nutze es z.B. um meine Türöffner-Elektrik in IPS für Fehlbedienung oder Fremdzugriff zu schützen, man weiß ja nie wer auf das WFE alles zugreift :smiley:

Nun viel Spaß damit.

keyboard.rar (7.38 KB)

Keybaord.png

Getestet mit

[ul]
[li]Internet Explorer ab 9[/li][li]Firefox ab 16[/li][li]Chrome ab 21[/li][li]iPhone (Safari) iOS 6[/li][li]iPad (Safari) iOS 5.x[/li][li]iFront (ist aber nicht wirklich komfortabel)[/li][li]Android ab 4.x (Danke Raketenschnecke für´s testen)[/li][/ul]

Bei den portabelen Geräten wie Android, iPhone, iPad muss man mit der CSS-Klasse spielen um die entsprechende Größe das KeyPads zu bekommen.

Große Klasse! Danke!

Bei mir wird offenbar zyklisch nach 10 Sekunden gelöscht, egal wann ich die letzte Taste gedrückt habe. Wenn es dumm läuft, dann wird direkt nach der Eingabe der Zahlen gelöscht. EDIT: Hab das nochmal getestet, es wird eher zufällig gelöscht, ich kann da keine Regel erkennen. :confused:

Schön ist, dass das Skript die Eingabe nach dem Absenden löscht. Das würde mir eigentlich schon fast ausreichen (die 10-Sekunden-Funktion betrifft damit ja nur „vergessene“ halbfertige Eingaben).

Könnte man (= Du :wink: ) statt der konkreten Zeichen nur „*“ einblenden - wie bei einer Passworteingabe?

Grüße
galleto

Hallo galleto,

Ist richtig. Die Zeitschleife im JS läuft noch nicht so richtig, war auch mehr ein Copy&Paste aus dem Internet.

Primär sollte die erst anlaufen wenn

  1. Eine Zahl im Eingabefeld steht
  2. Sollte der Timer wieder von vorne beginnnen wenn man eine neue Zahl eingíbt.

Bin hier leider nicht der JS-Profi, werde es aber bei Zeiten noch verbessern.

Wenn Dir das mit dem Löschen nach Absenden ausreicht kannst Du in der /user/keyboard/js/keyboard.js

den Teil

setTimeout(function() {
   $write.html("");
  }, 10000);

löschen.

Steht ganz unten.

Danke, hat geklappt.

Wegen der „Sternchen“ hab ich mal recherchiert, da ist der Parameter type=„password“ nötig. Dummerweise scheint der nicht mit <textarea> zu funktionieren. Erste Experimente mit <form> sind leider auch gescheitert.

Grüße
galleto

Habe auch gerade die Suchmaschine bemüht und leider auch nichts auf die Schnelle gefunden.

Einen Tipp habe ich aber für Sicherheitsfanatiker gefunden…

Ändere in der CSS-Klasse einmal die Schriftart für das Textfeld auf Webdings.

#write {
margin: 0 0 5px;
padding: 5px;
width: 125px;
height: 20px;
font: 1em/1.5 Webdings;
color: #fff;
background: #1e3042;
border: 1px solid #f9f9f9;
}

Sehr pragmatische Lösung aber funktioniert :D. Leider sieht man halt nicht welche Zahl man eingegeben hat.

Wer es wirklich mit Sternchen haben möchte könnte sich hier einen Font mit Sternchen suchen oder selbst bauen.

Für Sicherheitsfanatiker sei dann aber erwähnt, dass dies nur unter Windows funktioniert, außerdem ist bei einem „richtigen“ Passwortfeld einiges nicht möglich, was bei normalen Textfeldern (unabhängig vom Font) geht und ein Risiko darstellen kann: Zum Beispiel kann man bei Passwortfeldern kein Rechtsklick->Rückgängig machen und anschließend auch kein Copy (z.B. in ein anderes Textfeld mit lesbarem Font).

Das muss man natürlich nicht wahnsinnig schlimm finden, wollte es nur erwähnt haben.

Da ich die Diskussion angestoßen habe: Mir ging es vor allem um eine verdeckte Eingabe, da ich meist gerade dann Einstellungen (z.B. der Alarmanlage) ändere, wenn ich Besuch habe und nicht allein vor dem Webfront stehe. Dafür reicht die Schriftarten-Lösung von wgreipl völlig. Für echte „Sicherheitsfanatiker“ natürlich eher nicht. :slight_smile:

Grüße
galleto

Sokkerheld hat natürlich Recht.

Da es für meine Bedürfnisse ausreicht kann sich natürlich jeder daran machen das Teil sicherer zu machen.

Leider fehlen mir die JS-Kenntnisse um mich dem Sicherheitleck anzunehmen :cool:

Dat heisst, sokke-der-held.:smiley:

Ich hoffe, es ist Dir recht, wenn ich mal meine Umsetzung als Anregung veröffentliche, vielleicht nutzt es jemandem:

Zu der von Dir schon vorgegebenen String-Variable zur Aufnahme der PIN-Eingabe (bei mir: „eingegebene PIN“) habe ich noch eine weitere String-Variable „vorgegebene PIN“ ergänzt und außerdem eine Boolean-Variable „Eingabesperre“. Letztere lasse ich bei Variablenaktualisierung „eingegebene PIN“ mit folgendem Code direkt im Ereignis schalten:

$pin = GetValue(98765  /*[Program\Alarm\KeyPad\vorgegebene PIN]*/);
$eingabe = GetValue(12345  /*[Program\Alarm\KeyPad\eingegebene PIN]*/);
if ($pin == $eingabe) {
   SetValue($_IPS['TARGET'], 0); // Eingabesperre auf "entsperrt"
   IPS_SetEventActive(13579, true); // Sperr-Timer an
   }
else SetValue($_IPS['TARGET'], 1); // Eingabesperre auf "gesperrt"

Der dadurch aktivierte Timer (bei mir 15 Sekunden) hängt an der „eingegebenen PIN“ und setzt sie mit folgendem Code auf „0“ (wodurch die Sperre von allein wieder einspringt) und deaktiviert sich danach selbst:

if (!GetValue(25625)) {
   SetValue($_IPS['TARGET'], 0);
   IPS_SetEventActive(13579, false);
   }

Die durch das Keypad geschützten Schaltscripte prüfen dann nur noch den Status der „Eingabesperre“.

Grüße
galleto

upps. Dad hatte ich doch glatt gemeint er ist Fußballer.:cool:

Natürlich, vielleicht poste ich meines auch noch.

OK. Hier auf die Schnelle.

<?
// Installation
// 1. Variable
// Gewünschtes Passwort. Länge sollte egal sein
$pass   = 12345; // Passwort
// Webfront Configurator auf dem die Meldungen ausgegeben werden sollen
$idWFC   = 43269 /*[WebFront Hauptsteuerung]*/;
// Variable die das von der Tastatur zurückgeliefert Passwort enthält
$idValue  = 13059 /*[Test\Keyboard\KeyPad\Value]*/;
// Bool-Variabel zur Anzeige ob Status gesperrt oder entsperrt (entsprechendes Profil anlegen)
$idLogStat  = 26179 /*[Test\Keyboard\KeyPad\Logged-Status]*/;
// Sperrtimer nach gültiger Freischaltung
$timer   = 30; 
// Ende Config
$value = GetValue($idValue);
if($_IPS['SENDER'] == "TimerEvent") {
   WFC_SendNotification($idWFC, 'Hinweis...', 'System gesperrt', '', 2);
 IPS_SetScriptTimer($_IPS['SELF'], 0);
 SetValue($idLogStat, false);
 // Hier die Funktionen die nach Ablauf des Sperrtimer ausgeführt werden sollen
 IPS_SetHidden(36897 /*[Test\Tür-Controller\Haustür\Keymatic-Status]*/, true);
 IPS_SetHidden(31570 /*[Test\Tür-Controller\Tür-Controller]*/, true);
 IPS_SetHidden(33416 /*[Test\Tür-Controller\Batterieüberwachung Türsteuerung]*/, true);
 IPS_SetHidden(21865 /*[Test\Tür-Controller\KeyPad]*/, false);
 return;
}

if($_IPS['SENDER'] == 'Variable') {
 if($value == $pass) {
  WFC_SendNotification($idWFC, 'Hinweis...', 'Code akzeptiert.<br>System für '.$timer.' Sekunden entsperrt', '', 5);
  SetValue($idLogStat, true);
  IPS_SetScriptTimer($_IPS['SELF'], $timer);
  // Hier die Funktionen die bei erfolgreicher Freischaltung ausgeführt werden sollen
  IPS_SetHidden(36897 /*[Test\Tür-Controller\Haustür\Keymatic-Status]*/, false);
  IPS_SetHidden(31570 /*[Test\Tür-Controller\Tür-Controller]*/, false);
  IPS_SetHidden(33416 /*[Test\Tür-Controller\Batterieüberwachung Türsteuerung]*/, false);
  IPS_SetHidden(21865 /*[Test\Tür-Controller\KeyPad]*/, true);
 }
 else
 {
     WFC_SendNotification($idWFC, 'Hinweis...', 'Falscher Code.', '', 5);
 }
}

?>

Noch einen OnChange-Event auf die String-Variable des KeyPads hinzufügen und gut ist.

Weit davon entfernt. :smiley: Der Nick ist dämlich genug, schreibt ihn wie ihr wollt. :wink: </ot>

Ich habe das Script bei mir heute installiert und hatte das Problem das nichts in der Zielvariable angekommen ist.
Es lag daran das im Webserver „SSL“ aktiv war. Und dann warscheinlich das Javascript nicht wollte.

Hat hier jemand eine Idee, wie ich das mit SSL zum laufen bekomme?

Hier der JS Code:


$(function(){
    var $write = $('#write'),
        shift = false,
        capslock = false;
        

    // Function um Parameter aus der URi zu holen
    function get_url_param( name )
    {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );

        if ( results == null )
            return "";
        else
            return results[1];
    }

    // Parameter ipsValue aus URi lesen
    ipsValue = get_url_param('ipsValue');

    

    
    $('#keyboard li').click(function(){
        var $this = $(this),
            character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
        
        // Shift keys
        if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
            $('.letter').toggleClass('uppercase');
            $('.symbol span').toggle();
            
            shift = (shift === true) ? false : true;
            capslock = false;
            return false;
        }
        
        // Caps lock
        if ($this.hasClass('capslock')) {
            $('.letter').toggleClass('uppercase');
            capslock = true;
            return false;
        }
        
        // Delete
        if ($this.hasClass('delete')) {
            var html = $write.html();
            
            $write.html(html.substr(0, html.length - 1));
            return false;
        }
        
        // Special characters
        if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
        if ($this.hasClass('space')) character = ' ';
        if ($this.hasClass('tab')) character = "	";
        if ($this.hasClass('return')) character = "
";
        
        // Uppercase letter
        if ($this.hasClass('uppercase')) character = character.toUpperCase();
        
        // Remove shift once a key is clicked.
        if (shift === true) {
            $('.symbol span').toggle();
            if (capslock === false) $('.letter').toggleClass('uppercase');
            
            shift = false;
        }
    
        // Senden
        if ($this.hasClass('senden')) {
            var html = $write.html();
            
                        xhReq = new XMLHttpRequest;
                        xhReq.open("POST","keyboard-receive.php",true);
                        xhReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                        action = "value=" + $write.html();
                        action += "&ipsValue=" + ipsValue;
                        xhReq.send(action);
                        // Eingabefeld der Tastatur löschen
                        $write.html(html.substr(0, html.length - html.length));

                        skipThis = false;
                        
            return false;
        }

    
        // Add the character
        $write.html($write.html() + character);
        setTimeout(function() {
            $write.html("");
        }, 10000);


    });
});

Hallo Thomas,

habe mittlerweile das selbe Problem. Da ich schon immer SSL aktiviert hatte, und die Funktion schon lange nicht mehr benötigt habe hab ich nicht bemerkt dass sie nicht mehr funktioniert. Sollte mit SSL also schon mal funtioniert haben, oder ? Wollte die Funktion heute an anderer Stelle einbauen und hab dadurch bemerkt dass sie grundsätzlich nicht mehr funktioniert mit SSL.

OT
Übrigens, als ich SSL zum testen in meiner Webserverinstanz deaktiviert habe ging erst mal gar nix mehr. Keine Konsole, weder lokal noch remote, kein wf…
Irgend wie hab ich dann doch noch eine ServerLokale Console starten können und SSL wieder aktivieren.
/OT

Hast Du dazu schon eine Lösung gefunden?

Nutze das Script nicht, also nein.

Hallo zusammen,

benutzt jemand das Keypad, in der keyboard.rar fehlt die index.html

Ist doch im Keyboard-Ordner