Adding mapbox-gl branch

2015-03-16 18:50:27 +01:00
parent 7985f030fa
commit 57ee7f52fd
3109 changed files with 943365 additions and 0 deletions
@@ -0,0 +1,158 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+Copyright 2010 The Closure Library Authors. All Rights Reserved.
+
+Use of this source code is governed by the Apache License, Version 2.0.
+See the COPYING file for details.
+-->
+<head>
+  <title>goog.ui.Gauge</title>
+  <link rel="stylesheet" href="css/demo.css">
+  <style>
+    .type { font-size:14px; font-weight:bold; font-family:arial; background-color:#f7f7f7; text-align:center }
+  </style>
+  <script src="../base.js"></script>
+  <script>
+    goog.require('goog.dom');
+    goog.require('goog.graphics');
+    goog.require('goog.graphics.Font');
+    goog.require('goog.graphics.LinearGradient');
+    goog.require('goog.graphics.SolidFill');
+    goog.require('goog.graphics.Stroke');
+    goog.require('goog.ui.Gauge');
+    goog.require('goog.ui.GaugeTheme');
+  </script>
+  <script>
+
+    var CustomGaugeTheme = function() {
+    }
+    goog.inherits(CustomGaugeTheme, goog.ui.GaugeTheme);
+
+    CustomGaugeTheme.prototype.getInternalBorderFill = function(cx, cy, r) {
+      return new goog.graphics.SolidFill("#8080ff");
+    }
+
+    CustomGaugeTheme.prototype.getExternalBorderFill = function(cx, cy, r) {
+      return new goog.graphics.SolidFill("#8080c0");
+    }
+
+    CustomGaugeTheme.prototype.getInternalBorderStroke = function() {
+      return new goog.graphics.Stroke(2, "#ffff00");
+    }
+
+    CustomGaugeTheme.prototype.getMajorTickStroke = function() {
+      return new goog.graphics.Stroke(2, "#ffffff");
+    }
+
+    CustomGaugeTheme.prototype.getHingeStroke = function() {
+      return new goog.graphics.Stroke(1, "#00a000");
+    }
+
+    CustomGaugeTheme.prototype.getHingeFill = function(cx, cy, r) {
+      return new goog.graphics.SolidFill("#00c000");
+    }
+
+    CustomGaugeTheme.prototype.getNeedleStroke = function() {
+      return new goog.graphics.Stroke(1, "#008040");
+    }
+
+    CustomGaugeTheme.prototype.getNeedleFill = function(cx, cy, r) {
+      return new goog.graphics.SolidFill("#008040", 0.7);
+    }
+
+
+    var interactiveGauge;
+
+    function setupGauges() {
+      var gauge = new goog.ui.Gauge(120, 120);
+      gauge.setValue(33);
+      gauge.render(document.getElementById('basic'));
+
+      var gauge = new goog.ui.Gauge(200, 200);
+      gauge.addBackgroundColor(50, 60, goog.ui.Gauge.RED);
+      gauge.addBackgroundColor(35, 50, goog.ui.Gauge.YELLOW);
+      gauge.addBackgroundColor(15, 25, goog.ui.Gauge.GREEN);
+      gauge.setMinimum(15);
+      gauge.setMaximum(60);
+      gauge.setTicks(3, 6);
+      gauge.setValue(40);
+      gauge.setTitleBottom("RPM");
+      gauge.render(document.getElementById('colors'));
+
+
+      interactiveGauge = new goog.ui.Gauge(300, 200);
+      interactiveGauge.addBackgroundColor(0, 30, goog.ui.Gauge.RED);
+      interactiveGauge.addBackgroundColor(75, 90, goog.ui.Gauge.YELLOW);
+      interactiveGauge.addBackgroundColor(90, 100, goog.ui.Gauge.RED);
+      interactiveGauge.setTitleTop("CPU Utilization");
+      interactiveGauge.setTicks(5, 2);
+      interactiveGauge.setMajorTickLabels(['Idle', '20%', '40%', '60%', '80%', 'Argh']);
+      setValue();
+      interactiveGauge.render(document.getElementById('interactive'));
+
+      var gauge = new goog.ui.Gauge(200, 200);
+      gauge.setMinimum(-30);
+      gauge.setMaximum(30);
+      gauge.setTicks(10, 0);
+      gauge.setValue(20);
+      var theme = new CustomGaugeTheme();
+      gauge.setTheme(theme);
+      gauge.render(document.getElementById('customcolors'));
+
+    }
+
+    function setValue() {
+      var sv = document.getElementById("v1").value
+      var v = parseInt(sv, 10);
+      if (isNaN(v)) {
+        v = 0;
+      }
+      interactiveGauge.setValue(v, v + "%");
+    }
+  </script>
+
+</head>
+
+<body>
+  <h1>goog.ui.Gauge</h1>
+  <h2>Note: This component requires vector graphics support</h2>
+  <table border="1">
+    <tr valign="top">
+      <td class="type">
+        Basic
+      </td>
+      <td class="type">
+        Background colors, title. custom ticks
+      </td>
+      <td class="type">
+        Value change, formatted value, tick labels
+      </td>
+      <td class="type">
+        Custom colors
+      </td>
+    </tr>
+    <tr>
+      <td style="width: 120px">
+        <span id="basic"></span>
+      </td>
+      <td style="width: 200px">
+        <span id="colors"></span>
+      </td>
+      <td style="width: 300px">
+        <span id="interactive"></span>
+        <center>
+          <input type="text" size="3" value="22" id="v1" />
+          <input type="button" onclick="setValue()" value="Set" />
+        </center>
+      </td>
+      <td style="width: 200px">
+        <span id="customcolors"></span>
+      </td>
+    </tr>
+  </table>
+  <script>
+  setupGauges();
+  </script>
+</body>
+</html>