選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

293 行
11KB

  1. <?php
  2. class meter
  3. {
  4. function __construct()
  5. {
  6. }
  7. function makeSVG($tag, $type, $value, $max, $min, $optimum, $low, $high)
  8. {
  9. $svg = '';
  10. if ($tag == 'meter') {
  11. if ($type == '2') {
  12. /////////////////////////////////////////////////////////////////////////////////////
  13. ///////// CUSTOM <meter type="2">
  14. /////////////////////////////////////////////////////////////////////////////////////
  15. $h = 10;
  16. $w = 160;
  17. $border_radius = 0.143; // Factor of Height
  18. $svg = '<?xml version="1.0" encoding="UTF-8"?>
  19. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  20. <svg width="' . $w . 'px" height="' . $h . 'px" viewBox="0 0 ' . $w . ' ' . $h . '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><g>
  21. <defs>
  22. <linearGradient id="GrGRAY" x1="0" y1="0" x2="0" y2="1" gradientUnits="boundingBox">
  23. <stop offset="0%" stop-color="rgb(222, 222, 222)" />
  24. <stop offset="20%" stop-color="rgb(232, 232, 232)" />
  25. <stop offset="25%" stop-color="rgb(232, 232, 232)" />
  26. <stop offset="100%" stop-color="rgb(182, 182, 182)" />
  27. </linearGradient>
  28. </defs>
  29. ';
  30. $svg .= '<rect x="0" y="0" width="' . $w . '" height="' . $h . '" fill="#f4f4f4" stroke="none" />';
  31. // LOW to HIGH region
  32. //if ($low && $high && ($low != $min || $high != $max)) {
  33. if ($low && $high) {
  34. $barx = (($low - $min) / ($max - $min) ) * $w;
  35. $barw = (($high - $low) / ($max - $min) ) * $w;
  36. $svg .= '<rect x="' . $barx . '" y="0" width="' . $barw . '" height="' . $h . '" fill="url(#GrGRAY)" stroke="#888888" stroke-width="0.5px" />';
  37. }
  38. // OPTIMUM Marker (? AVERAGE)
  39. if ($optimum) {
  40. $barx = (($optimum - $min) / ($max - $min) ) * $w;
  41. $barw = $h / 2;
  42. $barcol = '#888888';
  43. $svg .= '<rect x="' . $barx . '" y="0" rx="' . ($h * $border_radius) . 'px" ry="' . ($h * $border_radius) . 'px" width="' . $barw . '" height="' . $h . '" fill="' . $barcol . '" stroke="none" />';
  44. }
  45. // VALUE Marker
  46. if ($value) {
  47. if ($min != $low && $value < $low) {
  48. $col = 'orange';
  49. } else if ($max != $high && $value > $high) {
  50. $col = 'orange';
  51. } else {
  52. $col = '#008800';
  53. }
  54. $cx = (($value - $min) / ($max - $min) ) * $w;
  55. $cy = $h / 2;
  56. $rx = $h / 3.5;
  57. $ry = $h / 2.2;
  58. $svg .= '<ellipse fill="' . $col . '" stroke="#000000" stroke-width="0.5px" cx="' . $cx . '" cy="' . $cy . '" rx="' . $rx . '" ry="' . $ry . '"/>';
  59. }
  60. // BoRDER
  61. $svg .= '<rect x="0" y="0" width="' . $w . '" height="' . $h . '" fill="none" stroke="#888888" stroke-width="0.5px" />';
  62. $svg .= '</g></svg>';
  63. } else if ($type == '3') {
  64. /////////////////////////////////////////////////////////////////////////////////////
  65. ///////// CUSTOM <meter type="2">
  66. /////////////////////////////////////////////////////////////////////////////////////
  67. $h = 10;
  68. $w = 100;
  69. $border_radius = 0.143; // Factor of Height
  70. $svg = '<?xml version="1.0" encoding="UTF-8"?>
  71. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  72. <svg width="' . $w . 'px" height="' . $h . 'px" viewBox="0 0 ' . $w . ' ' . $h . '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><g>
  73. <defs>
  74. <linearGradient id="GrGRAY" x1="0" y1="0" x2="0" y2="1" gradientUnits="boundingBox">
  75. <stop offset="0%" stop-color="rgb(222, 222, 222)" />
  76. <stop offset="20%" stop-color="rgb(232, 232, 232)" />
  77. <stop offset="25%" stop-color="rgb(232, 232, 232)" />
  78. <stop offset="100%" stop-color="rgb(182, 182, 182)" />
  79. </linearGradient>
  80. </defs>
  81. ';
  82. $svg .= '<rect x="0" y="0" width="' . $w . '" height="' . $h . '" fill="#f4f4f4" stroke="none" />';
  83. // LOW to HIGH region
  84. if ($low && $high && ($low != $min || $high != $max)) {
  85. //if ($low && $high) {
  86. $barx = (($low - $min) / ($max - $min) ) * $w;
  87. $barw = (($high - $low) / ($max - $min) ) * $w;
  88. $svg .= '<rect x="' . $barx . '" y="0" width="' . $barw . '" height="' . $h . '" fill="url(#GrGRAY)" stroke="#888888" stroke-width="0.5px" />';
  89. }
  90. // OPTIMUM Marker (? AVERAGE)
  91. if ($optimum) {
  92. $barx = (($optimum - $min) / ($max - $min) ) * $w;
  93. $barw = $h / 2;
  94. $barcol = '#888888';
  95. $svg .= '<rect x="' . $barx . '" y="0" rx="' . ($h * $border_radius) . 'px" ry="' . ($h * $border_radius) . 'px" width="' . $barw . '" height="' . $h . '" fill="' . $barcol . '" stroke="none" />';
  96. }
  97. // VALUE Marker
  98. if ($value) {
  99. if ($min != $low && $value < $low) {
  100. $col = 'orange';
  101. } else if ($max != $high && $value > $high) {
  102. $col = 'orange';
  103. } else {
  104. $col = 'orange';
  105. }
  106. $cx = (($value - $min) / ($max - $min) ) * $w;
  107. $cy = $h / 2;
  108. $rx = $h / 2.2;
  109. $ry = $h / 2.2;
  110. $svg .= '<ellipse fill="' . $col . '" stroke="#000000" stroke-width="0.5px" cx="' . $cx . '" cy="' . $cy . '" rx="' . $rx . '" ry="' . $ry . '"/>';
  111. }
  112. // BoRDER
  113. $svg .= '<rect x="0" y="0" width="' . $w . '" height="' . $h . '" fill="none" stroke="#888888" stroke-width="0.5px" />';
  114. $svg .= '</g></svg>';
  115. } else {
  116. /////////////////////////////////////////////////////////////////////////////////////
  117. ///////// DEFAULT <meter>
  118. /////////////////////////////////////////////////////////////////////////////////////
  119. $h = 10;
  120. $w = 50;
  121. $border_radius = 0.143; // Factor of Height
  122. $svg = '<?xml version="1.0" encoding="UTF-8"?>
  123. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  124. <svg width="' . $w . 'px" height="' . $h . 'px" viewBox="0 0 ' . $w . ' ' . $h . '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><g>
  125. <defs>
  126. <linearGradient id="GrGRAY" x1="0" y1="0" x2="0" y2="1" gradientUnits="boundingBox">
  127. <stop offset="0%" stop-color="rgb(222, 222, 222)" />
  128. <stop offset="20%" stop-color="rgb(232, 232, 232)" />
  129. <stop offset="25%" stop-color="rgb(232, 232, 232)" />
  130. <stop offset="100%" stop-color="rgb(182, 182, 182)" />
  131. </linearGradient>
  132. <linearGradient id="GrRED" x1="0" y1="0" x2="0" y2="1" gradientUnits="boundingBox">
  133. <stop offset="0%" stop-color="rgb(255, 162, 162)" />
  134. <stop offset="20%" stop-color="rgb(255, 218, 218)" />
  135. <stop offset="25%" stop-color="rgb(255, 218, 218)" />
  136. <stop offset="100%" stop-color="rgb(255, 0, 0)" />
  137. </linearGradient>
  138. <linearGradient id="GrGREEN" x1="0" y1="0" x2="0" y2="1" gradientUnits="boundingBox">
  139. <stop offset="0%" stop-color="rgb(102, 230, 102)" />
  140. <stop offset="20%" stop-color="rgb(218, 255, 218)" />
  141. <stop offset="25%" stop-color="rgb(218, 255, 218)" />
  142. <stop offset="100%" stop-color="rgb(0, 148, 0)" />
  143. </linearGradient>
  144. <linearGradient id="GrBLUE" x1="0" y1="0" x2="0" y2="1" gradientUnits="boundingBox">
  145. <stop offset="0%" stop-color="rgb(102, 102, 230)" />
  146. <stop offset="20%" stop-color="rgb(238, 238, 238)" />
  147. <stop offset="25%" stop-color="rgb(238, 238, 238)" />
  148. <stop offset="100%" stop-color="rgb(0, 0, 128)" />
  149. </linearGradient>
  150. <linearGradient id="GrORANGE" x1="0" y1="0" x2="0" y2="1" gradientUnits="boundingBox">
  151. <stop offset="0%" stop-color="rgb(255, 186, 0)" />
  152. <stop offset="20%" stop-color="rgb(255, 238, 168)" />
  153. <stop offset="25%" stop-color="rgb(255, 238, 168)" />
  154. <stop offset="100%" stop-color="rgb(255, 155, 0)" />
  155. </linearGradient>
  156. </defs>
  157. <rect x="0" y="0" rx="' . ($h * $border_radius) . 'px" ry="' . ($h * $border_radius) . 'px" width="' . $w . '" height="' . $h . '" fill="url(#GrGRAY)" stroke="none" />
  158. ';
  159. if ($value) {
  160. $barw = (($value - $min) / ($max - $min) ) * $w;
  161. if ($optimum < $low) {
  162. if ($value < $low) {
  163. $barcol = 'url(#GrGREEN)';
  164. } else if ($value > $high) {
  165. $barcol = 'url(#GrRED)';
  166. } else {
  167. $barcol = 'url(#GrORANGE)';
  168. }
  169. } else if ($optimum > $high) {
  170. if ($value < $low) {
  171. $barcol = 'url(#GrRED)';
  172. } else if ($value > $high) {
  173. $barcol = 'url(#GrGREEN)';
  174. } else {
  175. $barcol = 'url(#GrORANGE)';
  176. }
  177. } else {
  178. if ($value < $low) {
  179. $barcol = 'url(#GrORANGE)';
  180. } else if ($value > $high) {
  181. $barcol = 'url(#GrORANGE)';
  182. } else {
  183. $barcol = 'url(#GrGREEN)';
  184. }
  185. }
  186. $svg .= '<rect x="0" y="0" rx="' . ($h * $border_radius) . 'px" ry="' . ($h * $border_radius) . 'px" width="' . $barw . '" height="' . $h . '" fill="' . $barcol . '" stroke="none" />';
  187. }
  188. // Borders
  189. //$svg .= '<rect x="0" y="0" rx="'.($h*$border_radius).'px" ry="'.($h*$border_radius).'px" width="'.$w.'" height="'.$h.'" fill="none" stroke="#888888" stroke-width="0.5px" />';
  190. if ($value) {
  191. // $svg .= '<rect x="0" y="0" rx="'.($h*$border_radius).'px" ry="'.($h*$border_radius).'px" width="'.$barw.'" height="'.$h.'" fill="none" stroke="#888888" stroke-width="0.5px" />';
  192. }
  193. $svg .= '</g></svg>';
  194. }
  195. } else { // $tag == 'progress'
  196. if ($type == '2') {
  197. /////////////////////////////////////////////////////////////////////////////////////
  198. ///////// CUSTOM <progress type="2">
  199. /////////////////////////////////////////////////////////////////////////////////////
  200. } else {
  201. /////////////////////////////////////////////////////////////////////////////////////
  202. ///////// DEFAULT <progress>
  203. /////////////////////////////////////////////////////////////////////////////////////
  204. $h = 10;
  205. $w = 100;
  206. $border_radius = 0.143; // Factor of Height
  207. if ($value or $value === '0') {
  208. $fill = 'url(#GrGRAY)';
  209. } else {
  210. $fill = '#f8f8f8';
  211. }
  212. $svg = '<svg width="' . $w . 'px" height="' . $h . 'px" viewBox="0 0 ' . $w . ' ' . $h . '"><g>
  213. <defs>
  214. <linearGradient id="GrGRAY" x1="0" y1="0" x2="0" y2="1" gradientUnits="boundingBox">
  215. <stop offset="0%" stop-color="rgb(222, 222, 222)" />
  216. <stop offset="20%" stop-color="rgb(232, 232, 232)" />
  217. <stop offset="25%" stop-color="rgb(232, 232, 232)" />
  218. <stop offset="100%" stop-color="rgb(182, 182, 182)" />
  219. </linearGradient>
  220. <linearGradient id="GrGREEN" x1="0" y1="0" x2="0" y2="1" gradientUnits="boundingBox">
  221. <stop offset="0%" stop-color="rgb(102, 230, 102)" />
  222. <stop offset="20%" stop-color="rgb(218, 255, 218)" />
  223. <stop offset="25%" stop-color="rgb(218, 255, 218)" />
  224. <stop offset="100%" stop-color="rgb(0, 148, 0)" />
  225. </linearGradient>
  226. </defs>
  227. <rect x="0" y="0" rx="' . ($h * $border_radius) . 'px" ry="' . ($h * $border_radius) . 'px" width="' . $w . '" height="' . $h . '" fill="' . $fill . '" stroke="none" />
  228. ';
  229. if ($value) {
  230. $barw = (($value - $min) / ($max - $min) ) * $w;
  231. $barcol = 'url(#GrGREEN)';
  232. $svg .= '<rect x="0" y="0" rx="' . ($h * $border_radius) . 'px" ry="' . ($h * $border_radius) . 'px" width="' . $barw . '" height="' . $h . '" fill="' . $barcol . '" stroke="none" />';
  233. }
  234. // Borders
  235. $svg .= '<rect x="0" y="0" rx="' . ($h * $border_radius) . 'px" ry="' . ($h * $border_radius) . 'px" width="' . $w . '" height="' . $h . '" fill="none" stroke="#888888" stroke-width="0.5px" />';
  236. if ($value) {
  237. // $svg .= '<rect x="0" y="0" rx="'.($h*$border_radius).'px" ry="'.($h*$border_radius).'px" width="'.$barw.'" height="'.$h.'" fill="none" stroke="#888888" stroke-width="0.5px" />';
  238. }
  239. $svg .= '</g></svg>';
  240. }
  241. }
  242. return $svg;
  243. }
  244. }