-
-
+
+
Helios
+
+
+
+
+
+
-
Fork me on GitHub
-
+
+
diff --git a/rgb.lua b/rgb.lua
index 8b7c8e0..cf2c1c2 100644
--- a/rgb.lua
+++ b/rgb.lua
@@ -1,19 +1,43 @@
+PIN_R = 5
+PIN_G = 6
+PIN_B = 7
+
+FADE_MS = 8
+INTERVAL = 5
+getduty = pwm.getduty
+setduty = pwm.setduty
+
+function fade(pin, x, tid)
+ local a = getduty(pin)
+ local mult = 1
+ if a>x then mult = -1 end
+
+ tmr.alarm(tid, FADE_MS, tmr.ALARM_AUTO, function()
+ if math.abs(x-a) <= INTERVAL then
+ setduty(pin, x)
+ tmr.unregister(tid)
+ elseif a~=x then
+ setduty(pin, a)
+ a = a + (INTERVAL * mult)
+ end
+ end)
+end
+
return function (connection, req)
- local setduty = pwm.setduty
+ local r = tonumber(req:match("r=([0-9]+)"))
+ local g = tonumber(req:match("g=([0-9]+)"))
+ local b = tonumber(req:match("b=([0-9]+)"))
- local arg = tonumber(req:match("r=([0-9]+)"))
- if arg then
- setduty(5, arg)
+ if r then
+ fade(PIN_R, r, 0)
end
- arg = tonumber(req:match("g=([0-9]+)"))
- if arg then
- setduty(6, arg)
+ if g then
+ fade(PIN_G, g, 1)
end
- arg = tonumber(req:match("b=([0-9]+)"))
- if arg then
- setduty(7, arg)
+ if b then
+ fade(PIN_B, b, 2)
end
-- Send back JSON response.
diff --git a/styles/_range-slider.scss b/styles/_range-slider.scss
new file mode 100755
index 0000000..2c3223d
--- /dev/null
+++ b/styles/_range-slider.scss
@@ -0,0 +1,100 @@
+// Styling Cross-Browser Compatible Range Inputs with Sass
+// Github: https://github.com/darlanrod/input-range-sass
+// Author: Darlan Rod https://github.com/darlanrod
+// Version 1.3.0
+// MIT License
+@import 'variables';
+
+$track-color: $dark-gray;
+$thumb-color: $light-gray;
+
+$thumb-radius: 0.7rem;
+$thumb-height: 1.3rem;
+$thumb-width: 0.2rem;
+
+$track-radius: 0.2rem;
+$track-height: 0.3rem;
+$track-width: 100%;
+$contrast: 5%;
+
+@mixin track {
+ cursor: pointer;
+ height: $track-height;
+ transition: all .2s ease;
+ width: $track-width;
+}
+
+@mixin thumb {
+ background: $thumb-color;
+ border-radius: $thumb-radius;
+ cursor: pointer;
+ height: $thumb-height;
+ width: $thumb-width;
+}
+
+[type='range'] {
+ -webkit-appearance: none;
+ background: transparent;
+ width: $track-width;
+ height: $thumb-height * 4;
+
+ &:focus {
+ outline: 0;
+
+ &::-webkit-slider-runnable-track {
+ background: lighten($track-color, $contrast);
+ }
+
+ &::-ms-fill-lower {
+ background: $track-color;
+ }
+
+ &::-ms-fill-upper {
+ background: lighten($track-color, $contrast);
+ }
+ }
+
+ &::-webkit-slider-runnable-track {
+ @include track;
+ background: $track-color;
+ border-radius: $track-radius;
+ }
+
+ &::-webkit-slider-thumb {
+ @include thumb;
+ -webkit-appearance: none;
+ margin-top: ($track-height - $thumb-height) / 2;
+ }
+
+ &::-moz-range-track {
+ @include track;
+ background: $track-color;
+ border-radius: $track-radius;
+ }
+
+ &::-moz-range-thumb {
+ @include thumb;
+ }
+
+ &::-ms-track {
+ @include track;
+ background: transparent;
+ border-color: transparent;
+ color: transparent;
+ }
+
+ &::-ms-fill-lower {
+ background: darken($track-color, $contrast);
+ border-radius: $track-radius * 2;
+ }
+
+ &::-ms-fill-upper {
+ background: $track-color;
+ border-radius: $track-radius * 2;
+ }
+
+ &::-ms-thumb {
+ @include thumb;
+ margin-top: 0;
+ }
+}
diff --git a/styles/_variables.scss b/styles/_variables.scss
new file mode 100755
index 0000000..5579e8c
--- /dev/null
+++ b/styles/_variables.scss
@@ -0,0 +1,9 @@
+$white-gray: #aaaaaa;
+$light-gray: #777777;
+$mid-gray: #3a3a3a;
+$dark-gray: #171717;
+
+$heading-font: 'Teko', sans-serif;
+$heading-font-size: 4.0rem;
+$body-font: sans-serif;
+$body-font-size: 1.2rem;
diff --git a/styles/light.scss b/styles/light.scss
new file mode 100755
index 0000000..118195d
--- /dev/null
+++ b/styles/light.scss
@@ -0,0 +1,89 @@
+@import 'variables';
+@import 'range-slider';
+body {
+ background: black;
+ font-family: $body-font;
+ font-size: $body-font-size;
+ color: $mid-gray;
+}
+
+h1 {
+ text-transform: lowercase;
+ font-family: $heading-font;
+ font-size: $heading-font-size;
+ color: $light-gray;
+ margin: 0;
+}
+
+h2 {
+ @extend h1;
+ font-size: 2.0rem;
+}
+
+button {
+ border: none;
+ color: $light-gray;
+ font-family: $body-font;
+ font-size: $body-font-size;
+ padding: 0.3em 1.0em;
+ margin: 0.2em;
+ &:focus {
+ outline: none;
+ }
+}
+
+canvas {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 85%;
+ position: absolute;
+}
+
+.toolbar {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 15%;
+ width: 100%;
+ padding-bottom: 0.6rem;
+}
+
+.title-section {
+ float: left;
+ width: 20rem;
+ bottom: 0;
+ display: inline-block;
+ & > * {
+ display: inline-block;
+ }
+
+ h1 {
+ padding: 0 1.2rem;
+ margin-left: 1.2rem;
+ }
+}
+
+.position-select {
+ button {
+ width: 7em;
+ display: block;
+ background: $dark-gray;
+ &:disabled {
+ color: $white-gray;
+ background: $mid-gray;
+ }
+ }
+}
+
+#btn-1 {
+ border-radius: 0.5em 0.5em 0 0;
+}
+#btn-2 {
+ border-radius: 0 0 0.5em 0.5em;
+}
+
+.slider-section {
+ padding: 0rem 3rem;
+ margin-left: 20rem;
+}