| 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 |
|---|
Chromium Code Reviews
Issue 1218593002:
Move sky/examples to sky/sdk/lib/example, and code changes to support that change. Fixes T277. (Closed)
Base URL: git@github.com:domokit/mojo.git@master
