Merge pull request #346 from SirLefti/master

Show cover state in webinterface

Docs/cover_detection.md

@@ -0,0 +1,13 @@
+Implementing a keyboard cover detection depends highly on your specific model. Basically any type of switch will work,
+that closes the circuit when the cover is closed. For example, you can use a mechanical switch that is placed
+underneath the cover and will be closed by the cover. Alternatively you can use a magnetic reed switch (will be used as
+example). 
+
+Wire one end of the switch to GPIO PIN 12 on your pi. The other end must be connected to ground. You can share the
+ground line used by the RGB strip.
+
+![coverdetection_pic](../Docs/pics/coverdetection_pic.jpg)
+
+In this example the reed switch is taped down onto the piano. A small neodymium magnet is mounted behind the cover and
+sits directly in front of the reed switch when being closed. One wire goes to the raspberry GPIO PIN 12, the other
+shares the ground supply of the RGB strip.

README.md

@@ -22,13 +22,14 @@
 **Not required but worth having, to make everything look neat:**
 
   - Custom 3d printed case (*I attached STL file with modified 3d model, there is additional space and holes for power socket and wires, [here](https://www.thingiverse.com/thing:3393553) is original model*) 
-  -  Waveshare LCD TFT 1,44'' 128x128px [Amazon US](https://amzn.to/2YkW5nC) | [Aliexpress](http://s.click.aliexpress.com/e/cpk00blQ)
+  - Waveshare LCD TFT 1,44'' 128x128px [Amazon US](https://amzn.to/2YkW5nC) | [Aliexpress](http://s.click.aliexpress.com/e/cpk00blQ)
   - Braid for cables [Amazon US](https://amzn.to/2yd2Fhz) | [Aliexpress](http://s.click.aliexpress.com/e/cG7ur6Di)
   - Heat shrink bands [Amazon US](https://amzn.to/2SsSYok) | [Aliexpress](http://s.click.aliexpress.com/e/UwKVLo8)
   - Aluminium LED Profile with diffuser (*highly recommend to search for the right one in local shops*) [pic#1](https://i.imgur.com/MF7dd1R.png) [pic#2](https://i.imgur.com/fFWOs3v.png) 
   Alternative made of silica gel: [Aliexpress](https://s.click.aliexpress.com/e/_A0HNfF)  *(choose T0515 for 12mm 2 meters, credits to [vzoltan](https://github.com/vzoltan) for finding this)*
   - Double side tape to stick everything on the piano
   - Windows 10 laptop/tablet with bluetooth to run Synthesia
+  - magnetic or mechanical switch to detect if the keyboard cover is opened or closed, if your piano has one (see [Instructions](https://github.com/onlaj/Piano-LED-Visualizer/blob/master/Docs/cover_detection.md))
 
 **Total cost (excluding piano and tablet) should be 75-100 USD**
 *Disclosure: All of the links above are affiliate links, which means that without additional costs for you, I will earn a commission if you make a purchase by clicking through it.*
@@ -109,7 +110,7 @@ If you are getting mixed colors, meaning that leds are lighting up with your pre
 
 The Visualizer supports learning to play MIDI files without the need of Synthesia or additional external devices.
 
-![learnmidi_pic](/Docs/pics/learnmidi_pic.png)
+![learnmidi_pic](./Docs/pics/learnmidi_pic.png)
 
 For practicing, the following 3 modes can be used:
 - **Melody**: The song will wait for you to hit the correct notes. Take your time and try to avoid mistakes. Holding notes to their full duration is also important, otherwise you might develop muscle memory with the mistakes included.

webinterface/static/index.js

@@ -160,6 +160,7 @@ function get_homepage_data_loop() {
             document.getElementById("card_usage_percent").innerHTML = response_pc_stats.card_space_percent + "%";
             animateValue(document.getElementById("download_number"), last_download, download, refresh_rate * 500, true);
             animateValue(document.getElementById("upload_number"), last_upload, upload, refresh_rate * 500, true);
+            document.getElementById("cover_state").innerHTML = response_pc_stats.cover_state;
 
             download_start = response_pc_stats.download;
             upload_start = response_pc_stats.upload;

webinterface/templates/home.html

@@ -24,7 +24,6 @@
                 </svg>
             </div>
         </div>
-        </body>
     </div>
     <div class="grid grid-cols-12 gap-6 mt-5">
         <a class="transform  hover:scale-105 transition duration-300 shadow-xl rounded-lg col-span-12
@@ -51,7 +50,6 @@
                 </div>
             </div>
         </a>
-
         <a class="transform  hover:scale-105 transition duration-300 shadow-xl rounded-lg col-span-12
         sm:col-span-6 xl:col-span-3 intro-y bg-gray-200 dark:bg-gray-700" href="#/">
             <div class="p-5">
@@ -133,7 +131,7 @@
             </div>
         </a>
 
-        <span class="transition duration-300 shadow-xl rounded-lg col-span-12 sm:col-span-12 xl:col-span-12 intro-y
+        <a class="transition duration-300 shadow-xl rounded-lg col-span-12 sm:col-span-12 xl:col-span-12 intro-y
         bg-gray-200 dark:bg-gray-700" href="#/">
             <div class="m-4 text-base text-gray-600 dark:text-gray-400 absolute">
                 Metronome
@@ -241,8 +239,7 @@
                 </div>
 
             </div>
-        </span>
-
+        </a>
 
         <a class="transition duration-300 shadow-xl rounded-lg col-span-12 sm:col-span-12 xl:col-span-12 intro-y
         bg-gray-200 dark:bg-gray-700" href="#/">
@@ -283,7 +280,12 @@
                         <div id="playback_port" class="text-2xl font-bold "></div>
                     </div>
                 </div>
-
+                <div class="p-5">
+                    <div class="text-base text-gray-600 dark:text-gray-400">Cover State</div>
+                    <div class="flex items-center pt-1">
+                        <div id="cover_state" class="text-2xl font-bold "></div>
+                    </div>
+                </div>
             </div>
         </a>
 

webinterface/templates/index.html

@@ -362,7 +362,6 @@
     </footer>
 </div>
 
-</div>
 <script src="../static/alpine.min.js" defer></script>
 <script src="../static/index.js" defer></script>
 <script src="../static/html-midi-player.js" defer></script>
@@ -483,6 +482,5 @@
     });
 
 </script>
-</div>
 </body>
 </html>

webinterface/views_api.py

@@ -17,6 +17,11 @@
 import json
 import ast
 import time
+import RPi.GPIO as GPIO
+
+SENSECOVER = 12
+GPIO.setmode(GPIO.BCM)
+GPIO.setup(SENSECOVER, GPIO.IN, GPIO.PUD_UP)
 
 @webinterface.route('/api/start_animation', methods=['GET'])
 def start_animation():
@@ -118,6 +123,8 @@ def get_homepage_data():
 
     card_space = psutil.disk_usage('/')
 
+    cover_opened = GPIO.input(SENSECOVER)
+
     homepage_data = {
         'cpu_usage': psutil.cpu_percent(interval=0.1),
         'memory_usage_percent': psutil.virtual_memory()[2],
@@ -128,7 +135,8 @@ def get_homepage_data():
         'download': download,
         'card_space_used': card_space.used,
         'card_space_total': card_space.total,
-        'card_space_percent': card_space.percent
+        'card_space_percent': card_space.percent,
+        'cover_state': 'Opened' if cover_opened else 'Closed'
     }
     return jsonify(homepage_data)