gal
/
eink-display
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add render folder with dummy data, add rpi folder

This commit is contained in:
Gal 2024-04-05 22:36:29 +02:00
parent 84aae448de
commit 548bd4db3e
Signed by: gal
GPG Key ID: F035BC65003BC00B
7 changed files with 243 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
render/app.py Normal file
View File

@ -0,0 +1,4 @@
from render import app
if __name__ == "__main__":
app.run()

40
render/render.py Normal file
View File

@ -0,0 +1,40 @@
import asyncio
from pyppeteer import launch
import os
from PIL import Image
from flask import Flask, send_file
import io
app = Flask(__name__)
async def render_html_to_png(html_file_name, css_file_name, output_file_name):
browser = await launch()
page = await browser.newPage()
await page.setViewport({'width': 800, 'height': 480})
current_dir = os.path.dirname(__file__)
html_file_path = os.path.join(current_dir, html_file_name)
css_file_path = os.path.join(current_dir, css_file_name)
output_file_path = os.path.join(current_dir, output_file_name)
await page.goto(f'file://{html_file_path}')
await page.addStyleTag({'path': css_file_path})
screenshot = await page.screenshot()
image = Image.open(io.BytesIO(screenshot))
image.save(output_file_path)
await browser.close()
@app.route('/weather', methods=['GET'])
def generate_weather_image():
html_file_path = 'weather.html'
css_file_path = 'styles.css'
output_file_path = 'weather.png'
asyncio.get_event_loop().run_until_complete(render_html_to_png(html_file_path, css_file_path, output_file_path))
return send_file(output_file_path, mimetype='image/png')
if __name__ == "__main__":
app.run(host='0.0.0.0', port=5233)

98
render/styles.css Normal file
View File

@ -0,0 +1,98 @@
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.weather-container {
width: 700px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.additional-info {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.info-item {
flex: 0 1 calc(50% - 10px);
padding: 10px;
background-color: #f9f9f9;
border-radius: 5px;
}
.info-label {
font-size: 14px;
color: #666;
}
.info-value {
font-size: 16px;
color: #333;
}
.current-weather {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.weather-icon {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 50%;
}
.temperature {
font-size: 24px;
color: #333;
}
h2 {
margin-top: 20px;
color: #666;
}
.forecast {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.forecast-item {
flex-basis: calc(10% - 10px);
text-align: center;
padding: 10px;
background-color: #f9f9f9;
border-radius: 5px;
margin-bottom: 10px;
}
.forecast-time {
font-size: 14px;
color: #666;
}
.forecast-icon {
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
margin-bottom: 5px;
}
.forecast-temperature {
font-size: 16px;
color: #333;
}

80
render/weather.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="weather-container">
<h1>Berlin &dot; 13.12.2024 &dot; 09:00</h1>
<div class="current-weather">
<div class="weather-icon">
</div>
<div class="temperature">
23°C
</div>
</div>
<div class="additional-info">
<div class="info-item">
<div class="info-label">Wind Gust</div>
<div class="info-value">10 km/h</div>
</div>
<div class="info-item">
<div class="info-label">Sunrise</div>
<div class="info-value">06:30 AM</div>
</div>
<div class="info-item">
<div class="info-label">Sunset</div>
<div class="info-value">04:30 PM</div>
</div>
<div class="info-item">
<div class="info-label">Precipitation Rate</div>
<div class="info-value">20%</div>
</div>
</div>
<h2>Today's Forecast</h2>
<div class="forecast">
<div class="forecast-item">
<div class="forecast-time">09:00</div>
<div class="forecast-icon">
</div>
<div class="forecast-temperature">20°C</div>
</div>
<div class="forecast-item">
<div class="forecast-time">11:00</div>
<div class="forecast-icon">
</div>
<div class="forecast-temperature">18°C</div>
</div>
<div class="forecast-item">
<div class="forecast-time">13:00</div>
<div class="forecast-icon">
</div>
<div class="forecast-temperature">18°C</div>
</div>
<div class="forecast-item">
<div class="forecast-time">15:00</div>
<div class="forecast-icon">
</div>
<div class="forecast-temperature">18°C</div>
</div>
<div class="forecast-item">
<div class="forecast-time">17:00</div>
<div class="forecast-icon">
</div>
<div class="forecast-temperature">18°C</div>
</div>
<div class="forecast-item">
<div class="forecast-time">19:00</div>
<div class="forecast-icon">
</div>
<div class="forecast-temperature">18°C</div>
</div>
</div>
</div>
</body>
</html>

BIN
render/weather.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

0
display.py → rpi/display.py
View File

21
rpi/fetch_image.py Normal file
View File

@ -0,0 +1,21 @@
import requests
def fetch_image():
api_url = "https://st2.depositphotos.com/22162388/50231/i/450/depositphotos_502316854-stock-photo-api-application-programming-interface-function.jpg" # Replace this with the actual API URL
try:
response = requests.get(api_url)
if response.status_code == 200:
image_data = response.content
with open("image.png", "wb") as file:
file.write(image_data)
print("Image saved successfully as image.png")
else:
print(f"Failed to fetch image: {response.status_code}")
except Exception as e:
print(f"An error occurred: {e}")
fetch_image()