diff --git a/webroot/css/weatherscan.css b/webroot/css/weatherscan.css index c63a771..9c6c9a0 100644 --- a/webroot/css/weatherscan.css +++ b/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; } diff --git a/webroot/images/golf-curve.svg b/webroot/images/golf-curve.svg new file mode 100644 index 0000000..b75745b --- /dev/null +++ b/webroot/images/golf-curve.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/webroot/images/golfslide.png b/webroot/images/golfslide.png new file mode 100644 index 0000000..c06f8c9 Binary files /dev/null and b/webroot/images/golfslide.png differ diff --git a/webroot/index.html b/webroot/index.html index e276389..fdb8a33 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -291,7 +291,7 @@ -
+
Local Doppler Radar @@ -342,7 +342,21 @@ - + +
+
+ diff --git a/webroot/js/radar.js b/webroot/js/radar.js index 650bf37..ac9d3aa 100644 --- a/webroot/js/radar.js +++ b/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; - - } - - }); - } - } } diff --git a/webroot/js/slides-loop.js b/webroot/js/slides-loop.js index ef36eed..de30b59 100644 --- a/webroot/js/slides-loop.js +++ b/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); } diff --git a/webroot/js/utils.js b/webroot/js/utils.js index 0c3a66d..5254bd7 100644 --- a/webroot/js/utils.js +++ b/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 diff --git a/webroot/js/weather.js b/webroot/js/weather.js index 39bb883..5675d0e 100644 --- a/webroot/js/weather.js +++ b/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);