What you'll learn

Setup their very own Raspberry Pi powered smart mirror
Write basic HTML and CSS code for a smart mirror web page hosted on an Apache 2 HTTP server
Write JavaScript code to create a digital clock element for aforementioned web page
Write PHP code to read and display RSS feeds
Setup Chromium browser on the Raspberry Pi to autostart on boot

Course content

3 sections • 15 lectures • 59m total length

What will you learn from this course?3:23
This lecture will focus upon the course itself. It will act as an introduction to the course content, and will also talk about what you will learn from this course.
Smart mirror project requirements2:40
This lecture talks about the various hardware and software requirements of this course.

This lecture also contains an brief introduction to the Apache HTTP server application.
Getting started - setting up your Pi7:21
The beginning of our smart mirror project, this lecture deals with setting up your Pi. This involves installing Apache HTTP server and PHP5 on the Pi, and making changes to the Raspberry Pi boot and timezone configurations.
Section 1 Quiz:

The HTML script7:14
Now that we have setup the Pi, this lecture will teach you how to begin writing the code for our smart mirror web page. This particular lecture deals with writing the HTML script. Contains detailed, step-by-step explanations of the code and the various HTML tags used.
HTML file (without PHP coding) - index.php0:03
This lecture contains the PHP code for the homepage design
The JavaScript clock module6:22
Having written our base web page HTML code, we can now move on to adding the elements to the web page. This lecture will teach you how to write a JavaScript program using the Date() object to design a digital clock display, and then integrate it into the previously taught HTML code.
JavaScript file - clock.js0:03
The lecture contains the java-script code for the clock module
Section 2 Quiz - HTML and JavaScript
Displaying an RSS feed using PHP8:54
Now, this lecture deals with reading a RSS feed using PHP and displaying the same. This lecture will teach you how to write PHP code within your existing HTML code to read a RSS feed link and then process the read data before displaying it as a HTML element.
In the smart mirror project, we will be using this method to create multiple elements employing RSS feed links for news, and weather forecasts.
PHP file - index.php0:03
The lecture contains Links to the .php, .js, and .css files for Smart Mirror Web Page.
CSS - designing our web page8:10
Now that all our web page elements are in place, we move on to designing the web page. This lecture deals with the use of Cascading Style Sheet (CSS) files to control the style of our web page. Starting from simply setting the background of our web page to black, to altering the physical attributes of the text in our HTML code, we will learn to modify the web page to our satisfaction.
CSS file - style.css0:03
The lecture contains the CSS code for the webpage design
Section 2 Quiz - PHP and CSS

Setting up our smart mirror7:16
Having completed the setting up of the web page, all that's left to do now is to setup the Pi to load smart mirror web page. This lecture deals with learning how to force the Pi to automatically load the web page using chromium browser on boot.
Smart mirror - connections and final setup3:04
This lecture is the final step in creating a smart mirror. This lecture deals with setting up the monitor, adding the mirror or mirror film to complete the look of our mirror, and then connecting it to the Raspberry Pi.
Real time demonstration - Smart mirror2:17
The lecture contains the real time demonstration of the smart mirror project
Conclusion2:51
The final lecture deal is merely a conclusion to the course, adding on suggestions to continue the learning experience, and recapping the topics that were taught.

Requirements

You should know how to setup and work on a Raspberry Pi
You should understand basic Linux commands and utilities
Rudimentary knowledge of HTML and CSS is necessary to understand the project and to develop the project further
Elementary knowledge of JavaScript and PHP code is also necessary if you wish to understand and develop/modify the project
While this course does not teach or include any woodwork involved in completing the mirror, carpentry skills can be of use in crafting your mirror frame/cabinet

Description

This course is meant as a active learning/DIY project to learn the basics of scripting languages, while working on something fun.

This course will focus upon teaching you to setup and build your own smart mirror display. This involves creating and coding a custom web page and hosting it on a Raspberry Pi using the Apache HTTP server application.

To learn how to build your own magic mirror, we will first focus on writing a base HTML script for the website, and adding basic elements - a clock, a periodically updating news feed, and a periodically updating weather feed, to it. Once this is done, we will create a cascading style sheet (CSS) doc and customize our web page to give us the required display for a smart mirror.

This course involves the use of basic concepts from multiple programming languages. We will be using JavaScript to program the clock display. We will also be using PHP for the two RSS feeds - news and weather. Finally, we will put all this together in our HTML script and edit the presentation of our HTML document using a CSS file to make the display visible through a partially mirrored surface.

Who this course is for:

This course is meant for anyone interested in setting up their own Raspberry Pi powered smart mirror
This course is also meant for programmers with a very basic working knowledge of HTML, CSS, JavaScript, or PHP, to learn the basics of the smart mirror and then customize/improve it as a learning experience

What you'll learn

Explore related topics

Course content

Smart mirror - getting started3 lectures • 13min

Smart mirror - coding the web page8 lectures • 31min

Smart mirror - cleaning up4 lectures • 15min

Requirements

Description

Who this course is for: