Advertisement
Guest User

Untitled

a guest
Jul 20th, 2017
58
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.96 KB | None | 0 0
  1. $(document).ready(function(){/**/});
  2.  
  3. <ui:fragment xmlns="http://www.w3.org/1999/xhtml"
  4. xmlns:h="http://java.sun.com/jsf/html"
  5. xmlns:f="http://java.sun.com/jsf/core"
  6. xmlns:ui="http://java.sun.com/jsf/facelets"
  7. xmlns:p="http://primefaces.org/ui"
  8. xmlns:c="http://java.sun.com/jsp/jstl/core"
  9. xmlns:pe="http://primefaces.org/ui/extensions"
  10. xmlns:fn="http://java.sun.com/jsp/jstl/functions">
  11.  
  12. <style>
  13. .ui-datagrid-content .ui-widget-content .ui-grid .ui-grid-responsive{
  14. width: 100%;
  15. }
  16. .ui-datagrid-content .ui-widget-content .ui-grid .ui-grid-responsive .ui-grid-row{
  17. width: 50%;
  18. margin: 0 auto;
  19. }
  20. </style>
  21.  
  22. <h:outputScript library="js" name="gauge.min.js" />
  23. <h:outputScript library="js" name="canvasjs.min.js" />
  24.  
  25. <script type="text/javascript">
  26. var windSpeed;
  27. var windDirection;
  28. function init(windSpeedValue, windDirectionValue) {
  29.  
  30. //Wind Speed Gauge Starts Here
  31. windSpeed = new RadialGauge({
  32. renderTo: 'canvas-windSpeed',
  33. width: 250,
  34. height: 250,
  35. units: "m/sec",
  36. minValue: 0,
  37. startAngle: 90,
  38. ticksAngle: 180,
  39. maxValue: 25,
  40. majorTicks: [
  41. "0",
  42. "5",
  43. "10",
  44. "15",
  45. "20",
  46. "25"
  47. ],
  48. minorTicks: 5,
  49. strokeTicks: true,
  50. highlights: [
  51. {
  52. "from": 15,
  53. "to": 25,
  54. "color": "rgba(254,206,168)"
  55. }
  56. ],
  57. colorPlate: "#fff",
  58. borderShadowWidth: 0,
  59. borders: false,
  60. needleType: "arrow",
  61. needleWidth: 2,
  62. needleCircleSize: 7,
  63. needleCircleOuter: true,
  64. needleCircleInner: false,
  65. animationDuration: 1500,
  66. animationRule: "linear",
  67. valueBoxBorderRadius: 4,
  68. colorUnits: "#FECEA8",
  69. fontUnits: "Verdana",
  70. fontUnitsSize: 28,
  71. colorValueBoxRect: "#fff",
  72. colorValueText: "#003333",
  73. fontUnitsWeight: "bold",
  74. fontValueWeight: "bold",
  75. valueTextShadow: true,
  76. colorValueTextShadow: "#FECEA8",
  77. colorValueBoxBackground: "#ffffff",
  78. colorValueBoxRectEnd: "#FECEA8",
  79. colorNeedle: "#20B2AA",
  80. colorNeedleEnd:"#B0C7DF",
  81. colorNeedleCircleOuterEnd: "#20B2AA"
  82. });
  83. windSpeed.value = windSpeedValue;
  84. windSpeed.draw();
  85.  
  86. //Wind Speed Gauge Ends Here
  87.  
  88. //Wind Direction Gauge Starts Here
  89. windDirection = new RadialGauge({
  90. renderTo: 'canvas-windDirection',
  91. width: 250,
  92. height: 250,
  93. minValue: 0,
  94. maxValue: 360,
  95. majorTicks: [
  96. "N",
  97. "NE",
  98. "E",
  99. "SE",
  100. "S",
  101. "SW",
  102. "W",
  103. "NW",
  104. "N"
  105. ],
  106. minorTicks: 22,
  107. ticksAngle: 360,
  108. startAngle: 180,
  109. strokeTicks: false,
  110. highlights: false,
  111. colorPlate: "#fff",
  112. colorMajorTicks: "##f5f5f5",
  113. colorMinorTicks: "#ddd",
  114. colorNumbers: "#ccc",
  115. colorNeedle: "rgba(240, 128, 128, 1)",
  116. colorNeedleEnd: "rgba(255, 160, 122, .9)",
  117. valueBox: false,
  118. valueTextShadow: false,
  119. colorCircleInner: "#fff",
  120. colorNeedleCircleOuter: "#ccc",
  121. needleCircleSize: 15,
  122. needleCircleOuter: false,
  123. animationRule: "linear",
  124. needleType: "line",
  125. needleStart: 75,
  126. needleEnd: 99,
  127. needleWidth: 3,
  128. borders: true,
  129. borderInnerWidth: 0,
  130. borderMiddleWidth: 0,
  131. borderOuterWidth: 10,
  132. colorBorderOuter: "#ccc",
  133. colorBorderOuterEnd: "#ccc",
  134. colorNeedleShadowDown: "#222",
  135. borderShadowWidth: 0,
  136. animationDuration: 1500
  137. });
  138.  
  139. windDirection.value = windDirectionValue;
  140. windDirection.draw();
  141.  
  142. //Wind Direction Gauge Ends Here
  143.  
  144. }
  145. </script>
  146. <h:outputScript library="js">
  147. $(document).ready(function(){
  148. var windDir = #{stationDashboardViewMB.windDirectionStrValue};
  149. var windSpeed = #{stationDashboardViewMB.windSpeedStrValue};
  150. init(windSpeed, windDir);
  151. });
  152. </h:outputScript>
  153.  
  154.  
  155.  
  156. <div style="position:absolute; top:255px; left:450px;">
  157. <canvas id="canvas-windSpeed" style="height: 250px; width: 100%;"></canvas>
  158. </div>
  159. <div style="position:absolute; top:255px; left:700px;">
  160. <canvas id="canvas-windDirection" style="height: 250px; width: 100%;"></canvas>
  161. </div>
  162.  
  163.  
  164. </ui:fragment>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement