CHange the Visual Shape of the block

[kushal bhattacharya]

Hi Blockly Team,

I  want to  addd a custom shaped block which may have any shape .During the preliminary stages i am trying to tweak the files in blockly_compesed.js which contains the compressed version of block_svg.js but i can't figure out what steps should i take to bring out my own custom shae other than the default renderd one.Really nedd a helping hand from you all.

Regards,

Kushal

[Blake]

Kushal,

As Neil has previously mentioned in this post (https://groups.google.com/forum/#!topic/blockly/XSiwd6e3ABE) all of the rendering rules are in block_svg.js

It is not recommended to edit blockly_compressed.js, you should make any changes in block_svg.js directly then use the build.py program to compile your changes into the blockly_compressed.js file. The building portion of the Blockly docs describes this process in depth: https://developers.google.com/blockly/guides/modify/web/building

Might I recommend that you:

1. determine what aspect of the block shape you would like to change (if you could share that with us we might be able to give better guidance).
   
2. Determine what method calls in block_Svg.js are invoked when rendering that block.
3. Attempt to understand how the SVG for that block is generated and how you want to change it.

As Neil says in his previous post, changing the block shape isn't for the faint of heart. Although it is possible but making the change will involve considerable effort on your part.

Hopefully this helps.

--
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.
For more options, visit https://groups.google.com/d/optout.

[kushal bhattacharya]

Hi Blake,

My first motto is to make a circular shaped block  i have looked up in block_svg.js but i can't find out places where actual svg path is included so i tried to look into blockly_compressed.js file

 

[Blake]

Did you see the work the MIT LLK team is doing on Scratch-Blocks? https://github.com/LLK/scratch-blocks/wiki/Design

On Thu, Aug 4, 2016 at 1:00 AM, kushal bhattacharya <bhattachar...@gmail.com> wrote:

Hi Blake,

My first motto is to make a circular shaped block  i have looked up in block_svg.js but i can't find out places where actual svg path is included so i tried to look into blockly_compressed.js file

 

--

[kushal bhattacharya]

what i have researched till now , i have found  Blockly.BlockSvg Object which does the main job of rendering the blocks but now i am confused about how to implement my own custom svg path here in this file i have found out where the path has been included into BLocks.BlockCould you please share with me the idea o how do i include my own implemetation of the svg path into this file

[kushal bhattacharya]

hi,

Theres one idea that poped up in my mind  and i want to ask  before that are the blocks  rendered according to the type entioned in the xml and  if so then how do i find the root where it is getting called according to the type.My main according according to it will be to make a custom type according to that rendering type and  then  by that type i mention a path svg for that .Please comment about my idea and guide me  for better one .

Thanks,

Kushal

[kushal bhattacharya]

finally got a clue to add my custom shaped block i have  removed the blockly_compressed.js file from my project instead i have included blockly_uncompressed.js in my project according to the documentation on building blockly.Thne i have included the   files on core directory and that of closure files. I found  block_render_svg.js in the core directory .There i found the place where the shapes are built up according to row.type value  (example like Blockly.NEXT_STATEMENT ,Blockly.INPUT_VALUE) .In that area with another condition check  i am trying to build another constant value accoding to that it will render its own custom svg path .Please tell me if am doing it the right way or is there any better option apart from this

[Kashyap Kalakbandi]

Hi Blockly Team, 

                          I want to change how blockly looks . So have tis shape using SVG PATH .i Just want to change default look of blockly . Is there any file with static path values so that i can change them with one i have created ? or else any other way i can do it ? 

regards

k.kashyap

[Kashyap Kalakbandi]

Hey kushal , 

                  Even im trying to do same , so can you guide me with the issue please.

[Luis Gustavo Araujo]

Hi, I am trying to add style to the text of the blocks, anyone have an idea?

I tried to add '<b>' in the text and this not work, but I want to add style as color in some words (not in whole text), for example.

[Rachel Fenichel]

You would need to make changes to the basic rendering code to break the text up and make pieces individually styleable.  You would need to make SVG groups for the pieces of text that need to be styled separately.

This is not something Blockly supports by default.  It may break rendering on some browsers.

[Luis Gustavo Araujo]

Yes, I imagined this. But what do the way to make it? What does the script I need change? I looked some scripts, but not found any reference to <text>. Then, how the blockly insert this element in svg? Thanks.

--

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+unsubscribe@googlegroups.com.

[Rachel Fenichel]

Non-editable text on blocks is always a FieldLabel.  Here's the code that creates the text element: https://github.com/google/blockly/blob/master/core/field_label.js#L63

You could probably make a custom field that's a styled label, that extends FieldLabel but has different code in init.

The element is inserted into the SVG here: https://github.com/google/blockly/blob/master/core/field_label.js#L71

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

[Luis Gustavo Araujo]

Hello Rachel, thanks for your comment. I will try and return for giving a feedback.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.

[Jose Miguel Mota Macias]

I want to make changes to sahpe of blocks. Can you provide us i guide about how to do this?

[Erik Pasternak]

Hi Jose,

We do not directly support changing the shape of Blocks. There's a lot of details involved with connection positioning and dragging that depends on the shape.

Feel free to dig around in block_render_svg.js and block_svg.js if you want to give it a shot.

Cheers,

Erik