Initial commit of RGBW app

naztronaut · Oct 19, 2019 · e61c16a · e61c16a
1 parent cf291fc
commit e61c16a
Show file tree

Hide file tree

Showing 10 changed files with 360 additions and 0 deletions.
diff --git a/includes/bootstrap.min.css b/includes/bootstrap.min.css
diff --git a/includes/jquery.min.js b/includes/jquery.min.js
diff --git a/includes/obitron.css b/includes/obitron.css
@@ -0,0 +1,16 @@
+/* latin */
+@font-face {
+  font-family: 'Orbitron';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Orbitron Regular'), local('Orbitron-Regular'), url(https://fonts.gstatic.com/s/orbitron/v11/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Orbitron';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Orbitron Bold'), local('Orbitron-Bold'), url(https://fonts.gstatic.com/s/orbitron/v11/yMJWMIlzdpvBhQQL_QIAUjh2qtA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/includes/sourcecodepro.css b/includes/sourcecodepro.css
@@ -0,0 +1,72 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7Pqt4s_Dvucq_mk.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7Pqt4s_Dt-cq_mk.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7Pqt4s_DsOcq_mk.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7Pqt4s_DvOcq_mk.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7Pqt4s_Dvecq_mk.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_XiYsKILxRpg3hIP6sJ7fM7Pqt4s_Ds-cq.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Teko';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Teko Medium'), local('Teko-Medium'), url(https://fonts.gstatic.com/s/teko/v9/LYjCdG7kmE0gdVBesCVgqGIu.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Teko';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Teko Medium'), local('Teko-Medium'), url(https://fonts.gstatic.com/s/teko/v9/LYjCdG7kmE0gdVBesCpgqGIu.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Teko';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Teko Medium'), local('Teko-Medium'), url(https://fonts.gstatic.com/s/teko/v9/LYjCdG7kmE0gdVBesCRgqA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <head>
+        <title>Easy Programming - Control Kitchen Cabinet Lights</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="includes/bootstrap.min.css">
+        <script src="includes/jquery.min.js"></script>
+        <script src="script.js"></script>
+        <link rel="stylesheet" href="style.css">
+        <link href="includes/sourcecodepro.css" rel="stylesheet">
+        <link href="includes/obitron.css" rel="stylesheet">
+    </head>
+    <body>
+        <nav class="navbar navbar-expand-sm bg-dark navbar-dark d-flex justify-content-between">
+          <div class="p-2"><a class="navbar-brand" href="#">Easy Programming </a></div> 
+            <div class="p-2"><span id="subtitle">Kitchen Cabinet Lights</span></div>
+        </nav>
+        <div class="container">
+            <div class="row">
+                <div class="col">
+                    <button type="button" class="btn btn-block btn-dark" id="btnToggle">Turn On</button>
+                </div>
+            </div>
+            <div id="multi">
+                <div class="row">
+                    <div class="col">
+                        <button type="button" class="btn btn-block btn-dark single" id="kitchenLeft" data-side="Left">Left On</button>
+                    </div>
+                    <div class="col">
+                        <button type="button" class="btn btn-block btn-dark single" id="kitchenRight" data-side="Right">Right On</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/rgbw.py b/rgbw.py
@@ -0,0 +1,22 @@
+from flask import Flask, request, jsonify
+import pigpio
+
+
+app = Flask(__name__)
+
+
+# {{url}}/led?status=on
+@app.route('/', methods=['GET'])
+def led():
+    red = request.args.get('red')
+    green = request.args.get('green')
+    blue = request.args.get('blue')
+    white = request.args.get('white')
+
+    pi = pigpio.pi()
+
+    pi.set_PWM_dutycycle(24, red)
+    pi.set_PWM_dutycycle(20, blue)
+    pi.set_PWM_dutycycle(25, green)
+    pi.set_PWM_dutycycle(18, white)
+
diff --git a/rgbw.wsgi b/rgbw.wsgi
@@ -0,0 +1,10 @@
+#!/usr/bin/env python3
+
+activate_this = '/var/www/html/rgbw/venv/bin/activate_this.py'
+with open(activate_this) as file_:
+        exec(file_.read(), dict(__file__=activate_this))
+
+import sys
+sys.path.insert(0, '/var/www/html/rgbw')
+
+from rgbw import app as application
diff --git a/script.js b/script.js
@@ -0,0 +1,129 @@
+let config = {
+    multi: true,
+    kitchenRight: 'http://192.168.1.169',
+    kitchenLeft: 'http://192.168.1.167' // Optional - only required if `multi` is true
+};
+
+let globalStatus = 0;
+
+$(document).ready(function() {
+    // Cache buster added because caching was a big problem on mobile
+    let cacheBuster = new Date().getTime();
+    if(config.multi) {
+        $("#multi").show();
+    }
+    $.ajax({
+        url: config.kitchenRight + '/kitchenLights/led/status.txt?' + cacheBuster, //kitchen right
+        method: 'GET',
+        dataType: 'text',
+        cache: false,
+        success: function (result) {
+            globalStatus = result;
+            btnStatus();
+            if(config.multi) {
+                singleButton('Right', result);
+            }
+        }
+    });
+
+    if(config.multi) {
+        $.ajax({
+            url: config.kitchenLeft + '/kitchenLights/led/status.txt?' + cacheBuster, //kitchen right
+            method: 'GET',
+            dataType: 'text',
+            cache: false,
+            success: function (result) {
+                singleButton('Left', result);
+            }
+        });
+    }
+
+    $('#btnToggle').on('click', function(e){
+        let state;
+        if(globalStatus == 0) {
+            state = 'on';
+            globalStatus = 1;
+        } else {
+            state = 'off';
+            globalStatus = 0;
+        }
+
+        //right
+        $.ajax({
+            url: config.kitchenRight + '/api/kitchen?status=' + state,
+            method: 'GET',
+            success: function(result) {
+                if(config.multi) {
+                    singleButton('Right', globalStatus);
+                }
+            },
+            complete: btnStatus
+        });
+
+        if(config.multi) {
+            //left
+            $.ajax({
+                url: config.kitchenLeft + '/api/kitchen?status=' + state, //kitchen right
+                method: 'GET',
+                dataType: 'text',
+                success: function (result) {
+                    singleButton('Left', globalStatus);
+                }
+            });
+        }
+        e.preventDefault();
+    });
+
+    // Main big button - uses kitchenRight for master data.
+    function btnStatus() {
+        if(globalStatus == 0) {
+            $('#btnToggle').text('Turn On');
+            $('#btnToggle').removeClass().addClass('btn btn-block btn-dark');
+            if(config.multi) {
+                singleButton('Left', 0);
+                singleButton('Right', 0);
+            }
+        } else {
+            $('#btnToggle').text('Turn Off')
+            $('#btnToggle').removeClass().addClass('btn btn-block btn-light');
+            if(config.multi) {
+                singleButton('Left', 1);
+                singleButton('Right', 1);
+            }
+        }
+    }
+
+    if(config.multi) {
+        $('.single').on('click', function (e) {
+            let side;
+            let url;
+            if($(e.target).data('side') == 'Left') {
+                side = 'Left';
+                url = config.kitchenLeft;
+            } else {
+                side = 'Right';
+                url = config.kitchenRight;
+            }
+            $.ajax({
+                url: url + '/api/kitchen/toggle?' + cacheBuster, //kitchen right
+                method: 'GET',
+                dataType: 'json',
+                cache: false,
+                success: function (result) {
+                    singleButton(side, result.status);
+                }
+            });
+            e.preventDefault();
+        });
+
+        function singleButton(side, state) {
+            if (state == "0") {
+                $('#kitchen' + side).text(side + ' On');
+                $('#kitchen' + side).removeClass().addClass('btn btn-block btn-dark');
+            } else {
+                $('#kitchen' + side).text(side + ' Off');
+                $('#kitchen' + side).removeClass().addClass('btn btn-block btn-light');
+            }
+        }
+    }
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,53 @@
+body {
+    font-family: 'Source Code Pro', monospace;
+/*    font-family: 'Teko', sans-serif;*/
+}
+
+.btn {
+/*
+    padding: 3.5em 2.5em;
+    font-size: 2.7em;
+*/
+    padding: 1.8em 0.7em;
+    font-size: 5rem;
+    font-family: 'Orbitron', sans-serif;
+    font-weight: bold;
+    box-shadow: 10px 15px 15px 0 rgba(0,0,0,0.33), 0 6px 8px 0 rgba(0,0,0,0.19);
+}
+
+#kitchenLeft, #kitchenRight {
+    font-size: 1.5rem;
+    padding: 0.5em 0.7em !important;
+    margin-bottom: 50px;
+}
+
+.col {
+    padding-top: 25px;
+}
+
+/*
+#turnOnBtn {
+    font-size: 3em;
+}
+*/
+.row {
+    padding-top: 50px;
+}
+
+#subtitle {
+    color: #fff;
+    font-size: 1em
+}
+
+.navbar-brand {
+    font-size: 1.6em;
+    font-weight: bold;
+}
+
+#multi {
+    display: none;
+}
+
+/*#btnToggle {*/
+    /*margin-bottom: 50px;*/
+/*}*/
diff --git a/utils/apache-led.conf b/utils/apache-led.conf
@@ -0,0 +1,12 @@
+<VirtualHost *:80>
+        ServerName rgbw
+        WSGIDaemonProcess rgbw user=pi group=www-data threads=5
+        WSGIScriptAlias /api/lr /var/www/html/rgbw/rgbw.wsgi
+        <Directory /var/www/html/rgbw>
+                WSGIProcessGroup rgbw
+                WSGIApplicationGroup &{GLOBAL}
+                Require all granted
+                # If you want to use the line below, make sure you run `sudo a2enmod headers`
+                Header set Access-Control-Allow-Origin "*"
+        </Directory>
+</VirtualHost>