How to place an icon anywhere in a block using coordinates

[Vinod Chauhan]

Question: Is there any way to place an icon or svg anywhere in the block. how can we achieve it ? I have attached screenshots below.

CODE:

Blockly.Blocks['system_scenario'] = {

init: function() {

tthis.appendDummyInput()

.appendField(" ")

.appendField(new Blockly.FieldTextInput("Unnamed"), "system_name")

.appendField(" System Flow");

this.appendDummyInput()

.appendField(new Blockly.FieldImage("images/icons_SVG/icon-analytics-white.svg", 35, 35, "processcache", cacheIconClick))

.appendField(new Blockly.FieldImage("images/icons_SVG/icon-datatable-white.svg", 35, 35, "dataView", dataViewIconClick))

.appendField(" 1/6 Scenario Loading ")

.appendField(new Blockly.FieldImage("images/icons_SVG/sf-block-progress-bar.svg", 138, 10, "ssProgress"))

this.appendDummyInput()

.appendField(new Blockly.FieldImage("", 35, 0, "processcache", cacheIconClick))

.appendField(new Blockly.FieldImage("", 35, 0, "dataView", dataViewIconClick))

.appendField(new Blockly.FieldImage("images/icons_SVG/sf-block-progress-bar.svg", 138, 10, "ssProgress"))

this.setHelpUrl('http://www.example.com/');

this.appendDummyInput();

this.setPreviousStatement(true, "Broadcast");

this.setNextStatement(true, ["Action", "Process", "Broadcast", "Wait_Listener"]);

this.appendStatementInput("NAME")

.setCheck(["Action", "Process", "Broadcast", "Wait_Listener"])

this.appendDummyInput()

.setAlign(Blockly.ALIGN_RIGHT);

this.setColour(135);

this.setHelpUrl("");

},

};

Current result: 

Expected result: This is what I'm trying to achieve.

NOTE: . currently I have edited it using translate property.

[Maribeth Bottorff]

Unfortunately I don't think this is something that is supported out of the box. If you put the image into a new DummyInput, it would put it on a new line, which is closer to what you're looking for, and you might be able to get them to line up more by changing the size of either the icon or the text. This isn't directly what you asked for, but we have an old feature request to add the ability to specify to center the text (or bottom align the text) on the row, which might also help you. https://github.com/google/blockly/issues/1430 The core team is unlikely to do this in the near future, but we would accept PRs for this feature and could provide some tips if you wanted to tackle it.

Otherwise, I think you could build a custom field for this because you would have more control over the display. Example: https://blockly-demo.appspot.com/static/demos/custom-fields/turtle/index.html Info: https://developers.google.com/blockly/guides/create-custom-blocks/fields/customizing-fields/creating#updating_the_on-block_display

Hope that helps,

Maribeth

[Vinod Chauhan]

Thanks Maribeth, I will look into the examples.

Apart from this I have another issue wherein I want a loader inside the block as described in above image. And I want that loader to keep on increasing its length as my api fetched data. (For eg: I have to laod 10 APIs and I want display loader accordingly. Let's say currently only 2 apis have been fetched so the loader length should be 20% filled.) 

CODE:

Blockly.Blocks['system_scenario'] = {

init: function () {

this.appendDummyInput()

.appendField(" ")

.appendField(new Blockly.FieldTextInput("Unnamed"), "system_name")

.appendField(" System Flow");

this.appendDummyInput()

.appendField(new Blockly.FieldImage("images/icons_SVG/icon-analytics-white.svg", 35, 35, "processcache", cacheIconClick))

.appendField(new Blockly.FieldImage("images/icons_SVG/icon-datatable-white.svg", 35, 35, "dataView", dataViewIconClick))

.appendField( $rootScope.loadedScenarios.length + "/" + cacheService.getSystemScenarioList().map( s => s.sS_ID).length + " Scenario Loading ")

this.appendDummyInput()

.appendField(new Blockly.FieldImage("", 35, 0, "processcache", ''))

.appendField(new Blockly.FieldImage("", 35, 0, "dataView", ''))

.appendField(new Blockly.FieldImage("images/icons_SVG/sf-block-progress-bar.svg",  $rootScope.loadedScenarios.length * 138 / cacheService.getSystemScenarioList().map( s => s.sS_ID).length, 10, "ssProgress"))

// other code //

},

};

Issue: Unable to update variable $rootScope.loadedScenarios.length  tried to solve it using ($watch) but callback functions are not supported in .appendField()

NOTE: I am using web-worker to fetch data.