Skip to content

Commit

Permalink
feat: update the layout and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
ugomeda committed Jan 27, 2025
1 parent a44deb7 commit 952b771
Show file tree
Hide file tree
Showing 16 changed files with 136 additions and 179 deletions.
2 changes: 0 additions & 2 deletions config.example.toml
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
[display]
width = 1200
height = 825
rss_url = "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
location = [40.75, -73.99]
timezone = "America/New_York"
Expand Down
4 changes: 3 additions & 1 deletion inkplate_dashboard/chrome.py
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ def screenshot_display(display: DisplayConfiguration) -> bytes:
"--force-device-scale-factor=1",
"--disable-lcd-text", # B&W display
f"--screenshot={screenshot_path}",
f"--window-size={display.width},{display.height}",
"--window-size=825,1200",
"--virtual-time-budget=10000",
"--timeout=10000", # load fonts
"http://127.0.0.1:8000/live/html",
],
Expand All @@ -60,6 +61,7 @@ def screenshot_display(display: DisplayConfiguration) -> bytes:
palette_img.putpalette(palette * 32)
img = Image.open(screenshot_path).convert("RGB")
img = img.quantize(kmeans=0, palette=palette_img).convert("L")
img = img.rotate(90, expand=1)

output = io.BytesIO()
img.save(output, "png")
Expand Down
2 changes: 0 additions & 2 deletions inkplate_dashboard/config.py
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ class UnitEnum(str, Enum):


class DisplayConfiguration(BaseModel):
width: int
height: int
rss_url: HttpUrl
location: tuple[float, float]
locale: str
Expand Down
3 changes: 2 additions & 1 deletion inkplate_dashboard/sources/weather.py
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,12 @@ def get_weather(display: DisplayConfiguration) -> list[WeatherObservation]:
# Fetch JSON
request = requests.get(
MET_API_URL,
headers={"user-agent": "inkplate-dashboard [email protected]"},
headers={"user-agent": "github.com/ugomeda/inkplate-dashboard"},
params={
"lat": f"{display.location[0]:.2f}",
"lon": f"{display.location[1]:.2f}",
},
timeout=3,
)
request.raise_for_status()
data = request.json()
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
1 change: 1 addition & 0 deletions inkplate_dashboard/statics/js/textFit.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

216 changes: 87 additions & 129 deletions inkplate_dashboard/styles/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,16 @@
@font-face {
font-family: "Roboto Condensed";
font-style: normal;
font-display: swap;
font-display: block;
font-weight: 400;
src: url(./fonts/roboto-condensed-latin-400-normal.woff2) format("woff2"), url(./fonts/roboto-condensed-latin-400-normal.woff) format("woff");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
margin: 0;
}

// Font configuration
$font-size-default: 25px;
$font-size-large: 30px;
$font-size-default: 30px;
$font-size-huge: 40px;
$font-size-current-temp: 60px;
$font-size-current-temp: 70px;
$font-family-serif: "Noto Serif", serif;
$font-family-default: "Open Sans", serif;
$font-family-temp: "Roboto Condensed", sans-serif;
Expand All @@ -42,173 +37,136 @@ $display-background: #000;
$display-padding: 5px;
$display-text-color: #fff;

// Configuration for the inner background
$content-background: rgb(200, 200, 200);
$content-border-radius: 12px;
$spacing: 30px;

// Configuration for widgets
$widget-background: #fff;
$widget-border: 1px solid rgb(130, 130, 130);
$widget-border-radius: 8px;
$widget-spacing: 14px;
$widget-inner-padding: 14px;

// Layout
body {
margin: 0;
}

#display {
background: $display-background;
padding: $display-padding;
font-size: $font-size-default;
font-family: $font-family-default;
width: 825px;
height: 1200px;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: hidden;
font-weight: 300;
font-size: $font-size-default;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
font-family: $font-family-default;
}

#content {
background: $content-background;
padding: $widget-spacing/2;
border-radius: $content-border-radius;
flex-grow: 1;
display: flex;
flex-direction: row;
}

.column {
flex: 2;
height: 100%;
display: flex;
flex-direction: column;
}

.widget {
background: $widget-background;
border: $widget-border;
border-radius: $widget-border-radius;
margin: $widget-spacing/2;
overflow: hidden;
}
h1 {
height: 100px;
padding: $spacing;
margin: 0;
box-sizing: border-box;

// Date
#header {
font-family: $font-family-serif;
font-size: $font-size-large;
color: $display-text-color;
font-size: $font-size-huge;
font-weight: 700;
padding: $widget-spacing/2 0 $widget-spacing/2 $widget-inner-padding+$widget-spacing;
}
line-height: 100px - 2*$spacing;

/* News Widget */
.widget-headlines {
@extend .widget;
flex: 1 0 0%;
display: flex;
flex-direction: column;
justify-content: center;

.content {
margin: $widget-inner-padding;
display: -webkit-box;
-webkit-line-clamp: 11;
-webkit-box-orient: vertical;
overflow: hidden;

h1 {
font-family: $font-family-serif;
font-size: $font-size-default;
margin: 0 0 $widget-inner-padding 0;
flex-shrink: 0;
}
}
color: #fff;
background-color: #000;
}

/* News Widget */
.widget-large-headline {
@extend .widget;
flex: 3;
display: flex;
flex-direction: column;

.image {
flex-grow: 1;
background-size: cover;
background-position: center center;
}

.content {
margin: $widget-inner-padding;
font-size: $font-size-large;

display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
overflow: hidden;

h1 {
margin: 0 0 $widget-inner-padding 0;
font-family: $font-family-serif;
font-weight: 700;
font-size: $font-size-huge;
}
}
}
.widget-headlines {
height: 900px;
/* will be overridden by textfit, all the following sizes are relative */
padding: $spacing $spacing 0 $spacing;
box-sizing: border-box;

.widget-large-headline-smaller {
.content {
font-size: $font-size-default;
line-height: 1.25;

h1 {
font-size: $font-size-large;
.widget-headlines-inner { /* We need this because textFit messes with flexbox */
height: 900px - $spacing;
display: flex;
flex-direction: column;
justify-content: space-evenly;
box-sizing: border-box;

article {
padding-bottom: $spacing;

h2 {
margin: 0 0 .4em 0;
font-family: $font-family-serif;
font-size: 1.3em;
font-weight: 700;
}

.widget-headlines-content {
display: flex;
flex-direction: row;
text-align: justify;

.widget-headlines-illustration {
margin: .125em 1em .125em 0;
border: 1px solid #000;
background-size: cover;
background-position: center center;
width: 250px;
flex-grow: 0;
flex-shrink: 0;
}
}
}
}
}

/* Weather */
.widget-weather {
@extend .widget;
height: 200px;
overflow: hidden;

box-sizing: border-box;
padding: 0 $spacing $spacing $spacing;

display: flex;
flex-direction: column;
flex-direction: row;
justify-content: space-between;
align-items: center;

background-color: #000;
color: #fff;

.widget-weather-current {
display: flex;
align-items: center;

.widget-weather-current-icon {
height: 110px;
width: 110px;
filter: brightness(80%); /* Not very readable on inkplate otherwise */
margin: $widget-inner-padding;
img {
height: 140px;
width: 140px;
margin-right: $spacing;
}

.widget-weather-current-details {
flex: 1;
margin: $widget-inner-padding;
svg {
width: 24px;
height: 24px;
}

.widget-weather-current-temperature {
font-family: $font-family-temp;
font-size: $font-size-current-temp;
font-weight: 300;
line-height: $font-size-current-temp;
font-weight: 400;
}
}

.widget-weather-table {
border-top: $widget-border;
padding: $widget-inner-padding 0;
display: flex;
justify-content: space-evenly;
.widget-weather-next {
text-align: center;

img {
margin-top: 5px;
width: 60px;
height: 60px;
filter: brightness(80%); /* Not very readable on inkplate otherwise */
width: 75px;
height: 75px;
}

.widget-weather-table-temp {
font-family: $font-family-temp;
font-weight: 300;
font-weight: 400;
}
}
}
22 changes: 11 additions & 11 deletions inkplate_dashboard/templates/display.html
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
{% from 'widget-headlines.html' import widget_headlines %}
{% from 'widget-large-headline.html' import widget_large_headline %}
{% from 'widget-weather.html' import widget_weather %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>e-paper display</title>
<title>Inkplate 10 display</title>
<link rel="stylesheet" type="text/css" href="/static/styles.css">
<script src="/static/js/textFit.min.js"></script>
</head>
<body>
<div id="display" style="width: {{ data.config.width }}px; height: {{ data.config.height}}px;">
<div id="header">{{ data.date }}</div>
<div id="content">
{{ widget_large_headline(data.headlines[0]) }}
<div class="column">
{{ widget_weather(data.weather) }}
{{ widget_headlines(data.headlines[1:]) }}
</div>
</div>
<div id="display">
<h1>{{ data.date }}</h1>
{{ widget_weather(data.weather) }}
{{ widget_headlines(data.headlines) }}
</div>
<script>
window.addEventListener("load", function(){
textFit(document.getElementsByClassName("widget-headlines"));
});
</script>
</body>
</html>
23 changes: 15 additions & 8 deletions inkplate_dashboard/templates/widget-headlines.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
{% macro widget_headlines(headlines) %}
<div class="widget-headlines">
<div class="content">
<h1>{{ headlines[1].title }}</h1>
{{ headlines[1].description }}
<div class="widget-headlines-inner">
<article>
<h2>{{ headlines[0].title }}</h2>
<div class="widget-headlines-content">
<div class="widget-headlines-illustration" style="background-image: url('data:image/png;base64,{{ headlines[0].get_image() }}')"></div>
<div class="widget-headlines-description">{{ headlines[0].description }}</div>
</div>
</article>
<article>
<h2>{{ headlines[1].title }}</h2>
<div class="widget-headlines-content">
<div class="widget-headlines-illustration" style="background-image: url('data:image/png;base64,{{ headlines[1].get_image() }}')"></div>
<div class="widget-headlines-description">{{ headlines[1].description }}</div>
</div>
</article>
</div>
<!-- <div class="widget-headlines-inner">
{% for headline in headlines %}
<div class="widget-headlines-title">{{ headline.title }}</div>
{% endfor %}
</div> -->
</div>
{% endmacro %}
Loading

0 comments on commit 952b771

Please sign in to comment.