Mercurial > code > home > repos > homeauto

changeset 952:32e776c53f68

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
switch to new color picker Ignore-this: 736a9f4342c19728506f8baf0ed13294 darcs-hash:20140713052920-312f9-8e8d5b822d1831dffd93fc5b843c381e916949fa
author drewp <drewp@bigasterisk.com>
date Sat, 12 Jul 2014 22:29:20 -0700
parents f16dea2380ff
children d1e096053404
files service/pilight/static/big-picker.html service/pilight/static/index.html
diffstat 2 files changed, 102 insertions(+), 10 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/service/pilight/static/big-picker.html	Sat Jul 12 22:29:20 2014 -0700
@@ -0,0 +1,91 @@
+<polymer-element name="big-picker" attributes="hex">
+  <template>
+    <style>
+     .pot {
+       width: 50px;
+       height: 50px;
+       border-radius: 50%;
+       box-shadow: 3px 2px 10px black;
+       border: 2px solid white;
+       margin: 10px;
+       position: absolute;
+     }
+     input[type=range] {
+       -webkit-appearance: slider-vertical;
+     }
+     #wide {
+       display: flex;
+     }
+     #samples {
+       outline: 1px solid gray;
+       width: 300px;
+       height: 300px;
+       position: relative;
+     }
+     #swatch {
+       position: absolute;
+       left: 110px;
+       top: 110px;
+       width: 60px;
+       height: 60px;
+     }
+
+     #lightness {
+       display: flex;
+       outline: 1px gray solid;
+       background: linear-gradient(to bottom, #ffffff 0%,#0e0e0e 100%);
+       width: 50px;
+     }
+    </style>
+
+    <div id="wide">
+      <div id="samples">
+        <template repeat="{{c in potColors}}">
+          <div class="pot" style="background: {{c}}" on-click="{{setColor}}"></div>
+        </template>
+        <input id="swatch" type="color" id="picker" value="{{hex}}" orient="vertical">
+      </div>
+      
+      <div id="lightness">
+        <input type="range" min="0" max="1" step=".01" value="{{lightness}}">
+      </div>
+    </div>
+  </template>
+  
+  <script src="color.js"></script>
+  <script type="text/javascript">
+    var Color = net.brehaut.Color;
+    Polymer('big-picker', {
+        hex: '#ffffff',
+        ready: function() {
+            this.lightness = .5;
+            this.potColors = ['hsl(20, 100%, 50%)',
+                              'hsl(60, 100%, 50%)',
+                              'hsl(100, 100%, 50%)',
+                              'hsl(140, 100%, 50%)',
+                              'hsl(180, 100%, 50%)',
+                              'hsl(220, 100%, 50%)',
+                              'hsl(260, 100%, 50%)',
+                              'hsl(300, 100%, 50%)',
+                              'hsl(340, 100%, 50%)',
+                              '#888888'];
+        },
+        domReady: function() {
+            var pots = this.$.samples.getElementsByClassName("pot");
+            $.each(pots, function (i, elem) {
+                var frac = i / pots.length;
+                elem.style.left = (100 + 100 * Math.sin(frac * 2 * Math.PI)) + "px";
+                elem.style.top  = (100 + 100 * Math.cos(frac * 2 * Math.PI)) + "px";
+            });
+        },
+        setColor: function(e) {
+            var c = Color(e.target.templateInstance.model.c).setLightness(this.lightness);
+            this.hex = c.toString();
+        },
+        lightnessChanged: function() {
+            var c = Color(this.hex).setLightness(this.lightness);
+            this.hex = c.toString();
+        }
+    });
+  </script>
+</polymer-element>
--- a/service/pilight/static/index.html	Sat Jul 12 22:29:14 2014 -0700
+++ b/service/pilight/static/index.html	Sat Jul 12 22:29:20 2014 -0700
@@ -5,20 +5,21 @@
     <meta charset="utf-8" />
     <script src="//bigasterisk.com/lib/jquery-2.0.3.js"></script>
     <script src="//bigasterisk.com/lib/platform/0.2.3/platform.js"></script>
-    <link rel="import" href="static/input-rgb/input-rgb.html">
+    <script src="//bigasterisk.com/lib/polymer/0.2.3/polymer.js"></script>
+    <link rel="import" href="static/big-picker.html">
     <style>
-      input-rgb {
-       border: 1px solid gray;
-       width: 300px;
+      body {
+       background: #5c5c5c;
+       color: #E2E2E2;
      }
     </style>
   </head>
   <body>
 
     <polymer-element name="led-output" attributes="url color">
-    <!-- calls PUT <url> with color string as the body, but also
-         avoids sending many repeated calls to url while the first one
-         is still in progress -->
+      <!-- calls PUT <url> with color string as the body, but also
+      avoids sending many repeated calls to url while the first one
+      is still in progress -->
       <template>
         {{status}}
       </template>
@@ -65,23 +66,23 @@
       </script>
 
     </polymer-element>
-      
+
     <polymer-element name="pilight-page" noscript>
       <template>
         LED0 color:
-        <input-rgb editable="true" hex="{{c1}}"></input-rgb>
+        <big-picker editable="true" hex="{{c1}}"></big-picker>
         <led-output which="led" color="{{c1}}"></led-output>
       </template>
     </polymer-element>
 
     <pilight-page></pilight-page>
 
-
     <div>
       DHT: <span id="dht"></span>
       <div id="temperature" style="background: #cff"></div>
       <div id="humidity" style="background: #fef"></div>
     </div>
+
     <script>
     $(function() {
         function update() {