search

zippy / ceptr

(a recomposable medium for distributed social computing) || (semantic self-describing protocol stacks)
http://ceptr.org
GNU General Public License v3.0
88 stars 17 forks source link

UI mockup for web client tree editor #49

Closed artbrock closed 8 years ago

artbrock commented 8 years ago

First steps toward building a Ceptr IDE in having a JavaScript based client that can match labels in the tiers of label tables, and build a semantic tree representation (probably in JSON which will get sent back to Ceptr then translated)

artbrock commented 8 years ago

Temp location of the mockup: http://artbrock.com/sites/artbrock.com/files/Nested_Tree.html

My favorite thing about it is that so far, it's really powered by just one line of CSS: #tree-editor div { display: inline-block; padding: 3px 3px 1px 3px; margin-left: 5px; background-color: rgba(80,0,0,.1); }

haizop commented 8 years ago

Hey Art - It seems like a pretty intuitive approach to me. The trees become especially clear to me when I narrow the window and it pops into a more vertical format. The nested colors made immediate sense.

haizop commented 8 years ago

looks good in Safari btw.

artbrock commented 8 years ago

Great! Thanks for checking on Mac!

artbrock commented 8 years ago

Okay... I've added it to the repository and refreshed the copy on my web site for viewing. (Be sure to hit refresh to reload info.) I think we could take a cool color-coding approach related to symbol context (Process, Symbol, Structure, Protocol, Receptor, Semtrex, etc.) which ends up kind of doing syntax highlighting and tree illustration.

Scroll down to the bottom of the page to see some of the cool color ideas. :)