The Widget Emulator (see Figure 1) is a tool enabling you to see how your widget is likely to appear on a small monitor, TV, or handheld device. The emulator runs your widget in a sandbox and will “trick” it in various ways to emulate the important differences between these varying environments.
Figure 1: The Widget Emulator in all its glory.
Strangely enough, the Widget Emulator is a widget itself. It contains a panel on the right where you can set the device parameters, and a screen on the left where your own widget runs in an iFrame.
Despite the emulator’s best efforts to resemble the devices, there will always be aspects that are impossible to emulate. This is due to the enormously complex task that emulation is and the possible device-dependent bugs that exist in any software. The tool should be used while developing your widgets but it is still advised that you test them on a real device before considering them production quality.
Although the Widget Emulator is a widget itself, it is not installed in the usual way. You need to copy your own widget into the emulator and then run the emulator widget from your file system. You can copy multiple widgets into the emulator.
First, get the emulator package.
Extract the contents of the zip file to your hard drive. You will see the following level items:
In order to emulate your widget, you need to add your widget to the emulator:
Copy the directory of the widget you wish to emulate into the widgets
directory of the emulator.
The file structure will typically now look like this:
You need to initialize your widget as an emulated widget. Add the following line of code into the head
of the index.html
file of your emulated widget, before your own JavaScript:
<script type="text/javascript">if(parent.emulator)parent.emulator.begin(window);</script>"
When this code is called, the emulator will override certain functions the emulated widget calls, and provide values consistent with the type of device selected. One example is overriding the reported available screen size.
Finally, you need to register the widget in the emulator. Open the dir.js
file in the widgets
directory and add the name of the directory of your widget to the list. (It’s currently not possible to scan a directory for widgets. This will be possible with a public implementation of File I/O.)
Click and drag the config.xml file of the emulator (not the config.xml
in your emulated widget) to an Opera window to run the emulator.
When the emulator starts, it will display a list of currently ‘installed’ widgets, i.e. those defined in widgets/dir.js
. Click on your widget to start emulation of it. Clicking the ‘X’ icon inside your widget will return you to the list of installed widgets.
screen.height
and screen.availHeight
will contain different values than your actual monitor to reflect the screen size of the device being emulated. CSS media queries will evaluate according to the device chosen. This means that if you include, for instance, a stylesheet with media=“handheld”
then that stylesheet will be applied if you decide to emulate a mobile phone.setTimeout
and setInterval
and not to animated GIFs etc.XMLHttpRequest
object (used in Ajax(Asynchronous JavaScript and XML)) can be made to run slower to mimic the loading times experienced on mobile phones with slow internet connections.widget.setPreferenceForKey
are limited to as little as 20KB of storage on some devices with limited hard disk space. In cases where your widget exceeds this value the method will throw an error and the preference will not be stored.The following is a list of aspects that may differ between actual devices and the emulator.
onkeydown
.
Figure 2: The Widget Emulator, with the main parts of the interface illustrated
The Widget Emulator comes with a set of devices which simulate characteristics of devices such as mobile phones, TVs and a desktop computer. Each device varies with respect to for example screen resolution, availability of features like a dock, user agent and so on.
The default devices provided are:
Preset | Media-type | Screen size (px) | Connection | Storage | Framerate |
---|---|---|---|---|---|
Desktop | screen | 800×600 | 256kbps | 2MB | Fast |
VGA Mobile | screen | 640×480 | 16kbps | 20kB | Slower |
QVGA Mobile | screen | 320×240 | 16kbps | 20kB | Slower |
WVGA Mobile | screen | 800×480 | 16kbps | 20kB | Slower |
TV | tv | 800×480 | 32kbps | 200kB | Fast |
There are two ways of adding devices: By using the device panel in the emulator and by editing the file default_devices.js in the root of the emulator directory.
Figure 3. The panel for adding devices
Perform the following steps:
Note that by adding devices this way, they will not be stored in the default_devices.js
file. The devices will be saved in the preference store of the emulator.
The devices are stored in the file default_devices.js
default_devices.js
file in your favorite text editor.An entry can look something like this:
{
title: 'Desktop',
media: 'screen',
screen: [800, 600],
storage: 2097152, // 2MB storage
rotatable: true,
chrome: null,
dock: null,
useragent: null,
plugins: ['Network Security']
},
Here’s a quick explanation of the properties: