asc/webcal-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2024-12-16

Browse Source
This commit is contained in:
Anthony Correa
2024-12-16 08:25:39 -06:00
parent 35677f7e95
commit f65cf3c1ed
7 changed files with 1961 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,26 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Python Debugger: Flask",
"type": "debugpy",
"module":"flask",
"cwd": "${workspaceFolder}/server",
"env": {
"FLASK_APP": "app.py",
"FLASK_DEBUG": "1"
},
"args": [
"run",
"--no-debugger",
"--no-reload"
],
"jinja": true,
"justMyCode": true,
"request": "launch",
}
]
}

96
server/app/static/style.css
View File

@@ -1,96 +0,0 @@
@import url('fonts/dinpro/dinpro.css');
@import url('fonts/noto-emoji.css');
@import url('fonts/openmoji.css');
@import url('fonts/weather-icons/weather-icons.css');
@font-face {
font-family: "Hellovetica";
src: url("fonts/hellovetica.ttf") format("truetype");
}
.body {
height:800px;
width:600px
}
.dashboard {
font-family: "Helvetica", sans-serif;
height: 800px;
width: 600px;
text-align: left;
font-size: 17px;
}
.panel {
position: relative;
height: 50%;
verical-align: top;
/* height: 250px; */
width: 100%;
}
.panel.top {
height: 35%;
}
.panel.bottom {
height: 65%;
}
.subpanel {
position: relative;
height:100%;
width:48%;
display: inline-block;
text-align: center;
}
.weather-icon {
position: relative;
height: 100%;
width: 100%;
object-fit: scale-down;
}
.week {
text-align: center;
}
.day {
border-style: solid;
display: inline-block;
min-height: 220px;
max-height: 220px;
width: 135px;
vertical-align: top;
margin: 1px;
align-items: center;
text-align: left;
}
.day-title{
background-color: black;
text-align: center;
color: white;
text-transform: uppercase;
font-weight: bold;
}
.event {
margin: 3pt;
background-color: white;
border-style: solid;
border-radius: 5px;
padding: 2px;
font-family: "Helvetica";
}
.daterange {
font-size: smaller;
}
.weather-icon {
font-size: 200px;
}

34
server/app/templates/dashboard.html
View File

@@ -2,29 +2,47 @@
<html> <html>
<head> <head>
<title>Dashboard ({{today.strftime('%-m/%-d, %-H:%M')}})</title> <title>Dashboard ({{today.strftime('%-m/%-d, %-H:%M')}})</title>
<link rel="stylesheet" href="style.css"> <!-- <link rel="stylesheet" href="style.css"> -->
<style>{% include "style.css"%}</style>
<meta name="viewport" content="width=600, height=800" /> <meta name="viewport" content="width=600, height=800" />
</head> </head>
<body> <body>
<div class="dashboard"> <div class="dashboard">
<div style="height:1em"></div> <div style="height:1em"></div>
<div class="panel top"> <div class="panel top">
<div class="subpanel"> <div class="splitpanel">
<div><i class="wi wi-owm-{{ weather.id }} weather-icon"></i></div> <div><i class="wi wi-owm-{{ weather.id }} weather-icon"></i></div>
<div>{{weather.main}}</div> <div>{{weather.main}}</div>
</div> </div>
<div class="subpanel" style="font-size: 60px;font-weight: bold;vertical-align:top; text-align:right;"> <div class="splitpanel big-text">
{{ today.strftime('%a') }}<br> {{ today.strftime('%a') }}<br>
{{ today.strftime('%b %-d') }}<br> {{ today.strftime('%b %-d') }}<br>
{{ today.strftime('%Y') }}<br> {{ today.strftime('%Y') }}<br>
</div> </div>
</div> </div>
<div class="panel bottom week"> <div class="panel bottom week">
<div class="row">
{% for day, events in days %} {% for day, events in days [:4] %}
<div class="day"> <div class="day">
<div id="dotw-1" class="day-title"> <div id="dotw-1" class="day-title{% if day == today.date()%} current-day{% endif %}">
{{ day.strftime('%A') }} {{ day.strftime('%a %-d') }}
</div>
{% for event in events %}
<div class="event">
{{ event.summary }}<br>
{% if not event.is_all_day %}
<span class="daterange">{{ event.range_str }}</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="row">
{% for day, events in days [4:] %}
<div class="day">
<div id="dotw-1" class="day-title{% if day == today.date()%} current-day{% endif %}">
{{ day.strftime('%a %-d') }}
</div> </div>
{% for event in events %} {% for event in events %}
<div class="event"> <div class="event">
@@ -38,5 +56,7 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<div style="height:1em;text-align: center;"><code>{{extra_debug}} </code><code>{{ today.strftime('%c') }}</code></div>
</div>
</body> </body>
</html> </html>

42
server/app/templates/dashboard_static.html
View File

@@ -1,42 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Dashboard ({{today.strftime('%-m/%-d, %-H:%M')}})</title>
<link rel="stylesheet" href="/style.css">
<meta name="viewport" content="width=600, height=800" />
</head>
<body>
<div class="dashboard">
<div style="height:1em"></div>
<div class="panel top">
<div class="subpanel">
<div><i class="wi wi-owm-{{ weather.id }} weather-icon"></i></div>
<div>{{weather.main}}</div>
</div>
<div class="subpanel" style="font-size: 60px;font-weight: bold;vertical-align:top; text-align:right;">
{{ today.strftime('%a') }}<br>
{{ today.strftime('%b %-d') }}<br>
{{ today.strftime('%Y') }}<br>
</div>
</div>
<div class="panel bottom week">
{% for day, events in days %}
<div class="day">
<div id="dotw-1" class="day-title">
{{ day.strftime('%A') }}
</div>
{% for event in events %}
<div class="event">
{{ event.summary }}<br>
{% if not event.is_all_day %}
<span class="daterange">{{ event.range_str }}</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</body>
</html>

64
server/app/templates/style.css
View File

@@ -1,32 +1,51 @@
@import url('http://127.0.0.1:5000/fonts/dinpro/dinpro.css'); @import url('http://127.0.0.1:5000/fonts/dinpro/dinpro.css');
@import url('http://127.0.0.1:5000/fonts/noto-emoji.css'); @import url('http://127.0.0.1:5000/fonts/noto-emoji.css');
@import url('http://127.0.0.1:5000/fonts/openmoji.css'); @import url('http://127.0.0.1:5000/fonts/openmoji.css');
@import url('http://127.0.0.1:5000/fonts/weather-icons/weather-icons.css'); @import url('http://10.0.1.128:56733/fonts/weather-icons/weather-icons.css');
* {
box-sizing: border-box; /* Include padding and borders in size calculations */
body { }
height: 800px; html, body {
width: 600px; width: 600px;
height: 800px;
margin: 0; /* Prevent any default margins */
padding: 0;
} }
.dashboard { .dashboard {
display: -webkit-box;
display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
font-family: sans-serif; font-family: sans-serif;
text-align: left; text-align: left;
font-size: 17px; font-size: 17px;
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0 auto; /* Center horizontally */
} }
.panel.top { .panel.top {
display: -webkit-box;
display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row; flex-direction: row;
flex:0; -webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
} }
.panel.top .splitpanel { .panel.top .splitpanel {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1; flex: 1;
text-align: center;
} }
.splitpanel.big-text { .splitpanel.big-text {
@@ -37,25 +56,46 @@ body {
} }
.splitpanel .weather-icon { .splitpanel .weather-icon {
font-size: 200px; font-size: 180px;
display: block;
margin: auto;
} }
.panel.bottom { .panel.bottom {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1; flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
} }
.panel.bottom.week .row { .panel.bottom.week .row {
display: -webkit-box;
display: -webkit-flex;
display: flex; display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1; flex: 1;
height: 50%; height: 50%;
} }
.panel.bottom.week .row .day { .panel.bottom.week .row .day {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical; /* Old WebKit property for column layout */
-webkit-box-direction: normal; /* Old WebKit property for forward direction */
-webkit-flex-direction: column; /* Flexbox column direction for modern WebKit */
flex-direction: column; /* Standard Flexbox column layout */
border-style: solid; border-style: solid;
width: 135px; width: 135px; /* Fixed width for each day */
vertical-align: top;
margin: 1px; margin: 1px;
align-items: center; align-items: stretch; /* Stretch children to fill the width (optional) */
justify-content: flex-start; /* Align children at the top */
text-align: left; text-align: left;
flex: 1; flex: 1;
} }
@@ -81,3 +121,7 @@ body {
border-radius: 5px; border-radius: 5px;
padding: 2px; padding: 2px;
} }
code {
font-size: .8em;
}

1838
server/app/templates/weather-icons.css Normal file
View File

File diff suppressed because it is too large Load Diff

21
server/app/views.py
View File

@@ -4,7 +4,7 @@ import os
import caldav import caldav
import datetime import datetime
from icalendar import cal, Event from icalendar import cal, Event
from flask import render_template, url_for, send_file, send_from_directory from flask import render_template, url_for, send_file, send_from_directory, request
from .models import Event from .models import Event
import requests import requests
import imgkit import imgkit
@@ -88,27 +88,27 @@ def dashboard():
days.append((single_date, days_events)) days.append((single_date, days_events))
# breakpoint() extra_debug = request.args.get('extra', '')
pass
# r = "<br>".join([event.vobject_instance.vevent.summary.value for event in events_fetched if event.vobject_instance.vevent.dtstart.value < datetime.now()]) # r = "<br>".join([event.vobject_instance.vevent.summary.value for event in events_fetched if event.vobject_instance.vevent.dtstart.value < datetime.now()])
return render_template("dashboard_static.html", return render_template("dashboard.html",
days=days, days=days,
today=today, today=today,
weather=weather() weather=weather(),
extra_debug=extra_debug
) )
@app.route('/image') @app.route('/image')
def dashboard_image(): def dashboard_image():
extension = "png"
page = dashboard() page = dashboard()
out_file = os.path.join(os.path.dirname(__file__), out_file = os.path.join(os.path.dirname(__file__),
'static', "out.bmp" 'static', f'out.{extension}'
) )
s = imgkit.from_string( s = imgkit.from_string(
page, page,
out_file, out_file,
options={ options={
'width':600, 'width':600,
'height':800, 'height':800,
"disable-smart-width": "", "disable-smart-width": "",
@@ -117,12 +117,9 @@ def dashboard_image():
'static', 'static',
) )
}, },
css=os.path.join(os.path.dirname(__file__), # css=os.path.join(os.path.dirname(__file__),'static','style.css')
'static',
'style.css'
)
) )
image_file = Image.open(out_file) # open colour image image_file = Image.open(out_file) # open colour image
image_file = ImageOps.grayscale(image_file) image_file = ImageOps.grayscale(image_file)
image_file.save(out_file, 'BMP') image_file.save(out_file, 'BMP')
return send_from_directory(directory = 'static', path='out.bmp', as_attachment=False, attachment_filename='out.bmp') return send_from_directory(directory = 'static', path=f'out.{extension}', as_attachment=False, attachment_filename=f'out.{extension}')