+<?php
+/********************
+* Fuzzy Thermometer *
+* Ver 0.3 *
+* By Ben Beltran *
+*********************/
+
+/******************************
+* CHANGELOG *
+*******************************
+* 0.1 -> Initial Release *
+* 0.2 -> Config options *
+* 0.3 -> Day and Night *
+* 0.4 -> Fancy Canvas Version *
+*******************************/
+
+
+/*Weather.com configuration
+********************************/
+$citycode = 'MXCA0026'; //Zip Code (US) or City code according to weather.com
+$partnerid = '1140062701'; //Partner ID
+$license = '5b323d77586070aa'; //License number
+
+/*Color Configuration
+********************************/
+$nightbackground = '#21272A'; //main colors.
+$daybackground = '#99cce1';
+
+$coldcolor = 'rgb(120,214,253)'; //Colors for each temperature.
+$coolcolor = 'rgb(27,149,251)';
+$temperatecolor = 'rgb(153,153,153)';
+$warmcolor = 'rgb(255,146,38)';
+$hotcolor = 'rgb(255,24,24)';
+
+/*Text Configuration
+*******************************/
+$coldstring = 'frío.'; //string for each temperature.
+$coolstring = 'fresco.';
+$regularstring = 'regular.';
+$warmstring = 'cálido.';
+$hotstring = 'caliente.';
+
+$coldtagline = '(abrigate bien.)'; //tagline for each temperature.
+$cooltagline = '(perfecto para un saco.)';
+$regulartagline = '(ni fu ni fa.)';
+$warmtagline = '(como para estar afuera.)';
+$hottagline = '(hidrátate bien.)';
+
+/*Temperature Configuration
+******************************/
+$coldlimit = 15; //How many degrees? (celsius)
+$coollimit = 20;
+$temperatelimit = 25;
+$warmlimit = 30;
+
+
+
+/******************************
+* DANGER! DANGER! *
+*******************************
+* Don't edit below this part *
+* unless you know what you're *
+* doing. *
+*******************************
+* It's not that hard really. *
+* but it's better if we leave *
+* it like it is. Unless you *
+* like customizing the shit *
+* out of stuff. *
+*******************************/
+
+
+ $ch = curl_init('http://xoap.weather.com/weather/local/'.$citycode.'?cc=*&link=xoap&prod=xoap&par='.$partnerid.'&key='.$license.''); //Initialize curl.
+
+ curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //More curl config
+ curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 4);
+
+ $data = curl_exec($ch); //this is your xml stuff
+ curl_close($ch);
+
+ $xml = new SimpleXmlElement($data, LIBXML_NOCDATA); //now let's make an XmlElement
+ $feelslike = $xml->cc->flik; //This is the "Feel's Like temp"
+ $sunset = date('G.i',strtotime($xml->loc->suns));
+ $sunrise = date('G.i',strtotime($xml->loc->sunr));
+ $now = date('G.i',time()-28800);
+ switch($xml->cc->icon){
+ case 0: case 1: case 2: case 3:
+ case 4: case 5: case 6: case 7:
+ case 8: case 9: case 10: case 11:
+ case 12: case 13: case 14: case 15:
+ case 16: case 17: case 18: case 35:
+ case 37: case 38: case 39: case 40:
+ case 41: case 42: case 43: case 44:
+ case 45: case 46: case 47:
+ $sky = 2;
+ break;
+ case 19: case 20: case 21: case 22:
+ case 23: case 24: case 25: case 26:
+ case 27: case 28: case 29: case 30:
+ case 33: case 34:
+ $sky = 1;
+ break;
+ default:
+ $sky = 0;
+ }
+ $feelslike = ($feelslike -32)*5/9; //Convert fahrenheit to celsius.
+
+ //now let's get the sponsored links. Stupid EULA.
+ $sponsors = '<a href="'.$xml->lnks->link[0]->l.'">'.$xml->lnks->link[0]->t.'</a> · ';
+ $sponsors .= '<a href="'.$xml->lnks->link[1]->l.'">'.$xml->lnks->link[1]->t.'</a> · ';
+ $sponsors .= '<a href="'.$xml->lnks->link[2]->l.'">'.$xml->lnks->link[2]->t.'</a> · ';
+ $sponsors .= '<a href="'.$xml->lnks->link[3]->l.'">'.$xml->lnks->link[3]->t.'</a>';
+
+
+ if(isset($_GET['temp'])){
+ $feelslike = $_GET['temp']; //This overrides the weather.com temperature for debugging.
+ }
+ if(isset($_GET['now'])){
+ $now = $_GET['now']; //This overrides the weather.com date for debugging.
+ }
+ if(isset($_GET['sky'])){ //This overrides the weather.com sky conditions for debugging.
+ $sky = $_GET['sky'];
+ }
+
+
+echo '<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+ "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">';
+?>
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>¿Cómo está el clima en Juárez?</title>
+ <style type="text/css">
+ *{
+ padding: 0;
+ margin: 0;
+ }
+
+ body{
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ text-align: center;
+ <?php
+ if($now > $sunrise && $now < $sunset){
+ echo 'background-color:'.$daybackground.';';
+ }else{
+ echo 'background-color:'.$nightbackground.';';
+ }
+ ?>
+ }
+
+ #container{
+ width: 960px;
+ margin: auto;
+ text-align: left;
+ }
+
+ h1{
+ color: #c00;
+ margin-top: 50px;
+ margin-left: 200px;
+ font-size: 3em;
+ width: 410px;
+ }
+ </style>
+ <script type="text/javascript">
+ function draw(){
+ var canvas = document.getElementById('theCanvas');
+ var context = canvas.getContext('2d');
+ var gradient;
+
+ //DRAW THE SKYLINE
+ gradient = context.createLinearGradient(0, 600, 0, 300);
+ gradient.addColorStop(0, "rgb(255,255,255)");
+ gradient.addColorStop(1, "rgb(240,240,240)");
+
+ context.fillStyle = gradient;
+ context.beginPath();
+ context.moveTo(10,600);
+ context.lineTo(10,535);
+ context.lineTo(110,535);
+ context.lineTo(110,550);
+ context.lineTo(250,550);
+ context.lineTo(250,500);
+ context.lineTo(270,510);
+ context.lineTo(270,500);
+ context.lineTo(290,510);
+ context.lineTo(290,500);
+ context.lineTo(310,510);
+ context.lineTo(310,500);
+ context.lineTo(330,510);
+ context.lineTo(330,450);
+ context.lineTo(340,450);
+ context.lineTo(340,510);
+ context.lineTo(350,510);
+ context.lineTo(350,470);
+ context.lineTo(360,470);
+ context.lineTo(360,510);
+ context.lineTo(400,510);
+ context.lineTo(400,340);
+ context.lineTo(420,320);
+ context.lineTo(440,320);
+ context.lineTo(480,300);
+ context.lineTo(520,320);
+ context.lineTo(540,320);
+ context.lineTo(560,340);
+ context.lineTo(560,550);
+ context.lineTo(600,550);
+ context.lineTo(600,575);
+ context.lineTo(625,560);
+ context.lineTo(650,575);
+ context.lineTo(675,560);
+ context.lineTo(700,575);
+ context.lineTo(725,560);
+ context.lineTo(750,575);
+ context.lineTo(775,560);
+ context.lineTo(800,575);
+ context.lineTo(800,500);
+ context.lineTo(950,500);
+ context.lineTo(950,600);
+ context.fill();
+
+ //DRAW THE BASELINE.
+ context.strokeStyle = "rgb(96,96,96)";
+ context.beginPath();
+ context.moveTo(0,600);
+ context.lineTo(960,600);
+ context.stroke();
+
+
+ <?php
+ if($feelslike < $coldlimit){
+ echo 'var tempText = "'.$coldstring.'";'."\n";
+ echo 'var tempColor = "'.$coldcolor.'";'."\n";
+ }else if($feelslike < $coollimit){
+ echo 'var tempText = "'.$coolstring.'";'."\n";
+ echo 'var tempColor = "'.$coolcolor.'";'."\n";
+ }else if($feelslike < $temperatelimit){
+ echo 'var tempText = "'.$regularstring.'";'."\n";
+ echo 'var tempColor = "'.$regularcolor.'";'."\n";
+ }else if($feelslike < $warmlimit){
+ echo 'var tempText = "'.$warmstring.'";'."\n";
+ echo 'var tempColor = "'.$warmcolor.'";'."\n";
+ }else{
+ echo 'var tempText = "'.$hotstring.'";'."\n";
+ echo 'var tempColor = "'.$hotcolor.'";'."\n";
+ }
+
+ ?>
+
+ drawTemperature(context,tempText,tempColor);
+
+
+ <?php
+ switch($sky){
+ case 1:
+ echo "drawSun(context);\n drawCloud(context);\n";
+ break;
+ case 2:
+ echo "drawSun(context);\n drawCloud(context);\n drawRain(context);\n";
+ break;
+ default:
+ echo "drawSun(context);\n";
+
+ }
+ ?>
+
+ }
+
+
+ //draws the "fuzzy" temperature.
+ function drawTemperature(context,tempString,tempColor){
+ context.font = "10pt Helvetica";
+ context.fillStyle = "rgb(101,101,101)";
+ context.fillText("Juárez está:", 15, 595);
+ context.fillStyle = tempColor;
+ context.fillText(tempString, 92, 595);
+ }
+
+ //function to draw the sun.
+ function drawSun(context){
+ context.fillStyle = "rgb(96,96,96)";
+ context.beginPath();
+ context.arc(860,100,50,0,Math.PI*2,true);
+ context.fill();
+ }
+
+ //function to draw the rain
+ function drawRain(context){
+ for(var i = 0;i<4;i++){
+ for(var j = 0;j<2;j++){
+ context.strokeStyle = "rgb(96,96,96)";
+ context.beginPath();
+ context.moveTo(760+(i*40)-(j*40),180+(j*40));
+ context.lineTo(730+(i*40)-(j*40),210+(j*40));
+ context.stroke();
+ }
+ }
+ }
+
+ //function to draw a cloud over the sun
+ function drawCloud(context){
+ context.fillStyle = "rgb(255,255,255)";
+ context.beginPath();
+ context.arc(880,140,35,0,Math.PI*2,true);
+ context.fill();
+ context.beginPath();
+ context.arc(840,130,45,0,Math.PI*2,true);
+ context.fill();
+ context.beginPath();
+ context.arc(790,145,30,0,Math.PI*2,true);
+ context.fill();
+ context.beginPath();
+ context.arc(800,110,35,0,Math.PI*2,true);
+ context.fill();
+ context.beginPath();
+ context.arc(775,125,25,0,Math.PI*2,true);
+ context.fill();
+ }
+ </script>
+ </head>
+ <body onload="draw();">
+ <div id="container">
+ <canvas id="theCanvas" width="960px" height="600px"></canvas>
+ </div>
+ </body>
+</html>
\ No newline at end of file