sky/examples/color/color-chooser.sky

#!mojo mojo:sky_viewer
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
<sky>
  <style>
    #chooser {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 5%;
    }
    #color-wheel {
      min-width: 100%;
      height: auto;
    }
    #color-sample {
      margin: 5%;
      padding: 10%;
      text-align: center;
      border-radius: 10px;
    }
  </style>
  <div id="chooser">
    <img id="color-wheel" src="color-wheel.png"/>
    <h1 id="color-sample">Select Color</h1>
  </div>
  <script>
  import 'dart:sky';
  import 'dart:math';

  class RGB {
    final int r;
    final int g;
    final int b;
    const RGB(this.r, this.g, this.b);
    String toString() => "rgb($r, $g, $b)";
  }

  RGB hsvToRgb(double h, double s, double v) {
    var i = (h * 6).floor();
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
    var r, g, b;
    switch (i % 6) {
      case 0: r = v; g = t; b = p; break;
      case 1: r = q; g = v; b = p; break;
      case 2: r = p; g = v; b = t; break;
      case 3: r = p; g = q; b = v; break;
      case 4: r = t; g = p; b = v; break;
      case 5: r = v; g = p; b = q; break;
    }
    return new RGB((r * 255).floor(), (g * 255).floor(), (b * 255).floor());
  }

  RGB xyToRgb(x, y, radius) {
    var rx = x - radius;
    var ry = y - radius;
    var d = radius * radius;
    if (rx * rx + ry * ry > d)
      return null;
    var h = (atan2(ry, rx) + PI) / (2 * PI);
    var s = sqrt(d) / radius;
    return hsvToRgb(h, s, 1.0);
  }

  elt(String id) => document.getElementById(id);

  void updateColor(event) {
    var bounds = event.target.getBoundingClientRect();
    var x = event.x - bounds.left;
    var y = event.y - bounds.top;
    var radius = min(bounds.width, bounds.height) / 2.0;
    var rgb = xyToRgb(x, y, radius);
    if (rgb != null) {
      var ccsColor = rgb.toString();
      elt("color-sample").style["background-color"] = ccsColor;
    }
  }

  void selectColor(event) {
    var ccsColor = elt("color-sample").style["background-color"];
    print(ccsColor);
  }

  void main() {
    elt("color-wheel").addEventListener("pointerdown", updateColor);
    elt("color-sample").addEventListener("pointerdown", selectColor);
    elt("color-sample").style["background-color"] = "rgb(0, 209, 255)";
  }
  </script>
</sky>