This guide will help you create an IoT Smart Mirror that displays current news headlines and temperature information. The smart mirror uses a Raspberry Pi and various APIs to provide real-time updates, making it a useful and interactive addition to any room.

Components Required

  • Raspberry Pi (Model 3 or later)
  • Two-way mirror or acrylic mirror sheet
  • Display monitor or screen
  • Wi-Fi or Ethernet connection
  • MicroSD card (for Raspberry Pi OS)
  • Power supply (for Raspberry Pi and monitor)
  • API keys for news and weather services (e.g., OpenWeatherMap, NewsAPI)

Setting Up the Hardware

Follow these steps to set up the hardware:

  1. Prepare the Mirror and Display

    Mount the two-way mirror or acrylic mirror sheet in front of the display monitor. The monitor will be placed behind the mirror, and the reflection will be visible through the mirror.

  2. Connect the Raspberry Pi

    Connect the Raspberry Pi to the monitor using an HDMI cable. Ensure that the Raspberry Pi has a stable power supply and an internet connection.

  3. Install the Software

    Prepare a microSD card with Raspberry Pi OS and insert it into the Raspberry Pi. Boot up the Raspberry Pi and connect it to the internet.

Programming the Smart Mirror

Write the code to fetch news headlines and temperature data and display it on the smart mirror. Below is an example using Python and Flask to serve the data:


                from flask import Flask, render_template
                import requests

                app = Flask(__name__)

                # Configuration
                NEWS_API_KEY = "YOUR_NEWS_API_KEY"
                WEATHER_API_KEY = "YOUR_WEATHER_API_KEY"
                CITY = "YOUR_CITY"

                @app.route('/')
                def index():
                    # Fetch news headlines
                    news_response = requests.get(f"https://newsapi.org/v2/top-headlines?country=us&apiKey={NEWS_API_KEY}")
                    news_data = news_response.json()
                    headlines = [article['title'] for article in news_data['articles'][:5]]  # Get top 5 headlines

                    # Fetch weather information
                    weather_response = requests.get(f"http://api.openweathermap.org/data/2.5/weather?q={CITY}&appid={WEATHER_API_KEY}&units=metric")
                    weather_data = weather_response.json()
                    temperature = weather_data['main']['temp']

                    return render_template('index.html', headlines=headlines, temperature=temperature)

                if __name__ == '__main__':
                    app.run(host='0.0.0.0', port=80)

This Python code uses Flask to create a web server that fetches news headlines and weather data. It then serves this data to a webpage that will be displayed on the smart mirror.

Creating the Display Template

Create an HTML template to display the news headlines and temperature information on the smart mirror. Save this file as `templates/index.html`:


                <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Smart Mirror</title>
                        <style>
                            body {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                height: 100vh;
                                background-color: black;
                                color: white;
                                font-family: Arial, sans-serif;
                                text-align: center;
                            }
                            h1 {
                                font-size: 2rem;
                            }
                            .news, .temperature {
                                margin: 20px 0;
                            }
                        </style>
                    </head>
                    <body>
                        <div class="news">
                            <h1>Top News Headlines</h1>
                            <ul>
                                {% for headline in headlines %}
                                    <li>{{ headline }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="temperature">
                            <h1>Current Temperature</h1>
                            <p>{{ temperature }} °C</p>
                        </div>
                    </body>
                    </html>

This HTML template displays the news headlines and temperature data fetched by the Flask application. The CSS styles ensure that the information is centered and easily readable on the smart mirror.

Setting Up Cloud Integration

Configure your Raspberry Pi to run the Flask application on startup. Ensure that the Flask server is accessible and properly displays the content on the smart mirror.

Testing and Calibration

Test the smart mirror by verifying that news headlines and temperature information are correctly displayed. Adjust the HTML and CSS if needed to ensure the content is appropriately shown through the mirror.

Conclusion

The IoT Smart Mirror with News and Temperature provides a modern and interactive way to stay updated on current events and weather conditions. By integrating a Raspberry Pi with web technologies and APIs, this project enhances your daily routine with useful information displayed elegantly on a smart mirror.