From Opera 10.10, the emulator now supports loading widgets, devices and plugins from anywhere on your disk. You no longer have to copy these into your widget directory and edit directory files to include them. This is made possible through the File I/O API for widgets. However, at the time of writing there are still unresolved conflicts between the emulator widget’s File I/O access and the access of the emulated widget itself, which may result in problems when emulating a widget which makes use of File I/O features.
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.
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.navigator.geolocation
object. You need to enable this through a feature element in config.xml as described in the Geolocation documentation. You can expand the device information to control the current position of the device and simulate motion.<screen orientation="portrait|landscape|auto"/>
to the widget
element in your config.xml to lock your widget to a certain orienation.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 |
---|---|---|---|---|---|
Frost | screen | 320×240 | 16kbps | 20kB | Slower |
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: