Xibo

Weather widget not working on linux client

Asked by Jeremy Ellis on 2012-05-23

I have moved my client from a windows based client to an ubuntu based client. Everything is working fine except for a weather widget. The widget works fine on a windows based client. I had the following code as an html embed:

-----------------------------------------------
<html>
<head>
<style type="text/css">
/* CSS goes here */
/* #wxWrap {
    width: 150px;
    background: #EEE; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    padding: 2px 13px 2px 11px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
} */
#wxIntro {
    display: inline-block;
    font: 14px/20px Arial,Verdana,sans-serif;
    color: #666;
    vertical-align: top;
    padding-top: 9px;
}
#wxIcon {
    display: inline-block;
    width: 61px;
    height: 34px;
    margin: 2px 0 -1px 1px;
    overflow: hidden;
    background: url('http://l.yimg.com/a/lib/ywc/img/wicons.png') no-repeat 61px 0;
}
#wxIcon2 {
    display: inline-block;
    width: 70px;
    height: 50px;
    margin: 0px 0px 0px 0px;
    overflow: hidden;
}
#wxTemp {
    display: inline-block;
    font: 40px/40px Tahoma,Arial,Verdana,sans-serif;
    color: #FFF;
    vertical-align: top;
    padding-top: 0px;
    margin-left: 0;
}
</style>

</head>

<body>

<div id="wxWrap">
    
    <span id="wxIcon2"></span>
    <span id="wxTemp"></span>
</div>

    // Specify the ZIP/location code and units (f or c)
    var loc = '39191'; // or e.g. SPXX0050
    var u = 'f';

    var query = "SELECT item.condition FROM weather.forecast WHERE location='" + loc + "' AND u='" + u + "'";
    var cacheBuster = Math.floor((new Date().getTime()) / 1200 / 1000);
    var url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;

    window['wxCallback'] = function(data) {
        var info = data.query.results.channel.item.condition;
        $('#wxIcon').css({
            backgroundPosition: '-' + (61 * info.code) + 'px 0'
        }).attr({
            title: info.text
        });
        $('#wxIcon2').append('<img src="http://www.colin.edu/digitalsign/weather2/icons/' + info.code + '.png" width="50" height="50" title="' + info.text + '" />');
        $('#wxTemp').html(info.temp + '°' + (u.toUpperCase()));
    };