how do I change the default background and toolbox ui of workspace using google blockly library

[Sk. Faisal]

Hi,

I just join blockly . I am trying to build an android application using blockly. I need to change the background and default toolbox ui . I can't understand how to do it. I want to change the following portion of the workspace.

 in the toolbox instead of String i want to use icons. I have followed this https://developers.google.com/blockly/guides/configure/ios/toolbox#categories

but it didn't work for android . I have tried following code in assert>turtle>toolbox_basic.xml
  

<category name="Start" colour="160"  icon="\turtle\start.png">
    <block type="block_start">

    </block>
</category>

Please let me know how to I do following changes.

Regards,

Sk. Faisal

[Andrew n marshall]

Hello Sk. Faisal,

Let me start with the Workspace grid and background.  The grid is rendered by the WorkspaceGridRenderer, a component of the VirtualWorkspaceView inside the WorkspaceFragment.  At the moment, the only background related fragment configuration we support is the drawGrid boolean attribute:

<fragment android:name="com.google.blockly.android.WorkspaceFragment"          android:id="@+id/blockly_workspace"          android:layout_width="match_parent"          android:layout_height="match_parent"          blockly:drawGrid="false"/>

Anything else will take a modification of the source code.  If we look inside WorkspaceGridRenderer, we see drawGrid(..) just draws a single rectangle with mGridPaint. mGridPaint is constructed in updateGridBitmap(..) and is just a BitmapShader from a dynamically drawn bitmap with circles at the grid intersections.

GRID_COLOR, GRID_SPACING, GRID_RADIUS are all constants at the top of the file that could easily be exposed as fragment arguments, like drawGrid(..). I take pull requests, if you want to make this happen.

Now, that doesn't cover the underlying background color. The bitmap is transparent with an alpha channel (perhaps unnecessarily). That means the background color remains the color of the VirtualWorkspaceView. This could probably be configured in the WorkspaceFragment.onCreateView(..) (and exposed as an argument).

Regarding the toolbox, it is made of two parts. The CategorySelectorFragment with the list of selectable categories, and the FlyoutFragment with the list of available blocks.

Now the CategorySelectorFragment is a implementation of the CategorySelectorUI interface.  Because this interface exists, you can implement your own toolbox how ever you want. In fact, since you're making edits, I would consider copying the CategorySelector classes into your app's package name, so minimize conflicts.

The tab colors come from drawable/toolbox_tab_bg_selected and _normal 9-patches.  These are referenced from drawable/toolbox_tab_bg.xml, which is used by layout/default_toolbox_tab.xml in CategoryTabs.java.  How much of that chain of resources you change will depend upon how much you intend to customize.

If you change the background color of the tabs, you probably want to update the background color of the FlyoutView in the blockly_toolbox_ui FlyoutFragment. This is another opportunity for a useful fragment argument.

If you do want to contribute your changes, remember to start making changes on the develop branch.  I've added #675, #676, and #677 to track these ideas. 

--
Andrew

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