ryanwa18 · samgutentag · Apr 5, 2024 · Apr 5, 2024 · Apr 5, 2024 · Apr 5, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
+.cache
+.DS_Store
 *.log
 *.png
-.cache
 inky/*
diff --git a/README.md b/README.md
@@ -1,23 +1,36 @@
-# Spotipi E-Ink
-### Overview
-This project is to display information on a 5.7" e-ink from the Spotify web api.
-### Getting Started
-* Create a new application within the [Spotify developer dashboard](https://developer.spotify.com/dashboard/applications) <br />
-* Edit the settings of the application within the dashboard.
-    * Set the redirect uri to any local url such as http://localhost/redirect
-
-* Enable SPI and I2C under "Interface Options" with the command:
-```
+# SpotiPi E-Ink
+
+## Overview
+
+This project is to display information on a 5.7" e-ink using the [Spotify web api](https://developer.spotify.com/documentation/web-api), check out a demo on [YouTube](https://www.youtube.com/watch?v=uQYIAYa27ds).
+
+---
+
+## Quick Start
+
+### Create Spotify Developer Account
+
+- Create a new application within the [Spotify developer dashboard](https://developer.spotify.com/dashboard/applications)
+- Edit the settings of the application within the dashboard
+  - Set the redirect uri to any local url such as http://localhost/redirect
+
+### Configure RaspberryPi
+
+- Enable `SPI` and `I2C` under "Interface Options"
+
+```sh
 sudo raspi-config
 ```
 
-* Download the install script
-```
+- Download the install script
+
+```sh
 wget https://raw.githubusercontent.com/ryanwa18/spotipi-eink/main/setup.sh
 chmod +x setup.sh
 ```
 
-* Install the software: <br />
-```
+- Install the software
+
+```sh
 sudo bash setup.sh
 ```
diff --git a/images/default.png b/images/default.png
diff --git a/python/client/app.py b/python/client/app.py
@@ -82,5 +82,5 @@ def handle_refresh_rate():
     job = manager.RestartUnit('spotipi.service', 'fail')
     return render_template('index.html', brightness = brightness, width = width, height = height, refresh_rate = int(request.form['refresh_rate']), power = power)
 
-app.run(host='0.0.0.0', port=80) 
+app.run(host='0.0.0.0', port=80)
 
diff --git a/python/client/spotipi.html b/python/client/spotipi.html
@@ -1,98 +1,122 @@
 <html>
- <head>
-  <style type="text/css">
-   .black_fg {color:#1c181c}
-.black_bg {background-color:#1c181c}
-.white_fg {color:#ffffff}
-.white_bg {background-color:#ffffff}
-.green_fg {color:#1dad23}
-.green_bg {background-color:#1dad23}
-.blue_fg {color:#1e1dae}
-.blue_bg {background-color:#1e1dae}
-.red_fg {color:#cd2425}
-.red_bg {background-color:#cd2425}
-.yellow_fg {color:#e7de23}
-.yellow_bg {background-color:#e7de23}
-.orange_fg {color:#a67b24}
-.orange_bg {background-color:#a67b24}
+  <head>
+    <style type="text/css">
+      .black_fg {
+        color: #1c181c;
+      }
+      .black_bg {
+        background-color: #1c181c;
+      }
+      .white_fg {
+        color: #ffffff;
+      }
+      .white_bg {
+        background-color: #ffffff;
+      }
+      .green_fg {
+        color: #1dad23;
+      }
+      .green_bg {
+        background-color: #1dad23;
+      }
+      .blue_fg {
+        color: #1e1dae;
+      }
+      .blue_bg {
+        background-color: #1e1dae;
+      }
+      .red_fg {
+        color: #cd2425;
+      }
+      .red_bg {
+        background-color: #cd2425;
+      }
+      .yellow_fg {
+        color: #e7de23;
+      }
+      .yellow_bg {
+        background-color: #e7de23;
+      }
+      .orange_fg {
+        color: #a67b24;
+      }
+      .orange_bg {
+        background-color: #a67b24;
+      }
 
-body {
-	width:600px;
-	height:448px;
-    font-family: CircularStd-Bold;
-    background-color: #1c181c;
-    margin: 0px;
-}
-article {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+      body {
+        width: 600px;
+        height: 448px;
+        font-family: CircularStd-Bold;
+        background-color: #1c181c;
+        margin: 0px;
+      }
+      article {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
-h1 {
-	width:100%;
-	font-size:45px;
-  margin-bottom: 0;
-  text-shadow: 5px 5px #1c171c;
-  color: #fff;
-}
-h2 {
-	width:100%;
-	font-size:30px;
-  margin-top: 5px;
-  text-shadow: 5px 5px #1c171c;
-  color: #fff;
-}
-image {
-    display: flex;
-    height: 100px;
-    width: 100px;
-}
-.bg-image {
-  /* The image used */
-  background-image: url('./static/kanye.jpg');
+      h1 {
+        width: 100%;
+        font-size: 45px;
+        margin-bottom: 0;
+        text-shadow: 5px 5px #1c171c;
+        color: #fff;
+      }
+      h2 {
+        width: 100%;
+        font-size: 30px;
+        margin-top: 5px;
+        text-shadow: 5px 5px #1c171c;
+        color: #fff;
+      }
+      image {
+        display: flex;
+        height: 100px;
+        width: 100px;
+      }
+      .bg-image {
+        /* The image used */
+        background-image: url("./static/kanye.jpg");
 
-  /* Add the blur effect */
-  filter: blur(8px);
-  -webkit-filter: blur(8px);
+        /* Add the blur effect */
+        filter: blur(8px);
+        -webkit-filter: blur(8px);
 
-  /* Full height */
-  height: 100%;
+        /* Full height */
+        height: 100%;
 
-  /* Center and scale the image nicely */
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
+        /* Center and scale the image nicely */
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
 
-.bg-text {
-  background-color: rgb(0,0,0); /* Fallback color */
-  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
-  color: white;
-  font-weight: bold;
-  position: absolute;
-  z-index: 2;
-  padding: 20px;
-  width: 600px;
-}
+      .bg-text {
+        background-color: rgb(0, 0, 0); /* Fallback color */
+        background-color: rgba(0, 0, 0, 0.4); /* Black w/opacity/see-through */
+        color: white;
+        font-weight: bold;
+        position: absolute;
+        z-index: 2;
+        padding: 20px;
+        width: 600px;
+      }
 
-@font-face {
-  font-family: 'CircularStd-Bold';
-  src: url('./static/CircularStd-Bold.otf');
-}
-  </style>
- </head>
- <body style="background-image: url('./album_cover.png')">
-  <article>
-   <image src="./album_cover.png" style="height: 250px; width: 250px;"/>
-  </article>
-  <div style="padding-left: 20px;">
-   <h1 id="title">
-    Are You Feeling Sad?
-   </h1>
-   <h2>
-    Little Dragon
-   </h2>
-  </div>
- </body>
+      @font-face {
+        font-family: "CircularStd-Bold";
+        src: url("./static/CircularStd-Bold.otf");
+      }
+    </style>
+  </head>
+  <body style="background-image: url('./album_cover.png')">
+    <article>
+      <image src="./album_cover.png" style="height: 250px; width: 250px" />
+    </article>
+    <div style="padding-left: 20px">
+      <h1 id="title">Are You Feeling Sad?</h1>
+      <h2>Little Dragon</h2>
+    </div>
+  </body>
 </html>
diff --git a/python/client/static/kanye.jpg b/python/client/static/kanye.jpg
diff --git a/python/client/static/logo.png b/python/client/static/logo.png
diff --git a/python/client/templates/index.html b/python/client/templates/index.html
@@ -10,7 +10,7 @@
 
     <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/starter-template/">
 
-    
+
 
     <!-- Bootstrap core CSS -->
 <link href="/static/bootstrap.min.css" rel="stylesheet">
@@ -37,12 +37,12 @@
       }
     </style>
 
-    
+
     <!-- Custom styles for this template -->
     <link href="/static/starter-template.css" rel="stylesheet">
   </head>
   <body>
-    
+
 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">spotipi</a>
@@ -66,7 +66,7 @@
 
   <div class="starter-template py-5 px-3">
     <h1>Settings</h1>
-    <form action="/brightness" method="POST"> 
+    <form action="/brightness" method="POST">
       <div class="form-group">
         <label for="formControlRange">Brightness</label>
         <input min="10" type="range" class="form-control-range" id="formControlRange" step="10" name="brightness" value="{{ brightness }}">
@@ -110,6 +110,6 @@ <h1>Settings</h1>
 
     <script src="/static/bootstrap.min.js"></script>
 
-      
+
   </body>
 </html>