The Firefox OS Tablet has Landed! (Hardware Review)

At least it has landed in my mailbox! Before you try to buy one, you can't. You have to fill out a form telling Mozilla what you will do with it. Find out all about it at https://wiki.mozilla.org/FirefoxOS/TCP.

If you want to see one, here's a video Michel Wilhelm made recently at http://www.youtube.com/watch?v=VvWRpC8Zdts with a nice tune about "What the Fox say!" And notice in the video that the tablet boots up in two seconds!

The tablet has several names. The box calls it the InFocus tablet. App Manager calls it Flatfish, my PC calls it SAGA. I like the name SAGA after the Japanese RPG, but I think Flatfish is catching on. I'll call it that.

Here's the specs, fresh from the TCP site:

Brand/Model: Foxconn InFocus New Tab F1
Processor: A31 (ARM Cortex A7) Quad-Core 1.2GHz w/ PowerVR SGX544MP2 GPU
RAM: 2GB
Storage: 16GB
Screen: 10.1" capacitive multi-touch @ 1280x800
Camera: Dual cameras, 2MP/5MP
Wireless: 802.11b/g/n, Bluetooth 2.1+EDR
Ports: Micro SD, Micro USB, Microphone, 3.5mm Earphone jack
Sensors: Light Sensor, G Sensor, Gyroscope Sensor
Other: Speaker 0.7W x 2 Stereo, GPS/AGPS & GLONASS
Battery: 7000 mAh
Dimensions: 266(L) x 170(W) x 9.7(H) mm
Weight: 580g 

It's a big tablet. I'm used to 7" tablets which will fit in my hand in portrait mode and 8" tablets which won't, but this is a big 10" tablet and you have to hold it in your lap. Unfortunately because people didn't know it was coming, many apps force you to tip the tablet sideways to use the app. Oh, well, they can read all about Screen Orientation at http://firefoxosgaming.blogspot.com/2013/11/screen-orientation-and-moz-prefixes.html which also contains a little app you can use to see how it work.

As promised, I'll get started on creating a series on responsive design that will compare the tablet to the three Firefox OS phones I have (all different sizes) and probably put it all into a book! But today, I'll just talk about the tablet and setting it up.

After charging it up with the included charger, I plugged it into my PC running Windows 7 and the drivers were very cooperative. Here's a screenshot of what the completed drivers from Windows Update look like:

 

And as soon as the drivers are loaded, this helpful window pops up, asking me what I want to do with this new drive.

Windows thinks this is called the SAGA G1. My very first Android phone was called the G1!

Well, this isn't a phone, this is a tablet! And here's what the memory looks like from the PCs point of view:

Drive E: is my DVD and Drive H: is my SD card used as a ReadyBoost cache (very handy for laptops). But we're interested in Drive I: which is the internal memory for apps on the device. Disk J: is the micro-SD card I stuck in the tablet (8GB which becomes 7.40GB). Lots of room for apps!

All is good, wireless worked, so I downloaded some apps from the store and some music from my PC. Next to download some of my own apps using the App Manager.

Here's what the App Manager sees:

You'll notice that App Manager calls the tablet the FLATFISH_123456 but we'll use the nickname Flatfish!

I had to make one change, however, before I could load one of my own apps. When using a FxOS phone, you have to check the box allowing remote debugging. With the tablet, there isn't a check box, there is a drop-down menu and it was set to ADB. That didn't work for me. I clicked on the box and found that ADB and Devtools needed to be the option.

Then everything worked perfectly.

So I uploaded my favorite app, the revised "How Big Am I" app explained in http://firefoxosgaming.blogspot.com/2014/04/long-lost-cousin-to-responsive-design.html. I'm about to revise it again using the Viewport API, but I thought I'd see if it worked on the tablet. It does!

Here you can see that the tablet has an outer width and height of 1280x800 pixels and an inner width and height (from the notifications bar taking away 20 pixels) of 1280x780 pixels. That's HUGE!

By the way, yet another cool thing about the App Manager is that it shows you the size of the screenshot when you take it:

 

App Manager just is so cool!

So here's a few screen shots. First is the Home screen, showing the one app I downloaded.

The icon says FoxBall but the app is really Size Me which is version 2 of How Big Am I? The icons below (done by a better icon maker than me) are Internet, E-Mail, Gallery, Music, Contacts, and Calendar.

The second screen looks like this:

That's it. Above are Settings, Camera, Clock, Video, and the fabulous Marketplace. Below you already know. No more for now but if you add more apps, more screens will become available.

If you want to uninstall an app, you must do it through the settings.

The old way, a long press on an app until it shows a little X in the upper-left corner, is gone (too much like iOS?).

Also, if you want to see what apps are running and kill one (but not uninstall it), swipe DOWN from the top to expose the apps that are running. Kill them by pressing on the X in the upper-left corner.

To get back to the Home screen, just swipe UP! So far, most things seem the same as the phone.

I also found one setting that stopped a problem I was having. After I had been playing with the tablet a few hours, the screen started flickering and changing colors. I thought maybe the tablet was heating up and going bad and I had visions of returning it and being very sad.

But it turned out that there is a setting in the Developer section that said something about repainting. Don't select that unless you know why you want it. I unselected it and the colors went back to normal. I unselected everything except the ADB & Devtools for remote debugging and everything seems fine.

Problems

I noticed a few problems with the new tablet. The first is that several apps don't load quite right. I don't know what this is about but here's what happens. I go to load something and instead of an icon, I get a screen like this:

This was for an app called PDF Viewer, but I saw several others. It's not that big a deal because you can just carefully click on index.html and the real app will come up. But odd. Not every app did this. Something to investigate further. 

By the way, the PDF Viewer app really ran slow on the tablet, but runs fast on a phone. This probably is because there are less pixels to crunch. It took like 3 or 4 seconds to fill a page with a double-column PDF. This may be a problem for apps that have to crunch more pixels!

My other noticeable problem is that the Device Orientation does not seem to work. There is a cool app called Orbland that simulates rolling a steel ball around a wooden maze. It works on the original ZTE Open and the Geeksphone Peak, but does not work on ZTE Open C, and now does not work on the Flatfish!

I had written an app that shows the code for Device Orientation at http://firefoxosgaming.blogspot.com/2013/12/device-orientation-game-programming.html

and it works on the ZTE Open and the Geeksphone Peak (both running at version 1.2) but does not work on the ZTE Open C (version 1.3) or the Flatfish (version 1.4). The hardware has a gyroscope and the Device Orientation API should work but doesn't. I need to file a bug on this so that people can play Orbland! Seriously, device orientation is important for phones and I'll figure out what the story is. Especially because I'm working on a space shooter that uses Device Orientation to steer. By the way, my blog post on Device Orientation was the most popular post on my blog, but has now been pushed off the top of the pile by my post on the ZTE Open C.

Also, in a similar problem, the Vibration API doesn't work for the ZTE Open C or the Flatfish, but there was some discussion on B2G about how vibration isn't support in the actual devices (even though it was on the ZTE Open and the Geeksphone Peak. I wonder why those aren't supported. I like vibration for tapping on keys and of course for games it really helps explosions!

I think that covers the first round of this fabulous new tablet. It seems very well built and I'm happy to put it through its paces and write lots of posts on responsive design because now I have a phone (three actually) and a tablet. Clearly, what works on a phone won't work on a tablet. And by the way, I'm ready to say that if you write an app, have your phone version be portrait, but have your tablet version landscape. Because of the way the plug works, it's not easy to view something in portrait on the tablet.

So, stay tuned, but not iTuned or iPadded!

ZTE Open C (Hardware Review)

Woo hoo!

I just got my ZTE Open C from eBay and I'm very happy with it. This is my third Firefox OS phone and so far it is really great. I wanted something I could try to use, as opposed to something I could program. I'll be running it through its paces, but so far I'm extremely happy with the $99 unlocked price I paid to the ZTE store on US EBay.

Why is this cool? It seems faster than the ZTE Open I have. The official Mozilla specs are at https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Phone_specs#Device_specifications. From those it looks like the specs are the same as the Geeksphone Peak, but I'm investigating that a little more.

It looks like this:

The Geeksphone Peak has this processor: Qualcomm Snapdragon S4 8225 and the ZTE Open C has this one: Qualcomm MSM8210 Snapdragon. If someone wants to tell me the difference, that would be cool. What is cool about the Open C is that it has very similar specs to the "Flame" Firefox OS reference device. Same processor, anyway.

Of course the first thing I did was to hook it up to my PC and fire up App Manager. Here are a few screen shots. Oh, I forgot to say that the Open C comes with Firefox OS 1.3 out of the box! And when I hooked it up to my 64-bit Windows 7 box, it had more drivers than the one or two the earlier phones had. Here's a snap of the drivers that Windows Update found for me.

Getting Windows Update to do all of that is downright amazing. Someone has a friend in Redmond!

So here are a few screens showing off version 1.3 of Firefox OS.

Here is the home screen:

N

Those icons at the top take you to selections of relevant apps. I don't know how they are chosen, but I'm sure people will care about them.

At the bottom you see the usual suspects: phone, address book, messages, browser, and radio.

The next screen looked like this:

The usual suspects: camera, gallery, email, calendar, twitter, facebook, settings, and marketplace.

There was a third screen:

 

This one had music, video, clock, notes, usage, here maps, and ... SOFTWARE UPDATE. 

If you click on that, here's what you get:

I guess ZTE learned their lesson and now there's a button on the screen to update when version 1.4 is ready to go. Thank you! After all the suffering we all did to update the original ZTE Open to anything beyond 1.0, it's nice that they're starting out at 1.3. 

One other cool thing (of many) that I just discovered is that the Notes app connects to Evernote! Very easily, too. By the way, all I had to do was drop in a spare SIM card and add a 16GB SD card, and I was ready to go. 

By the way, when I plugged it in, Windows recognized the device and showed me this:

The first drive is the 16GB SD card I put in (okay, everybody lies about memory) and the second drive is what ZTE considers as memory you can use for music, video, pictures, etc. I had a choice about which drive to use but I chose my external SD card for all my music, etc.

Here's some of the music I downloaded right away:

 

A prize for anyone who knows where those songs are from!

I've got plenty of room for storage:

I then ran my app that looks at inner and outer dimensions and here is what it produced:

 

That's the app from http://firefoxosgaming.blogspot.com/2014/04/responsive-design-game-programming.html and the follow up at http://firefoxosgaming.blogspot.com/2014/04/long-lost-cousin-to-responsive-design.html. 

However, alert readers will notice that those numbers don't match the numbers in the spec at Mozilla I cited at the top of this page. J. Ryan Stinnett pointed me to the article at https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel. I will need to digest this article and see if there's some way I can make apps that use these different "pixels". My app works just fine and the ball bounces around the edges, but it sounds like if I use viewport, I can get a bigger super-pixel screen. 

So far, the ZTE Open C is definitely a winner ... especially at $99. Get yours today from http://item.ebay.com/291125433026. Right now when I went to check, it said 332 had been sold and 8 people had bought this in the last 8 hours. They're having a 5% off sale if you buy 2! In case you're worried, the seller, ZTE_US, has a 99.% rating, which is great!

I'll be trying out more apps and doing more comparisons of the ZTE Open C and the Geeksphone Peak in the next few days, so stay tuned, but not iTuned!

PaddleFox for Firefox OS in Construct 2 (Game Programming)

The more I use Construct 2 (from Scirrra at http://www.scirra.com), the more I am convinced that Scirra and Firefox OS make a great team-up for HTML5. I especially like how Scirra has made it really easy to make a game AND put it in the Firefox OS Marketplace.

But first, go back and read my recent post on using Construct 2 to bounce a ball. http://firefoxosgaming.blogspot.com/2014/04/bouncing-ball-in-construct-2-game.html. I've written several posts on bouncing balls, showing six different ways to do it with CSS, Canvas, and SVG. But now there's a seventh way, and a very easy way, to do it with Construct 2.

Compare the 154 lines of "simple" HTML5 CSS code to bounce a ball in my latest CSS shell post at http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html. Now compare that with the roughly 20 steps for doing the same thing in Construct 2. But those 20 steps are all about picking from lists, filling in blanks, and not worrying about missing a semicolon! And we won't even talk about how hard it would be to write the same code in Java for Android or Objectionable-C for iPhone!!!

Today's post is about taking that boring bouncing ball and turning it into a simple game. Why not try PaddleFox?

 

This is the game that I wrote and placed in the Firefox OS Marketplace. You can get it there at https://marketplace.firefox.com/app/paddlefox and you can read how I created it at http://firefoxosgaming.blogspot.com/2014/01/paddlefox-game-programming.html. 

PaddleFox is 268 lines of juicy HTML5 goodness made possible by using SVG (in its most delicious form, the direct SVG DOM) with a little bit of CSS thrown in for good luck. But no Canvas. Ugh. I hate Canvas. (Well, not really, but I really like the object-oriented retained-mode SVG much better!)

So, how would I do this in Construct 2. Well, the answer is ... I did it extremely easily. I already had a bouncing ball. All I had to do was add a paddle! 

So let's begin where we were with the bouncing ball. Here's Construct 2 with the ball in place.

The first thing to do is create a paddle. Double-click on the board (Layout 1) and add a Sprite. Click where you want it to go on the board. You'll get the Edit Image dialog. But instead of loading an image, let's do something simpler. We'll make a sprite out of thin air. 

First pick a color for the sprite by clicking on the paint bucket on the left. The color picker will come up. Pick a color. 

I picked blue! That's RGB(0,0,255) if you're curious. But because this is Construct 2, all you need to know is blue, you don't need to care about all those messy numbers!

Then once you've picked your color, click on the square in the middle of the Edit Image dialog. It will turn blue (or whatever color you picked). 

Next, grab the edges of the blue square and resize it so it looks like a paddle. Here's what I did:

Kill the Edit Image dialog and modify your new paddle. Notice that you didn't need art because you were making a rectangle. Dull, but good enough for now. Your paddle is sitting on the board now, keeping the ball company. 

But let's go to the paddle properties and make sure your paddle is a good paddle.

I made the paddle 128 x 32 pixels and gave it a position at 160,400. This makes it fit on the grid nicely. It could be anywhere as long as its near the bottom, but I thought it might be helpful to have everything on a simple 32x32 grid. 

Next I wanted to give the paddle some behaviors. You'll see this a lot. 

  1. Create an object.

  2. Position it on the board.

  3. Give it behaviors.

That makes it a real object with form, position, and ... behavior. Well, what kind of behavior should a paddle have? (And I keep hearing Austin Powers saying, "Oh, behave!"

Click on Behaviors in the Properties window.

I gave it just two simple behaviors. 

  1. Solid. It is good to be solid. That way balls can bounce off it.

  2. Bound to Layout. This keeps the paddle from going off either side.

The second behavior would take complicated code in HTML5, calculating the edge value and making sure you don't go beyond it. But Construct 2 does this for you with one quick choice.

Also, give the paddle a name. Go over to the Projects window and rename the new object something like "Paddle" so you can come back to it later. Naming is always a good idea!

The paddle is ready. But how do you move it? In HTML5 you'd set up an event handler and process it when the mouse (or finger) does something. In the HTML5 version of PaddleFox, I calculated where the mouse click was and if it was on the left side, I moved the paddle left, and right, right. Firefox OS will interpret a touch on the screen as a mouse click, by the way, and Construct 2's mouse clicks are interpreted the same way.

So I want some way to interpret clicks. After thinking about it, and wanting it to be easy and as calculation-free as possible, I came up with this solution. You may have another. 

What I did was to have two invisible objects, one of the left, the other on the right, and do something when you click on them. 

To make things easy, the first step of doing this is to create a new layer. In the free version of Construct 2, you're limited to 4 layers and 100 events (we'll see events in a minute). But we only need two layers here. The first you've already been using, and the second will now appear. Layers are an easy way to keep objects separate and also serve as a series of planes so that the top layer is what you see first and lower layers may be obscured by objects on the top. Also, layers can be temporarily turned off so you can work on complicated stuff, on layer at a time. You can read about layers in the Construct 2 manual at https://www.scirra.com/manual/85/layers. 

Layers are under the Projects window. There's a tab at the bottom of that window that says Layers. Click on it to see the current layers. 

Click on the + (plus) button to create a new layer. I called my new layer Layer 1 but you can call it anything you want.

After you do that, you'll have two layers to play with:

Layer 0 was the earlier layer and is "behind" Layer 1. Notice that I've unchecked Layer 0 right now because I don't want to see the ball and paddle.

I want to add an invisible object that will cover the left side of the screen. So the first step is to create a new object. Just double click on the board and like you did with the paddle. You don't want any art and you don't want any fill. Once you've got your new object, kill it. 

You've got a new object on the screen. Stretch it to cover the whole board so it looks like this:

Next, drag the right edge over to the middle so it looks like this:

When using invisible objects like this which will be used for what is called "hit testing" you can overlap the edges, but you'll want to keep the right edge of this left object flush with the center so you don't have a confusion if the user taps near the center. 

Rename this object something like LeftTouch. You can check the values with the Properties window:

Note that Opacity for 100 means solid, so you should see it. But you don't because there isn't a picture or color there. An interesting quirk. If you added a color, you could make it zero opacity so it was invisible and then when you touch it, you could make it 100% opaque for a second so the user know they touched something. But I'm trying to be simple here.

Do the same procedure for a right invisible object covering the right side of the board on Layer 1. Name it something clever like RightTouch.

Next you need to add Mouse functionality. Do this by going to the Projects window (push Layers out of the way) and right-click on Object types and select Mouse. 

Now you are ready for the mysterious world of Events. You've had the Layout tab selected all this time so you could see the board. Up at the top but before the ribbon you'll see a few tabs. Click on Event Sheet 1. It will be blank.

To add your first event, double-click on the Event Sheet. You'll be asked to select an object.

 

This will match the objects you have added to the project. Double-click on the Mouse object.

These are the events that the mouse can respond to. Pick "On object clicked". You'll get this dialog:

This asks you which object you want to see if it was clicked. Pick one of the hit target objects we just created.

Then choose the values you see above for the RightTouch object. You want to detect the left mouse button, you want to detect a click, and you want it to be the RightTouch object. Click Done and you are done. Except you want to do the same thing for the LeftTouch object. Your event sheet will now look something like this:

This tells you that the LeftTouch and RightTouch objects are ready to be clicked on by the mouse's left button.

But what happens? You've got the events, but nothing will happen. You need to supply Actions!

Actions are needed for an event. Think of them as event handlers. An event takes place, like a mouse button click, but you need an action to then take place. To the immediate right of an event you'll find the words Add action. 

You'll get a list of object to pick from. Pick the paddle. You want action on that paddle. 

The action you want to choose is "Move at Angle". Notice that you see a little picture of the paddle to remind you that you're moving the paddle.  

When you choose that action, you then need to tell Construct 2 what angle:

The angle is 0. For Construct 2, zero degrees is straight right. So this is for the RightTouch object and the distance you want it to travel is 16 pixels. Every time you click on the RightTouch object (representing the right side of the screen) the paddle will move 16 pixels right until it hits the edge and then it will not go further.

Do the same for the LeftTouch object, but make the Angle 180,  and you're set for the paddle!

Your Event Sheet should look like this:

This tells you what events will be processed and what action will happen. This is really nice because you can tell what will happen.

Click on the big arrow at the top of Construct 2 and you can watch the ball bounce around. Click on either side of the screen and see the paddle move. Cool!

And the ball bounces off the paddle. Amazing. But ... there are two more things that would be nice to add that would make it a real game.

  1. Have it so that if you miss with the paddle, and the ball hits the bottom edge, the game is over.

  2. Notify the user that the game is over!

  3. Stop the ball from moving.

And this is really easy with Construct 2. We'll do it by displaying a message saying that the game is over and stop the ball.

To do this, we need to add a Text object. Go to the Projects window and right-click on Object types and choose a Text object. Place it on the Layout screen where you want the text to be displayed. Somewhere near the top.

Check out the Text object Properties:

The important property here is to make the Initial visibility to Invisible. You don't want this text to display until the game is over. And now to set that up.

We need to add one more event. We want to see what will happen is the ball hits the bottom edge. As you may recall, in the bouncing ball example in my earlier post on Construct 2, each of the four edges is an invisible box that is just a line. I called mine EdgeBottom.

Double-click on the Event Sheet and select Ball. You'll get this:

You are interested in Collisions and in particular, "On collision with another object". Select that and click on Next. 

Construct 2 wants to know what object you want to collide with. How about EdgeBottom?

Click on Done to end your Event. But now you must select an Action to go with that Event.

Click on Add action and choose the Text object. Then select "Set Visible" and make the visibility "Visible".

Next do the same thing and add a second action and then choose Text and this time select "Set Text" and give it the value "Game Over!"

Finally, to stop the ball, add a third Action for the ball. Under Bullet, select "Set Speed" and give it the value zero. Your ball will stop.

Here's what your Event sheet should look like:

That's it. You're done! Just press the big arrow at the top and run the game. You can export it and choose "Open Web App" which is the name of the Firefox OS Marketplace. If you want to put it in the Marketplace, just make sure you change the icons from Construct 2 to your own icons and that all your information applies to you, not to me or Construct 2 defaults.

This is just so cool! Now anyone can make a game for Construct 2.

Here is what the results looks like for Firefox OS:

And here is what it looks like when the game is over!

If you want to download a copy to run in Construct 2, you can get it at http://thulfram.com/1GAM/April%202014/PaddleFoxC2.capx

I'll be playing around with Construct 2 for the next few weeks, finding out other cool things it does and how to transfer those cool things to Firefox OS.

Stay tuned, but not iTuned!

Long Lost Cousin to Responsive Design (Game Programming)

In my recent post on Responsive Design, at http://firefoxosgaming.blogspot.com/2014/04/responsive-design-game-programming.html, I noted the interesting problems with the Software Home button and how that robbed precious screen real estate from the ZTE Open. The same issues apply to other phones, but the ZTE is especially important because the screen is small.

Software Home Button

To refresh your memory, here is the ZTE Open with no Software Home button.

And here is the same ZTE Open with the Software Home button:

50 pixels lost!

André Jaenisch did some digging and discovered that this is documented on MDN.  Thank you, André!

MDN programming at https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System#The_software_home_button says to use this CSS to detect and display the Software Home button:

@media not all and (-moz-physical-home-button) {
  #screen:not(.software-button-disabled) > #windows > .appWindow {
    bottom: 5rem;
  }
 }

And mentions the ability to set this in the Developer Settings here at https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings#Enable_software_home_button.

I never noticed this but somewhere when I upgraded my ZTE Open from 1.0 to 1.2, the Software Home button was enabled and I noticed it.

This button will turn out to be important when tablets for Firefox OS become available.

You don't need to worry about this, but if you want to, you can always put in that extra bit of CSS. In any case, make sure you actually detect what your screen size is and act accordingly.

Upgrading the ZTE Open to 1.3 or 1.4

By the way, if you have a ZTE Open, André also dug up some links on how to upgrade the ZTE Open to Firefox OS version 1.3 or 1.4. Again, thank you, André!

Upgrade to Firefox OS 1.3 at http://www.gizbeat.com/4223/how-to-build-firefox-os-1-3-2/.

Upgrade to Firefox OS 1.3 at http://blog.chellinsky.net/putting-firefox-os-v1-4-on-a-zte-open/.

Viewing Screen Sizes

I actually forgot to put in the code of how to generate the numbers you see in the screen shots above. Start out with the code from my latest CSS Shell code (adapt if you're using Canvas or SVG) at http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html.

First I added a bit to the body to give the information a place to display:

  <h3>Width</h3>
    <p id="ow">Outer Width</p>
    <p id="iw">Inner Width</p>
  <h3>Height</h3>
    <p id="oh">Outer Height</p>
    <p id="ih">Inner Height</p>
Then I added this code in the section that runs after the page is loaded:

      // Get height and width.
      ow.textContent =
        "Outer Width = " + window.outerWidth;
      iw.textContent =
        "Inner Width = " + window.innerWidth;
      oh.textContent =
        "Outer Height = " + window.outerHeight;
      ih.textContent =
        "Inner Height = " + window.innerHeight;

You can also put this into console.log format. The important thing is that you know the inner and outer width and height, so you can program accordingly, but in this case, also display it so you can see what you are dealing with when looking at various devices.