Twitter Bootstrap and ROS

Working on the BeagleBone Black and ROS, I started playing with the Twitter Bootstrap framework. Its a combination of CSS and Javascript libraries that make is much easier to create a website from scratch. I had heard of it and seen a few projects but never dived into it. With the new robot running ROS which has a websocket interface, I ended up trying Bootstrap. Here are few resources I used to get started plus a few screenhots of what I am working on. Once it is in a usable state I will post it on Github and a guide on how to use it. In the meantime I will try to post what I can.

Get Bootstrap: http://getbootstrap.com/
     Good getting started resources



I used this site to get MySQL authenication working with Bootstrap for the UI.
http://www.wikihow.com/Create-a-Secure-Login-Script-in-PHP-and-MySQL

PHP Manual on using MySQLi in a prepared statement which is more secure.
http://php.net/manual/en/mysqli.prepare.php

Guide to making nice looking tables with rounded corners
http://www.red-team-design.com/practical-css3-tables-with-rounded-corners

List of Bootstrap components including a library of font icons
http://getbootstrap.com/components/

Quick and easy button generator
http://charliepark.org/bootstrap_buttons/

CSS gradient generator
http://www.colorzilla.com/gradient-editor/

Bootstrap Theme designer
http://www.bootstrapthemeroller.com/twitter-bootstrap-themeroller.html

Bootstrap docs with more info
http://bootstrapdocs.com/v2.3.1/docs/base-css.html

Here is a site with a jquery autocomplete example that I have yet to try
http://www.pontikis.net/blog/jquery-ui-autocomplete-step-by-step

Screenshots

Login Page - Remember me not implemented yet.

Navbar and Admin menu

The main mage currently shows a video feed from the robot and the LED status by changing the color of a button below the image. The video is streaming in real time using mjpeg-server and usb_cam nodes. These nodes need to be cross-compiled to work on the BBB but work fine on x86. I will have another post about this. This a proof of concept that I will be building upon now that the basics work. I am using ROSJSLIB that can talk to ROS using websockets, which allows for a real-time continuous bi-directional link. Pretty cool stuff.

Main page after login

Here is a animated gif of the LED status button. The Arduino Mega is running ROS_Arduino_Bridge that connects with a python program on the BBB that handles the subscriptions and publishing of data to the ROS stack. This makes the functions of the Arduino globally accessible within the ROS stack without any special code or modifications.

LED Status using websockets

Add, edit, delete users

The user page was the hardest to get working. But now I can add, delete and even edit users. For the edit user function I am using the Bootstrap modal shown below.

Edit user modal

I plan on changing the colors but this gives an idea of what is possible with not too much effort. Bootstrap really simplifies the UI design while keeping a modern look. To get the modal to load the user you clicked on I had to use some JQuery to modify the value of the textbox based on the ID of the button you clicked which is linked to the user id.


This site is a huge improvement over the ASPX one I had created previously which was dependent on Windows and IIS.  This site can run on Linux or Windows\IIS with MySQL which can run on either. Once development is done on the website I will move it to the BBB so that the robot is self contained.