gaugetheme.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. // Copyright 2007 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview The color theme used by a gauge (goog.ui.Gauge).
  16. */
  17. goog.provide('goog.ui.GaugeTheme');
  18. goog.require('goog.graphics.LinearGradient');
  19. goog.require('goog.graphics.SolidFill');
  20. goog.require('goog.graphics.Stroke');
  21. /**
  22. * A class for the default color theme for a Gauge.
  23. * Users can extend this class to provide a custom color theme, and apply the
  24. * custom color theme by calling {@link goog.ui.Gauge#setTheme}.
  25. * @constructor
  26. * @final
  27. */
  28. goog.ui.GaugeTheme = function() {};
  29. /**
  30. * Returns the stroke for the external border of the gauge.
  31. * @return {!goog.graphics.Stroke} The stroke to use.
  32. */
  33. goog.ui.GaugeTheme.prototype.getExternalBorderStroke = function() {
  34. return new goog.graphics.Stroke(1, '#333333');
  35. };
  36. /**
  37. * Returns the fill for the external border of the gauge.
  38. * @param {number} cx X coordinate of the center of the gauge.
  39. * @param {number} cy Y coordinate of the center of the gauge.
  40. * @param {number} r Radius of the gauge.
  41. * @return {!goog.graphics.Fill} The fill to use.
  42. */
  43. goog.ui.GaugeTheme.prototype.getExternalBorderFill = function(cx, cy, r) {
  44. return new goog.graphics.LinearGradient(
  45. cx + r, cy - r, cx - r, cy + r, '#f7f7f7', '#cccccc');
  46. };
  47. /**
  48. * Returns the stroke for the internal border of the gauge.
  49. * @return {!goog.graphics.Stroke} The stroke to use.
  50. */
  51. goog.ui.GaugeTheme.prototype.getInternalBorderStroke = function() {
  52. return new goog.graphics.Stroke(2, '#e0e0e0');
  53. };
  54. /**
  55. * Returns the fill for the internal border of the gauge.
  56. * @param {number} cx X coordinate of the center of the gauge.
  57. * @param {number} cy Y coordinate of the center of the gauge.
  58. * @param {number} r Radius of the gauge.
  59. * @return {!goog.graphics.Fill} The fill to use.
  60. */
  61. goog.ui.GaugeTheme.prototype.getInternalBorderFill = function(cx, cy, r) {
  62. return new goog.graphics.SolidFill('#f7f7f7');
  63. };
  64. /**
  65. * Returns the stroke for the major ticks of the gauge.
  66. * @return {!goog.graphics.Stroke} The stroke to use.
  67. */
  68. goog.ui.GaugeTheme.prototype.getMajorTickStroke = function() {
  69. return new goog.graphics.Stroke(2, '#333333');
  70. };
  71. /**
  72. * Returns the stroke for the minor ticks of the gauge.
  73. * @return {!goog.graphics.Stroke} The stroke to use.
  74. */
  75. goog.ui.GaugeTheme.prototype.getMinorTickStroke = function() {
  76. return new goog.graphics.Stroke(1, '#666666');
  77. };
  78. /**
  79. * Returns the stroke for the hinge at the center of the gauge.
  80. * @return {!goog.graphics.Stroke} The stroke to use.
  81. */
  82. goog.ui.GaugeTheme.prototype.getHingeStroke = function() {
  83. return new goog.graphics.Stroke(1, '#666666');
  84. };
  85. /**
  86. * Returns the fill for the hinge at the center of the gauge.
  87. * @param {number} cx X coordinate of the center of the gauge.
  88. * @param {number} cy Y coordinate of the center of the gauge.
  89. * @param {number} r Radius of the hinge.
  90. * @return {!goog.graphics.Fill} The fill to use.
  91. */
  92. goog.ui.GaugeTheme.prototype.getHingeFill = function(cx, cy, r) {
  93. return new goog.graphics.LinearGradient(
  94. cx + r, cy - r, cx - r, cy + r, '#4684ee', '#3776d6');
  95. };
  96. /**
  97. * Returns the stroke for the gauge needle.
  98. * @return {!goog.graphics.Stroke} The stroke to use.
  99. */
  100. goog.ui.GaugeTheme.prototype.getNeedleStroke = function() {
  101. return new goog.graphics.Stroke(1, '#c63310');
  102. };
  103. /**
  104. * Returns the fill for the hinge at the center of the gauge.
  105. * @param {number} cx X coordinate of the center of the gauge.
  106. * @param {number} cy Y coordinate of the center of the gauge.
  107. * @param {number} r Radius of the gauge.
  108. * @return {!goog.graphics.Fill} The fill to use.
  109. */
  110. goog.ui.GaugeTheme.prototype.getNeedleFill = function(cx, cy, r) {
  111. // Make needle a bit transparent so that text underneeth is still visible.
  112. return new goog.graphics.SolidFill('#dc3912', 0.7);
  113. };
  114. /**
  115. * Returns the color for the gauge title.
  116. * @return {string} The color to use.
  117. */
  118. goog.ui.GaugeTheme.prototype.getTitleColor = function() {
  119. return '#333333';
  120. };
  121. /**
  122. * Returns the color for the gauge value.
  123. * @return {string} The color to use.
  124. */
  125. goog.ui.GaugeTheme.prototype.getValueColor = function() {
  126. return 'black';
  127. };
  128. /**
  129. * Returns the color for the labels (formatted values) of tick marks.
  130. * @return {string} The color to use.
  131. */
  132. goog.ui.GaugeTheme.prototype.getTickLabelColor = function() {
  133. return '#333333';
  134. };