Windows Weather Wallpaper via NodeJs scraping a prominent web page

README.md

NodeJs Based Exercise

1. scrape a web page
2. transform the content
3. render to png
4. save to desktop wallpaper

Install

1. save the js and cmd files to a folder...
2. edit the url on line 32 of the js for your preferred location
3. put WKHTMLtoImage.exe in same folder (or your global path); note: somehow the setup.exe didn't save files to my program files but simply extracting the bin folder via zip was fine
4. throw WallpaperChanger.exe in there as well
5. and lastly perhaps launch the cmd every hour via Windows Task Scheduler

Thoughts

going about the content this way seems to have a reasonable shot at standing the test of time... which seems to be the general problem with finding something viable like this already out there... i.e. not locked to a particular back end that's since gone dark... vs an overly burdensome customization required to chase the current state... i.e. pulling from whatever nice contemporary source of web weather you currently prefer and then doctoring it up with a relatively light, direct, pattern based approach like jQuery provides.

(imagine that, it's rainy in Seattle ; )

weatherDesk.cmd

cd /d %~dp0

node weatherDesk.js

::"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" -print "file:///%~dp0weatherDesk.htm" -print-orientation no -print-mode png -print-file weatherDesk.png -print-bgcolor yes -print-bgimages yes -print-shrinktofit yes -print-orientation landscape -print-margin-top 0 -print-margin-bottom 0 -print-margin-left 0 -print-margin-right 0
wkhtmltoimage.exe --disable-smart-width --width 1600 --height 1080 weatherDesk.htm weatherDesk.png

::this oft mentioned approach just didn't refresh for me
::reg add "HKEY_CURRENT_USER\Control Panel\Desktop" /v Wallpaper /t REG_SZ /d "%~dp0weatherDesk.png" /f
::reg add "HKEY_CURRENT_USER\Control Panel\Desktop" /v Wallpaper /t REG_SZ /d "%~dp0weatherDesk.png" /f
::RUNDLL32.EXE user32.dll,UpdatePerUserSystemParameters 1, true

::from: http://sg20.com/techblog/2011/06/23/wallpaper-changer-command-line-utility/
::there are various stretch formats 1,2,3,4... just try them out
WallpaperChanger.exe "%~dp0weatherDesk.png" 1

weatherDesk.js

//install latest node v7 for async support: https://nodejs.org/en/download/current/

//npm install -g jquery
//npm install -g cheerio
//npm install -g request-promise

//make sure NODE_PATH envariable is set, e.g. %appdata%\npm\node_modules

/* use this to pull jquery into original weather page via debug console for trial and error testing
script = document.createElement("script");
script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js";
script.onload = function() { window.$ = $; };
document.getElementsByTagName("head")[0].appendChild(script);
*/

//(async function() { //started out thinking i'd use async http.get but couldn't immediately get that working

//from: http://stackoverflow.com/a/25622933
//var http = require("http");
var rp = require("request-promise");
var cheerio = require("cheerio");

var fs = require("fs");
var os = require("os");

/*
var weatherPage = await rp("http://www.yahoo.com/news/weather/united-states/washington/kenmore-2431488");
var jsdom = require("jsdom").jsdom; //couldn't quickly get the html back out, switched to cheerio since i saw an obvious example
var doc = jsdom(weatherPage);
var $ = require("jquery")(doc.defaultView);
//var page = $(weatherPage);
*/

rp({
  uri: "http://www.yahoo.com/news/weather/united-states/washington/kenmore-2431488",
  transform: cheerio.load
}).then(function ($) {

  //pull the nifty background image... yahoo does a nice job of changing it up with an appropriate theme matched to the current weather
  var bgurl = $('#Lead-0-WeatherFixedBackgroundPhoto-Proxy > div > div > div').attr("style").match(/http.*jpg/gi)[0];
  //drop in the background image right on the body
  $("body").css({
    "background" : "url(" + bgurl + ") no-repeat center center fixed",  
    "background-size" : "cover"
  });

  //move all the nice clean "weather cards" out into the root body...
  $(".weather-card").appendTo("body");
  //remove the absolute positioning of the weather cards
  $(".weather-card.Pos\\(a\\)").removeClass("Pos(a)");
  //then drop all the other "fluff"
  $("body > *:not(.weather-card)").remove()
  $("script,meta,style").remove();
  $("link[rel!=stylesheet]").remove();
  //give a basic "responsive" style to let the weather cards "flow"
  $("<style>.weather-card { display: inline-block; float: right;}</style>").appendTo("head");
  
  //throw in the date and time since that was a script that got lost
  var now = new Date();
  var mins = ("0" + now.getMinutes()).slice(-2);
  var hours = now.getHours();
  var datetime = now.getMonth()+1 + "/" + now.getDate() + " " + (hours > 12 ? (hours - 12) + ":" + mins + ' pm' : hours + mins + ' am');
  $("[data-type=location]").append('<div class="Tsh($temperature-text-shadow)" style="margin-top: 1em;">'+datetime+"</div>");

  //*** remove various unwanted elements...
  $("[id^=Side-]").remove();
  //this targets the "star"/favorite and "change location" badge buttons
  $(".Mstart\\(40px\\)").remove();
  //just decided i don't need to see country
  $(".country").remove();
  //this removes the "C" for celsius link
  $(".unit-control").remove();
  $(".credit").remove();
  //couldn't get map images to render yet
  $("#weather-map").remove();
  //remove the scroll bar from hourly section
  $(".hourly").css("overflow-x", "hidden");
  //remove the 5 vs 10 day links at bottom of extended forecast
  $(".daily:not(.accordion)").remove();

  //some weather cards didn't work quite right as responsive and needed a hard coded width
  $("#weather-forecast").css("width", "600px");
  $(".wind-pressure > div > div").css("width", "65%");
  $("#weather-detail").css("width", "195px");
  //$("#weather-map").css("width", "500px");
  //$(".accordion").css("height", "250px"); //this is the hourly+daily forecast card, but wound up squeezing it in full height afterall

  //combine the city & big temp card into a block
  var div = $('<div></div>');
  div.append($("[data-type=temperature]"))
  div.append($("[data-type=location]"));
  //and then combine that on top of the hourly+daily forecast to be a block that all gets flowed together
  var div2 = $('<div style="float: right;"></div>');
  div2.append(div);
  div2.append($("[data-type=forecast]"));
  div2.prependTo("body");

  //lastly save the resulting html out to html file to be rendered
  fs.writeFileSync("weatherDesk.htm", $.html());

}).catch(function (err) {
  console.log(err);
});;

//})();