Is any way to render block outside workspace even blockly?

193 views
Skip to first unread message

John K

unread,
Jun 13, 2022, 11:46:00 PM6/13/22
to Blockly
Hi, I create an electron app with functionality saving user-made blockly "code" to files. And then they can load the file to run or edit blockly "code" from files.every files represent a function created by blockly.

Screenshot 2022-06-14 113000.png

I wish users could preview the function block shape when mouse hovers on files. The problem is how to render the function blocks outside the workspace or even outside blockly?  

Beka Westberg

unread,
Jun 14, 2022, 10:32:57 AM6/14/22
to blo...@googlegroups.com
Hello :D

So generally you can't render blocks outside of workspaces, because all of the rendering is tightly coupled together. However, you can create a tiny read-only workspace that you use to display blocks, as recommended here. You can make a workspace read-only by setting readOnly to true in the configuration struct.

I hope that helps! If you have any further questions please reply :D
--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/96afd1c5-063e-4a76-aac2-7eb73a1a798en%40googlegroups.com.

John K

unread,
Jun 20, 2022, 5:45:31 AM6/20/22
to Blockly
Thank you !! It is a wonderful idea! I am going to try it after finishing some fundamental work.

Mark Friedman

unread,
Jun 20, 2022, 12:33:41 PM6/20/22
to blo...@googlegroups.com
Another option, which is way less cool but perhaps more lightweight, would be to generate an image of the workspace, save it along with the Blockly code in the file, and display the image when your user hovers over the file.  There is code for generating an image of a workspace here.

-Mark


mtra...@gmail.com

unread,
Jun 21, 2022, 3:13:16 PM6/21/22
to Blockly
See https://vagueness.herokuapp.com/ for an application that does this (click on the Library tab).

The method: it pulls the rendered SVG out of the Blockly display and saves that, then re-renders it without Blockly

The code: https://github.com/mtravers/vaguely/blob/master/src/cljs/vaguely/library.cljs#L883 (in ClojureScript, but the technique could be done in javascript easily enough)

Mike Travers

unread,
Jun 24, 2022, 3:49:12 PM6/24/22
to blo...@googlegroups.com
Screenshot: 
 image.png


--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages