News Flash! Firefox Has In-Browser IDE (Game Programming)

By an interesting coincidence, I've been helping a friend set up the Android Development environment and it is a pain! But not FirefoxOS! It is really easy to develop for FirefoxOS ... but it just got a lot easier!

I've suffered through all kinds of hideous development environments, and most of them are a pain because they 're designed for developers who supposedly are willing to take any kind of abuse. "Are you a masochist? (pause) Well, good, then you'll be right at home with Windows, Android, Apple, and so on."

Firefox OS was great because you only had to edit file in your text editor and then upload them to the browser (with a few plugins). Well, today is history. The latest Nightly build came out and it has an "Integrated Development Environment." What that means is that once you have Nightly, you're done! No more plugins, no more text editor. I'll miss you, Notepad++!

So, here's what you are really, really going to want to do and never look back.

Install Nightly

You already are doing this, right? Just install Nightly and have it update itself every night. Get it at http://nightly.mozilla.org/. You know you want to!

Enable the New App Manager

Once you have the latest Nightly installed, type this in the search window:

about:config

No spaces before or after the colon. You'll get a warning.

Ignore it. You're living on the cutting edge, right? Maybe some of the settings could break your windows, but this just will allow the new IDE to come to life.

Once you promise to be careful, you'll see a giant list of settings that you can change. Scroll down until you see

Yes, I know that webide sounds like something spiders clean their houses with, but it really is WebIDE (Web Integrated Development Environment). Right click on

devtools.webide.enabled

and when a little menu comes up, select true. Nothing happens right away, but the magic is about to happen.

Now go to your menu and select Developer and then App Manager. Yes, this is still called App Manager but the name may change to WebIDE.

And the App Manager has changed ... a lot!

Meet the New App Manager, Not the Same as the old App Manager

Here it is:

It looks simple but it is a lot more powerful than before.

The first thing I did was to open one of my packaged apps. How? Maybe it's the little button on the left that invites me to Open App? Yes!

I have choices and I'm choosing Open Packaged App. I navigate to my app and load it. Without any delay at all, my app is loaded and you can see it. I'm using the simulator here but the same is true with an actual phone. Here's my app:

Cool already. It shows me the files in my app on the left and information about my app on the right. This is a simple app I'm rewriting right now to convert it to SVG and incorporate the viewport, so I can see how big an app really is. More about that soon. You'll notice that it is a VALID app by the green button on the right.

The next thing I want to do it run it, so I go to the View menu and choose Manage Simulators. Why? Well, you get a choice of simulators for the different versions that are supported.

This shows you what is installed and what is not. I had the ADB Addon Helper and the OS 1.3 Simulator already installed, but by clicking on the install buttons for the later versions, you can see them too. You'll notice that 1.0, 1.1, and 1.2 are no longer supported.

So pick the OS version of your choice

Select a runtime. I selected 1.3 since that was all I had at the moment. It will also show your device if you have it hooked up. Once you've done that, just click on the arrow in the middle to start your app.

Amazing! As expected, it opens up a separate simulator window and you can see your app running. Here's my app, the one that shows you how large your device (or simulated device) is.

So far, not that special. But it now gets cooler because you can load up other environments. Here I am loading up Firefox OS 2.0. I didn't even know they were that far ahead!

Let's see what version 1.4 looks like. (Actually I know because that's what is running on the tablet. But I haven't seen it on a phone-sized window.

It looks different. This is part of the new school of flat icons. Easier to understand. I like the radio!

Does my app run in 1.4?

It looks the same, but the height is slightly different. The outer height is slightly larger because there was a file menu that is now gone. But the inner is still the same.

Okay, so this is slightly nicer than the old App Manager, but what's the fuss?

This!

If I select one of the files on the left, a text editor pops up. I picked the index.html file because that's where the meat is. Notice that the text is colored nicely.

I can see my icons even though I can't edit them.

Again, only maybe nicer. But it gets better!

From the project menu, you can select New App and make it all right there in the browser.

You'll be asked what kind of app you want. There will be more choices as time goes on, I'm sure. And here's your new app, ready to be filled with code-delicious stuff.

 

This is now starting to rock. Now Mozilla is giving you a template with icons, a manifest, and javascript and css files, showing you where everything should go. Thank you, Mozilla!!!

I noticed something really cool that I hadn't hear of before. One of the icons is an SVG file! You can click on it and see that yes, Virginia, it is an SVG file. No art here, just fabulous SVG code.

This needs to be investigated. Maybe you don't need anything but one SVG icon and you're done?

And if you run this new app template, it really does run!

I'm expecting a set of steak knives with the next release!

But I've saved the best for last. You can edit your code in the IDE and see the changes immediately. No more going back to your editor and reloading umpteen times.

Open the debugger in the App Manager and see the code:

I've highlighted a line of code that sets the body color. Before it was using the color "Peru" but I changed it to"Blue" and here is what I got.

On the fly! This is really astounding. Write your code, see your code, make changes in the debugger, and never leave your browser again. Thank you, Mozilla. This will cut everyone's development time down a lot, so now you won't have an excuse not to turn out tons of cool apps tomorrow!

This really is now the coolest development environment in the universe.

The only way it could be cooler is to be able to do this on an actual phone or tablet. Or even in Firefox for Android. Imagine if you could code in your tablet. I've seen several browser IDE apps for Chrome OS, so why not here? But I'm not complaining. This is a giant step forward in programming. Wow!

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.

Firefox OS Simulator R.I.P. (Game Programming)

I've been writing this blog for about 4 months and have written 73 posts, half of which are about programming games for the Firefox OS on the phone (the other half are reviews of Firefox OS games on the phone). I still have lots to write about on making games, but yesterday when I went to install the first part of a series on a new game type, the Firefox OS Simulator greeted me with this note:

I've been using the Simulator to install my game code on my two phones (ZTE Open and Geeksphone Peak) and it has never let me down. I knew there was a better solution from Firefox OS called App Manager, but it required that my phones have Firefox OS 1.2 or greater. And, having heard horror stories of phones being bricked, I wasn't eager to try to flash my phones. I use the Peak every day for programming so I didn't want to risk losing it, and there have been some problems with the ZTE Open.

But now this message worried me. I tried the Simulator and ... it didn't work! The latest "normal" Firefox is 26 and I'm usually working with Nightly, so I was in trouble. Well, maybe flashing my Peak won't be that hard. Well, it was hard, but I'm now the proud owner of a Firefox OS version 1.2 Geeksphone Peak.

More about the installation later, but the first thing I did once I had a working phone was to try out the App Manager. It is really worth the trouble, because it does lots more than the old Firefox OS Simulator (which helped me do about 35 posts). The features that stand out to me:

1. You can see a little more progress when the app is loading onto the phone. In the lower right corner, there is a nice little window that tells you you're connected and the status of your loading.

2. You can actually debug apps running on the phone with your PC. Here's an example of some console action, courtesy of the App Manager:

3. You can take screenshots by clicking on a button in the App Manager. You can even run  apps on your phone and do the screenshots from your PC! Taking screenshots is a pain. Here is a screenshot from the App Manager:

Here is a screenshot from the actual phone (Power Button + Home Button):

There are only minor differences, but the saving of time and trouble is nice. There's lots of other stuff I need to explore, but it works, and some of the other debugging features will come in handy as I do more complicated things. Especially for phone-only features that can't be simulated on the Simulator. No amount of tilting my PC will work on the Simulator for Device Orientation. The only small hassle is that the App Manager only works if you zip up all your files into a single package. If you make lots of changes, this can take a little bit of extra time. Fortunately for most Firefox OS features, you can just test out your app in the Firefox desktop browser, and that's a very fast turnaround cycle!

You can read all about the App Manager here: https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager. App Manager isn't a plug-in, but comes with any Firefox browser that is version 26 or higher. When you first run it (from the Developer Menu), it will ask you to install a 1.2 or 1.3 simulator and some ADB software from our friends at Google Android (ADB = Android Device Bridge). 

So I'm busy at work and you might be guessing that my next post will be about a cute little fox who escaped from a Pac Man game written in another dimension. Later!

What Went Wrong?

Mozilla provides this great article on how to upgrade a Geeksphone: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone. Great except for one tiny thing that threw me off for an hour or two. I'll get to that, but first I'll outline the steps.

1. Make sure your phone and PC are ready. They recommend this article: https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/. Essentially you must have your drivers in order (especially if you have a Windows PC, which is what I used, and I expect a few others do also). Drivers in Windows are always "interesting" and especially anything to do with USB drivers is always a problem. The actual USB architecture is pretty lame, and tries to squeeze too much, too fast, through a thin pipe. But Device Manager is your friend (or perhaps the Girlfriend from Hell) and you can get it to work. I'm on Windows 7 and my PC is a four-year-old Asus laptop. Essentially for my setup, everything works if Device Manager shows me this:

2. Get the proper image of the new OS you want to flash to your phone. Geeksphone is very good about this (and ZTE Open not so good). They offer stable (1.2) and unstable (1.3) and nightly, and I picked 1.2 because that's all I need right now, to make App Manager sing.

Get it here: http://downloads.geeksphone.com/.

3. Make sure Remote Debugging is set up on your phone. I already did this (but checked) because you need this for the Firefox OS Simulator. It's in the Developer section of your phone.

4. Unzip the image you got in step 2 and put it somewhere on your PC so you can find it later. I stuck mine in the root of the D: drive.

5. Open up a Command Prompt window (also fondly known as the DOS Box, but DOS is only emulated these days). Navigate to your image folder. Tip: the folder name is really long, so you can just type the first few letters, insert an asterisk, and press Enter. Then, type:

                       flash.bat

Things will happen. Stuff is copied to your phone. And then ....

6. Something went wrong. I got stuck on an orange screen I'd never seen before. Turns out this is the Recovery Screen and very useful, but no combination of buttons did anything except get me back to this screen, and no phone in sight. An endlessly looping ... BRICK!

What I needed to be at was a different part of the phone innards called the FASTBOOT screen, black with a few options. But how to get there?

The instructions said:

If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with a simple procedure. The following illustrates resetting the Keon but other phones should have a similar process. You will also need to verify that you have fastboot installed.

First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume down button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the latest img files described in the first section of this post:

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

This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.

I've read enough to know my ZTE may not have Fastboot, but I'll worry about that later. Peak has it but getting it is ... not exactly what they said. After removing the battery and putting it back in, no amout of pressing the Volume Down and Power did anything except keep bringing me back to the dreaded orange Recovery Screen.

I surfed the web and wore out my fingers on those hard buttons, and finally found one post somewhere that said to press Power AND the both the Volume Up and Volume Down buttons. Something is fiddly with those buttons, but pressing all three worked the first time and I was now in the Fastboot screen on my phone and was able to type the above commands in the command window. A few short moments later my phone rebooted and I was at version 1.2.

As a retired engineer I can appreciate that the Peak only has 4 buttons, and that two of them are attached at the hip. I've seen other phones that required some serious finger and hand stretching to get them to reboot the right way, but I would have preferred a pinhole in the back. For the Peak, I've seen the following ways to get to the magic Fastboot screen:

1. Power + Volume Down
2. Power + Volume Up
3. Power + Volume Up + Volume Down

And sometimes the order is important. #3 worked on the first try, #1 and #2 never worked for me. Just do this:

1. Take the battery out.
2. Unplug the USB cable  (essentially if you don't, the phone is still powered)
3. Wait 30 seconds.
4. Put the battery back in.
5. Press Power + Volume Up + Volume Down (all at once).
6. Plug in the USB cable.
7. Type these commands, one at a time, and let them do their thing:

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

 8. The phone will now reboot after the usual questions (time zone, etc.) you're done!

I couldn't take a screenshot of the Fastboot or Recovery screens, but I found some similar ones that will give you an idea of what they look like.

Recovery Screen

 Here is an image I found somewhere in G-land:

That one's for the ZTE but the Peak recovery screen is orange and has a few more options.

Flashboot Screen

Here is one for an Android device. But don't forget, under the skin, we're all androids!

Of course, mine didn't have a cute little Android or some of the extra device information, but it did have some similar stuff. The point is that you don't want to pick options from this screen, you just want to be on this screen with your phone. Once your phone displays this screen, you can run those mysterious fastboot commands from the command prompt on your PC. The instructions on how to do all this from a Mac or Linux are around, but in keeping with my lazy ways, I went with what was close at hand. I have now put Fedora on two spare netbooks and I'll try building my own images at some point. But for now, my Peak works and I'm back to game programming.

Next up, a series of posts on creating your own version of Flappy Bird, maybe some ASCII art games, a text adventure, a cool RPG, some platformers, oh, and maybe I'll pull these posts together and make a book!