ChrisThe web page is split into three parts: A title bar displaying the makerspace logo; a web cam stream and a control panel. To make the webpage quickly I've used frames, so it may not look too good on all browsers etc. The logo image and index.html need to be in the folder /var/www. this is because the image is server up using apache2 and the rest is done by webiopi.
sudo cp -R /mnt/sda1/apache/index.html /var/www
sudo cp -R /mnt/sda1/apache/makerspace.png /var/www
Copy the web page to /usr/share/webiopi/htdocs
sudo cp -R /mnt/sda1/htdocs/ /usr/share/webiopi/htdocs/
The index.html in htdocs must be edited with the IP address of the Pi you are using. Port forwarding could be set up to view this webpage in the wild.
Webiopi Control Panel
The code required to display the Control Panel buttons and control the Raspberry Pi's GPIO pin states is written in an HTML page using JavaScript and CSS. The '/webiopi.js' (the Webiopi client library script) is included in the <head> section along with the custom script to create the buttons and their behaviour, and the CSS that defines the button and text colours and dimensions. The Control Panel HTML that is generated from the JavaScript is appended to a <div> tag with an ID named 'content', and this <div> tag is placed in the <body> section of the page. The <div> tag remains empty until the page is loaded on the client web browser. When the client loads the page, the HTML content is loaded dynamically via the JavaScript instructions.
We based our initial Control Panel design from the rather succinct but comprehensive example on the Webiopi wiki.
Following on from this, we were able to customise the functionality to suit our own purpose by using the sensibly laid-out Webiopi JavaScript and CSS references.
...and we finally ended up with the HTML for the Control Panel
All of the files required are attached to the project page.
Discussions
Become a Hackaday.io Member
Create an account to leave a comment. Already have an account? Log In.