Forked from: djankey's Weather widget View Diff (5) forked: Weather widget Marco.Rocco Follow 2016-02-15 12:50:38 License: MIT License Fork0 Fav0 View953 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 195 lines HTML 11 lines CSS 11 lines forked: Weather widget // forked from djankey's "Weather widget" http://jsdo.it/djankey/weatherwidget var jsonProxy = "http://jsonp.jit.su/?&url="; var cityList = ['London', 'Paris', 'Milano']; var currentCity = cityList[0]; var metricUnits = true; var stage, W, H, ui, control, preloader, img_preloader, holder, bmp, jsonData, loading, cityLabel, tempLabel, conditionLabel; var ypos = 175; function init() { // setup canvas var canvas = document.getElementById('canvas'); if (!canvas || !canvas.getContext) { console.log('HTML5 Canvas is not supported!'); return; } // dimensions W = canvas.width; H = canvas.height; // create a stage object to work with the canvas stage = new createjs.Stage(canvas); stage.mouseMoveOutside = false; stage.mouseEventsEnabled = false; stage.enableMouseOver(30); // loading text... loading = new createjs.Text("LOADING...", '12px Arial', '#CCCCCC'); loading.alpha = 0.5; loading.x = W/2; loading.y = ypos + 120; loading.textAlign = "center"; stage.addChild(loading); // data preloader preloader = new createjs.LoadQueue(true); preloader.addEventListener("fileload", handleFileLoad); // image preloader img_preloader = new createjs.LoadQueue(false); img_preloader.addEventListener("fileload", handleImageLoad); // web fonts preloader WebFont.load({ google: { families: ['Oxygen::latin'] }, active: function() { build(); } }); // draw canvas updateStage(); } function build() { holder = new createjs.Container(); stage.addChild(holder); holder.alpha = 0; holder.onMouseOver = function(e) { if(holder.alpha === 1) document.body.style.cursor='pointer'; else document.body.style.cursor='default'; } holder.onMouseOut = function(e) { document.body.style.cursor='default'; } holder.onPress = getURL; var bg = new createjs.Shape(); bg.graphics.beginLinearGradientFill(["#678cbc","#6e349c"], [0, 1], 0, 40, W - 60, 40).drawRoundRect(30, ypos, W - 60, 80, 10, 10, 10, 10).endFill(); holder.addChild(bg); var circ = new createjs.Shape(); circ.graphics.beginFill('#ffffff'); circ.graphics.drawCircle(W/2, ypos + 40, 30); circ.graphics.endFill(); circ.alpha = 0.1; holder.addChild(circ); // city label cityLabel = new createjs.Text(currentCity, '28px Oxygen', '#ffffff'); cityLabel.x = W/2 + 50; cityLabel.y = ypos + 10; cityLabel.maxWidth = W/2 - 90; cityLabel.textAlign = "left"; holder.addChild(cityLabel); // temperature label tempLabel = new createjs.Text("", '50px Oxygen', '#ffffff'); tempLabel.x = W/2 - 50; tempLabel.y = ypos + 8; tempLabel.textAlign = "right"; holder.addChild(tempLabel); // current... conditionLabel = new createjs.Text(". . .", '14px Oxygen', '#ffffff'); conditionLabel.x = W/2 + 50; conditionLabel.y = ypos + 50; conditionLabel.textAlign = "left"; holder.addChild(conditionLabel); // add dat.GUI gui = new dat.GUI(); gui.close(); gui.add(this, 'currentCity', cityList ).name("City: ").onChange(inputChanged); gui.add(window, 'metricUnits').name('metric values:').onChange(inputChanged); // load data loadWeatherData(); // draw canvas updateStage(); } function loadWeatherData() { showLoading(true); cityLabel.text = currentCity; tempLabel.text = ""; var currentUnit = "metric"; if(metricUnits === false) currentUnit = "imperial"; var path = jsonProxy + encodeURIComponent("http://api.openweathermap.org/data/2.5/weather?q=" + currentCity + "&mode=json&units=" + currentUnit + "&APPID=4ed530fc00dbed469c3528bcc6f6dcf5"); console.log(jsonProxy); preloader.loadFile(path); } // update stage function updateStage() { // redraw stage.update(); } // file loaded function handleFileLoad(event) { jsonData = JSON.parse(event.result); var unitSymbol = "C"; if(metricUnits === false) unitSymbol = "F"; tempLabel.text = Math.round(jsonData.main.temp) + "°" + unitSymbol; conditionLabel.text = jsonData.weather[0].main; var path = "http://openweathermap.org/img/w/" + jsonData.weather[0].icon + ".png"; img_preloader.loadFile(path); updateStage(); } function handleImageLoad(event) { showLoading(false); if(bmp) stage.removeChild(bmp); bmp = new createjs.Bitmap(event.result); bmp.x = W/2 - event.result.width/2; bmp.y = ypos + 40 - event.result.height/2; stage.addChild(bmp); updateStage(); } function showLoading(e) { if(e===true) { holder.alpha = 0.5; } else { holder.alpha = 1; } loading.visible = e; updateStage(); } // on city change function inputChanged(e) { if(bmp) stage.removeChild(bmp); bmp = null; cityLabel.text = currentCity; tempLabel.text = ""; conditionLabel.text = ". . ."; loadWeatherData(); } function getURL() { if(jsonData.coord) { window.open("http://openweathermap.org/Maps?zoom=7&lat=" + jsonData.coord.lat + "&lon=" + jsonData.coord.lon, '_blank'); } } // >>> start window.addEventListener('load', init, false); <!-- Web Font Loader --> <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script> <!-- EaselJS --> <script type="text/javascript" src="http://code.createjs.com/easeljs-0.6.1.min.js"></script> <!-- PreloadJS --> <script type="text/javascript" src="http://jsrun.it/assets/m/j/M/u/mjMua"></script> <!-- dat.GUI --> <script type="text/javascript" src="http://jsrun.it/assets/q/S/i/g/qSigr"></script> <!-- canvas --> <canvas id='canvas' width='465' height='465'></canvas><p id='helloWorld'></p> forked: Weather widget body { background-color: #1a1a1a; background-image: url(http://jsrun.it/assets/z/n/P/0/znP0Z.png); margin: 0; padding: 0; overflow: hidden; } canvas { position: absolute; } // forked from djankey's "Weather widget" http://jsdo.it/djankey/weatherwidget var jsonProxy = "http://jsonp.jit.su/?&url="; var cityList = ['London', 'Paris', 'Milano']; var currentCity = cityList[0]; var metricUnits = true; var stage, W, H, ui, control, preloader, img_preloader, holder, bmp, jsonData, loading, cityLabel, tempLabel, conditionLabel; var ypos = 175; function init() { // setup canvas var canvas = document.getElementById('canvas'); if (!canvas || !canvas.getContext) { console.log('HTML5 Canvas is not supported!'); return; } // dimensions W = canvas.width; H = canvas.height; // create a stage object to work with the canvas stage = new createjs.Stage(canvas); stage.mouseMoveOutside = false; stage.mouseEventsEnabled = false; stage.enableMouseOver(30); // loading text... loading = new createjs.Text("LOADING...", '12px Arial', '#CCCCCC'); loading.alpha = 0.5; loading.x = W/2; loading.y = ypos + 120; loading.textAlign = "center"; stage.addChild(loading); // data preloader preloader = new createjs.LoadQueue(true); preloader.addEventListener("fileload", handleFileLoad); // image preloader img_preloader = new createjs.LoadQueue(false); img_preloader.addEventListener("fileload", handleImageLoad); // web fonts preloader WebFont.load({ google: { families: ['Oxygen::latin'] }, active: function() { build(); } }); // draw canvas updateStage(); } function build() { holder = new createjs.Container(); stage.addChild(holder); holder.alpha = 0; holder.onMouseOver = function(e) { if(holder.alpha === 1) document.body.style.cursor='pointer'; else document.body.style.cursor='default'; } holder.onMouseOut = function(e) { document.body.style.cursor='default'; } holder.onPress = getURL; var bg = new createjs.Shape(); bg.graphics.beginLinearGradientFill(["#678cbc","#6e349c"], [0, 1], 0, 40, W - 60, 40).drawRoundRect(30, ypos, W - 60, 80, 10, 10, 10, 10).endFill(); holder.addChild(bg); var circ = new createjs.Shape(); circ.graphics.beginFill('#ffffff'); circ.graphics.drawCircle(W/2, ypos + 40, 30); circ.graphics.endFill(); circ.alpha = 0.1; holder.addChild(circ); // city label cityLabel = new createjs.Text(currentCity, '28px Oxygen', '#ffffff'); cityLabel.x = W/2 + 50; cityLabel.y = ypos + 10; cityLabel.maxWidth = W/2 - 90; cityLabel.textAlign = "left"; holder.addChild(cityLabel); // temperature label tempLabel = new createjs.Text("", '50px Oxygen', '#ffffff'); tempLabel.x = W/2 - 50; tempLabel.y = ypos + 8; tempLabel.textAlign = "right"; holder.addChild(tempLabel); // current... conditionLabel = new createjs.Text(". . .", '14px Oxygen', '#ffffff'); conditionLabel.x = W/2 + 50; conditionLabel.y = ypos + 50; conditionLabel.textAlign = "left"; holder.addChild(conditionLabel); // add dat.GUI gui = new dat.GUI(); gui.close(); gui.add(this, 'currentCity', cityList ).name("City: ").onChange(inputChanged); gui.add(window, 'metricUnits').name('metric values:').onChange(inputChanged); // load data loadWeatherData(); // draw canvas updateStage(); } function loadWeatherData() { showLoading(true); cityLabel.text = currentCity; tempLabel.text = ""; var currentUnit = "metric"; if(metricUnits === false) currentUnit = "imperial"; var path = jsonProxy + encodeURIComponent("http://api.openweathermap.org/data/2.5/weather?q=" + currentCity + "&mode=json&units=" + currentUnit + "&APPID=4ed530fc00dbed469c3528bcc6f6dcf5"); console.log(jsonProxy); preloader.loadFile(path); } // update stage function updateStage() { // redraw stage.update(); } // file loaded function handleFileLoad(event) { jsonData = JSON.parse(event.result); var unitSymbol = "C"; if(metricUnits === false) unitSymbol = "F"; tempLabel.text = Math.round(jsonData.main.temp) + "°" + unitSymbol; conditionLabel.text = jsonData.weather[0].main; var path = "http://openweathermap.org/img/w/" + jsonData.weather[0].icon + ".png"; img_preloader.loadFile(path); updateStage(); } function handleImageLoad(event) { showLoading(false); if(bmp) stage.removeChild(bmp); bmp = new createjs.Bitmap(event.result); bmp.x = W/2 - event.result.width/2; bmp.y = ypos + 40 - event.result.height/2; stage.addChild(bmp); updateStage(); } function showLoading(e) { if(e===true) { holder.alpha = 0.5; } else { holder.alpha = 1; } loading.visible = e; updateStage(); } // on city change function inputChanged(e) { if(bmp) stage.removeChild(bmp); bmp = null; cityLabel.text = currentCity; tempLabel.text = ""; conditionLabel.text = ". . ."; loadWeatherData(); } function getURL() { if(jsonData.coord) { window.open("http://openweathermap.org/Maps?zoom=7&lat=" + jsonData.coord.lat + "&lon=" + jsonData.coord.lon, '_blank'); } } // >>> start window.addEventListener('load', init, false); <!-- Web Font Loader --> <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script> <!-- EaselJS --> <script type="text/javascript" src="http://code.createjs.com/easeljs-0.6.1.min.js"></script> <!-- PreloadJS --> <script type="text/javascript" src="http://jsrun.it/assets/m/j/M/u/mjMua"></script> <!-- dat.GUI --> <script type="text/javascript" src="http://jsrun.it/assets/q/S/i/g/qSigr"></script> <!-- canvas --> <canvas id='canvas' width='465' height='465'></canvas><p id='helloWorld'></p> body { background-color: #1a1a1a; background-image: url(http://jsrun.it/assets/z/n/P/0/znP0Z.png); margin: 0; padding: 0; overflow: hidden; } canvas { position: absolute; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Marco.Rocco Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/20ps/js"></script> application html5_elements&api library&test canvas, easeljs, font html5, preloadjs, proxy, weather Discussion Questions on this code? Tags application canvas, easeljs, font html5, html5_elements&api library&test preloadjs, proxy, weather