Satellite Radar + golf

webroot/css/weatherscan.css

@@ -2664,6 +2664,41 @@ body, html {
 .beach-slide-intro .accent.ix {
   background-color: #fff;
 }
+.golf-slide-intro {
+  position: relative;
+  background: transparent url(/images/beachslideintro5.png) no-repeat 100%;
+  background-size: 105% 100%;
+}
+.golf-slide-intro .accent.i {
+  background-color: #218912;
+}
+.golf-slide-intro .accent.ii {
+  background-color: #8dcd5a;
+  opacity: 100%;
+}
+.golf-slide-intro .accent.iii {
+  background-color: #145b23;
+}
+.golf-slide-intro .accent.iv {
+  background-color: #12780d;
+  opacity: .3;
+}
+.golf-slide-intro .accent.v {
+  background-color: #145b23;
+}
+.golf-slide-intro .accent.vi {
+  background-color: #2d7816;
+}
+.golf-slide-intro .accentvii {
+  background-color: #137f0d;
+}
+.golf-slide-intro .accent.viii {
+  background-color: #8dcd5a;
+  opacity: 100%;
+}
+.golf-slide-intro .accent.ix {
+  background-color: #fff;
+}
 .city-slide-intro .segment {
   color: #fff;
   font-family: Frutiger;
@@ -3140,6 +3175,99 @@ body, html {
   z-index: 2;
 }
 
+.golf {
+  position: relative;
+  background: transparent url(/images/golfslide.png) no-repeat;
+  background-size: 110% 92%;
+  background-position: 90% 100%;
+}
+
+
+.golf .curve {
+  position: absolute;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: 200% 200%;
+}
+
+
+.golf .yellow {
+  background-image: url(/images/golf-curve.svg);
+  -webkit-filter: drop-shadow(40x 0 4px rgba(0, 0, 0, .75));
+  filter: drop-shadow(4px 0 4px rgba(0, 0, 0, .75));
+}
+
+.golf .yellow.left {
+  top: 7.5%;
+  left: -11.25%;
+  z-index: 3;
+  width: 21%;
+  height: 80%;
+  z-index: 5
+}
+
+.golf .yellow.right {
+  background-position: 100% 0;
+  top: -15%;
+  right: -18%;
+  width: 51%;
+  height: 85%;
+  z-index: 7;
+  -webkit-filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, .65));
+  filter: drop-shadow(-4px 0 4px rgba(0, 0, 0, .75));
+}
+
+
+.golf .blue.left {
+  background-image: url(/images/blue-curve.svg);
+  background-size: 200% 100%;
+  width: 22%;
+  height: 150%;
+  top: 6%;
+  left: -8%;
+  opacity: .7;
+  z-index: 2;
+}
+
+
+.golf .blue.bottom {
+  background-image: url(/images/blue-curve.svg);
+  background-size: 200% 100%;
+  width: 22%;
+  height: 150%;
+  top: -37.5%;
+  left: -9.25%;
+  opacity: .7;
+  z-index: 2;
+}
+
+
+.golf .white.right {
+  background-image: url(/images/white-curve.svg);
+  background-size: 200% 100%;
+  background-position: 100% 0;
+  width: 22%;
+  height: 150%;
+  top: 7%;
+  right: -8.8%;
+  opacity: .2;
+  z-index: 2;
+}
+
+
+.golf .white.bottom {
+  background-image: url(/images/white-curve.svg);
+  background-size: 200% 100%;
+  background-position: 100% 0;
+  width: 22%;
+  height: 150%;
+  top: -39.25%;
+  right: -9.9%;
+  opacity: .2;
+  z-index: 2;
+}
+
+
 .radar-color-legend {
   font-size: 18px;
   position: absolute;
@@ -3734,4 +3862,5 @@ body, html {
   color: #fff;
   background: linear-gradient(to right, #510d08 0, #b41a08 100%);
   text-transform: uppercase;
+  white-space:nowrap;
 }

webroot/images/golf-curve.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 768" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#299a3a;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M117.9,384C117.9,171.9,294,0,511.2,0H0v768h511.2C294,768,117.9,596.1,117.9,384z"/>
+	</g>
+	<g>
+		<path class="st0" d="M511.2,0c217.2,0,393.3,171.9,393.3,384S728.4,768,511.2,768H1024V0H511.2z"/>
+	</g>
+</g>
+</svg>

webroot/index.html

@@ -291,7 +291,7 @@
       </div>
 
       <!-- DOPPLER RADAR -->
-      <div class="info-slide radar-slide" style="display:">
+      <div class="info-slide radar-slide" style="display: ">
         <div class="info-subheader">
           <span>Local Doppler Radar</span>
           <span class="radar-color-legend" style="display: none">Past 3 Hours<br>Light&nbsp;<img src="images/precip-legend.png" alt="Past 3 Hours"/>&nbsp;Heavy</span>
@@ -342,7 +342,21 @@
         <div class='accent viii curve' style="display:none"></div>
         <div class='accent ix curve' style="display:none"></div>
         <div class='weatherscanmarquee' style="display:none">weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan</div>
-        <div class='segment' style="display:none">Boat and Beach</div>
+        <div class='segment' style="display:none">Boat & Beach</div>
+      </div>
+      <div class="info-slide golf-slide-intro" style="display: none">
+        <div class='accent i curve' style="display:none"></div>
+        <div class='accent ii curve' style="display:none"></div>
+        <div class='accent iii curve' style="display:none"></div>
+        <div class='accent iv curve' style="display:none"></div>
+        <div class='accent v curve' style="display:none"></div>
+        <div class='accent vi curve' style="display:none"></div>
+        <div class='accentviishadow curve'></div>
+        <div class='accentvii curve'></div>
+        <div class='accent viii curve' style="display:none"></div>
+        <div class='accent ix curve' style="display:none"></div>
+        <div class='weatherscanmarquee' style="display:none">weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan  weatherscan</div>
+        <div class='segment' style="display:none">Golf</div>
       </div>
       <div class="info-slide health-slide-intro" style="display: none">
         <div class='accent i curve' style="display:none"></div>
@@ -680,6 +694,20 @@
         </div>
       </div>
   </div>
+  <div class="info-slide golf" style="display: none">
+    <div class="info-subheader">
+      <span id="subhead-titlei"></span><span id="subhead-city"></span>
+    </div>
+    <div class="info-subheadershadowfix">
+      <span id="subhead-title">Current Surf Report</span>
+    </div>
+    <div class='blue curve left'></div>
+    <div class='blue curve bottom'></div>
+    <div class='yellow curve left'></div>
+    <div class='yellow curve right'></div>
+    <div class='white curve right'></div>
+    <div class='white curve bottom'></div>
+</div>
 
     </div>
   </div>

webroot/js/radar.js

@@ -1,6 +1,5 @@
-
+var mmap
 function Radar(divIDin, intervalHoursIn, zoomIn, latitudeIn, longitudeIn, withSat) {
-
 	var map,
 	divID = divIDin,
 	intervalHours = intervalHoursIn,
@@ -8,7 +7,6 @@ function Radar(divIDin, intervalHoursIn, zoomIn, latitudeIn, longitudeIn, withSa
 	latitude  = latitudeIn,
 	longitude = longitudeIn,
 	timeLayers = [];
-
 	this.setView = function(lat, long, zoomLevel){
 		map.setView(L.latLng(lat, long), zoomLevel)
 	};
@@ -27,14 +25,16 @@ function Radar(divIDin, intervalHoursIn, zoomIn, latitudeIn, longitudeIn, withSa
 
 		var endDate = roundDate(new Date()),
 			player;
-
+		if (mmap !== undefined) { mmap.remove(); }
 		map = L.map(divID, {
 			zoom: zoom,
 			fullscreenControl: false,
 			center: [latitude, longitude]
 			 // 31.205482,-82.4331197 test coordinates
 		});
-
+		if (divID == "radar-1") {
+			mmap = map;
+		}
 
 		// basemap
 		// streets cj9fqw1e88aag2rs2al6m3ko2
@@ -46,7 +46,20 @@ function Radar(divIDin, intervalHoursIn, zoomIn, latitudeIn, longitudeIn, withSa
 			tileSize: 512,
 			zoomOffset: -1
 		}).addTo(map);
+		if (withSat == true) {
+			$.getJSON("https://api.weather.com/v3/TileServer/series/productSet/PPAcore?filter=satrad&apiKey=" + api_key, function(data) {
+				for (var i = 0; i < data.seriesInfo.satrad.series.length; i++) {
+					timeLayers.push(
+						L.tileLayer("https://api.weather.com/v3/TileServer/tile/satrad?ts="+ data.seriesInfo.satrad.series[i].ts +"&xyz={x}:{y}:{z}&apiKey=" + api_key, {
+							opacity: 0
+					}))
+				}
+				timeLayers.forEach(timeLayers => {
 
+	          timeLayers.addTo(map);
+	        });
+			});
+		} else {
 		$.getJSON("https://api.weather.com/v3/TileServer/series/productSet/PPAcore?filter=radar&apiKey=" + api_key, function(data) {
 			for (var i = 0; i < data.seriesInfo.radar.series.length; i++) {
 				timeLayers.push(
@@ -59,10 +72,11 @@ function Radar(divIDin, intervalHoursIn, zoomIn, latitudeIn, longitudeIn, withSa
           timeLayers.addTo(map);
         });
 		});
-
+	}
 		const sleepNow = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
 
 		async function animationLoop() {
+
 		  for (let i = timeLayers.length; i > 0; i--) {
 				timeLayers[i - 1].setOpacity(1)
 		    await sleepNow(100)
@@ -79,68 +93,6 @@ function Radar(divIDin, intervalHoursIn, zoomIn, latitudeIn, longitudeIn, withSa
 				animationLoop()
 		}, 1000);
 
-		if (withSat) {
-
-			var goes_visible_sat = L.nonTiledLayer.wms('https://nowcoast.noaa.gov/arcgis/services/nowcoast/sat_meteo_imagery_time/MapServer/WMSServer', {
-				layers: '9',  // 9 for visible sat
-				format: 'image/png',
-				transparent: true,
-				opacity:0.7,
-				useCanvas:true
-			}),
-			    satellitetimeLayer = L.timeDimension.layer.wms(goes_visible_sat, {
-				proxy: proxy,
-				updateTimeDimension: false,
-				cache:1
-			});
-
-			satellitetimeLayer.addTo(map).on('timeload',function(t) {
-				var canvas, ctx,
-					imageData, data,
-					i,
-					layers = t.target._layers,
-					keys = Object.keys(layers);
-
-				for (var key of keys) {
-					canvas = layers[key]._bufferCanvas;
-
-					if (canvas.dataset.isAlpha){continue}
-
-					ctx = canvas.getContext('2d');
-
-					imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-
-					var pixels = imageData.data,
-						brighten = 0,
-						contrast = 10;
-					for(var i = 0; i < pixels.length; i+=4){//loop through all data
-
-						pixels[i] += brighten;
-						pixels[i+1] += brighten;
-						pixels[i+2] += brighten;
-
-						var brightness = (pixels[i]+pixels[i+1]+pixels[i+2])/3; //get the brightness
-
-						pixels[i]   += brightness > 127 ? contrast : -contrast;
-						pixels[i+1] += brightness > 127 ? contrast : -contrast;
-						pixels[i+2] += brightness > 127 ? contrast : -contrast;
-
-						var rgb = pixels[i] + pixels[i+1] + pixels[i+2];
-						pixels[i] = pixels[i+1] = pixels[i+2] = 255;
-						pixels[i+3] = rgb / 3;
-					}
-					imageData.data = pixels;
-
-					// overwrite original image
-					ctx.putImageData(imageData, 0, 0);
-
-					canvas.dataset.isAlpha = true;
-
-				}
-
-			});
-		}
-
 
 	}
 }

webroot/js/slides-loop.js

@@ -32,10 +32,10 @@ RADAR < MAIN CITY < CITY 1 < CITY 2
 			if (ret.length != 0) {
 				ret.sort(function(a, b){
 					if (foreDataAlert.alerts[a].eventDescription < foreDataAlert.alerts[b].eventDescription) {
-				    return 1;
+				    return -1;
 				  }
 				  if (foreDataAlert.alerts[a].eventDescription > foreDataAlert.alerts[b].eventDescription) {
-				    return -1;
+				    return 1;
 				  }
   				return 0
 				});
@@ -118,7 +118,7 @@ RADAR < MAIN CITY < CITY 1 < CITY 2
 				showBulletin();
 				function showRadarS(lat, long, zoom, time) {
 
-					weatherMan.mainMap.setView(lat, long, zoom);
+				weatherMan.mainMap = new Radar("radar-1", 3, zoom, lat, long, false);
 						// fade out info, fade in radar
 						weatherAudio.playLocalRadar();
 						$('.radar-slide').fadeIn(0);
@@ -175,7 +175,7 @@ RADAR < MAIN CITY < CITY 1 < CITY 2
 						}
 						function splitLines() {
 
-							 var warningsplitstr = $('.bulletin .frost-pane .warnings').text().split(/(?![^\n]{1,40}$)([^\n]{1,40})\s/g)
+							 var warningsplitstr = $('.bulletin .frost-pane .warnings').text().split(/(?![^\n]{1,45}$)([^\n]{1,45})\s/g)
 							 warningsplitstr.pop()
 							 warningsplitstr.pop()
 							 var warningpageidx = 0;
@@ -280,7 +280,7 @@ RADAR < MAIN CITY < CITY 1 < CITY 2
 
 			} else {
 				if (city[0].classList.contains("radar")) {
-					showRadar(dataMan.locations[0].lat, dataMan.locations[0].long, 8, 60000);
+					showRadar(dataMan.locations[0].lat, dataMan.locations[0].long, 8, 60000, false);
 					setTimeout(nextCity, 60500);
 				} else if (city[0].classList.contains("airport")) {
 					showAirport(0);
@@ -301,13 +301,13 @@ RADAR < MAIN CITY < CITY 1 < CITY 2
 
 
 
-		function showRadar(lat, long, zoom, time) {
+		function showRadar(lat, long, zoom, time, withsat) {
 
-			weatherMan.mainMap.setView(lat, long, zoom);
 				// fade out info, fade in radar
 				weatherAudio.playLocalRadar();
 				$('.radar-slide').fadeIn(0);
 				$('.radar-content').fadeIn(500);
+				weatherMan.mainMap = Radar("radar-1", 3, zoom, lat, long, withsat);
 				$('.radar-color-legend').fadeIn(500);
 				setTimeout(function() {
 					$('.radar-content').fadeOut(500);
@@ -592,7 +592,7 @@ RADAR < MAIN CITY < CITY 1 < CITY 2
 							$('.info-slide-content.uvindex .currentuv .bar .num').fadeTo('slow', 1);
 						});
 					$('.info-slide-content.uvindex .forecastuv .bar').each(function(){
-						var ulength = {"-2":0, "-1":0, 0:"1", 1:"25", 2:"40", 3:"55", 4:"70", 5:"85", 6:"100", 7:"115", 8:"130", 9:"145", 10:"160", 11:"175"}[foreUvData.uvIndex1hour.uvIndex[indexes[i]]]
+						var ulength = {"-2":0, "-1":0, 0:"25", 1:"25", 2:"40", 3:"55", 4:"70", 5:"85", 6:"100", 7:"115", 8:"130", 9:"145", 10:"160", 11:"175"}[foreUvData.uvIndex1hour.uvIndex[indexes[i]]]
 						var utime = {"-2":0, "-1":0, 0:0, 1:125, 2:250, 3:375, 4:500, 5:625, 6:750, 7:1000, 8:1250, 9:1325, 10:1500, 11:1625}[foreUvData.uvIndex1hour.uvIndex[indexes[i]]]
 						$('.info-slide-content.uvindex .forecastuv .bar.' + hourlable[i] + ' .cat').text(foreUvData.uvIndex1hour.uvDesc[indexes[i]])
 						$('.info-slide-content.uvindex .forecastuv .bar.' + hourlable[i] + ' .num').text(foreUvData.uvIndex1hour.uvIndex[indexes[i]])
@@ -824,7 +824,12 @@ RADAR < MAIN CITY < CITY 1 < CITY 2
 				}
 				// Local Doppler Radar or Radar/Satellite (15 sec, zoomed out with cloud cover)
 				,localDoppler(){
-					showRadar(location.lat, location.long, 8, slideDelay);
+					var showsat = Math.random()
+					if (showsat <=  .5) {
+						showRadar(location.lat, location.long, 6, slideDelay, true);
+					} else {
+						showRadar(location.lat, location.long, 8, slideDelay, false);
+					}
 					wait(slideDelay + 500);
 				}
 

webroot/js/utils.js

@@ -93,10 +93,10 @@ function getCCicon(ccCode, windData){
 	var icon = "images/icons/" + ( "0" +  {"0":0,"1":0,"2":0,"3":47,"4":01,"5":02,"6":38,"7":03,"8":04,"9":05,"10":06,"11":08,"12":08,"13":09,"14":12,"15":11,"16":12,"17":48,"18":48,"19":16,"20":49,"21":16,"22":14,"23":0,"24":50,"25":34,"26":20,"27":21,"28":22,"29":23,"30":24,"31":25,"32":26,"33":27,"34":28,"35":13,"36":41,"37":29,"38":29,"39":30,"40":31,"41":32,"42":33,"43":34,"44":19,"45":35,"46":36,"47":37}[ccCode]).slice(-2) + ".png";
 	if (parseInt(windData) >= 20) {
 		if (ccCode === "11" || "12" || "40") {
-			icon = "images/icons/45.png"
+			icon = "images/icons/34.png"
 		}
 		if (ccCode === "14" || "16" || "42") {
-			icon = "images/icons/34.png"
+			icon = "images/icons/45.png"
 		}
 	}
 	return icon

webroot/js/weather.js

@@ -94,8 +94,8 @@ function WeatherManager() {
 			cond = data.wxPhraseLong;
 
 		if (mainMap===undefined) {
-			mainMap = that.mainMap = new Radar("radar-1", 3, 8, data.latitude, data.longitude, false);
 			miniMap = new Radar("minimap", 3, 6, data.latitude, data.longitude);
+			mainMap = that.mainMap = new Radar("radar-1", 3, 8, data.latitude, data.longitude, true);
 		}
 
 		$('#city').text(mainloc);