ajstarks / deck

A Go Package for generation of slide decks and information displays
Other
300 stars 21 forks source link

decksh and gcdeck and variables editing. #10

Closed gedw99 closed 1 year ago

gedw99 commented 2 years ago

Hey

I was wondering if we can extend gcdeck with more gui to help designers work on their designed without having to know too much Deck markdown or .dsh

This is just an idea to help make it easier for graphics people to not have to edit .dsh directly. The biomimicry people using this are non technical and i am trying to make it easier for them to use the gcdeck tool.

Here is one of your examples: https://speakerdeck.com/ajstarks/decksh-a-little-language-for-decks?slide=5

Its has a variable called "gy=10" that affects the elements placement.

How is the Layout --

Left Pane: Preview area of Deck Right Upper Pane: Elements List Right Lower Pane. Properties List

How is the description of each and how they interact.

The Elements list shows a representation of the elements in the .dsh file. It could be a tree or a list. The Properties list shows properties. If no element is selected it shows the global variables of the .dsh If an element is selected it shows the elements properties in the Property List.

When they click on an element in that list , highlight it in the Preview pane with some sort of border. We can do that by just injecting into the rendering stream using a "HighlightFocus" context variable, so that it looks for the element passing through the buffer and injects the deck markup to put a border around it. At the same time, show the properties of that element on a Property List . Just like the "HighlightFocus" this is just a global context listening for a variable called "PropertyFocus", so it knows what Element to show the properties for.

When they change the global .dsh variable like "gy=10", , the file updates and so then does the Preview Deck, and and hence the properties affected by it in the Properties List.

The idea with the HighlightFocus and PropertyFocus variables is so that GCDeck can be told what to render in its Panes. These variables are set globally. Once it knows the element its looking for it can look it up in the Deck Markup and pass the string along the context allows the Properties List to update.

Hope you get the gist of my explanation above. I imagine you have also thought about how to make things easier for designers who find it hard to deal with markup / dsl files too, so if you have some thought on this let me know.

If you want to have a video chat to discuss

ajstarks commented 2 years ago

I have some ideas on a more advance GUI. Stay tuned.

Here is a mockup of the UI: 1) blank canvas, 2) click on the canvas and see its property sheet, 3) dragging an element onto the canvas with its property shee Screenshot from 2022-05-27 06-54-35 Screenshot from 2022-05-27 06-54-22 Screenshot from 2022-05-27 06-54-45 t

gedw99 commented 2 years ago

this is looking really nice. Very clean

gedw99 commented 2 years ago

I am really curious how your going to get .dsp working with the GUI.

I am guessing deckd will be involved act as the "go-between" and give to the GUI an object model to understand it.

I was looking at the micro.yaml file in decksh, trying to work out how this "DSL" works. Still trying to understand it. Its remarkably clean and simple.

ajstarks commented 2 years ago

the best referece to the DSL is: https://github.com/ajstarks/decksh/blob/master/doc/objref.pdf

gedw99 commented 2 years ago

Yeah i know the DSL but thanks for the link..

I was more interested in working on the underlying parser to help add new DSL elements and just in general be able to work on the code. One example of this is for adding i18n.

I am still trying to understand things like: https://github.com/ajstarks/decksh/blob/master/decksh.go https://github.com/ajstarks/decksh/blob/master/micro/dsh.yaml

gedw99 commented 2 years ago

dsh.yaml is for go-micro ide, to help it do type ahead lookups for coders ?

ajstarks commented 2 years ago

yes, there is support for micro, vim, VSCode, and Sublime Text. The dsh.yaml is the config for the micro editor (https://micro-editor.github.io/).

To understand the parsing see: https://github.com/ajstarks/decksh/blob/master/parse.go

gedw99 commented 2 years ago

thanks i am getting the hang of it ...

ajstarks commented 2 years ago

To understand the structure, start at line 286-402, the switch shows the keywords supported, like: "curve", the action for that case is a function with this signature

curve(w io.Writer, s []string, linenumber int) error

these functions take a string slice with the parsed tokens, and generates deck markup. See: https://github.com/ajstarks/decksh/blob/master/generate.go

ajstarks commented 2 years ago

Alternative UI mockups (element list on the left) Screenshot from 2022-05-27 18-13-33 Screenshot from 2022-05-27 18-13-20 Screenshot from 2022-05-27 18-13-07

gedw99 commented 2 years ago

Left is more cognitively easy to work with I feel.

top pane could have tabs for each deck slide later.

gedw99 commented 1 year ago

will close as its stale