Fernsteuerung eines Raspberry Pi über HTML-Seite

Tobias195 · 28. September 2015

OK, habe die Datei jetzt da. Bin auf die Seite, die du verlinkt hast und habe es links eingefügt. Das auf der rechten Seite kopieren und in eine Datei einfügen..ich denke mal du meinst einfach, den code hier einfügen? Wenn du es anders gemeint hast, schreib bitte nochmal. Hier ist er:

CSS

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html{
            height: 100%;
        }
        #wrap{
            width: 100%;
            height: 300px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #wrap > button{
            width: 100px;
            height: 100px;
            display: block;
            position: absolute;
            left: calc(50% - 50px);
            top: calc(50% - 50px);
        }
        #wrap > button:nth-child(1){
            transform: translateX(-100px);
        }
        #wrap > button:nth-child(2){
            transform: translateY(-100px);
        }
        #wrap > button:nth-child(3){
            transform: translateX(100px);
        }
        #wrap > button:nth-child(4){
            transform: translateY(100px);
        }
    </style>

Alles anzeigen

Danke schonmal!!

Gruß Tobias

wolf · 28. September 2015

Wenn du natürlich html mit einfügst, kann es nicht funktionieren...
Gooogle doch einfach mal css Prefixing, dann weist du was falsch ist.
Und benutze das hier:

CSS

*{
  margin: 0;
  padding: 0;
}
html{
  height: 100%;
}
#wrap{
  width: 100%;
  height: 300px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#wrap > button{
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}
#wrap > button:nth-child(1){
  -webkit-transform: translateX(-100px);
      -ms-transform: translateX(-100px);
          transform: translateX(-100px);
}
#wrap > button:nth-child(2){
  -webkit-transform: translateY(-100px);
      -ms-transform: translateY(-100px);
          transform: translateY(-100px);
}
#wrap > button:nth-child(3){
  -webkit-transform: translateX(100px);
      -ms-transform: translateX(100px);
          transform: translateX(100px);
}
#wrap > button:nth-child(4){
  -webkit-transform: translateY(100px);
      -ms-transform: translateY(100px);
          transform: translateY(100px);
}

Alles anzeigen

Tobias195 · 2. Oktober 2015

Danke erstmal für deine Bemühungen!

Ohne das jetzt per Smartphone aufgerufen zu haben (ich kann also leider noch nicht sagen, ob es jetzt wie gewünscht klappt), habe ich nach der Änderung beim Öffnen per PC feststellen müssen, dass die Umlaute (ä,ö,ü) z.B. in "Rückwärts" usw. nicht mehr korrekt dargestellt werden, sonder nur als "?" . Natürlich könnte ich jetzt einfach alle Umlaute durch ae, ue etc. ersetzen, anders find ich das aber eigentlich schon schöner. Woran liegt das?

Heute nachmittag werde ich weiter an meinem Projekt arbeiten und dann hier berichten, ob die Darstellung per Smartphone funktioniert.

Gruß Tobias

JR Cologne · 2. Oktober 2015

Das liegt an der Codierung. Häufig hab ich z.B. schon beobachten können, dass, wenn man im head den charset auf UTF-8 setzt und gleichzeitig der Browser ebenfalls als Standard-Codierung UTF-8 eingestellt hat, das passiert, was du feststellen musstest.

Tobias195 · 8. Oktober 2015

Ah ja, danke, das konnte ich beheben.

Soo das könnte eine meiner letzten Fragen sein, mein Projekt ist fast so, wie ich es mir vorgestellt habe.
Ich habe jetzt an meinen Roboter eine Kamera für einen Livestream auf der Website angeschlossen.
Das klappt auch schon gut. Ich habe den Stream im HTML-Code einfach unter das Bedienfeld eingefügt.
Die Darstellung auf dem Smartphone gefällt mir auch schon gut, da wird der Livestream schön unter dem Bedienfeld dargestellt. Ein Bild habe ich angehängt! Nur bei Bedienung über PC gefällt mir das noch nicht so ganz. Bzw. Das hngt natürlich auch alles von der Bildschirmgröße ab.. bei meinem Ultrabook ist die Darstellung leider nicht schön, da wäre natürlich schöner Bedienfeld und Livestream nebeneinander zu haben. Ein Bild ist auch angehängt.

Hat jemand einen Tipp, wie ich das Ganze für die meisten Bildschirme einigermaßen schön darstellen kann?

Den Livestream habe ich folgendermaßen eingefüht:

HTML

<iframe src="http://192.168.2.1/RPi_Cam_Web_Interface/?action=stream" height="640" width="480" frameborder="0"></iframe>

Im Folgenden werde ich nochmal den kompletten Code der Website einfügen:

HTML

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-7" />
    <title>Fernsteuerung Kettchen</title>
    <style type="text/css">
        *{
  		margin: 0;
  		padding: 0;
	}
	html{
  		height: 100%;
	}
	#wrap{
 		 width: 100%;
  		height: 300px;
  		position: relative;
  		display: -webkit-box;
  		display: -webkit-flex;
  		display: -ms-flexbox;
  		display: flex;
  		-webkit-box-align: center;
  		-webkit-align-items: center;
 	     	-ms-flex-align: center;
          	align-items: center;
  		-webkit-box-pack: center;
  		-webkit-justify-content: center;
      		-ms-flex-pack: center;
          	justify-content: center;
	}
	#wrap > button{
  		width: 100px;
  		height: 100px;
  		display: block;
  		position: absolute;
  		left: calc(50% - 50px);
  		top: calc(50% - 50px);
	}
	#wrap > button:nth-child(1){
  		-webkit-transform: translateX(-100px);
      		-ms-transform: translateX(-100px);
          	transform: translateX(-100px);
	}
	#wrap > button:nth-child(2){
  		-webkit-transform: translateY(-100px);
      		-ms-transform: translateY(-100px);
          	transform: translateY(-100px);
	}
	#wrap > button:nth-child(3){
  		-webkit-transform: translateX(100px);
      		-ms-transform: translateX(100px);
          	transform: translateX(100px);
	}
	#wrap > button:nth-child(4){
  		-webkit-transform: translateY(100px);
      		-ms-transform: translateY(100px);
          	transform: translateY(100px);
	}
    </style>
    <script type="text/javascript">
        // set global vars:
        var socket, // WebSocket
            connected; // bool




        // check if Websocket is supported by current browser
        if(!window.WebSocket){
             debug("your browser does not support WebSocket");
        }
        // debug function
        function debug(str){
            document.getElementById("debug").innerHTML += str + "<br>";
        }
        // start function - on submit host
        function start(){
            if(!connected){
                wsConnect(document.getElementById("data").value);
            }
            else{
                debug("already connected");
            }
        }
        // connect to ws server
        function wsConnect(host){
            try{
                socket = new WebSocket("ws://" + host + ":9093/ws");
                connected = true;
                wsPrepare(); // call wsPrepare() to define the websocket events
            }
            catch(e){
                debug("unable to connect: " + e);
            }
        }
        // set ws events
        function wsPrepare(){
            socket.onopen = function(ev){
                debug("connected");
            };
            socket.onmessage = function(ev){
                debug("received message: " + ev.data);
            };
            socket.onerror = function(ev){
                var emsg = (ev && ev.data) ? ev.data : "unknown";
                debug("error: " + emsg);
            };
            socket.onclose = function(ev){
                connected = false;
                debug("disonnected! [#" + ev.code + (ev.reason ? " " + ev.reason : "") + "]");
            };
        }
        // function that sends the movement commands to server by type
        function movement(type){
            if(!connected){
                debug("not connected"); // need to connect first
                return;
            }
            var str = null; // string to send
            if(type === 16 || type === 17){ // keys "shift" or "ctrl"
                str = "b"; // stops the robot
            }
            else if(type === 37){ // key "left arrow"
                str = "l"; // controls the left movement
            }
            else if(type === 38){ // key "up arrow"
                str = "u"; // controls the forward movement
            }
            else if(type === 39){ // key "right arrow"
                str = "r"; // controls the right movement
            }
            else if(type === 40){ // key "down arrow"
                str = "d"; // controls the backward movement
            }
            if(str !== null){
                socket.send(str);
                debug("sent: " + str);
            }
            else{
                debug("unknown movement type '" + type + "'");
            }
            return;
        }
        // add event listener
        document.addEventListener(
            "keyup", // on key up
            function(event){
                if(!connected){ // need to connect first
                    return;
                }
                movement(event.keyCode); // call movement function
            }
        );
  </script>
</head>
<body>





    <div><b>Geben Sie die IP-Adresse des Raspberry ein (hier: 192.168.2.1)</b></div>
    <input type="text" id="data" size="25" value="" />
    <input type="button" value="clickme" onclick="start()" />




	




    <div id="wrap">
        <button class="touch left" onclick="movement(37)">Links</button>
        <button class="touch top" onclick="movement(38)">Vorwärts</button>
        <button class="touch right" onclick="movement(39)">Rechts</button>
        <button class="touch bottom" onclick="movement(40)">Rückwärts</button>
        <button class="touch middle" onclick="movement(16)">Stop</button>
    </div>




	<iframe src="http://192.168.2.1/RPi_Cam_Web_Interface/?action=stream" height="640" width="480" frameborder="0"></iframe>




    <div id="debug"><b>debug:</b><br></div>


</body>
</html>

Alles anzeigen

Ich würde mich freuen, wenn ihr mir nochmal helfen könnten..

Gruß Tobias

wolf · 9. Oktober 2015

Benutze Media queries: Tutorial Responsive Webdesign (Grundsätze / Media Queries)

Fernsteuerung eines Raspberry Pi über HTML-Seite

Jetzt mitmachen!

Teilen