Pine app

[Jeremy Kahn]

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.

[Jeremy Kahn]

I think I'm going to use 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.

[Luke Stebner]

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.

[Jeremy Kahn]

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.

[Jeremy Kahn]

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 branch if you're interested.

[Jeremy Kahn]

I just made a pretty big push to master.

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.  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.

[Alex Wilson]

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?

[Jeremy Kahn]

Optimally the entire flow will stay within one tab. I'm envisioning
that each game will run inside of an iframe.

[Alex Wilson]

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.

[Jeremy Kahn]

I just added a few new features in the master branch. Importantly, we
now have page-able menus. They just animate back and forth. I've also
added some debugging UI bits - just hover over the bottom left of the
page to see it.

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.

[Jeremy Kahn]

I just made another big push.  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.

--
Jeremy Kahn

jerem...@gmail.com

https://github.com/jeremyckahn

@jeremyckahn

[Jeremy Kahn]

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

[Luke Stebner]

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 :)

On Sunday, September 30, 2012 at 6:46 PM, Jeremy Kahn wrote:

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

--
You received this message because you are subscribed to the Google Groups "Pine" group.
To post to this group, send email to pine-d...@googlegroups.com.
To unsubscribe from this group, send email to pine-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msg/pine-discuss/-/lONA8voA3fkJ.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Jeremy Kahn]

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.

[Jeremy Kahn]

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.

[Jeremy Kahn]

I just added support for oversized menus.

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. :)