Create Web Dashboard for IOT Robot Control – Part6

We are in part 7 of tutorial series of Building Raspberry Pi Line Follower Robot! If you want to jump back and forth or missed any of my previous tutorials – here is the consolidated list.

All Tutorials to Build IOT Raspberry Pi Robot

  1. Build Raspberry Pi Robot controlled by Internet – IOT Robot
  2. Setup Static IP Address on Raspberry Pi
  3. Installing Web Server on Raspberry Pi
  4. Controlling Raspberry Pi LED via internet
  5. Raspberry Pi LED controlled by Internet
  6. Build REST API using Python and Flask
  7. Raspberry Pi Robot Logitech Camera Server
  8. Create Web Dashboard for IOT Robot Control

Entire project Video Tutorial


Wow! We have everything ready now. We just need to consume APIs and host it on Nginx so that it is accessible over internet. You must have basic knowledge of HTML, CSS, Bootstrap and Javascript. I have used this from bootstrap template:

  • Login Page: http://getbootstrap.com/docs/4.0/examples/signin/
  • Dashboard: http://getbootstrap.com/docs/4.0/examples/dashboard/

Libraries Used:

  • jQuery
  • Toastr
  • Popper
  • Bootstrap

Here is what I have built:

Login page

Dashboard

Javascript Code

Here is the js file which consumes the web api. The code is very easy and self explanatory:
global.js

var baseuri = 'http://192.168.1.100:9000';

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

login.js

function LoginClicked(){
	var username = $("#inputUsername").val();
	var password = $("#inputPassword").val();
	
	$.ajax({
			type: "POST",
			url: baseuri + "/api/" + "login",
			dataType: "json",
			headers: {
				"Authorization": "Basic " + btoa(username + ":" + password)
			},
			success: function (data	){
				setCookie("username",username,1);
				setCookie("password",password,1);
				location.href = "dashboard.html";
				toastr.success("Login Successful", 'IOT Robot Sensor');
			},
			error: function(xhr, status, error) {
				if(error == "UNAUTHORIZED")
				{
					toastr.error("Username/Password incorrect");
				}
				else
				{
					toastr.error("Status: " + status + " Error: " + error, "Oops!");
				}
			}
	});
}

custom.js



var username = "";
var password = "";
$(document).ready(function(){
	username = getCookie("username");
	password = getCookie("password");
	if (username != "") {
        toastr.success("Welcome again " + username);
    } else {
        location.href = "login.html";
    }
	var width = $( window ).width();
	var height = $( window ).height();
	
	if(width < 640){
		$("#streamimg").width(width - 60);
	}
});

function LedOn(){
	CallControlApi("lighton");
}
function LedOff(){
	CallControlApi("lightoff");
}
function Forward(){
	CallControlApi("forward");
}
function Left(){
	CallControlApi("left");
}
function Brake(){
	CallControlApi("brake");
}
function Right(){
	CallControlApi("right");
}
function Reverse(){
	CallControlApi("reverse");
}
function FrontSensor(){
	$.ajax({
			type: "GET",
			url: baseuri + "/api/" + "frontsensor",
			dataType: "json",
			headers: {
				"Authorization": "Basic " + btoa(username + ":" + password)
			},
			success: function (data){
					$("#response").prepend(JSON.stringify(data) + '</br>');
					toastr.success(data.reading + " cms", 'IOT Robot Sensor');
			},
			error: function(xhr, status, error) {
				toastr.error("Status: " + status + " Error: " + error, "Oops!");
			}
	});
}

function AllSideSensor(){
	$.ajax({
			type: "GET",
			url: baseuri + "/api/" + "detailsensorreadings",
			dataType: "json",
			headers: {
				"Authorization": "Basic " + btoa(username + ":" + password)
			},
			success: function (data){
				$("#response").prepend(JSON.stringify(data) + '</br>');
				toastr.success("Left: " + data.detailsensorreadings[0] + " cms,"
					+ "Left1: " + data.detailsensorreadings[1] + " cms,"
					+ "Straight: " + data.detailsensorreadings[2] + " cms,"
					+ "Right1: " + data.detailsensorreadings[2] + " cms,"
					+ "Right: " + data.detailsensorreadings[3] + " cms"
				, 'IOT Robot Sensor');
			},
			error: function(xhr, status, error) {
				toastr.error("Status: " + status + " Error: " + error, "Oops!")
			}
	});
}


function CallControlApi(control){
	$.ajax({
		type: "GET",
		url: baseuri + "/api/" + control,
		dataType: "json",
		headers: {
			"Authorization": "Basic " + btoa(username + ":" + password)
		},
		success: function (data){
			$("#response").prepend(JSON.stringify(data) + '</br>');
			var msg = '';
			if(control == "lighton"){
				msg = 'LED 37 is On';
			}
			else if(control == 'lightoff'){
				msg = 'LED 37 is Off';
			}
			else if(control == 'brake'){
				msg = 'I am resting now!';
			}
			else{
				msg = 'I am moving ' + control;
			}
			toastr.success(msg, 'IOT Robot');
	    },
		error: function(xhr, status, error) {
			toastr.error('Error in calling: ' + control + " Status: " + status + " Error: " + error, "Oops!")
		}
	});

	
}

I have checked in all the code in Repo so you can view and use it for your own projects.

Here is the URL again: https://github.com/vishalavalani/Raspberry-Pi-Robotics

I will be uploading the final video soon! Stay tuned!

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *