OLD | NEW |
(Empty) | |
| 1 #!mojo mojo:sky_viewer |
| 2 <!-- |
| 3 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 4 // Use of this source code is governed by a BSD-style license that can be |
| 5 // found in the LICENSE file. |
| 6 --> |
| 7 <sky> |
| 8 <style> |
| 9 #chooser { |
| 10 display: flex; |
| 11 flex-direction: column; |
| 12 justify-content: center; |
| 13 padding: 5%; |
| 14 } |
| 15 #color-wheel { |
| 16 min-width: 100%; |
| 17 height: auto; |
| 18 } |
| 19 #color-sample { |
| 20 margin: 5%; |
| 21 padding: 10%; |
| 22 text-align: center; |
| 23 border-radius: 10px; |
| 24 } |
| 25 </style> |
| 26 <div id="chooser"> |
| 27 <img id="color-wheel" src="color-wheel.png"/> |
| 28 <h1 id="color-sample">Select Color</h1> |
| 29 </div> |
| 30 <script> |
| 31 import 'dart:sky'; |
| 32 import 'dart:math'; |
| 33 |
| 34 class RGB { |
| 35 final int r; |
| 36 final int g; |
| 37 final int b; |
| 38 const RGB(this.r, this.g, this.b); |
| 39 String toString() => "rgb($r, $g, $b)"; |
| 40 } |
| 41 |
| 42 RGB hsvToRgb(double h, double s, double v) { |
| 43 var i = (h * 6).floor(); |
| 44 var f = h * 6 - i; |
| 45 var p = v * (1 - s); |
| 46 var q = v * (1 - f * s); |
| 47 var t = v * (1 - (1 - f) * s); |
| 48 var r, g, b; |
| 49 switch (i % 6) { |
| 50 case 0: r = v; g = t; b = p; break; |
| 51 case 1: r = q; g = v; b = p; break; |
| 52 case 2: r = p; g = v; b = t; break; |
| 53 case 3: r = p; g = q; b = v; break; |
| 54 case 4: r = t; g = p; b = v; break; |
| 55 case 5: r = v; g = p; b = q; break; |
| 56 } |
| 57 return new RGB((r * 255).floor(), (g * 255).floor(), (b * 255).floor()); |
| 58 } |
| 59 |
| 60 RGB xyToRgb(x, y, radius) { |
| 61 var rx = x - radius; |
| 62 var ry = y - radius; |
| 63 var d = radius * radius; |
| 64 if (rx * rx + ry * ry > d) |
| 65 return null; |
| 66 var h = (atan2(ry, rx) + PI) / (2 * PI); |
| 67 var s = sqrt(d) / radius; |
| 68 return hsvToRgb(h, s, 1.0); |
| 69 } |
| 70 |
| 71 elt(String id) => document.getElementById(id); |
| 72 |
| 73 void updateColor(event) { |
| 74 var bounds = event.target.getBoundingClientRect(); |
| 75 var x = event.x - bounds.left; |
| 76 var y = event.y - bounds.top; |
| 77 var radius = min(bounds.width, bounds.height) / 2.0; |
| 78 var rgb = xyToRgb(x, y, radius); |
| 79 if (rgb != null) { |
| 80 var ccsColor = rgb.toString(); |
| 81 elt("color-sample").style["background-color"] = ccsColor; |
| 82 } |
| 83 } |
| 84 |
| 85 void selectColor(event) { |
| 86 var ccsColor = elt("color-sample").style["background-color"]; |
| 87 print(ccsColor); |
| 88 } |
| 89 |
| 90 void main() { |
| 91 elt("color-wheel").addEventListener("pointerdown", updateColor); |
| 92 elt("color-sample").addEventListener("pointerdown", selectColor); |
| 93 elt("color-sample").style["background-color"] = "rgb(0, 209, 255)"; |
| 94 } |
| 95 </script> |
| 96 </sky> |
OLD | NEW |