Back to Getting Started / Beginners - Yahoo! TV Widgets Forum
0

Dynamic, scrollable snippets rdedraw over previous content

I have a weather app with scrollable snippets.  The data for these snippets is assembled at launch and the snippet itself displays live weather data.  In the simulator, everything works fine:  The snippet draws correctly everytime.  However, on the television (Samsung), only the first draw appears correctly.  Every snippet scrolled to after that shows every previous snippet's data underneath the new data for the now current snippett.  I have tried a variety of methods for creating the snippet without success.    I am hoping someone here can point me in the right direction.

My snippet construction code (part of my onApplicationStartup code)
function redrawSnippets(){
    KONtx.application.setProfileSnippetViews(new Array())
    var snippetList=new Array();
    //Draw any relevant snippets
    if(city_obj.citylist.length>0){**
for(var nona=0; nona<city_obj.citylist.length; nona++){
var newSnip={
id: 'profileSnippet'+nona,
viewClass:TWNSnippetView,
data: {
id:nona,
name:city_obj.citylist[nona],
myCode:city_obj.citycode[nona],
params:{
id: nona,
myCode:city_obj.citycode[nona],
},
}
}
snippetList.push(newSnip)
}
    } else {
var newSnip={
id: 'DefaultSnippet',
viewClass:TWNSnippetView,
data: {},
}
snippetList.push(newSnip)
    }
    city_obj.currentIndex=0;
    KONtx.application.removeAllProfileSnippets();
    KONtx.application.setProfileSnippetViews(snippetList);    
}


and here is my snippet code:
var TWNSnippetView = new KONtx.Class({
    ClassName: 'TWNSnippetView',
    
    Extends: KONtx.system.ProfileSnippetView,
    
    initialize: function() {
this.parent();
this._handleActivateSnippet.subscribeTo(this, ['onActivateSnippet'], this);
    },
    
    _handleActivateSnippet: function(event) {
if(this.config.data.params) {
event.preventDefault();
event.stopPropagation();
KONtx.application.setHostResultToViewId(event, 'view-Home', this.config.data.params);
}else {
}
    },
    
    createView: function() {
    this.controls.weather_con=new KONtx.element.Container({
    
    }).appendTo(this);
this.controls.weatherIcon=new KONtx.element.Image({
src: "",
styles: {
height: 75,
hOffset:5,
vOffset:5,
width: 87,
}
}).appendTo(this.controls.weather_con);
this.controls.warning_con=new KONtx.element.Container({
styles:{
hOffset:this.controls.weatherIcon.outerWidth,
vOffset:this.height/2,
visible:false,
}
}).appendTo(this.controls.weather_con);
this.controls.warning=new KONtx.element.Image({
src: 'Images/Yahoo_Interface_Icons/warning_0.png',
styles:{
}    
}).appendTo(this.controls.warning_con);    
if(city_obj.citylist.length<1)
var truncName=""
else
var truncName=this.config.data.name.substr(0, this.config.data.name.lastIndexOf(","))
this.controls.cityname = new KONtx.element.Text({
label: '',
styles: {
color: "#EFFE4D",
fontSize: "14px",
hOffset:this.controls.warning_con.outerWidth+5,
vOffset:20,
},
}).appendTo(this.controls.weather_con);
this.controls.citytemp = new KONtx.element.Text({
label: "",
styles: {
color: "#FFFFFF",
fontSize: "19px",
hOffset: this.controls.warning_con.outerWidth+5,
vOffset: 40,//this.controls.cityname.outerHeight,
},
}).appendTo(this.controls.weather_con);
//BEGIN DEFAULT CON
this.controls.default_con=new KONtx.element.Container({
styles:{
hAlign:'center',
vAlign:'center',
}
}).appendTo(this);
this.controls.default_label = new KONtx.element.Text({
label: "The Weather Network",
styles: {
color: "#FFFFFF",
fontSize: "20px",
},
}).appendTo(this.controls.default_con);
this.myCode=this.config.data.myCode;
this.myID=this.config.data.id;
    },
    focusView:function(){
    },
    
    updateView: function(){
city_obj.currentIndex=this.myID;
if(city_obj.citylist.length>1)
this.controls.cityname.setText(this.config.data.name.substr(0, this.config.data.name.lastIndexOf(",")));
fetchWeather(this.myCode);
this.registerMessageCenterListenerCallback(this.weatherUpdate);
//snippetLoader=this.config.data.myCode;
var lc = currentAppData.get("TWN_lastcity");
var lcc=currentAppData.get("TWN_lastcitycode");
//No last code?  Show the default view.  Else, show the weather info
if(city_obj.citylist.length<1){
this.controls.default_con.visible=true;
this.controls.weather_con.visible=false;
} else {
this.controls.weather_con.visible=true;
this.controls.default_con.visible=false;
}
    },    
    weatherUpdate: function(event){
if (event.payload.key == "loadedWeatherData") {
var weatherData = event.payload.value;
//The current weather page uses info from both the Obs and UVObs nodes
var cw=weatherData.Observation;
if(cw.icon=="")
cw.icon="BLANK";
temp=evaluateTemp(cw.temperature_c);
this.controls.citytemp.setText(temp);
this.controls.weather_con.removeChild(this.controls.weatherIcon);
this.controls.weatherIcon=new KONtx.element.Image({
src: "Images/Yahoo_wxIcons/-.png",
styles: {
height: 75,
hOffset:5,
vOffset:5,
width: 87,
}
}).appendTo(this.controls.weather_con);
this.controls.weather_con.removeChild(this.controls.cityname);
this.controls.cityname = new KONtx.element.Text({
label: '',
styles: {
color: "#EFFE4D",
fontSize: "14px",
hOffset:this.controls.warning_con.outerWidth+5,
vOffset:20,
},
}).appendTo(this.controls.weather_con);
this.controls.cityname.setText(weatherData.loadedCity)
this.controls.weatherIcon.src=icons_obj[cw.icon].en.path;
}
    },
});


Can someone give me a shove in the right direction?

by
Report Abuse
2 Replies
  • I've fixed my own issue.  If anyone has a problem with snippets merging, combining, blocking each other out, or just plain redrawing wrong, check your messagecenter listeners.  I was using such a listener to identify when data had been loaded and display it on the snippet.  However, unlike the typical sidebar views, snippets that scroll "offscreen" do not hide/unload.  Because of this, their listeners are also activated when the data comes in and all data is writtren to the active snippet.  What I did was keep an array of all generated snippets at the root level and then use a simple function to kill any listeners.  Here is that function:
    function clearSnippetListeners(){
        for(nona=0; nona<createdSnippets.length; nona++)
    createdSnippets[nona]._unregisterMessageCenterListeners();
    }

    I then reorganized some of the snippet-level code.  It now works in the simulator and on the television.  Someone need to tell Accuweather because their snippets exhibit the same overwriting behavior mine were.




    QUOTE(buddy @ 13 Sep 2011 2:23 PM)
    I have a weather app with scrollable snippets.  The data for these snippets is assembled at launch and the snippet itself displays live weather data.  In the simulator, everything works fine:  The snippet draws correctly everytime.  However, on the television (Samsung), only the first draw appears correctly.  Every snippet scrolled to after that shows every previous snippet's data underneath the new data for the now current snippett.  I have tried a variety of methods for creating the snippet without success.    I am hoping someone here can point me in the right direction.

    ********** CODE CODE CODE CODE CODE CODE **********

    Can someone give me a shove in the right direction?
    Report Abuse
    0
  • How about making one more check in your if statement of the message listener, whether the current update is for this particular snippet or not? One way to do this is to somehow return the citycode in your response and match it with this.config.data.myCode.

    Thanks,
    Vivek
    Report Abuse
    0
Ask a Question

Recent Posts

in Getting Started / Beginners - Yahoo! TV Widgets