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 it’s glory.
Strangely enough, the widget emulator is a widget itself. It contains a panel on the left where you can set the device parameters, and a screen on the right where your own widget runs in an iFrame.
The developer console also comes embedded in the emulator to make it possible to debug a live widget.
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:
First, get the emulator package.
Extract the contents of the zip file to your hard drive. You will see four top level items:
The widget/
directory needs to contain the widget you wish to emulate. By default, the My Opera widget is included in the package. Copy the contents of the widget you wish to emulate into the widget
directory of the emulator, as shown in Figure 2.
Figure 2: Make sure you put your widget inside the emulator correctly.
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 your widget/index.html
file, 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.
Click and drag the config.xml file of the emulator (not widget/config.xml
) to an Opera window to run the emulator with the emulated widget displayed inside it.
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 3 is a full-scale screenshot of the emulator running the My Opera widget in a mobile environment. The features are discussed further below:
Figure 3: The Widget Emulator, with the main parts of the interface illustrated.
screen.availHeight
instead of screen.height
(similarly for width).widget.preferenceForKey
.The widget comes with several devices automatically saved. We believe these are a good starting point for testing your widget. They are:
Preset | Media-type | Screen size (px) | Connection | Storage | Framerate |
---|---|---|---|---|---|
Desktop | desktop | 640×480 | 256kbps | 20MB | Fast |
QVGA Landscape Mobile | handheld | 240×320 | 16kbps | 20kB | Slower |
QVGA Portrait Mobile | handheld | 320×240 | 16kbps | 20kB | Slow |
TV | tv | 800×480 | 32kbps | 200kB | Fast |