Get Bootstrap: http://getbootstrap.com/
Good getting started resources
I used this site to get MySQL authenication working with Bootstrap for the UI.
PHP Manual on using MySQLi in a prepared statement which is more secure.
Guide to making nice looking tables with rounded corners
List of Bootstrap components including a library of font icons
Quick and easy button generator
CSS gradient generator
Bootstrap Theme designer
Bootstrap docs with more info
Here is a site with a jquery autocomplete example that I have yet to try
|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.