One of the critical parts of the Pine project is the web app.  The app is
served from the local Node server.  The OS will open this app at startup
(with Chromium).  The Pine app provides an interface for a few things:

   - Choosing and launching a game.
   - Getting more games (via Taiga).
   - Interfacing with Taiga (leaderboard viewing)
   - Basic system management (deleting games, system preferences, shutdown).

Note that this all needs to be done with a gamepad.  Pine does not assume
that a keyboard and mouse are present.  I'm going to try to work up some
wireframes soon, and then start building out the UI.  Also, we need a
designer, because I have no design skills.

Please post any ideas, suggestions or concerns to this thread.  I'll also
use it to record my progress.

I think I'm going to use Bootstrap <http://twitter.github.com/bootstrap>for the UI, at least to start out with.  I haven't used it before, but it
looks like Bootstrap should let us get something workable in short order.

I like Bootstrap a lot and have been implementing it into the BrightGauge
app, let me know if you have any questions! It's very flexible and has a
ton of great UI elements though so I think this is a good idea.

Awesome, thanks.  I started looking at it last night, and it seems
appropriate for our needs right now.  At the moment I'm focused on getting
something presentable, and we can optimize and iterate over time.  I've
never used Bootstrap, so I need a few days to ramp up and learn it.
 Hopefully I'll have something to show by the end of this weekend.

Status update: I'm working on making menus and such for the Pine UI.  I was
hoping to have a little more done by the end of this weekend, but it's
going slightly slower than I anticipated.  I'm still happy with where I
got; I have rudimentary menu item navigation.  Nothing terribly exciting
yet.

I'm trying to strike a decent balance between hacky prototype code and
clean code that we can use in the long run.  I'm developing the UI in the
ui-main-menus <https://github.com/jeremyckahn/pine/tree/ui-main-menus>branch if you're interested.

I just made a pretty big push to master<https://github.com/jeremyckahn/pine/commit/48825a190c16d423509e7ac0bc...>
.

It looks really big because I added some libraries (Backbone, Underscore,
Require.js, a few others), but there's a good amount of original code in
there too.  This commit gives us a start on reusable main menus.  You can
test it out by pulling master and opening /ui/index.html in a browser.  I'm
curious how everyone likes the button cycling action - the X and Y axis
work differently, and I'm not sure if it's more usable than keeping them
the same.  I can change it fairly easily if nobody likes it.

I also wrote a small library called pine.keyrouter.js<https://github.com/jeremyckahn/pine/blob/master/ui/js/lib/pine.keyrou...>.
 Since Pine's UI is entirely gamepad driven, key input events will always
be global.  Keyrouter lets us easily route the input to various handlers.
 It's nothing really fancy, more of a convenience, but we can use this to
route input data to games.  It's a big commit, so let me know if you have
any questions.

My next task for the UI is to implement paged menus.  There will be several
sections of menus, and I want to animate back and forth between them very
easily.

I do like the separate behavior of the axes.

Are we going to run the games in their own tabs or run them inside of the
pine app?

That was my thought too. It would allow us to expose APIs to the game
easily without the game developers having to include the scripts themselves
or having to load and parse the whole Pine library every time.

My next big goal is embedding iframes. These iframes will serve as a
sandbox for games. In other words, the Pine app will never exit, just
hide its UI. The Pine app needs to proxy all inputs so that games can
be exited reliably. I'm not totally sure what the best way to do this
is yet, and I'm sure there are a number of technical implications I
haven't thought of.

I won't have much time to work on Pine for the next few days, but
hopefully I can get a proxied Hello World iframe running before too
long.

I just made another big
push<https://github.com/jeremyckahn/pine/commit/e34b8d3eb12a8093fc2c7ff14b...>.
 This one adds support for sandboxed iframes.  You can click a button (only
the first one is enabled for now) and launch an iframe, which takes up the
entire viewport.  All input to the iframe is proxied, so you can press the
escape key to close the iframe.

My next step is to make a test "game."  It won't really be a game, but it
will just log out the input so we have something to test against.  This
will also give some insight as to how a Pine game should be constructed,
because I haven't quite worked out how developers will have to develop
against the Pine sandbox.

jeremyck...@gmail.com
https://github.com/jeremyckahn
@jeremyckahn <http://twitter.com/jeremyckahn>

Pinging this thread with my latest progress.  Now we have a virtual
keyboard, yay!  It's still pretty rough and needs polish, but the important
functionality is all there.  I haven't implemented it in the actual app,
but you can see a demo
here: http://jeremyckahn.github.com/pine/ui/js/lib/test/test.keyboard.html

That's really cool, good work!

If you're ready for your first feature request I'd say this should still allow for raw keyboard input. Not to ignore the solid work you've already put together or anything :)

Thanks!  I agree, only being able to select letters one by one is very
annoying.  I was playing with regular keyboard input last night, but it
messes up the state of textarea that my code works with.  It's strange.
 I'll work on building that functionality in soon.

At some point it would be worth breaking this out into a separate project.
 It's pretty important for niche use cases like this, and I don't think
anyone else has done it.

jeremyck...@gmail.com
https://github.com/jeremyckahn
@jeremyckahn <http://twitter.com/jeremyckahn>

Just added physical keyboard support:
http://jeremyckahn.github.com/pine/ui/js/lib/test/test.keyboard.html

It might be a little buggy, but it seems to work well enough.

jeremyck...@gmail.com
https://github.com/jeremyckahn
@jeremyckahn <http://twitter.com/jeremyckahn>

I just added support for oversized menus<https://github.com/jeremyckahn/pine/commit/cb47c000c6df88a7c078c7044f...>
.

The code is kind of bad/insane, but it seems to work pretty well.  I had to
resort to using tables for the menus because there's only so much of my
youth I want to spend fighting with CSS.

I also added Vim keybindings for menu navigation. :)