This is the source code for the web page interface to control your robot. For this to work you need the corresponding NodeJS script behind it.
<html>
<head>
<title>Rasinro - Rasberry Internet Rover</title>
</head>
<body onmousemove="">
<h1>Rasinro - Raspberry Internet Rover</h1>
<p>Status: <span id="status">Waiting...</span></p>
<table border='1'>
<tr align="center"><td><button id='fl' type="button">Forward Left</button></td>
<td><button id='forward' type="button">Forward</button></td>
<td><button id='fr' type="button">Forward Right</button></td></tr>
<tr align="center">
<td><button id='left' type="button">Left</button></td>
<td><button id='stop' type="button">Stop</button></td>
<td><button id='right' type="button">Right</button></td>
</tr>
<tr align="center">
<td><button id='rl' type="button">Reverse Left</button></td>
<td><button id='reverse' type="button">Reverse</button></td>
<td><button id='rr' type="button">Reverse Right</button></td>
</tr>
</table>
<br>
<table>
<tr>Camera: <button id='1' type="button">1</button>
<button id='2' type="button">2</button>
<button id='3' type="button">3</button>
</tr>
</table>
<br>
<table>
<tr><td><button id='light2' type="button" onclick="switch(this)">Light - Body</button>
<button id='light1' type="button" onclick="switch(this)">Light - Head</button>
</table>
<table>
</td><td><button id='sing' type="button">Sing</button></td>
<td><button id='lcd' type "button">Reset LCD</button</td></tr>
</table>
<script src="/socket.io/socket.io.js"></script>
<script language="javascript">
var ip = window.location.href.split(':',3);
var p = ip[1];
//alert("up " + p);
document.write("<script src='http:" + p + "/mobil2an/js/jquery-latest.js'><\/sc"+"ript>");
document.write("<script src='http:" + p + "/mobil2an/js/coffee-script.js'><\/sc"+"ript>");
</script>
<p>
<h2>Robot Feed</h2>
<table>
<tr><th>Camera</th><th>Activity</th></tr>
<tr>
<td>
<script>
document.write("<img src='http:" + p + ":8077/?action=stream' width='320' height='240'>");
</script>
</td>
<td align="right">
<textarea id="messages" value="telek" style="background-color:yellow; width: 320px; height: 240px;">
</textarea>
</td>
</tr>
<tr><td><br>
<script>
var ip = window.location.href.split(':',3);
var p = ip[1];
document.write("<a href='http:" + p + ":8077/?action=stream' target='new'>View On Other Window</a>")
</script>
</td><td></td></tr>
</table>
<script>
document.write("<script src='http:" + p + "/mobil2an/socket.io.demo/status.js'><\/sc"+"ript>");
</script>
<script type="text/coffeescript">
jQuery ($) ->
$status = $ '#status'
$a = $ '#messages'
socket = io.connect()
socket.on 'connect', ->
$status.text 'Connected'
#$a.val 'Connected'
socket.on 'disconnect', ->
$status.text 'Disconnected'
socket.on 'reconnecting', (seconds) ->
$status.text "Reconnecting in #{seconds} seconds"
socket.on 'reconnect', ->
$status.text 'Reconnected'
socket.on 'reconnect_failed', ->
$status.text 'Failed to reconnect'
socket.on 'data', (message) ->
console.log message + ' ' + $a.attr('id') + ' ' + $a.text()
$a.text message + '\n' + $a.text()
socket.on 'publish', (message) ->
console.log message + ' ' + $a.attr('id') + ' ' + $a.text()
$a.text message + '\n' + $a.text()
socket.on 'secret', (message) ->
console.log message
$input = $ 'input'
$('button').click ->
socket.emit $(this).attr('id'), $(this).text()
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("button").css("background-color","");
$(this).css("background-color","green");
});
});
</script>
</body>
</html>
The corresponding Node JS file can be found here.
(Visited 1,555 times, 1 visits today)
9 thoughts on “HTML script to listen and send commands to Arduino via Serial Port”
Comments are closed.
Loading ...
Hi again its me 😀
I got the NodeJS server running and it even serves my website buuuuut the problem now is that it doesnt changes the connection it is always in waiting…
What connection? Change what? Waiting for what? Did you test the arduino side that you can type letters?
The jquery connection to the node js Server doesnt Seem to work.
I dont want to Test the arduino Connection because right at this Moment i only want that the Webserver sends messages to the node js Script which will later send them to the arduino.
With waiting i mean the status of the Connection displayed on the Website
As you know you must include the absolute path to js where you have your js filed stored in /mobil2an/js sub folder
document.write(“”);
document.write(“”);
Or if you want your Pi to always look for it online, you can use: https://code.jquery.com/jquery-3.1.0.slim.min.js as the source (src) file.
Yeah maybe i didnt change that. Will have a Look into that.
Rasinro – Rasberry Internet Rover
Rasinro – Raspberry Internet Rover
Status: Waiting…
Forward Left
Forward
Forward Right
Left
Stop
Right
Reverse Left
Reverse
Reverse Right
Camera: 1
2
3
Light – Body
Light – Head
Sing
Reset LCD</button
var ip = window.location.href.split(‘:’,3);
var p = ip[1];
//alert(“up ” + p);
document.write(“”);
document.write(“”);
Robot Feed
CameraActivity
document.write(“”);
var ip = window.location.href.split(‘:’,3);
var p = ip[1];
document.write(“View On Other Window“)
document.write(“”);
jQuery ($) ->
$status = $ ‘#status’
$a = $ ‘#messages’
socket = io.connect()
socket.on ‘connect’, ->
$status.text ‘Connected’
#$a.val ‘Connected’
socket.on ‘disconnect’, ->
$status.text ‘Disconnected’
socket.on ‘reconnecting’, (seconds) ->
$status.text “Reconnecting in #{seconds} seconds”
socket.on ‘reconnect’, ->
$status.text ‘Reconnected’
socket.on ‘reconnect_failed’, ->
$status.text ‘Failed to reconnect’
socket.on ‘data’, (message) ->
console.log message + ‘ ‘ + $a.attr(‘id’) + ‘ ‘ + $a.text()
$a.text message + ‘n’ + $a.text()
socket.on ‘publish’, (message) ->
console.log message + ‘ ‘ + $a.attr(‘id’) + ‘ ‘ + $a.text()
$a.text message + ‘n’ + $a.text()
socket.on ‘secret’, (message) ->
console.log message
$input = $ ‘input’
$(‘button’).click ->
socket.emit $(this).attr(‘id’), $(this).text()
$(document).ready(function(){
$(“button”).click(function(){
$(“button”).css(“background-color”,””);
$(this).css(“background-color”,”green”);
});
});
so this is my code i dont find the error but its still not connecting to the server
Please do the following tutorial before you dig into any robot programming: http://socket.io/get-started/chat/
What connection? Change what? Waiting for what?
So i think i know the Problem you use this Status.js file and i’m Not able to find it would you pls provide me a Link or something like that? 🙂