Need help in creating workspace like appinventor

@ewpatton

i have deleted previous two posts as i made few more tries on all the three errors so to update my trial errors i have done so , i am sorry for the inconvenice...

yes thank you first and second errors solved and

For error3

I mean how to change event block to get those return variables on them I am using block factory to make block in json

component_event (1)

how to place variables like tag & value as on the firebaseDB1 in the above block image......

This is what i tried

   Blockly.Blocks['button'] = {

  init: function() {

    this.jsonInit(

          //here i place the json data

        );

       this.localNames_ = ['value'];

        this.appendDummyInput().appendField(this.parameterFlydown(0), 'VAR0')

    

        this.blockType = 'event'

        this.typeName='Button'

        this.eventName='Click'

        this.instanceName='button1'

  },
 parameterFlydown: function (paramIndex) { // Return a new local variable parameter flydown
var initialParamName = this.localNames_[paramIndex];
var localDecl = this; // Here, "this" is the local decl block. Name it to use in function below
var localWorkspace = this.workspace;
var localParameterChangeHandler = function (newParamName) {
  // This handler has the same subtleties as procedureParameterChangeHandler in language/common/procedures.js,
  // but is somewhat simpler since doesn't have associated callers to change. See the notes there.

  // See Subtleties #1 and #2 in  procedureParameterChangeHandler in language/common/procedures.js
  var newLocals = localDecl.localNames_;
  newLocals[paramIndex] = newParamName;

  // If there's an open mutator, change the name in the corresponding slot.
  if (localDecl.mutator && localDecl.mutator.rootBlock_) {
    // Iterate through mutatorarg param blocks and change name of one at paramIndex
    var mutatorContainer = localDecl.mutator.rootBlock_;
    var mutatorargIndex = 0;
    var mutatorarg = mutatorContainer.getInputTargetBlock('STACK');
    while (mutatorarg && mutatorargIndex < paramIndex) {
      mutatorarg = mutatorarg.nextConnection && mutatorarg.nextConnection.targetBlock();
      mutatorargIndex++;
    }
    if (mutatorarg && mutatorargIndex == paramIndex) {
      // See Subtlety #3 in  procedureParameterChangeHandler in language/common/procedures.js
      Blockly.Field.prototype.setText.call(mutatorarg.getField("NAME"), newParamName);
    }
  }
}
return new Blockly.FieldParameterFlydown(initialParamName,
    true, // name is editable
    Blockly.FieldFlydown.DISPLAY_RIGHT,
    localParameterChangeHandler);

}

then i got the variable named as value on the block, but its function is similar to the local initialize block which is in lexical variable but not as the firebaseDB1 event block above

error2:-
How to make function like when Show Warnings clicked make warning visible & invisible on blocks without blocklypanel_, you told to remove all the code starts with BlocklyPannel_.

i made it but how to make it work as it is from the appinventor workspace...
i tried with this from warning_indicator.js

    Blockly.WarningIndicator.prototype.onclickWarningToggle = function() {
     Blockly.hideChaff();
  Blockly.WarningHandler.prototype.toggleWarning();
 
  
};

then in warning_handler.js

   Blockly.WarningHandler.prototype.checkAllBlocksForWarningsAndErrors = function() {
      // Do not attempt to update blocks before they are rendered.
      console.log(this)

      if (!this.workspace.rendered) {

        return;
      }
      if (Blockly.Instrument.isOn) {
        var start = new Date().getTime();
        var topBlocks = this.workspace.getTopBlocks();
      }
      var allBlocks = this.workspace.getAllBlocks();
      try {

        if (Blockly.Instrument.useLynCacheGlobalNames) {

          // Compute and cache the list of global names once only

          // so that each call to checkDropDownContainsValidValue needn't recalculate this.

          this.cacheGlobalNames = false; // Set to false to actually compute names in next line.

          this.cachedGlobalNames = Blockly.FieldLexicalVariable.getGlobalNames();

          this.cacheGlobalNames = true;

        }

        for(var i=0;i<allBlocks.length;i++) {

          var blockErrorResult = this.checkErrors(allBlocks[i]);

        }

        console.log(this)

      } finally {

        // [lyn, 04/13/14] Ensure that these are reset no matter what:

        this.cacheGlobalNames = false;

        this.cachedGlobalNames = [];

      }

      if (Blockly.Instrument.isOn) {

        var stop = new Date().getTime();

        var timeDiff = stop - start;

        Blockly.Instrument.stats.topBlockCount = topBlocks.length;

        Blockly.Instrument.stats.blockCount = allBlocks.length;

        Blockly.Instrument.stats.checkAllBlocksForWarningsAndErrorsCalls++;

        Blockly.Instrument.stats.checkAllBlocksForWarningsAndErrorsTime += timeDiff;

      }

    };

throws an error at if (!this.workspace.rendered) { called workspace is undefined........

error1

generally when we try duplicating an event block there throws an error icon on both events in appinventor , but in my case it is not happening instantly instead it shows error icons on the block when any of the blocks moved/selected/unselected/when block dragged from flyout

how to update a block with error icon instantly after duplicating and deleting

what i made is

Blockly.Blocks['button'] = {

  init: function() {

    this.jsonInit(

           //here i place the json data

        );

        this.warnings =  [{name:"checkBlockAtRoot"}];

        this.errors =[{name:'determineDuplicateComponentEventHandlers'},{name:'checkIfIAmADuplicateEventHandler'}];

        this.blockType = 'event'

        this.typeName='Button'

        this.eventName='Click'

        this.instanceName='button1'

  }

Thank you,
Hoping a positive response from you...

hello @ewpatton

i am done with all the thing same as the appinventor workspace but small problem is as below

see the warning text popup starts at perfect place but

error text popup is starting at wrong place , am i missing any thing ..

i can't make it please could you help me how to solve it

You may not have laid out the icons in the right positions, so I would check that code first. Another thing might be that because the renderer was reimplemented in newer versions of Blockly we aren't reporting the icon information in the correct way.

1 Like

@ewpatton

Every thing is fine a small problem with workspace visibility
I tried workspace.setVisible(true) then workspace is visible but not showing backpack and warning icon how to make workspace invisible on a button click and make visible on other button click with all icons on the workspace

Once the workspace is shown you'll need to have the backpack compute its position, otherwise on most browsers it will be 0, 0 since its parent isn't visible. Our workspace overrides the Blockly workspace's resize function to position the backpack, so my guess is you are missing this code in your own.

1 Like

@ewpatton

yes you are correct i tested it, the problem is wrong positioning of all icons so i get the following workspace as below....

without any icon all are at wrong position, and you told me that i am missing some code that i couldn't get it, can u make it clear what i am missing to show all icon at their own position..

Thank you....

@ewpatton

hello i didn't get any idea can get me the code please if possible or else a detail info of how to do it
please

@ewpatton

Could u please help me

@ewpatton

Could you please help in solving this

All of our modifications to Blockly are in blocklyeditor/src/. The code you're looking for is in workspace_svg.js because it overrides the version in Blockly's workspace_svg.js.

1 Like

@ewpatton

in workspace_svg.js i found this which could overide blockly as u told above

Blockly.WorkspaceSvg.prototype.resize = (function(resize) {

  return function() {

    //resize.call(this);

    resize.call(Blockly.getMainWorkspace());

    if (Blockly.getMainWorkspace().warningIndicator_ && Blockly.getMainWorkspace().warningIndicator_.position_) {

      Blockly.getMainWorkspace().warningIndicator_.position_();

    }

    if (Blockly.getMainWorkspace().backpack_ && Blockly.getMainWorkspace().backpack_.position_) {

      Blockly.getMainWorkspace().backpack_.position_();

    }

    

    return Blockly.getMainWorkspace();

  };

})(Blockly.WorkspaceSvg.prototype.resize);

This is workspace1

This is workspace2

here i use two workspaces, on screen load workspace1 is working perfect while the other is invisible, and on a button click which is in violet colour the workspace2 should visible and workspace one should invisible but nothing is seen on the screen when workspace2 is visible as in the image above

what i tried to make visibilities is

var l = ['blocklyDivforjs','blocklyDivformedia'];

var r = ['blockyworkspace','blockyworkspace1'];

for(let t=0; t<l.length; t++){

    

mainworkspace1.push("<HERE I PUSH CREATED WORKSPACE>");

   

}

Blockly.WorkspaceSvg.prototype.resize();

mainworkspace1[0].activate();

mainworkspace1[1].setVisible(false);

document.getElementById('mm').setAttribute('hidden','hidden');

mainworkspace1[0].setVisible(true);

document.getElementById('nn').removeAttribute('hidden');

//this is the first button in blue colour

  document.getElementById('kk1').addEventListener('click',function(){

    mainworkspace1[0].activate();

    mainworkspace1[0].setVisible(true);

    document.getElementById('nn').removeAttribute('hidden');

    mainworkspace1[1].setVisible(false);

    document.getElementById('mm').setAttribute('hidden','hidden');

Blockly.WorkspaceSvg.prototype.resize();

    

    Blockly.Backpack.contents = calla();

        

  });

//this is the second button in violet colour

  document.getElementById('kk2').addEventListener('click',function(){

    mainworkspace1[1].activate();

    mainworkspace1[1].setVisible(true);

    document.getElementById('mm').removeAttribute('hidden');

    mainworkspace1[0].setVisible(false);

    document.getElementById('nn').setAttribute('hidden','hidden');

Blockly.WorkspaceSvg.prototype.resize();

        

    Blockly.Backpack.contents = callb();

});

Hoping early and positive reply..
Thank you..

@ewpatton

I am very sorry I could not solve it even after u told the solution as I am confused a lot here on how to make it could you make me clear why it happens like that and what to do I mean in the code please

@ewpatton

Initially when i load both workspaces by visibling them and toggle the visibility, everything works fine.

But when i toggle workspaces, by initially keeping it invisible. It is not toggling fine, either of the sheets get visibility problem.

need your help please
thank you

@ewpatton

On screen resizes if any worksheet is visible only that is visible, works fine not the other one

If both worksheet is invisible no worksheet is visibiling

You told me the problem in workspace svg.js
I didn't find any thing, can you tell me which code

I tried this code Blockly. workspacesvg.prototype.resize function while visibiling worksheets but not worked

Please help me

You may want to look at the code in BlocklyPanel.makeActive and adapt it to your situation. That code also gets run when switching to the blocks editor from a different screen.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

Hai @ewpatton

in here you told me to check a Blocklypanel.makeActive class and adapt it to my requirement but i cannot to it can you please help me with that in javascript

also when a block is drag and dropped on the backpack block is added to the backpack but is not returning to its previous position as the start paramater in onmouseUp event of backpack is {x:"undefined",y:"undefined"}

could you please help with this two issues

I reopened the topic again for you
Taifun

@Taifun
@ewpatton

Thank you for your kind response

Can u tell me how can I achive this please