Technical notes

Phillips Kiev

Notes from Igor and Leonid

• according to specification event listeners should be added before open!
• Max simultaneous connections supported is about 4-20. Consider to load not more than 5 images at a time. Only after 5 images fully loaded you can start to load next 5 images. Currently numebr of simultaneously loading images is not limited - so it leads to crashes!
• Some TV browsers will never send event "onload"/"onerror"/"onabort" for images (like desktop IE in case images are already in cache). The same may occur if pixel limit for images reached. correct way to wait for images loaded is to check by time interval that image.naturalWidth/image.naturalHeight exists and not equals 0. // check if image loaded if(image.naturalWidth !== 0 && image.naturalHeight !== 0) { // image loaded }
• index.html - element IDs not unique. html specification says html element IDs should be unique
• When background-size: 100% 100%; is used in CSS file, other vendor prefixes should be added ( -moz-background-size, -webkit-background-size, -o-background-size, -ms-background-size)
• Limitation by total pixel number in my game (using IMAGES) is about 2,400,000 pixels in cached img tags on screen + background 1280x720 + some number of elements (up to 1280x720). When I cache more pixels in img-tags attached to body, some images from game screen disappears.
• individual images (even sprite sheets) should be no greater than 1920x1080 in either dimension
• XmlHttpRequest.addEventListener crashes TV; change to XmlHttpRequest.onload
• carefully check that ALL unneeded images for particular moment in game are completely unloaded. So, for example, during map screen there should be no loaded images of loading screen and even there should be no canvas elements attached to DOM or even saved in code. so, when map screen/main menu are shown, all images unloaded (all canvases are nulled from code, all DOM canvas elements detached and nulled, etc). every in-memory or in-DOM element, that may contain pixels and this element is not needed - should be unloaded/destroyed/null'ed.
• if we load using img.src = 'http://.....' images with more pixels (in total between all images already loaded), than SOME_VALUE, at some step philips silently unloads old images. But philips will never load them again. But if you attach every loaded image to DOM tree(appendChild), at SOME_VALUE pixels loaded TV will try to unload image and instead of silent unload TV will stuck(because it can't unload image already attached to DOM). If you try to use image where pixels were unloaded silently to draw on canvas, you will get stuck. If you try to draw correct (not unloaded) image to canvas, pixels from pixel buffer will be used separately for original image ... and for full size of canvas (need future investigations).
• Every image container such as "img:src", "div:background-image", "canvas" uses global browser's pixel buffer. Number of used pixels from pixel buffer is original image width * original image height. Size of image in bytes is not counted. When browser's pixel buffer overflows browser will try to unload some (random) images silently, so such unloaded image will not be drawn anymore. Also it may lead to crashes when unloaded image used. So it is good to know (and log) how many pixels currently placed to all existing canvases + divs (background image) + imgs(src) even if these elements are not attached to body.
• any uncaught exception on TV Browser leads to crash