Re: game browser UI
Adam Bliss
> On Mar 29, 11:06 pm, Adam Bliss <abl...@gmail.com> wrote:
>> For starters, can you design a friendly way to browse a large/deep
>> javascript object? Its members can be arrays, functions, strings,
>> numbers, booleans, dates, and nested objects. I'm thinking of some
>> kind of expandable tree, since that seems to be a familiar UI, but I'm
>> open to all ideas.
>
> I found the best way was a tree menu style because of infinite
> recursion e.g. window.window:-
> <http://www.businessinfo.co.uk/labs/astalanumerator/
> astalanumerator.html>
Thanks, that's useful. Did you write it? Or do you know who did, and
if they will license it? I tried pasting the ecmanomic code into the
object creation panel, but I couldn't get it to enumerate for some
reason.
The Ecmanomic GameData object is acyclic--mostly because I couldn't
figure out a simple and elegant way of encoding cyclic structures in
JSON. Also, I think GameData has a much higher percentage of
"directly observable" properties (i.e., short strings, numbers,
booleans, dates) so I'm not sure the two-pane interface makes the most
sense for casual browsing.
Also, the atlasanumerator doesn't seem to show the source code for
function bodies -- a primary purpose of the Ecmanomic code browser.
Do you think this feature could be added?
--abliss
Gareth
> Thanks, that's useful. Did you write it? Or do you know who did, and
> if they will license it? I tried pasting the ecmanomic code into the
> object creation panel, but I couldn't get it to enumerate for some
> reason.
I wrote all of it I hereby declare it in the public domain and I'll
put it under whatever licence you like.
> The Ecmanomic GameData object is acyclic--mostly because I couldn't
> figure out a simple and elegant way of encoding cyclic structures in
> JSON. Also, I think GameData has a much higher percentage of
> "directly observable" properties (i.e., short strings, numbers,
> booleans, dates) so I'm not sure the two-pane interface makes the most
> sense for casual browsing.
>
> Also, the atlasanumerator doesn't seem to show the source code for
> function bodies -- a primary purpose of the Ecmanomic code browser.
> Do you think this feature could be added?
Yeah I actually updated it to use a slightly different method:-
http://hackvertor.co.uk/public
Type "window" or something in the output panel and click inspect. I
use a three column view and display values directly without two frames
this makes it easier to inspect a large object. I've also separated
into a js file to make it easier
Adam Bliss
> Yeah I actually updated it to use a slightly different method:-
> http://hackvertor.co.uk/public
>
> Type "window" or something in the output panel and click inspect. I
> use a three column view and display values directly without two frames
> this makes it easier to inspect a large object. I've also separated
> into a js file to make it easier
Cool! I pasted the ecmanomic codebase in there, but I think the popup
got confused by some unescaped html.
What do you think about the idea of representing the type of a member
with a color (as ecmanomic currently does, though I welcome better
pallette suggestions :) or with an icon? I find the column of type
names a little displeasing.
Some nits I'd like to pick (all should be easily fixable):
- the small font size makes the click-targets a little hard to hit
(Fitt's Law), and the "+" icons look clickable but aren't.
- the values should be in a fixed-width font, at least for numbers and
functions.
- your function bodies seem to remove whitespace; linebreaks and
indentation are important for browsing code.
- the member name is vertically centered against the value field,
which is a problem for very tall fields (e.g. functions when their
newlines are restored).
- Expanding is a little slow (>1sec on chrome / linux 2.6Ghz).
Overall though, I'd love to see something like this in the ecmanomic
code. After I activate makeover_00, it should be as easy as a
proposal like this:
this.FrontEnd.Tabs["Code Browser"].show = function(tabContent) {
// your code to populate the tabContent div with the code browser
of window.GameData
};
--abliss
Gareth
> What do you think about the idea of representing the type of a member
> with a color (as ecmanomic currently does, though I welcome better
> pallette suggestions :) or with an icon? I find the column of type
> names a little displeasing.
Yeah I'll modify it with a colour representing the object saves space
and makes sense.
> Some nits I'd like to pick (all should be easily fixable):
> - the small font size makes the click-targets a little hard to hit
> (Fitt's Law), and the "+" icons look clickable but aren't.
> - the values should be in a fixed-width font, at least for numbers and
> functions.
Good points thanks! Will fix
> - your function bodies seem to remove whitespace; linebreaks and
> indentation are important for browsing code.
I'll wrap it in a pre and div to create a overflow area
> - the member name is vertically centered against the value field,
> which is a problem for very tall fields (e.g. functions when their
> newlines are restored).
Yep valid point will modify the css
> - Expanding is a little slow (>1sec on chrome / linux 2.6Ghz).
I had a 2 sec delay for some reason I'll reduce it to milliseconds
> Overall though, I'd love to see something like this in the ecmanomic
> code. After I activate makeover_00, it should be as easy as a
> proposal like this:
>
> this.FrontEnd.Tabs["Code Browser"].show = function(tabContent) {
> // your code to populate the tabContent div with the code browser
> of window.GameData
>
Cool thanks for the suggestions!
Gareth
> code. After I activate makeover_00, it should be as easy as a
> proposal like this:
>
> this.FrontEnd.Tabs["Code Browser"].show = function(tabContent) {
> // your code to populate the tabContent div with the code browser
> of window.GameData
>
> };
Ok astalanumerator now looks sexy, did all those cool suggestions and
created a nice colour code too.
http://hackvertor.co.uk/public
type window in the output then click inspect
The files can be grabbed here:-
http://hackvertor.co.uk/javascript/astalanumerator.js
http://hackvertor.co.uk/css/astalanumerator.css
Adam Bliss
> Ok astalanumerator now looks sexy, did all those cool suggestions and
> created a nice colour code too.
> http://hackvertor.co.uk/public
> type window in the output then click inspect
Hey nice! I pasted in the ecmanomic object and it looks pretty good.
Two more features would be nice:
1) only iterate over an object's own properties (no need to see
"function __defineGetter__() { [native code] }" everywhere).
2) in Ecmanomic I store comments in structured parallel objects. So
for example, the function called "FrontEnd.remoteFetch" has a
sister-object called "FrontEnd.remoteFetch_comment". This object is
meant to be like jsdoc for the function. It has a string "comment", a
map "param" describing the function's arguments, and a string
"returns" documenting what it returns. In the current game browser, I
use these to format some mouseover popup tips, but they're a bit
annoying. Any ideas for surface this type of information in the tree?
Or a better scheme for preserving it?
Have you looked at the demo of my "makeover_00" proposal? It
basically just divides up the giant ugly page into a series of smaller
ugly tabs, so we can work on each one more easily. If you like it, I
encourage you to come vote for it, so we can start incorporating your
code browser suggestions. If you don't like it, I'd love to hear why.
--Adam
Gareth
> 1) only iterate over an object's own properties (no need to see
> "function __defineGetter__() { [native code] }" everywhere).
This can be done by emptying the pre-populated array "jsBuiltInProps"
which has a big list of collected properties.
> 2) in Ecmanomic I store comments in structured parallel objects. So
> for example, the function called "FrontEnd.remoteFetch" has a
> sister-object called "FrontEnd.remoteFetch_comment". This object is
> meant to be like jsdoc for the function. It has a string "comment", a
> map "param" describing the function's arguments, and a string
> "returns" documenting what it returns. In the current game browser, I
> use these to format some mouseover popup tips, but they're a bit
> annoying. Any ideas for surface this type of information in the tree?
> Or a better scheme for preserving it?
I don't really mind the tooltips to be honest but you could create a
table of data with them and show them in a fixed area somewhere on the
page.
> Have you looked at the demo of my "makeover_00" proposal? It
> basically just divides up the giant ugly page into a series of smaller
> ugly tabs, so we can work on each one more easily. If you like it, I
> encourage you to come vote for it, so we can start incorporating your
> code browser suggestions. If you don't like it, I'd love to hear why.
Yeah clicked the demo but didn't really see anything changed. Couldn't
see any tabs :(
Adam Bliss
>> Have you looked at the demo of my "makeover_00" proposal? It
>> basically just divides up the giant ugly page into a series of smaller
>> ugly tabs, so we can work on each one more easily. If you like it, I
>> encourage you to come vote for it, so we can start incorporating your
>> code browser suggestions. If you don't like it, I'd love to hear why.
>
> Yeah clicked the demo but didn't really see anything changed. Couldn't
> see any tabs :(
Uh-oh. What browser / OS were you using? Would you paste me the
contents of the bottom textarea after you click on the demo button?
I have noticed that the latest versions of firebug break ecmanomic in
strange ways. Can you disable firebug (or run in safe-mode) and try
again?
--abliss
Gareth
> Uh-oh. What browser / OS were you using? Would you paste me the
> contents of the bottom textarea after you click on the demo button?
>
> I have noticed that the latest versions of firebug break ecmanomic in
> strange ways. Can you disable firebug (or run in safe-mode) and try
> again?
Win7 Firefox 3.6.2 no firebug
Adam Bliss
Does anything show up in the "results" textarea at the bottom of the page when you click the "demo" button next to "makeover_00"?
On Mar 31, 2010 12:33 PM, "Gareth" <gazh...@gmail.com> wrote:
On Mar 31, 5:34 pm, Adam Bliss <abl...@gmail.com> wrote:
> Uh-oh. What browser / OS were you using?...
Win7 Firefox 3.6.2 no firebug
--
You received this message because you are subscribed to the Google Groups "Ecmanomic" group.
To...