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 |
 |
| 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 WindowsIIS 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.