Widget development checklist

Widget development checklist

• Test widget update via heartbeat. A quick test for this is to call fokusEnv.widgetManager.updateWidget(“widgetId") from the console in the browser. This will destroy the widget and create a new widget of the same type.

• It is always a good idea to try to deploy the widget, have a device running and see that the widget is updated. Remember that the widget is only updated when it is not visible. If this is done on a test server you can lower the heartbeat interval to 2 min. For a faster test.

• Test that the new widget can be reverted by uploading the old widget. It is a good idea to have a device running and see that the current widget is updated via the heartbeat.

• Check that you clear any timers and intervals that you may have set. This can be tricky to test.

  One way is to add log statements to the timers and interval functions, then try to destroy the widget and see if the logs are no longer generated. This can be done by calling fokusEnv.widgetManager.getWidgetById(“widgetId”).destroy(). Remember that the widget is only destroyed when it is hidden.

• Remember to remove events that were added using .addEvent() on external objects. Like fokusEnv.epgManager.

  There is a service method on a widget called observer(). We recommend that you use this when adding events to an external object. This function will automatically remove the event when the widget is destroyed. Here is an example: widget.observe(fokusEnv.device.mediaPlayer, 'onBeforeMediaChanged', function);

• Make sure that the widget is not leaking styles to other widgets. This can be done by adding the widget id as a css selector in front of all css selectors. Like this #Epg4Widget .genre {color : red}

• Check file size of the images you use. Use a tool for lossless compression of the images. (mac - ImageOptim, pc - FileOptimizer, for different platforms - https://imageoptim.com/versions )

• Check that the images are loaded in the right size and that the image dimension fit the image display dimensions.

  On STB that do software scaling of images we recommend that you serve image in the same size as the display size. Because scaling the image on the device can greatly decrease performance on these devices.

  For more powerful device there can be an idea in scaling images on the device. For some display (Retina, 4k) the image that is load can be scaled by a factor of 2x or more. But make sure that the device supports this type of scaling. The devices that we know of are: normal web browser, Android, iOS, AppleTv and AndroidTV. But there is a trade off when serving larger images: slower load time and more memory is used.

  The fokusOn server has an image scaler. Both for widget resources, program and vod images.

  Load your widget and check for 404 network errors. This is easily done in the network panel in the browser. It is always a good idea to check that all resources are loaded correctly.

• Check that the “initialize()” function only does the minimum amount of work. If the “initialize” function is doing a lot of work the boot/load time can be impacted.

• Try to change the GUI language and check that the text in the widget is updated with the translations for the selected language.

  This can be done in the settings widget (TvSettingsWidget2, SettingsResponsiveWidget) Or in the browser console by calling fokusEnv.profileManager.setSetting('gui.language', 'en-GB'); (for this you need to know the language codes that your system supports.)

• It is a good idea to test the loading of the widget on a bad internet connection.

  The easiest way to this is to use the dev tool in a browser. In Chrome the network throttle can be found in the network tap

• It is a good idea to check in event handlers if the widget is currently active, especially if you are doing network requests in the event handlers. This prevents a lot of requests happening from widgets that are not active when an event is fired. You can check which widget is currently active using widget.isVisible