Skip to content

Instantly share code, notes, and snippets.

@jake-walker

jake-walker/bulb.py

Last active September 9, 2017 16:02
Show Gist options
  • Save jake-walker/f571e84b909955b492b4b882dc3b1a7a to your computer and use it in GitHub Desktop.
Save jake-walker/f571e84b909955b492b4b882dc3b1a7a to your computer and use it in GitHub Desktop.
Download ZIP
Bulb Pi Web Interface
Raw
bulb.py
import subprocess
# Import flask
from flask import Flask, render_template, request
# Make a flask server
app = Flask(__name__)
# String to set LIRC Remote to use
lirc_remote = "bulb"
# Dictionary of available commands in a human readable way
commands = {
"on": "KEY_POWER",
"off": "KEY_POWER2",
"brightness up": "KEY_UP",
"brightness down": "KEY_DOWN",
"red": "KEY_RED",
"light red": "KEY_0",
"orange": "KEY_1",
"yellow": "KEY_2",
"yellowy green": "KEY_3",
"green": "KEY_GREEN",
"light green": "KEY_4",
"turquoise": "KEY_5",
"cyan": "KEY_6",
"dark cyan": "KEY_7",
"blue": "KEY_BLUE",
"light blue": "KEY_8",
"purple": "KEY_9",
"purpley pink": "KEY_A",
"pink": "KEY_B",
"white": "KEY_W",
"flash": "KEY_F1",
"strobe": "KEY_F2",
"rainbow": "KEY_F3",
"rgb fade": "KEY_F4"
}
# Function to send commands
def send_command(command):
if command in commands.keys():
subprocess.call(["irsend", "SEND_ONCE", lirc_remote, commands[command]])
return True
else:
return False
# Route for main page. When someone goes to the / route on the server
# Flask will execute the function below.
@app.route("/")
def panel():
# Send the browser the file `panel.html`
return render_template("panel.html")
# Route for the API. When someone goes to the /api/button/on for example
# The `on` part will be passed into the function.
@app.route("/api/button/<button>")
def button(button):
# Execute the function to send the command
result = send_command(button)
# If the result is good
if result == True:
# Send back "OK"
return "OK"
else:
# If the button was invalid send "Invalid Button!"
return "Invalid Button!"
# Start the web server if the file is run.
if __name__ == "__main__":
app.run(host="0.0.0.0")
Raw
panel.html
<!--
GITHUB DOESN'T ALLOW ME TO SHOW THIS FILE AS BEING IN A SUBDIRECTORY
IF YOU ARE USING THIS CODE FOR YOURSELF YOU'LL NEED TO PUT THIS FILE
IN A FOLDER CALLED TEMPLATES WITH BULB.PY BEING IN THE FOLDER BELOW:
/bulb.py
/templates
-> /templates/panel.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bulb</title>
<!-- Import Bootstrap to make the page look nice! -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
</head>
<body>
<!-- Container to pull the content away from the edges of the screen -->
<div class="container" style="padding-top: 2em; padding-bottom: 2em;">
<!-- Row with 2 columns in of size 6 (total is 12, devided by 2 is 6) -->
<div class="row">
<div class="col-6">
<!-- cmd attribute tells the Javascript at the bottom which button to ask to press -->
<!-- style="width: 100%;" tells the button to use up all the available witdth available -->
<!-- <i class="fa fa-power-off" aria-hidden="true"></i> shows an icon from Font Awesome -->
<button cmd="on" type="button" class="btn btn-success" style="width: 100%;"><i class="fa fa-power-off" aria-hidden="true"></i> On</button>
</div>
<div class="col-6">
<button cmd="off" type="button" class="btn btn-danger" style="width: 100%;"><i class="fa fa-power-off" aria-hidden="true"></i> Off</button>
</div>
</div>
<br>
<div class="row">
<div class="col-6">
<button cmd="brightness up" type="button" class="btn btn-primary" style="width: 100%;"><i class="fa fa-arrow-up" aria-hidden="true"></i> Brighter</button>
</div>
<div class="col-6">
<button cmd="brightness down" type="button" class="btn btn-primary" style="width: 100%;"><i class="fa fa-arrow-down" aria-hidden="true"></i> Dimmer</button>
</div>
</div>
<br>
<div class="row">
<div class="col-3">
<button cmd="red" type="button" class="btn" style="width: 100%; background-color: #f00; border-color: #f00; color: #fff;">Red</button>
</div>
<div class="col-3">
<button cmd="green" type="button" class="btn" style="width: 100%; background-color: #0f0; border-color: #0f0; color: #000;">Green</button>
</div>
<div class="col-3">
<button cmd="blue" type="button" class="btn" style="width: 100%; background-color: #00f; border-color: #00f; color: #fff;">Blue</button>
</div>
<div class="col-3">
<button cmd="white" type="button" class="btn" style="width: 100%; background-color: #fff; border-color: #000; color: #000;">White</button>
</div>
</div>
<br>
<div class="row">
<div class="col-3">
<button cmd="light red" type="button" class="btn" style="width: 100%; background-color: #ff5656; border-color: #ff5656; color: #fff;">Light Red</button>
</div>
<div class="col-3">
<button cmd="light green" type="button" class="btn" style="width: 100%; background-color: #44ff66; border-color: #44ff66; color: #000;">Light Green</button>
</div>
<div class="col-3">
<button cmd="light blue" type="button" class="btn" style="width: 100%; background-color: #4e44ff; border-color: #4e44ff; color: #fff;">Light Blue</button>
</div>
<div class="col-3">
<button cmd="flash" type="button" class="btn btn-secondary" style="width: 100%;">Flash</button>
</div>
</div>
<br>
<div class="row">
<div class="col-3">
<button cmd="orange" type="button" class="btn" style="width: 100%; background-color: #ff5400; border-color: #ff5400; color: #fff;">Orange</button>
</div>
<div class="col-3">
<button cmd="turquoise" type="button" class="btn" style="width: 100%; background-color: #00ffdd; border-color: #00ffdd; color: #000;">Turquoise</button>
</div>
<div class="col-3">
<button cmd="purple" type="button" class="btn" style="width: 100%; background-color: #c700ff; border-color: #c700ff; color: #fff;">Purple</button>
</div>
<div class="col-3">
<button cmd="strobe" type="button" class="btn btn-secondary" style="width: 100%;">Strobe</button>
</div>
</div>
<br>
<div class="row">
<div class="col-3">
<button cmd="yellow" type="button" class="btn" style="width: 100%; background-color: #f6ff00; border-color: #f6ff00; color: #000;">Yellow</button>
</div>
<div class="col-3">
<button cmd="cyan" type="button" class="btn" style="width: 100%; background-color: #54c6ff; border-color: #54c6ff; color: #000;">Dark Cyan</button>
</div>
<div class="col-3">
<button cmd="purpley pink" type="button" class="btn" style="width: 100%; background-color: #f200ff; border-color: #f200ff; color: #fff;">Purpley Pink</button>
</div>
<div class="col-3">
<button cmd="rainbow" type="button" class="btn btn-secondary" style="width: 100%;">Rainbow</button>
</div>
</div>
<br>
<div class="row">
<div class="col-3">
<button cmd="yellowy green" type="button" class="btn" style="width: 100%; background-color: #d4ff00; border-color: #d4ff00; color: #000;">Yellowy Green</button>
</div>
<div class="col-3">
<button cmd="dark cyan" type="button" class="btn" style="width: 100%; background-color: #1eb4ff; border-color: #1eb4ff; color: #fff;">Cyan</button>
</div>
<div class="col-3">
<button cmd="pink" type="button" class="btn" style="width: 100%; background-color: #ff00dc; border-color: #ff00dc; color: #fff;">Pink</button>
</div>
<div class="col-3">
<button cmd="rgb fade" type="button" class="btn btn-secondary" style="width: 100%;">RGB Fade</button>
</div>
</div>
</div>
<!-- Import Font Awesome (for icons) -->
<script src="https://use.fontawesome.com/5ebb6911d5.js"></script>
<!-- Import everything required by Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script>
// jQuery is called with the $.
// When a `button` element is clicked by the user
$("button").click(function() {
// Send a GET request to the API with the command passed in from the button's `cmd` attribute.
// A GET request is like visiting the page from your browser but programatically.
$.get("/api/button/" + $(this).attr("cmd"), function(data) {
// If the server returns anything that isn't "OK", show an error.
if (data != "OK") {
alert("Error on pressing '" + $(this).attr("cmd") + "'! Server returned " + data);
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment