Blockly-Like Interface in DrRacket

[Stephen Foster]

If I wanted to build a drag-and-drop, visual programming interface for programming in DrRacket, is there any prior work I can build on?  Ideally, I'd like to implement this as a DrRacket "snip", so that my students can make programs that are partially text-based and partially visual.  Any suggestions?  Has anyone done something in the ballpark?  

[Stephen De Gabrielle]

Hi Stephen,

I'm assuming you meant something like Snap (http://snap.berkeley.edu) in Dr Racket? 

 
Snips are powerful; they can inserted in text and pasteboard editors; they can be dynamic(e.g. plot), and they can contain other editors(text or pasteboard).

The only possibly related prior work I’m aware of was an insert-gui functionality in DrRacket (maybe even DrScheme?) which allowed you to insert GUI elements into program text.

There was a query about 'Extending DrRacket with non-text tabs' that might be helpful (see https://groups.google.com/d/msg/racket-users/Iu2XtxNX_Kk/SiavnnkYDEoJ)

The DrRacket plugins documentation has a example of extending DrRacket https://docs.racket-lang.org/tools/implementing-tools.html

Kind regards,
Stephen D

some documentation links:

 * DrRacket Plugins: http://docs.racket-lang.org/tools/index.html

 * Graphical Interface Toolkit: http://docs.racket-lang.org/gui/ 

    * Pasteboard(editor): http://docs.racket-lang.org/gui/pasteboard_.html

On Thu, 28 Dec 2017 at 04:30, Stephen Foster <ste...@thoughtstem.com> wrote:

If I wanted to build a drag-and-drop, visual programming interface for programming in DrRacket, is there any prior work I can build on?  Ideally, I'd like to implement this as a DrRacket "snip", so that my students can make programs that are partially text-based and partially visual.  Any suggestions?  Has anyone done something in the ballpark?  

--
You received this message because you are subscribed to the Google Groups "Racket Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to racket-users+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Stephen Foster]

Yes, exactly -- Like Snap! except I don't need the runtime, just the code editing paradigm.

I googled for insert-gui and the closest thing I found was this:

https://github.com/mflatt/guibuilder

This seems really promising.

Also, I didn't know about the plot library and its interactive snips.  So I'll look more deeply at that too.

Thanks!

--Stephen

To unsubscribe from this group and stop receiving emails from it, send an email to racket-users...@googlegroups.com.

[Leif Andersen]

Hello Stephens (this is going to be fun...I just know it.)

As Stephen D pointed out, there was a push to add traditional gui elements to DrScheme (now DrRacket), which currently lives in the `embedded-gui`[1] collection. Although honestly, that library is old and hasn't been maintained for years.

Another alternative is my editor collection which is still in VERY early stages of development[2], but it also lets you build editors in DrRacket. I'm still making a cleaner interface for it, and ultimately I would like to be able to make a nice graphical video editor with it. (Powered by #lang video[3]). But for now, you can see an example of doing a similar thing (making a video editor that is embedded directly in code) on github[4].

Good luck Stephen F. and feel free to ping me if you have any questions.

[1]: https://docs.racket-lang.org/embedded-gui/index.html
[2]: https://github.com/videolang/idmt
[3]: https://lang.video
[4]: https://github.com/videolang/video/blob/master/video/private/editor.rkt

~Leif Andersen

[Stephen Foster]

Thanks Leif!

I was actually looking at your embeddable video editor a few days ago for inspiration.  Incidentally, I've also been playing around with #lang video a bit.  It's all really great stuff.  I'll definitely use these as inspiration.

--Stephen

[Stephen Foster]

I finally had some time to revisit this.  I'm hoping someone can help me out a bit more.

I made a basic renderer that takes arbitrary S-expressions and renders them as bricks.  I've made an interface for editing the bricks (and thus editing the S-expressions underneath).

What I would like to do now is seamlessly integrate these brick-expressions (B-expressions?) into arbitrary Racket files using some kind of custom snip%.

Here's a not-working prototype of what it should look like:

Notice that line #9 has the B-expression.  Line #7 has a comment showing the equivalent S-expression.  Also notice that the B-expression contains a reference to the constant defined in an S-expression on line #5.  And vice versa, notice that the S-expression on line #11 references the constant defined in the B-expression.  This two-way interoperability between B-expressions and S-expressions within the same file is something I think would be pedagogically valuable.

I'd love to implement this, but I'm looking for suggestions.

Let's just suppose I've implemented a special b-expression-snip% class.  (I haven't, but I think I could).

How might I go about getting the above to work.  Here are some random, vague, probably-misguided musings about implementations -- meant to stimulate discussion:

• Get DrRacket to render the b-expression-snip% as an image but otherwise treat it as a normal S-expression, just as if it had been written as such.
  
• Get the b-expression-snip%'s associated S-expression to be "evaled" in the context of the module -- without having to wrap the snip in a helper S-expression, e.g. (my-eval ...).
  
• Get the b-expression-snip%'s presence to somehow "inject" its S-expression into the module/file/etc.
• Implement some kind of special #lang racket-with-bricks that intercepts the code before execution and swaps all B-expressions for their associated S-expressions.

Any ideas, pointers, references, etc. would all be appreciated.  Thanks in advance!

[Stephen Foster]

Actually, I figured it out myself.  For the curious:

What I ended up doing was implementing a custom language "#lang racket-bricks".  I used syntax/module-reader's #:wrapper1 to intercept the code prior to execution.  It scrapes out all of the brick-snip%s and replaces them with their associated S-expressions.

From the user's perspective, both B-expressions and S-expressions can share variable bindings.  Also, one can nest B-expressions inside S-expressions.

I'm planning to use this at ThoughtSTEM to help transition novices smoothly from block-based coding to traditional coding.

[Greg Trzeciak]

Cool! 

At first I wondered on the purpose of the racket-bricks (since there is scratch already) but when you mentioned the transition from block based coding it made a perfect sense!

BTW - have you considered using https://pkgs.racket-lang.org/package/scratchy with your B-expressions?

G.

[Leif Andersen]

Stephen,

Do you have a link to your current source code? If so I'd be happy to
take a look at it and give you general feedback.

Also yes, your solution is (very sadly) the current state of the art I
have in #lang editor. (https://github.com/videolang/idmt). In the
future I hope to improve DrRacket with proper projectional editing
capabilities. But yes, at the moment its only really doable by
scraping and replacing raw text.

~Leif Andersen

On Fri, Apr 27, 2018 at 3:03 PM, Stephen Foster <ste...@thoughtstem.com> wrote:
> Actually, I figured it out myself. For the curious:
>
> What I ended up doing was implementing a custom language "#lang
> racket-bricks". I used syntax/module-reader's #:wrapper1 to intercept the
> code prior to execution. It scrapes out all of the brick-snip%s and
> replaces them with their associated S-expressions.
>
> From the user's perspective, both B-expressions and S-expressions can share
> variable bindings. Also, one can nest B-expressions inside S-expressions.
>
>

> I'm planning to use this at ThoughtSTEM to help transition novices smoothly
> from block-based coding to traditional coding.
>
>
>
> On Thursday, April 26, 2018 at 2:33:35 PM UTC-7, Stephen Foster wrote:
>>
>> I finally had some time to revisit this. I'm hoping someone can help me
>> out a bit more.
>>
>>
>> I made a basic renderer that takes arbitrary S-expressions and renders
>> them as bricks. I've made an interface for editing the bricks (and thus
>> editing the S-expressions underneath).
>>
>>
>> What I would like to do now is seamlessly integrate these
>> brick-expressions (B-expressions?) into arbitrary Racket files using some
>> kind of custom snip%.
>>
>>
>> Here's a not-working prototype of what it should look like:
>>
>>
>>
>>

[Stephen Foster]

Sure thing, Leif.  Thanks for the offer!

https://github.com/thoughtstem/racket-blocks

--

Stephen R. Foster, Ph.D., CEO

stephenfoster.us
multidimensionalgames.com

learntomod.com

vox-l.com

thoughtstem.com