Yes We Can — My first Proof of Concept

I’m currently working on the User Interface for an open source robot project. While at a work session last night, someone asked if it was possible to add a live video stream to the interface. I stated it absolutely was possible. The next question, “how hard is it?”

Let me check…

I found some code that only relied on basic HTML and a little JavaScript. It was empowering to be able to look at the code and feel confident it wasn’t malicious in any way. I created a new file on my computer and opened the HTML document. It didn’t work. I remember that while using JavaScript in the past I have utilized various task runners. Task runners accomplish many things including compiling and minifying files, check for changes and updating the browser. I quickly set up the files to utilize Gulp and ran it again.

My beautiful face back at me on the screen.

It’s my first proof of concept!

There are many steps between the final goal, and what I could achieve in a half hour on my Mac. My Mac already has a webcam and my preferred dev environment installed. It will be quite a different task as I anticipate several learning curves. One example I know will come up as a learning curve is my text editor of choice (Sublime) won’t work on a Raspberry Pi, but I’m excited by the challenge. Additionally, I expect I’ll have to install the webcam into the Pi and configure it using command line interfaces, but that is speculation.

Adding CSS framework classes to PHP generated Code

Integrating HTML into WordPress (WP) for a custom WP theme is fairly straightforward…until I went to style my creation using CSS. I was looking at my navbar which I wanted to style differently. To achieve what I wanted I consulted the documentation for the CSS framework I am using in this project which is Materialize. The documentation indicates this change is easy, I only needed to add a class.

I tested the class quickly using my developer tools in Google Chrome. The desired outcome was achieved and went to my header.php file to add the class. It was different because it is really easy to add classes to static pages and my previous experience with custom WP themes has not had this particular puzzle to solve. A little trial and error indicated it would not work to simply wrap the portion of PHP that was generating the code I wished to manipulate with a div of that class.

A picture of the php code as modified
The last line ‘menu_class’ => ‘classes-go-here’, add the Materialize CSS framework styling into the webpage.

I did a little Googling and found a single line of code should solve my puzzle. I added it and enjoyed the satisfaction of seeing the results when I tested it out.

Success! 🙂