Skip to content
Snippets Groups Projects
Unverified Commit 10cf9537 authored by savigovindarajan's avatar savigovindarajan Committed by GitHub
Browse files

Add files via upload

parent e90f5779
No related branches found
No related tags found
No related merge requests found
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
display: flex;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>CS498: IoT -- Lab 2</h2>
<!-- <video class="center" width="600" height="400" controls>
<source src="samplevid.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> -->
<img src="./media/default_background.png" id='pics'>
</div>
</div>
<div class="row">
<div class="container">
<div class="jumbotron text-center col-md-6">
<span>&nbsp;&nbsp;</span>
<button class="btn btn-upArrow"
style = "color:deepskyblue;font-size:50px;text-shadow: 2px 2px";
onclick="update_data('F')">&#8679;</button>
<!--span id="upArrow" style='font-size:50px; color:blue;'>&#8679;</span-->
<br>
<button class="btn btn-lefArrow"
style = "color:deepskyblue;font-size:50px;text-shadow: 2px 2px";
onclick="update_data('L')">&#8678;</button>
<!--span id="leftArrow" style='font-size:45px; color:blue;'>&#8678;</span-->
<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
<button class="btn btn-stop"
style = "background-color:red;color:white;font-size:15px;text-shadow: 2px 2px";
onclick="update_data('S')">STOP</button>
<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
<button class="btn btn-rightArrow"
style = "color:deepskyblue;font-size:50px;";
onclick="update_data('R')">&#8680;</button>
<!--span id="rightArrow" style='font-size:45px; color:blue;'>&#8680;</span-->
<br>
<span>&nbsp;&nbsp;</span>
<button class="btn btn-downArrow"
style = "color:deepskyblue;font-size:50px;text-shadow: 2px 2px";
onclick="update_data('D')">&#8681;</button>
<!--span id="downArrow" style='font-size:50px; color:blue;'>&#8681;</span-->
</div>
<div class="jumbotron text-left col-md-6">
<input id="message" type="text" placeholder="message to Pi"/>
<button class="btn btn-success" onclick="update_data()">Submit</button>
<p>
<span id="direction_dot" style="color:Green">&bull;</span> Car Direction: <span id="direction"> </span>
<br>
<span id="speed_dot" style="color:green">&bull;</span> Speed: <span id="speed">0.0</span>
<br>
<span id="distance_dot" style="color:green">&bull;</span> Distance Traveled: <span id="distance">0.0</span>
<br>
<span id="temprature_dot" style="color:green">&bull;</span> Temperature of the Pi: <span id="temperature">0.0</span>
<br>
Bluetooth return value: <span id="bluetooth"> </span>
</p>
</div>
</div>
</div>
</body>
</html>
index.js 0 → 100644
document.onkeydown = updateKey;
document.onkeyup = resetKey;
var server_port = 65432;
var server_addr = "192.168.1.36"; // the IP address of your Raspberry PI
function client(value){
const net = require('net');
var input = document.getElementById("message").value;
const client = net.createConnection({ port: server_port, host: server_addr }, () => {
// 'connect' listener.
console.log('connected to server!');
// send the message
//client.write(`${value}`);
client.write(value);
});
// get the data from the server
client.on('data', (data) => {
//document.getElementById("bluetooth").innerHTML = data;
document.getElementById("bluetooth").innerHTML = data;
console.log(data.toString());
client.end();
client.destroy();
});
client.on('end', () => {
console.log('disconnected from server');
});
}
// for detecting which key is been pressed w,a,s,d
function updateKey(e) {
e = e || window.event;
if (e.keyCode == '87') {
// up (w)
document.getElementById("upArrow").style.color = "green";
send_data("87");
}
else if (e.keyCode == '83') {
// down (s)
document.getElementById("downArrow").style.color = "green";
send_data("83");
}
else if (e.keyCode == '65') {
// left (a)
document.getElementById("leftArrow").style.color = "green";
send_data("65");
}
else if (e.keyCode == '68') {
// right (d)
document.getElementById("rightArrow").style.color = "green";
send_data("68");
}
}
// reset the key to the start state
function resetKey(e) {
e = e || window.event;
document.getElementById("upArrow").style.color = "grey";
document.getElementById("downArrow").style.color = "grey";
document.getElementById("leftArrow").style.color = "grey";
document.getElementById("rightArrow").style.color = "grey";
}
// update data for every 50ms
function update_data(value){
// setInterval(function(){
// get image from python server
client(value);
// }, 50);
}
main.js 0 → 100644
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1000,
height: 1000,
webPreferences: {
nodeIntegration: true,
contextIsolation:false,
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
// if (process.platform !== 'darwin') app.quit()
app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
This diff is collapsed.
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^10.1.15"
}
}
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment