diff options
| -rw-r--r-- | _includes/header.html | 8 | ||||
| -rw-r--r-- | _includes/nav.html | 15 | ||||
| -rw-r--r-- | _includes/video.html | 1 | ||||
| -rw-r--r-- | _layouts/default.html | 25 | ||||
| -rw-r--r-- | _layouts/post.html | 43 | ||||
| -rw-r--r-- | _projects/e-reader.md (renamed from _projects/e-reader/index.md) | 17 | ||||
| -rw-r--r-- | _site/about/index.html | 44 | ||||
| -rw-r--r-- | _site/assets/css/skeleton.css | 4 | ||||
| -rw-r--r-- | _site/blog/post-1/index/index.html | 44 | ||||
| -rw-r--r-- | _site/index.html | 44 | ||||
| -rw-r--r-- | _site/projects/e-reader/index.html (renamed from _site/projects/e-reader/index/index.html) | 73 | ||||
| -rw-r--r-- | _site/projects/index.html | 44 | ||||
| -rw-r--r-- | assets/css/skeleton.css | 4 |
13 files changed, 241 insertions, 125 deletions
diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000..322054d --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,8 @@ +<head> +<meta charset="utf-8"> + <title>{{ page.title }}</title> + <link rel="stylesheet" href="/assets/css/main.css"> + <link rel="stylesheet" href="/assets/css/normalize.css"> + <link rel="stylesheet" href="/assets/css/skeleton.css"> +</head> + diff --git a/_includes/nav.html b/_includes/nav.html new file mode 100644 index 0000000..403d785 --- /dev/null +++ b/_includes/nav.html @@ -0,0 +1,15 @@ +<div class="container"> + <ul id="navlist" class="left"> + <li {% if page.url == "/" %}class="active"{% endif %}> + <a href="{{ site.baseurl }}/">hme</a> + </li> + <li {% if page.url == "/projects/" %}class="active"{% endif %}> + <a href="{{ site.baseurl }}/projects/">tnk</a> + </li> + <li {% if page.url == "/about/" %}class="active"{% endif %}> + <a href="{{ site.baseurl }}/about/">abt</a> + </li> + <li><a href="{{ site.baseurl }}/feed.xml">rss</a></li> + </ul> +</div> + diff --git a/_includes/video.html b/_includes/video.html new file mode 100644 index 0000000..ae9edc8 --- /dev/null +++ b/_includes/video.html @@ -0,0 +1 @@ +<iframe style="max-width: 100%" src="{{ include.src }}" frameborder="0" allowfullscreen></iframe> diff --git a/_layouts/default.html b/_layouts/default.html index 9adf234..0a98b7f 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,28 +1,9 @@ <!doctype html> <html lang="en-us"> - <head> - <meta charset="utf-8"> - <title>{{ page.title }}</title> - <link rel="stylesheet" href="/assets/css/main.css"> - <link rel="stylesheet" href="/assets/css/normalize.css"> - <link rel="stylesheet" href="/assets/css/skeleton.css"> - </head> + {% include header.html %} <body> - - <div class="container"> - <ul id="navlist" class="left"> - <li {% if page.url == "/" %}class="active"{% endif %}> - <a href="{{ site.baseurl }}/">hme</a> - </li> - <li {% if page.url == "/projects/" %}class="active"{% endif %}> - <a href="{{ site.baseurl }}/projects/">tnk</a> - </li> - <li {% if page.url == "/about/" %}class="active"{% endif %}> - <a href="{{ site.baseurl }}/about/">abt</a> - </li> - <li><a href="{{ site.baseurl }}/feed.xml">rss</a></li> - </ul> - </div> + + {% include nav.html %} <main class="container" id="main">{{ content }}</main> diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..0b25d7c --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>{{ page.title }}</title> + {% include header.html %} + </head> + <body> + + {% include nav.html %} + + <main> + <div class="container"> + <img src="{{ site.baseurl }}/assets/img/grunge.png" alt="" class="line"> + <p class="center">[ N<sup>o</sup>{% for post in site.posts %} + {% if post.title == page.title %} + {{ forloop.index | roman }} + {% endif %} + {% endfor %} ] + <span> {{ page.keywords }}</span></p> + <img src="{{ site.baseurl }}/assets/img/grunge.png" alt="" class="line flip"> + + <h2 class="brand center" id="title">{{ page.title | upcase }}</h2> + {% if page.abstract %}<h5 class="center">{{ page.abstract }}</h5>{% endif %} + {% if page.category %} + <img src="{{ site.baseurl }}/assets/img/grunge.png" alt="" class="line tag flip"> + <p class="right tagline">{{ page.category }}</p> + <img src="{{ site.baseurl }}/assets/img/grunge.png" alt="" class="line tag"> + {% endif %} + <br> + <h4 class="center space">{{ site.location | upcase }}</h4> + <h5 class="center">{{ page.date | date_to_long_string | upcase }}</h5> + + <div class="threecol justify"> + {{ content }} + </div> + + <p class="right italics">by {{ page.author }}</p> + </div> + </main> + + </body> +</html> diff --git a/_projects/e-reader/index.md b/_projects/e-reader.md index 2b907bb..be34473 100644 --- a/_projects/e-reader/index.md +++ b/_projects/e-reader.md @@ -1,8 +1,9 @@ --- title: Prototype e-reader -date: 2023-10-24T00:00:00+08:00 +date: 2023-10-24 author: W. D. Sadeep Madurange thumbnail: thumb.png +layout: post --- This project features a prototype e-reader powered by a 7.5-inch {{< link @@ -10,13 +11,9 @@ src="https://www.waveshare.com/" class="external" target="_blank" rel="noopener noreferrer">}}Waveshare{{< /link >}} e-paper display and an ESP-WROOM-32 development board. -<video style="max-width:100%" controls="" poster=thumb.png> - <source src="ereader.mp4" type="video/mp4"> -</video> +{% include video.html src="ereader.mp4" %} -{{< toc >}} - -## Overview +#### Overview In 2017, during a short stint as a project manager, I was tasked with installing some e-paper displays in a car park. Not knowing how they worked, I @@ -45,7 +42,7 @@ system-on-a-chip with a 160 MHz dual-core processor and integrated WiFi. So, I thought it’d be amusing to embrace the constraints and build my e-reader using just a $5 MCU and the power of C programming. -## The file format +#### The file format The file format dictates the complexity of the embedded software. So, I’ll begin there. The e-reader works by downloading and rendering a rasterized @@ -61,7 +58,7 @@ The enclosed pdftoebm.py script in the tarball at the end of the page converts PDF documents to an EBM file. I use it to make EBM files before uploading them to a web server. -## How does it work? +#### How does it work? As the e-reader has no storage, it can't store books locally. Instead, I first have to upload the EBM file I want to read to a web server. The location of the @@ -81,7 +78,7 @@ I designed the EBM format with HTTP streaming in mind. To download a page based on the current reading progress, the e-reader specifies the page offset and the chunk size using the HTTP Range header. -## Afterword +#### Afterword It's been six years since the car park and the displays. At the time, I knew nothing about embedded systems or display drivers. It took a long time to diff --git a/_site/about/index.html b/_site/about/index.html index 6546e0b..74ed4be 100644 --- a/_site/about/index.html +++ b/_site/about/index.html @@ -1,28 +1,32 @@ <!doctype html> <html lang="en-us"> <head> - <meta charset="utf-8"> - <title>About</title> - <link rel="stylesheet" href="/assets/css/main.css"> - <link rel="stylesheet" href="/assets/css/normalize.css"> - <link rel="stylesheet" href="/assets/css/skeleton.css"> - </head> +<meta charset="utf-8"> + <title>About</title> + <link rel="stylesheet" href="/assets/css/main.css"> + <link rel="stylesheet" href="/assets/css/normalize.css"> + <link rel="stylesheet" href="/assets/css/skeleton.css"> +</head> + + <body> - + <div class="container"> - <ul id="navlist" class="left"> - <li > - <a href="/">hme</a> - </li> - <li > - <a href="/projects/">tnk</a> - </li> - <li class="active"> - <a href="/about/">abt</a> - </li> - <li><a href="/feed.xml">rss</a></li> - </ul> - </div> + <ul id="navlist" class="left"> + <li > + <a href="/">hme</a> + </li> + <li > + <a href="/projects/">tnk</a> + </li> + <li class="active"> + <a href="/about/">abt</a> + </li> + <li><a href="/feed.xml">rss</a></li> + </ul> +</div> + + <main class="container" id="main"><h1 id="about-page">About page</h1> diff --git a/_site/assets/css/skeleton.css b/_site/assets/css/skeleton.css index 8f05a22..e9cb181 100644 --- a/_site/assets/css/skeleton.css +++ b/_site/assets/css/skeleton.css @@ -129,7 +129,7 @@ body { –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 { margin-top: 0; - margin-bottom: 2rem; + margin-bottom: 1rem; font-weight: 300; } h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } @@ -141,7 +141,7 @@ h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } /* Larger than phablet */ @media (min-width: 550px) { h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } + h2 { font-size: 2.6rem; } h3 { font-size: 3.6rem; } h4 { font-size: 3.0rem; } h5 { font-size: 2.4rem; } diff --git a/_site/blog/post-1/index/index.html b/_site/blog/post-1/index/index.html index de0e7ef..81b756a 100644 --- a/_site/blog/post-1/index/index.html +++ b/_site/blog/post-1/index/index.html @@ -1,28 +1,32 @@ <!doctype html> <html lang="en-us"> <head> - <meta charset="utf-8"> - <title>Index</title> - <link rel="stylesheet" href="/assets/css/main.css"> - <link rel="stylesheet" href="/assets/css/normalize.css"> - <link rel="stylesheet" href="/assets/css/skeleton.css"> - </head> +<meta charset="utf-8"> + <title>Index</title> + <link rel="stylesheet" href="/assets/css/main.css"> + <link rel="stylesheet" href="/assets/css/normalize.css"> + <link rel="stylesheet" href="/assets/css/skeleton.css"> +</head> + + <body> - + <div class="container"> - <ul id="navlist" class="left"> - <li > - <a href="/">hme</a> - </li> - <li > - <a href="/projects/">tnk</a> - </li> - <li > - <a href="/about/">abt</a> - </li> - <li><a href="/feed.xml">rss</a></li> - </ul> - </div> + <ul id="navlist" class="left"> + <li > + <a href="/">hme</a> + </li> + <li > + <a href="/projects/">tnk</a> + </li> + <li > + <a href="/about/">abt</a> + </li> + <li><a href="/feed.xml">rss</a></li> + </ul> +</div> + + <main class="container" id="main"><p>An apple is a sweet, edible fruit produced by an apple tree.</p> diff --git a/_site/index.html b/_site/index.html index 7e4c4f3..cff0950 100644 --- a/_site/index.html +++ b/_site/index.html @@ -1,28 +1,32 @@ <!doctype html> <html lang="en-us"> <head> - <meta charset="utf-8"> - <title>ASCIIMX</title> - <link rel="stylesheet" href="/assets/css/main.css"> - <link rel="stylesheet" href="/assets/css/normalize.css"> - <link rel="stylesheet" href="/assets/css/skeleton.css"> - </head> +<meta charset="utf-8"> + <title>ASCIIMX</title> + <link rel="stylesheet" href="/assets/css/main.css"> + <link rel="stylesheet" href="/assets/css/normalize.css"> + <link rel="stylesheet" href="/assets/css/skeleton.css"> +</head> + + <body> - + <div class="container"> - <ul id="navlist" class="left"> - <li class="active"> - <a href="/">hme</a> - </li> - <li > - <a href="/projects/">tnk</a> - </li> - <li > - <a href="/about/">abt</a> - </li> - <li><a href="/feed.xml">rss</a></li> - </ul> - </div> + <ul id="navlist" class="left"> + <li class="active"> + <a href="/">hme</a> + </li> + <li > + <a href="/projects/">tnk</a> + </li> + <li > + <a href="/about/">abt</a> + </li> + <li><a href="/feed.xml">rss</a></li> + </ul> +</div> + + <main class="container" id="main"><ul> diff --git a/_site/projects/e-reader/index/index.html b/_site/projects/e-reader/index.html index dd58a14..bc23c7b 100644 --- a/_site/projects/e-reader/index/index.html +++ b/_site/projects/e-reader/index.html @@ -1,12 +1,58 @@ -<p>This project features a prototype e-reader powered by a 7.5-inch Waveshare e-paper display and an +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Prototype e-reader</title> + <head> +<meta charset="utf-8"> + <title>Prototype e-reader</title> + <link rel="stylesheet" href="/assets/css/main.css"> + <link rel="stylesheet" href="/assets/css/normalize.css"> + <link rel="stylesheet" href="/assets/css/skeleton.css"> +</head> + + + </head> + <body> + + <div class="container"> + <ul id="navlist" class="left"> + <li > + <a href="/">hme</a> + </li> + <li > + <a href="/projects/">tnk</a> + </li> + <li > + <a href="/about/">abt</a> + </li> + <li><a href="/feed.xml">rss</a></li> + </ul> +</div> + + + + <main> + <div class="container"> + <img src="/assets/img/grunge.png" alt="" class="line"> + <p class="center">[ N<sup>o</sup> ] + <span> </span></p> + <img src="/assets/img/grunge.png" alt="" class="line flip"> + + <h2 class="brand center" id="title">PROTOTYPE E-READER</h2> + + + <br> + <h4 class="center space"></h4> + <h5 class="center">24 OCTOBER 2023</h5> + + <div class="threecol justify"> + <p>This project features a prototype e-reader powered by a 7.5-inch Waveshare e-paper display and an ESP-WROOM-32 development board.</p> -<p><video style=”max-width:100%” controls=”” poster=thumb.png></p> -<source src="ereader.mp4" type="video/mp4" /> +<iframe style="max-width: 100%" src="ereader.mp4" frameborder="0" allowfullscreen=""></iframe> -<p></video></p> - -<h2 id="overview">Overview</h2> +<h4 id="overview">Overview</h4> <p>In 2017, during a short stint as a project manager, I was tasked with installing some e-paper displays in a car park. Not knowing how they worked, I @@ -35,7 +81,7 @@ system-on-a-chip with a 160 MHz dual-core processor and integrated WiFi. So, I thought it’d be amusing to embrace the constraints and build my e-reader using just a $5 MCU and the power of C programming.</p> -<h2 id="the-file-format">The file format</h2> +<h4 id="the-file-format">The file format</h4> <p>The file format dictates the complexity of the embedded software. So, I’ll begin there. The e-reader works by downloading and rendering a rasterized @@ -51,7 +97,7 @@ well to HTTP streaming, which is its main advantage, as we will soon see.</p> PDF documents to an EBM file. I use it to make EBM files before uploading them to a web server.</p> -<h2 id="how-does-it-work">How does it work?</h2> +<h4 id="how-does-it-work">How does it work?</h4> <p>As the e-reader has no storage, it can’t store books locally. Instead, I first have to upload the EBM file I want to read to a web server. The location of the @@ -71,7 +117,7 @@ use the ESP-IDF task API to pin the two routines to each core.</p> on the current reading progress, the e-reader specifies the page offset and the chunk size using the HTTP Range header.</p> -<h2 id="afterword">Afterword</h2> +<h4 id="afterword">Afterword</h4> <p>It’s been six years since the car park and the displays. At the time, I knew nothing about embedded systems or display drivers. It took a long time to @@ -79,3 +125,12 @@ develop the skill set, but now, at last, I know how those displays worked and how to build my own.</p> <p>Files: <a href="source.tar.gz">source.tar.gz</a></p> + + </div> + + <p class="right italics">by W. D. Sadeep Madurange</p> + </div> + </main> + + </body> +</html> diff --git a/_site/projects/index.html b/_site/projects/index.html index 15ffb96..d1fcb18 100644 --- a/_site/projects/index.html +++ b/_site/projects/index.html @@ -1,28 +1,32 @@ <!doctype html> <html lang="en-us"> <head> - <meta charset="utf-8"> - <title>Projects</title> - <link rel="stylesheet" href="/assets/css/main.css"> - <link rel="stylesheet" href="/assets/css/normalize.css"> - <link rel="stylesheet" href="/assets/css/skeleton.css"> - </head> +<meta charset="utf-8"> + <title>Projects</title> + <link rel="stylesheet" href="/assets/css/main.css"> + <link rel="stylesheet" href="/assets/css/normalize.css"> + <link rel="stylesheet" href="/assets/css/skeleton.css"> +</head> + + <body> - + <div class="container"> - <ul id="navlist" class="left"> - <li > - <a href="/">hme</a> - </li> - <li class="active"> - <a href="/projects/">tnk</a> - </li> - <li > - <a href="/about/">abt</a> - </li> - <li><a href="/feed.xml">rss</a></li> - </ul> - </div> + <ul id="navlist" class="left"> + <li > + <a href="/">hme</a> + </li> + <li class="active"> + <a href="/projects/">tnk</a> + </li> + <li > + <a href="/about/">abt</a> + </li> + <li><a href="/feed.xml">rss</a></li> + </ul> +</div> + + <main class="container" id="main"><table> diff --git a/assets/css/skeleton.css b/assets/css/skeleton.css index 8f05a22..e9cb181 100644 --- a/assets/css/skeleton.css +++ b/assets/css/skeleton.css @@ -129,7 +129,7 @@ body { –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 { margin-top: 0; - margin-bottom: 2rem; + margin-bottom: 1rem; font-weight: 300; } h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } @@ -141,7 +141,7 @@ h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } /* Larger than phablet */ @media (min-width: 550px) { h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } + h2 { font-size: 2.6rem; } h3 { font-size: 3.6rem; } h4 { font-size: 3.0rem; } h5 { font-size: 2.4rem; } |