API tools faq
paste
Advertisement
Guest User

frontpage.html

a guest
Jan 7th, 2015
1,051
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.84 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Domoticz Tablet</title>
  6. <link href='http://fonts.googleapis.com/css?family=Orbitron:700' rel='stylesheet' type='text/css'>
  7. <link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
  8. <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  9. <link rel="stylesheet" href="frontpage.css">
  10. </head>
  11. <body bgcolor="#000">
  12.  
  13. <div id="cnt">
  14. <div>
  15. <div id="frame">
  16. <div id="cell1">--</div><div id="desc_cell1">cell1</div>
  17. <div id="cell2">--</div><div id="desc_cell2">cell2</div>
  18. </div>
  19. <div id="frame">
  20. <div id="cell3"></div><div id="desc_cell3">cell3</div>
  21. </div>
  22. <div id="frame">
  23. <div id="cell4">--</div><div id="desc_cell4">cell4</div>
  24. <div id="cell5">--</div><div id="desc_cell5">cell5</div>
  25. </div>
  26. </div>
  27.  
  28.  
  29. <div>
  30. <div id="frame">
  31. <div id="cell6">--</div><div id="desc_cell6">cell6</div>
  32. </div>
  33. <div id="frame">
  34. <div id="cell7">--</div><div id="desc_cell7">cell7</div>
  35. </div>
  36. <div id="frame">
  37. <div id="cell8">--</div><div id="desc_cell8">cell8</div>
  38. </div>
  39. <div id="frame">
  40. <div id="cell9">--</div><div id="desc_cell9">cell9</div>
  41. </div>
  42. <div id="frame">
  43. <div id="cell10">--</div><div id="desc_cell10">cell10</div>
  44. </div>
  45. </div>
  46.  
  47.  
  48. <div>
  49. <div id="frame">
  50. <div id="cell11">--</div><div id="desc_cell11">cell11</div>
  51. </div>
  52. <div id="frame">
  53. <div id="cell12">--</div><div id="desc_cell12">cell12</div>
  54. </div>
  55. <div id="frame">
  56. <div id="cell13">--</div><div id="desc_cell13">cell12</div>
  57. </div>
  58. <div id="frame">
  59. <div id="cell14">--</div><div id="desc_cell14">cell14</div>
  60. </div>
  61. <div id="frame">
  62. <div id="cell15">--</div><div id="desc_cell15">cell15</div>
  63. </div>
  64. </div>
  65.  
  66.  
  67. <div>
  68. <div id="frame">
  69. <div id="cell16">--</div><div id="desc_cell16">cell16</div>
  70. </div>
  71. <div id="frame">
  72. <div id="cell17">--</div><div id="desc_cell17">cell17</div>
  73. </div>
  74. <div id="frame">
  75. <div id="cell18">--</div><div id="desc_cell18">cell18</div>
  76. </div>
  77. <div id="frame">
  78. <div id="cell19">--</div><div id="desc_cell19">cell19</div>
  79. </div>
  80. <div id="frame">
  81. <div id="cell20">--</div><div id="desc_cell20">cell20</div>
  82. </div>
  83. </div>
  84. </div>
  85.  
  86. <script type="text/javascript" charset="utf-8">
  87. function RefreshData()
  88. {
  89. clearInterval($.refreshTimer);
  90. var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&jsoncallback=?";
  91. $.getJSON(jurl,
  92. {
  93. format: "json"
  94. },
  95. function(data) {
  96. if (typeof data.result != 'undefined') {
  97.  
  98. $.each(data.result, function(i,item){
  99. for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
  100. if( $.PageArray[ii][0] === item.idx ) { // Domoticz idx number
  101. var vtype= $.PageArray[ii][1]; // Domotitcz type (like Temp, Humidity)
  102. var vlabel= $.PageArray[ii][2]; // cell number from HTML layout
  103. var vdesc= $.PageArray[ii][3]; // description
  104. var vattr= $.PageArray[ii][4]; // extra css attributes
  105. var valarm= $.PageArray[ii][5]; // alarm value to turn text to red
  106. var vdata= item[vtype]; // current value
  107. if (typeof vdata == 'undefined') {
  108. vdata="??";
  109. } else {
  110. // remove too much text
  111. vdata=new String(vdata).split("Watt",1)[0];
  112. vdata=new String(vdata).split("kWh",1)[0];
  113. vdata=new String(vdata).split("m3",1)[0];
  114. vdata=new String(vdata).split(" Level:",1)[0];
  115. vdata=new String(vdata).replace("Set","On");
  116. }
  117.  
  118. if (vdata == 'Sunny' ) {
  119. vdata=new String(vdata).replace( "Sunny","<img src=icons/sun.png width=204 height=204>");
  120. }
  121. if (vdata == 'Partly Cloudy' ) {
  122. vdata=new String(vdata).replace( "Partly Cloudy","<img src=icons/partlycloudy.png width=204 height=204>");
  123. }
  124. if (vdata == 'Cloudy' ) {
  125. vdata=new String(vdata).replace( "Cloudy","<img src=icons/cloudy.png width=204 height=204>");
  126. }
  127. if (vdata == 'Clear' ) {
  128. vdata=new String(vdata).replace( "Clear","<img src=icons/clear.png width=204 height=204>");
  129. }
  130. if (vdata == 'Rain' ) {
  131. vdata=new String(vdata).replace( "Rain","<img src=icons/rain.png width=204 height=204>");
  132. }
  133. if (vdata == 'Snow' ) {
  134. vdata=new String(vdata).replace( "Snow","<img src=icons/snow.png width=204 height=204>");
  135. }
  136. if (vdata == 'Fog' ) {
  137. vdata=new String(vdata).replace( "Fog","<img src=icons/fog.png width=204 height=204>");
  138. }
  139. if (vdata == 'Hail' ) {
  140. vdata=new String(vdata).replace( "Hail","<img src=icons/hail.png width=204 height=204>");
  141. }
  142. if (vdata == 'Thunderstom' ) {
  143. vdata=new String(vdata).replace( "Thunderstorm","<img src=icons/thunderstorm.png width=204 height=204>");
  144. }
  145. if (vdata == 'Sleet' ) {
  146. vdata=new String(vdata).replace( "Sleet","<img src=icons/sleet.png width=204 height=204>");
  147. }
  148.  
  149. if(item.idx == '1' || item.idx == '5'){
  150. vdata=new String(vdata).split("%",1)[0];
  151. vdata=Math.round(vdata);
  152. }
  153. if(item.idx == '107'){
  154. vdata=Math.round(vdata * 10) / 10;
  155. }
  156. if(item.idx == '30' || item.idx == '38'){
  157. vdata= vdata + ' ';
  158. }
  159. // create switchable value when item is switch
  160. switchclick='';
  161. if (vdata == 'Off' ) {
  162. switchclick = 'onclick="SwitchToggle('+item.idx+', \'On\');"';
  163. }
  164. if (vdata == 'On' ) {
  165. switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');"';
  166. }
  167.  
  168.  
  169. // if alarm threshold is defined, make value red
  170. //alarmcss='';
  171. //if (typeof valarm != 'undefined') {
  172. // if ( eval(vdata + valarm)) { // note orig: vdata > alarm
  173. // alarmcss=';color:red;';
  174. // }
  175. //}
  176.  
  177. // if switch is on, make green, if off, make red
  178. alarmcss='';
  179. if (vdata == 'On' || vdata == 'On ') { // note orig: vdata > alarm
  180. alarmcss=';color:green;';
  181. vdata = 'Aan';
  182. }
  183.  
  184. if (vdata == 'Off' || vdata == 'Off ') { // note orig: vdata > alarm
  185. alarmcss=';color:red;';
  186. vdata = 'Uit';
  187. }
  188.  
  189.  
  190. if(item.idx == '107' && vdata > 40){
  191. vdata='Aan';
  192. alarmcss=';color:green;';
  193. }
  194. if(item.idx == '107' && vdata < 40 && vdata > 0.9){
  195. vdata='Uit';
  196. alarmcss=';color:red;';
  197. }
  198. if(item.idx == '107' && vdata < 40 && vdata > 0.9){
  199. vdata='Uit';
  200. alarmcss=';color:red;';
  201. }
  202.  
  203. if (vdata > 3 && vdata < 13) { // note orig: vdata > alarm
  204. alarmcss=';background-color:#FF0000;width:100%; height:100%;';
  205. }
  206. if (vdata > 25 && vdata <50) { // note orig: vdata > alarm
  207. alarmcss=';color:#FFA500;';
  208. }
  209. if (vdata > 50 && vdata <75) { // note orig: vdata > alarm
  210. alarmcss=';color:#FF0000;';
  211. }
  212. if (vdata > 75 && vdata <100) { // note orig: vdata > alarm
  213. alarmcss=';color:#FF00FF;';
  214. }
  215.  
  216.  
  217. // if extra css attributes
  218. if (typeof vattr == 'undefined') {
  219. $('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
  220. } else {
  221. $('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
  222. }
  223. $('#desc_'+vlabel).html(vdesc);
  224. }
  225. }
  226. });
  227. }
  228. });
  229. $.refreshTimer = setInterval(RefreshData, 8000);
  230. }
  231.  
  232. // ############################################################################################################
  233. // #### vvvvv USER VALUES below vvvvv #######
  234. // ############################################################################################################
  235.  
  236. $(document).ready(function() {
  237. $.roomplan=2; // define roomplan in Domoticz and create items below.
  238. $.domoticzurl="http://192.168.0.100:8080";
  239. //format: idx, value, label, description, [override css], [alarm value]
  240. $.PageArray = [
  241. ['1', 'Data', 'cell1', 'Memory RPi (%)'],
  242. ['5', 'Data', 'cell2', 'CPU RPi (%)'],
  243. ['31', 'ForecastStr', 'cell3', 'Forecast'],
  244. ['107', 'CounterToday', 'cell4', 'Pomp verbr. (kWh)',],
  245. ['107', 'Usage', 'cell5', 'Pomp',],
  246.  
  247. ['11', 'Status', 'cell6', 'Lamp voor',],
  248. ['14', 'Status', 'cell7', 'Lamp lage kast',],
  249. ['10', 'Status', 'cell8', 'Lamp achter'],
  250. ['13', 'Status', 'cell9', 'Lamp subwoofer'],
  251. ['12', 'Status', 'cell10', 'Lamp hoge kast'],
  252.  
  253. ['30', 'Status', 'cell11', 'iPhone Marco'],
  254. ['74', 'Level', 'cell12', 'Spots uitbouw %'],
  255. ['74', 'Status', 'cell13', 'Spots uitbouw'],
  256. ['40', 'Status', 'cell14', 'Spots voortuin'],
  257. ['103', 'Status', 'cell15', 'Spots achtertuin'],
  258.  
  259. ['38', 'Status', 'cell16', 'iPhone Karin'],
  260. ['31', 'Temp', 'cell17', 'Buiten (&deg;C)'],
  261. ['31', 'Humidity', 'cell18', 'Humidity (%)'],
  262. ['8', 'Status', 'cell19', 'Slaapkamer'],
  263. ['16', 'Status', 'cell20', 'Badkamer'],
  264. ];
  265.  
  266. // ############################################################################################################
  267. // #### ^^^^^ USER VALUES above ^^^^^ #######
  268. // ############################################################################################################
  269.  
  270. RefreshData();
  271. });
  272.  
  273.  
  274. function SwitchToggle(idx, switchcmd)
  275. {
  276. console.log('function called');
  277. $.ajax({
  278. url: "json.htm?type=command&param=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",
  279. async: false,
  280. dataType: 'json',
  281. success: function(){
  282. console.log('SUCCES');
  283. },
  284. error: function(){
  285. console.log('ERROR');
  286. }
  287. });
  288. RefreshData();
  289. }
  290. </script>
  291. </body>
  292. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!