Testing HTML pages for screens with higher resolutions (locally!)

Sometimes you want to test the web page you’re developing on your small 1440×900 laptop monitor for, say, 1080p screens. There are several Chrome extensions for that (I tried Window Resizer and Resolution Test), but they don’t really seem to let you test for resolutions higher than that of your screen.

What I want is just a view of my web page with scrollbars to pan around, and nothing else.

Turns out it’s very simple to achieve that result, but either my Google-fu is getting worse, or it’s not that immediate to find out how to do it on the web.

You just need to create an HTML page that contains an iframe of the correct size that displays your page. That’s it!

Here’s an example page (I saved it as high_res_viewer.html) on pastebin:

High res viewer on pasteBin

And here’s the code. WordPress strips off the iframe code even if it’s within [source][/source] or <pre></pre> tags… meh. If anybody knows how to embed iframe code within WordPress posts please let us know in the comments.

To display it here I had to replace the first iframe tag with a bogus i_frame tag. You need to change it back to iframe of course to make it work.

<html>
<body style="margin:0px;">
<i_frame src="file://localhost/Users/myuser/web/my_page.html" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="auto" frameborder="0" marginheight="0px" marginwidth="0px" height="1080px" width="1920px"></iframe>
</body>
</html>

So you need to set the correct path to your HTML page in src, and the resolution you want to test in height and width.

(The source for the iframe courtesy of the Online iFrame generator)

You can then use that page to develop for 1080p screens. You could create a page for each resolution you want to test (maybe with names like 1080p.html, 1920x1200.html and so on). I’m sure you could also generate the iframe dynamically, providing input fields to set the resolution you want and the link to the page under test, but I just needed a quick solution for the time being.

As always, feel free to correct or improve the post in the comments!

Advertisements

Ant stopped working after Eclipse update on Mac OSX (<terminated> is shown with no explanation)

After updating Eclipse on my laptop, all of a sudden the built-in version of Ant that ships with Eclipse stopped working.

I right-click on a build.xml files, run it as Ant build but… nothing happens! I don’t get any message in the Eclipse Console (you know, the usual red ones telling you that you screwed up somewhere in the XML file). The only thing I get is a mysterious <terminated> message in the view’s title, followed by the path to the Java executable on my machine.

I kept just using Ant from a shell until I decided it was time for some googling. After searching through bugs I found this comment on a bug, so here’s what you need to do:

  1. go to your Eclipse preferences
  2. go to Ant/Runtime
  3. in the “Classpath” tab, expand the “Ant Home Entries (Default)” list
  4. you should see a bunch of entries like Applications/eclipse/plugins/org.apache.ant_x.y.z.v.../lib/ant*.jar: if you go check, that folder doesn’t exist!
  5. press “Add External JARs” and go to /Applications/eclipse/plugins/, where you should find an org.apache.ant_ folder with a different version than that of the listed entries (in my case I have an org.apache.ant_1.8.3.v20120321-1730 folder)
  6. select and add all jars in the lib folder inside the org.apache.ant_x.y.z folder (the one from the previous step)
  7. select and remove all old jars (those from the non-existing folder), hit apply

now Ant should work again!

By the way, this should be the open bug that tracks this issue if you want to follow it.

Create a diff for i18n strings.xml files to manage localization on Android

Keeping all your strings.xml files synchronized in Android projects can be painful, as Eclipse doesn’t tell you which strings have no localized version in which language. Android is perfectly happy with it as well, it just uses the default (usually English) string in the app, much for the joy of your non-English users.

I came up with a simple Python script that just scans your res/values-** folders for strings.xml files and, using your default res/values/strings.xml as reference, outputs a list of missing strings for each file, along with the original value set for the key.

So, if for instance your res/values/strings.xml is this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My App</string>
    <string name="title_activity_main">My Activity</string>
    <string name="hello_world">Hello, World!</string>
</resources>

and your, say, res/values-it/strings.xml is this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">La mia App</string>
    <string name="title_activity_main">La mia Activity</string>
</resources>

and your… res/values-fr/strings.xml? is this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Mon App</string>
    <string name="hello_world">Bonjour, Monde!</string>
</resources>

the script would output:

Missing in /home/whatever/wherever/.../App/res/values-it/strings.xml:
<string name="hello_world">Hello, World!</string>

Missing in /home/whatever/wherever/.../App/res/values-fr/strings.xml:
<string name="title_activity_main">My Activity</string>

So the idea is that you can cut and paste those lines in the appropriate files to translate them.

The script also outputs some warnings in case it finds duplicate keys in any of the strings.xml files.
Your localized strings.xml files may have more <string> items than the default, as no check is performed against that.

I put the script it in a folder within my Android projects that is simply ignored by Android (I usually call it not_in_apk or something like that), so if you put it elsewhere remember to change the path at line 23

path_to_default = '../res/values/strings.xml'

to the path to your default strings.xml file (absolute or relative, it should work anyway).

I didn’t do much testing, so it may not work for you… Worst thing that can happen is.. it doesn’t work 🙂
It won’t mess with your files, I promise you that.

Here’s the script! Run it with python i18n.py.

Last note: this script only takes strings.xml files into account, you should run Android Lint to check for strings to be translated in other XML files (stringarrays.xml and other files).

Remove (bogus) recent workspaces from Eclipse Juno in Mac OS

I never used more than one workspace until Android forced me to do so (you can’t configure debug keystores on a project basis, so you really need different workspaces).

I’ve seen two bad things about working with several workspaces thus far:

  1. you lose all your settings when creating a new workspace (Eclipse only asks to copy perspectives from the current workspace, which is something but not enough)
  2. Eclipse kept showing me a bogus workspace that I never created in the File/Switch Workspace menu, plus it didn’t understand when I renamed one, so it started showing that workspace with both names (old and new)

The first issue can be solved by following these steps (which of course I discovered after doing them by hand… silly me).

As for the second, on MacOS go to your Eclipse installation folder (I have it in Applications), then open configuration/.settings/org.eclipse.ui.ide.prefs with a text editor.

The variable you’re looking for is called RECENT_WORKSPACES, where workspaces are listed one for each line (I can actually see the ‘\n’ as line separators). Delete the silly ones, restart Eclipse, done!