Dynamically displaying variable contents during runtime.

[Swix]

Hi,

I'm trying to create a 'Scratch Like' UI to help educate students on the basics of coding getting them to code a simple chatbot. I have successfully created a canvas which handles text inputs and the outputs of running blockly code and have also correctly made the canvas display the variable names that the program is using:

However, I really want students to be able to see the values of each variable during the running of their code, so they can see the dynamic changes of their variables at runtime.

However, i am really struggling on how to implement this.

As you can guess, i have managed to use the get all variables method, but how to access the live values/contents of variables during code execution?

Any help would be gratefully recieved.

SWIX 

[Neil Fraser]

Blockly doesn't execute the code, so it has no idea what the variable values are.  What are you using to execute the code, eval, JS-Interpreter, or something else?

--
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/82a86f62-9e47-4f5e-9585-8ddffdafab29n%40googlegroups.com.

--

Neil Fraser, Switzerland
https://neil.fraser.name

[Swix]

Ah yes of course. 

I'm using js-interpreter.

Any help you could provide would be gratefully received.

Sam

[Neil Fraser]

Using JS-Interpreter makes this easier.  Great.

The first step is to look up what variables exist.  Obtaining a list from JS-Interpreter is not a great idea since the JavaScript runtime has lots and lots of global variables that are of no interest to the user.  Rather than trying to filter that list down, it's more sensible to just ask Blockly for a list of variable names.

You've already found Blockly.getMainWorkspace().getAllVariableNames(). That's a great start, however, it returns the variable names as typed by the user, not the variable names as used in JavaScript.  95% of the time they are the same, but there are cases where the variable needs to be quietly renamed.  For example if the user creates a variable named 'foo bar', that's not a legal JS variable name, so it gets renamed behind the scenes to 'foo_bar'.  Thus each variable name needs to have its JS equivalent name looked up.  This code should do it:

const varMap = {};

for (const name of Blockly.getMainWorkspace().getAllVariableNames()) {

  varMap[name] = Blockly.JavaScript.getVariableName(name);

}

Call this code after the JS code has been generated, it won't work before generation.  Now we have a map that looks something like this:

{

  'foo bar': 'foo_bar',

  'typeof': 'typeof2',

  '♥': '_E2_99_A5',

}

[Calling Blockly.JavaScript.getVariableName results in some whining in the console about deprecation, I'll let someone else chime in on the right way to squelch that.  Either way, it works.]

You can then iterate through this map using the keys to create the UI for your onscreen variable list.  And you can also iterate through this map using the values to obtain the current variable contents from JS-Interpreter:

for (const name in varMap) {

  const jsName = varMap[name];

  const varContents = myInterpreter.getValueFromScope(jsName, myInterpreter.globalScope).toString();

  [print `varContents` in your onscreen table for `name`]

}

Just run this loop after each JS-Interpreter step, or ten times a second, or however you wish to update your display.

Hope this helps!

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/5cf45e57-9851-46e5-85df-10a927a95aacn%40googlegroups.com.

[Swix]

Thank you so very much for your time and help here.

This all looks great and I'll get testing when I return to the PC.

Thanks again and is this THE Neil Fraser who wrote Js-interpreter :)??

[Neil Fraser]

Am Do., 29. Feb. 2024 um 19:08 Uhr schrieb Swix <ad...@computerscienceuk.com>:

Thanks again and is this THE Neil Fraser who wrote Js-interpreter :)??

Guilty as charged.  :)

[Swix]

Wow! Well I am very honoured to have been supported by your genius! Thanks again!!

[Swix]

I have just tried to implement and i can correctly access the variable list and their js names, but when i try the code to access the variable values, i get this error in the console:

Uncaught TypeError: myInterpreter.getValueFromScope is not a function

Thanks again for all your help.

[Neil Fraser]

Sorry, 'myInterpreter' will be the instance name of your Interpreter.  Somewhere you'll have a line that looks something like this:

    var myInterpreter = new Interpreter(myCode);

Sent (awkwardly) from an Android device.

--

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/fd417314-503a-49a0-9dbd-b53d278a5aafn%40googlegroups.com.