☰

HKO overlay

Add overlay to HKO

  1. // ==UserScript==
  2. // @name        HKO overlay
  3. // @description Add overlay to HKO
  4. // @namespace   NoNameSpace
  5. // @include     *://www.hko.gov.hk/*
  6. // @include     *://www.weather.gov.hk/*
  7. // @require     https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js
  8. // @grant GM_info 
  9. // @grant GM_deleteValue
  10. // @grant GM_getValue
  11. // @grant GM_listValues
  12. // @grant GM_setValue
  13. // @grant GM_getResourceText
  14. // @grant GM_getResourceURL
  15. // @grant GM_addStyle
  16. // @grant GM_log
  17. // @grant GM_openInTab
  18. // @grant GM_registerMenuCommand
  19. // @grant GM_setClipboard
  20. // @grant GM_xmlhttpRequest
  21. // @grant unsafeWindow
  22.  
  23. // @version 1.1.2
  24. // ==/UserScript==
  25.  
  26. $("body").append (
  27.       '<div id="gmLayerWrapper1" align="left">'
  28. 	+ '<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">'
  29. 	+ '<tr>'
  30. 	+ '<td align="left" valign="top">'
  31. 	+ '中環碼頭向東(11)<br/>'
  32. 	+ '<img src="https://www.hko.gov.hk/wxinfo/aws/hko_mica/cp1/latest_CP1.jpg" width="400"></img><br/><br/>'
  33. 	+ '尖沙咀天文台總部向東(10)<br/>'
  34. 	+ '<img src="https://www.hko.gov.hk/wxinfo/aws/hko_mica/hko/latest_HKO.jpg" width="400"></img><br/><br/>'
  35. 	+ '尖沙咀天文台總部向西(9)<br/>'
  36. 	+ '<img src="https://www.hko.gov.hk/wxinfo/aws/hko_mica/hk2/latest_HK2.jpg" width="400"></img><br/><br/>'
  37.   + '九龍城(8)<br/>'
  38.   + '<img src="https://www.hko.gov.hk/wxinfo/aws/hko_mica/klt/latest_KLT.jpg" width="400"></img><br/><br/>'
  39. 	//+ '<img src="https://www.hko.gov.hk/wxinfo/aws/hko_mica/gsi/latest_GSI.jpg" width="300"></img>'
  40. 	+ '</td>'
  41. 	+ '</tr>'
  42. 	+ '</table>'
  43. 	+ '</div>'
  44. 	+ '<div id="gmLayerWrapper2" align="right">'
  45. 	+ '<table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">'
  46. 	+ '<tr>'
  47. 	+ '<td align="right" valign="top">'
  48. 	+ '<img src="https://pda.weather.gov.hk/radar/rad_064_320/rad064_6.jpg" width="400"></img><br/>'
  49. 	+ '<img src="https://pda.weather.gov.hk/TC_HK_CG.jpg" width="400"></img><br/>'
  50. 	+ '<img src="https://pda.weather.gov.hk/mtsate/MTSAT1RIR/mtsat_6.jpg" width="400"></img><br/>'
  51. 	+ '<img src="https://pda.weather.gov.hk/tcpos_orig.jpg" width="400"></img>'
  52. 	+ '</td>'
  53. 	+ '</tr>'
  54. 	+ '</table>'
  55. 	+ '</div>'
  56. );
  57.  
  58. $("#gmLayerWrapper1").width  ( 400 )
  59.                     .height ( 100 )
  60.                     ;
  61. $("#gmLayerWrapper2").width  ( 400 )
  62.                     .height ( 100 )
  63.                     ;
  64.  
  65. GM_addStyle ("#gmLayerWrapper1 { "+
  66. "  margin-top:    10px; "+
  67. "  margin-bottom: 0px; "+
  68. "  margin-right:  0px; "+
  69. "  margin-left:   10px; "+
  70. "  padding:       0; "+
  71. "  position:      absolute; "+
  72. "  top:           0; "+
  73. "  left:         0; "+
  74. "  min-width:     300px; "+
  75. "  z-index:       -1; "+
  76. "} ");
  77.  
  78. GM_addStyle ("#gmLayerWrapper2 { "+
  79. "  margin-top:    10px; "+
  80. "  margin-bottom: 0px; "+
  81. "  margin-right:  10px; "+
  82. "  margin-left:   0px; "+
  83. "  padding:       0; "+
  84. "  position:      absolute; "+
  85. "  top:           0; "+
  86. "  right:         0; "+
  87. "  min-width:     300px; "+
  88. "  z-index:       -1; "+
  89. "} ");
  90.  
  91. GM_xmlhttpRequest({
  92.   method: "GET",
  93.   url: "http://www.aqhi.gov.hk/tc.html",
  94.   headers: {
  95.     //"User-Agent": "Mozilla/5.0",    // If not specified, navigator.userAgent will be used.
  96.     "Accept": "text/xml"            // If not specified, browser defaults will be used.
  97.   },
  98.   onload: function(response) {
  99.     var $response = $(response.responseText);
  100.     var table = $response.find("table#tblCurrAQHI").addClass('apitable-class');
  101.     $("#gmLayerWrapper2").append(table);
  102.   }
  103. });
  104.  
  105. GM_addStyle ("\
  106. #tblCurrAQHI {color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}\
  107. #tblCurrAQHI th {background-color:#acc8cc;border-width: 1px;border-style: solid;border-color: #729ea5;text-align:left;}\
  108. #tblCurrAQHI tr {background-color:#ffffff;}\
  109. #tblCurrAQHI td {border-width: 1px;border-style: solid;border-color: #729ea5;}\
  110. #tblCurrAQHI tr:hover {background-color:#ffff99;}\
  111. ");