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:
<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:
<!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>Ich würde mich freuen, wenn ihr mir nochmal helfen könnten..
Gruß Tobias
