Thursday, February 13, 2014

ZTE Open Triumphant! (Game Programming)

I used my ZTE Open phone to test out a lot of Firefox OS code and if I hadn't been able to buy it for $79 on Ebay, I wouldn't have started this blog! All along I had wanted to buy a Geeksphone but they were never available when I had the money and when I did, they weren't. Finally Geek and I got together and I got a Geeksphone Peak and have been using that ever since. Then one day, the Firefox OS Simulator said that it wouldn't work any longer with Firefox 26+, so I had to bite the bullet and upgrade my phone if I wanted to use the vastly superior Firefox App Manager.

I had never flashed a phone and had heard all kinds of horror stories about bricking phones, but the stuff I read about upgrading the Geeksphone Peak sounded not too bad, and it wasn't. You can read all about my Geeksphone Peak and upgrading adventure here: http://firefoxosgaming.blogspot.com/2014/02/firefox-os-simulator-rip-game.html. And really, gentle reader, the Firefox App Manager is a lot better. I like how I can see the feedback as the app loads onto the phone, and it also seems a lot, lot faster transferring over the USB cable. I can also take screenshots and there's lot of other debugging things I haven't even discovered yet.

But what about my poor ZTE Open? The horror stories there were long threads of posts with no good conclusion. There was a Mozilla Hacks article that people steered me to, and I tried it, but no help. I even installed Fedora 20 on an old machine but I still got stuck and it seemed too fiddly. I then went to the B2G (Boot to Gecko) mailing list and said what I had done and what was still not working. Well, almost instantly, Ginn Chen came to my rescue with some quick advice. My main problem was that my original ZTE Open didn't have Fastboot installed and that meant it couldn't play ball with Fedora! While the Mozilla Hacks articles were really great, I didn't know how to determine if Fastboot was installed or not, and misunderstood what I had read. The Mozilla team has been very patient with ZTE and me!

I followed Ginn's instructions and combined them with the Mozilla Hacks post by Frédéric Harper and Mark Coggins at https://hacks.mozilla.org/2014/01/upgrading-your-zte-open-to-firefox-1-1-or-1-2-fastboot-enabled/.

I now have this on my ZTE Open:


And now I can use App Manager!


By the way, if App Manager can take screenshots, who takes the screenshot of App Manager in Fedora 20 LXDE? The answer is a cool program called shutter.  Just install it from Yum and you're good to go! 

So what did I do? Follow the instructions from Ginn Chen, Frédéric Harper, and Mark Coggins. I am grateful to them and the rest of the very helpful Firefox OS community. I'm not a hacker, I'm just an ordinary web programmer who likes games and game programming.

Here are the steps:

Step 1 - You Need Fastboot

For some reason, when ZTE started out with the ZTE Open, they didn't know they needed Fastboot. So the first step is to upgrade the OS from 1.0 to 1.1. Get the correct images from here: http://www.ztedevices.com/support/smart_phone/b5a2981a-1714-4ac7-89e1-630e93e220f8.html. Choose the correct image based on where you got the phone. Mine was American eBay. I downloaded it but it took a few tries to get to my machine and took a long time. Test the ZIP file and make sure you can open it. You will be using the zipped version, but the file contains a PDF that might be helpful. 

Next, copy that zip file to the root of a micro-SD card. Take the battery out of your ZTE Open and put the micro-SD card in the ZTE Open. Then put the battery back in (and make sure that no USB cable is connected to a computer. 

Once the battery is back in, press the Volume UP and Power buttons simultaneously. You should see a screen like this:


This is the famous Firefox OS system recovery screen. I can't take this screenshot, but ZTE had this in their instructions. Hopefully you don't get the yellow error messages at the bottom, because you need that card with the update.

Next, using the Volume UP or DOWN buttons, highlight the "apply update from external storage" line. Like this (again from ZTE and not exactly what I had):


Now that you're ready, press the Power button to select the option to apply the update.



Mine didn't have that much and the image loaded very fast. When I saw the message at the bottom saying "Install from sdcard complete" the option was "reboot from system now" and I pressed the Power button to select it. 

My phone rebooted and I was now in phone setup. After the usual questions, everything was fine and was now at Firefox OS 1.1 and Fastboot was my new BFF. 


But I couldn't stop there. I needed to get to 1.2!

Step 2 - Preparing Fedora

I wanted to keep using Windows for my Geeksphone Peak, so it was time to break out an old netbook and install Fedora 20 with the LXDE spin. Someone had recommended this as a Firefox friendly distribution and so far it is fine, but I'm sure other distros like Ubuntu are just fine too. I'm more familiar with Ubuntu and have been a heavy Linux user since I installed Slackware from 3 floppy disks. 

You can get Fedora 20 with the LXDE spin here: http://spins.fedoraproject.org/lxde/#downloads. Essentially Fedora is a version of Red Hat Linux that is community based. But because I had an old netbook, I used a cut-down version called LXDE (Lightweight X-Windows Desktop Environment). My netbook was an old Indamixx brand that was based on the LSI Wind computer with 2GB of RAM. The Indamix is a laptop that has Linux music software preinstalled. I didn't need it for that, so it now is my Firefox build machine!

I downloaded the ISO and used the instructions from this page to install the ISO to a USB stick. My netbook doesn't have a disk drive! http://docs.fedoraproject.org/en-US/Fedora/20/html/Installation_Guide/Making_USB_Media.html.

After installation, I installed Firefox (of course!) and Dropbox (very handy for shuffling stuff back and forth) and Shutter (for screenshots). 

I also installed the latest version of adb (Android Device Bridge) by typing:

   sudo yum install adb

This also installed fastboot.

Then I got the rest of the instructions from https://hacks.mozilla.org/2014/01/upgrading-your-zte-open-to-firefox-1-1-or-1-2-fastboot-enabled/. Which included the instructions on how to prepare my machine from this post: https://hacks.mozilla.org/2013/08/pushing-a-firefox-os-web-app-to-zte-open-phone/. Don't forget to set your phone so that the Developer option for debugging is set!

Plug the phone into a USB cable and then into the Fedora box. Type this:

   adb usb

You should get

   restarting in usb mode

Type 

   adb devices

You should get

   roamer2 device

You're now good to go. Roamer2 is the name for the ZTE Open! Much more romantic.

Step 3 - Load the New Image

Everything is prepared. Get your image here: https://www.dropbox.com/sh/rnj3rja7gd54s98/kGH6LCBRmf.  This is a Dropbox location and again, I chose the US version, not the UK version. These images and the one for 1.1 are just for the ZTE Open phones that were sold for US and UK eBay buyers and may not work for other phones. 

This time unzip the file and put the contents in a folder you can find easily. I made a folder in my home folder and named it zte. Next I plugged in the 1.1 ZTE Open with Remote debugging enabled. 
  • Phone at 1.1 with fastboot and remote debugging enabled - check!
  • ADB and FASTBOOT installed on Fedora - check!
  • 1.2 US image in a folder on my Fedora - check!
  • Fedora "sees" my phone - check!
Open up a command window in Fedora and from the folder that has the new 1.2 images, type:

  adb reboot bootloader

The phone reboots and is now ready for fastbooting! Type these commands, one at a time, while the phone is bootloading:

  fastboot flash boot boot.img
  fastboot flash userdata userdata.img
  fastboot flash system system.img
  fastboot flash recovery recovery.img
  fastboot erase cache
  fastboot reboot


Lots of stuff will happen, and watch for any errors. I didn't see any, but you want to know.

I put those 6 lines in a shell script which made it easier and less worried that I'd make a mistake.

After the last line executes. the phone will reboot and you'll be starting up a brave new world in Firefox OS 1.2.

Installing the App Manager

 This part is the easiest. Just boot up Firefox and select App Manager from the Developer menu. It will gently prompt you to install

   Firefox OS 1.2 Simulator 6.0 ...

And

       ADB Helper 0.2.1

These are Extensions to Firefox. Don't confuse this with Firefox OS Simulator 4.01, which is no longer needed (but was useful to make sure that the device was connected). And the version numbers are only valid for today and may change at any time.

You're in business! Or art or politics or anything you want as long as it is Firefox OS!

One Question

When my ZTE Open was finished booting, it had a bunch of apps on it I didn't install. Anyone know what these are or whether should keep them? They weren't on my Geeksphone Peak when that went to 1.2, and I don't know if I need them or what. Here's some screenshots that show what they look like:


And the second screen.


Well, okay, Flappy Bird and Clumsy Ninja weren't there until I installed them later. But I do wonder what these mystery apps do.

Flappy Bird isn't the original version but is an exact copy from someone else and Clumsy Ninja uses a similar idea to Flappy Bird. Because Flappy Bird has become such a phenomena and has so many clones and even a game jam http://itch.io/jam/flappyjam, I thought this might be a good subject for a simple sample showing some basic moves that you can adapt to something more interesting. My first post on this, Flying Fox, is here: http://firefoxosgaming.blogspot.com/2014/02/flying-fox-part-1-game-programming.html.

Again, thanks to the Firefox OS community and in particular to Ginn Chen, Frédéric Harper, and Mark Coggins, for making the ZTE Open now a proud member of the Firefox OS 1.2 community.