JavaScript
Aug. 2015 - Ongoing (10 Years 5 Months)
InfoWall of at-a-glance weather and webcams.
Ideal for constant-on projector, netbook or tablet. Javascript software runs in a browser. Automatically adjusts all elements to window size and rotation to maximize readability. Over 2000 code lines demonstrating many advanced Javascript / HTML / DOM techniques such as canvas element and drawing, JSON handling, API use, structured array constant config, querystring reading, use of localstorage, text to speech, responsive auto-formatting, keypress handling, celestial calculations, centralized timer update handling and more. See details elsewhere.
Also download my library of JavaScript date, calendar, and cookie related functions for creating active web pages.
<head>
<title>InfoWall</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta property="og:title" content="InfoWall">
<meta property="og:description" content="InfoWall : At-a-glance time, date, weather, webcams, more.">
<meta property="og:image" content="https://bedno.com/g/infowall.jpg">
<meta property="og:url" content="https://bedno.com/infowall">
<meta property="og:site_name" content="Bedno.com">
<script>
var About = 'InfoWall : At-a-glance time, date, weather, webcams, more.<br><br>' +
'Click Time for next background. Click Date for next slideshow. Click Forecast to speak it.<br>' +
'<span style="font-size:10pt;">Works best in Safari and Chrome (F11 for Full Screen).</span><br><br>' +
'<a href="https://Bedno.com/infowall/about" target="About">More info...</a> ' +
'<a href="http://AndrewBedno.com" target="AndrewBedno">AndrewBedno.com</a> ' +
'<span onClick="TechReadout();" title="Click for technical details." style="font-size:8pt; color:#C0C0C0;">🔧</span>'; // Wrench icon.
// Demonstrates a number of advanced Javascript techniques:
// Responsive auto-formatting. Text to speech. Canvas element and drawing. Analog clock.
// Weather API use (Wunderground.com). JSON fetch and parse.
// Querystring checking. Read/write localstorage.
// Catch/try feature detection. Structured constant array.
// Keypress handling. Master updater using timer.
// Sun/Moon calculations. No dependencies.
// Incorporates SunCalc.js by Vladimir Agafonkin https://github.com/mourner/suncalc
// CONFIGURABLES:
// Configure Wunderground.com (Weather Underground) aspects below. See https://www.wunderground.com/weather/api/
var InfoZip = '60657'; // Zipcode of this installation. 60657=Chicago
var InfoLat = 41.94637; var InfoLon = -87.64519; // Geocoordinates of this installation. 41.94637,-87.64519=Chicago
var InfoZone = 0; // Timezone adjustment hours. Should = <dateobj>.getTimezoneOffset()/60 but reads wrong on most browsers?!?
var WeatherURL = 'https://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:'+InfoZip+'.1.99999&apiref=bf1a242569a63476'; // Detailed local forecast. Change apiref if you have one.
// Examples below use periodically cached Chicago mirrors. For live use substitute api specific as shown:
var WeatherForecastURL = 'https://bedno.com/bike/d/w/wz-chicago-more.json'; // http://api.wunderground.com/api/<api_key>/forecast/pws/q/pws:KILCHICA173.json
var WeatherCurrentURL = 'https://bedno.com/bike/d/w/wz-chicago-now.json'; // http://api.wunderground.com/api/<api_key>/conditions/pws/q/pws:KILCHICA173.json
var ClockColorDay = '#000000'; // Daytime color of some time/date parts.
var ClockColorNight = '#FFFFFF'; // Nighttime color of some mtime/date parts.
// Quick B&W: var ClockShadows = new Array('000000', '333333', '555555', '777777', '999999', 'BBBBBB', 'DDDDDD', 'FFFFFF', 'FFFFFF', 'FFFFFF'); // Sequence of hex characters, each later expanded to a #hhhhhh shade. Formerly 03579BDFFF (shorter 048CF)
// Simple rainbow: var ClockShadows = new Array('9400D3', '4B0082', '0000FF', '00FF00', 'FFFF00', 'FF7F00', 'FF0000');
var ClockShadows = new Array('C0F5F9','D2FCEE','E3FEE0','F1FBCF','FAF2BC','FEE5A9','FDD599','F6C28C','EAAF84','DA9E81','C89083','B6868B','A48198','9482A8','8988BA','8293CD','81A2DF','85B4ED'); // Pastel tones.
var ClockOpacity = new Array( 0.4, 0.5, 0.6, 0.8, 0.9, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
var ClockUpdDur = Math.floor(1000/ClockShadows.length);
var ForecastColor = '#EEEEEE'; // Forecast text color.
var WeatherForecastDur = 19*60*1000; // Update forecast every 42 minutes to minimize API calls.
var WeatherCurrentDur = 10*60*1000; // Update current every 10 minutes to minimize API calls.
var RadarURLsrc = "https://radar.weather.gov/ridge/lite/N0R/LOT_loop.gif"; // XXX_loop: LOT=Chicago(down since 2017.03), ILX=Springfield
var WeatherShadow = " text-shadow:-2px 2px 0px #000000;"
var MoonDiam = 1/6; // Relative size of the displayed moon.
var WeatherCurrentHgt = 0.13;
var WeatherForecastHgt = 0.08;
var FloodDur = 250; // Cycle time between flood color changes.
var TwisterDur = 10000; // Time between Twister spins.
// BACKGROUNDS and STYLING
var BGdata = [ // BGcode=Matched in URL. BGshow= [A]nalog [C]lock [D]ate [F]orecast [I]ntro [M]oon [R]adar [S]huffle [T]itle [W]eather [V]ocal
{ BGcode:"webcams", BGshow:"CDFIMTW", BGslides: [ // BGlink=url for more info. BGsrc=img src URL, 600-1200px wide, no extended chars. BGdesc=Displayed name. BGdur=milliseconds. BGzoom=magnification (auto-centers). BGsubdur=timer for autoinc slide. BGsub=last subframe for autoinc slide.
// 2015.04.14 { BGdesc:"Loyola, Water Tower", BGsrc:"http://www.luc.edu/webcam/schbus/schbusfull.jpg?{unqsec}", BGlink:"http://www.luc.edu/webcams/", BGdur:4000, BGzoom:1, BGsub:0, BGauth:"" },
// 2015.11.27 { BGdesc:"Wrigley Field, Clark and Addison", BGsrc:"http://wwc.instacam.com/instacamimg/CUBBY/CUBBY_l.jpg?{unqsec}", BGlink:"http://web.live.weatherbug.com/LiveCameras/1/LiveCameras.aspx?no_cookie_zip=60618&no_cookie_stat=WGNTV&no_cookie_world_stat=&zcode=z5764&camera_group=1&enlarge=1&camera_id=CUBBY&lid=CNXCC", BGdur:5000, BGzoom:1, BGsub:0, BGauth:"" },
// 2016.06.30 { BGdesc:"Wrigley, Clark and Addison", BGsrc:"http://images.earthcam.com/ec_metros/ourcams/rosensports.jpg?z={unqsec}", BGlink:"http://www.sportsworldchicago.com/fieldcam/", BGdur:2000, BGzoom:1, BGsub:0, BGauth:"" },
// 2016.09.02 { BGdesc:"Belmont Harbor", BGsrc:"http://cdn.abclocal.go.com/three/wls/webcam/Belmont_cap.jpg?{unqsec}", BGlink:"http://abc7chicago.com/weather/cams/belmont_cap/", BGdur:5000, BGzoom:1, BGsub:0, BGauth:"" },
CLIPPED...OFFSITE MEDIA OFFSITE < NEWER OLDER >