Andrew Bedno    Andrew@Bedno.com • 773-442-2386
 History   Kudos   Samples 

JavaScript

JavaScript (click for next photo)

InfoWall : At-a-glance time/date, weather/forecast/radar, webcams, more.

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   OFFSITE         < NEWER       OLDER > 


 History   Kudos   Samples