Generating Smart Pascal from Blockly Blocks

[XML] [Command Line Compiler] [Lightweight Alternative] [BlocklyToSmartPascal]

BlocklyToSmartPascal is based on the Blockly Playground, which outputs five languages with these online consoles that you can use for testing: JavaScript, Python, Python accepting input, PHP, Lua and Dart. Java output is available elsewhere.

Some of our Blockly pages such as Caesar Cipher, Insertion Sort, Parallel Arrays and five types of validation show generated code in several languages including Smart Pascal, JavaScript and Python.

Follow this link to the online BlocklyToSmartPascal application when you have read the instructions if necessary. This screenshot shows the small assembly of blocks that you can recreate with the XML representation below.

Blockly Screenshot

Blockly Screenshot

To get started, click on Text in the list of block categories, drag the panel up to view the two blocks in the Input/Output section at the bottom. Double click on the Print block to drop it onto the Blockly workspace. Press the To SmartPascal button on the left of the screen to see the Smart Pascal code in the text area below the three buttons. To test the code generated, copy it to the TApplication.PopulateConsole procedure of a Smart Pascal console project in Smart Mobile Studio (freely available for student use upon registration by a teacher) or use the free smsc command line compiler as described below.

Variable names should include:
  • str for String e.g. strName
  • int for Integer e.g. intCount
  • float for Float e.g. floatAverage
  • array for array (list) e.g. MyFloatArray
  • just a single letter such as i, j, k for a for-loop control variable. (A single letter variable will not be declared with the others at the start of the Smart Pascal program).
These suitably named variables will then be declared as the corresponding type and the Smart Pascal compiler will report errors if you attempt to use them inappropriately.

You can save your arrangement of blocks by exporting to XML then copying the XML from the text area to a text file. Valid XML that is copied into the text area will display as blocks on pressing the Import from XML button.

See Neil Fraser's guidance on the use of the blocks in these categories: IfElse, Logic, Loops, Text, Lists and Variables. (Some of the images show the old "+" icon for the mutator instead of the gear icon).

Our demonstration material includes XML representations of blocks. This is an XML representation of a few blocks that you can copy into the text area:
<xml xmlns="http://www.w3.org/1999/xhtml">
  <block type="variables_set" id="`IKhyOT3Ok?Jy[Hl{8Jl" x="-662" y="-587">
    <field name="VAR">strForename</field>
    <value name="VALUE">
      <block type="text_prompt_ext" id="VGUCM/UCBAuK#{l,yYVS">
        <mutation type="TEXT"></mutation>
        <field name="TYPE">TEXT</field>
        <value name="TEXT">
          <shadow type="text" id=")t23-oq6rgg[eTy=g$rZ">
            <field name="TEXT">Please give your forename</field>
          </shadow>
        </value>
      </block>
    </value>
    <next>
      <block type="text_print" id="2Rb]b6DSD%e;E@,Fk4py">
        <value name="TEXT">
          <shadow type="text" id="3o;crDe^jgI^ef}9`/q@">
            <field name="TEXT">abc</field>
          </shadow>
          <block type="text_join" id="YD.F;S`]W-l=bzy%M2_0">
            <mutation items="2"></mutation>
            <value name="ADD0">
              <block type="text" id="u,m7,F(TklrCqGJ7V-9M">
                <field name="TEXT">Hello, </field>
              </block>
            </value>
            <value name="ADD1">
              <block type="variables_get" id="}_3-mc#.McN.2iSk!xd(">
                <field name="VAR">strForename</field>
              </block>
            </value>
          </block>
        </value>
      </block>
    </next>
  </block>
</xml>

Follow the numbered links at the foot of the page for a description the conversion of output from JavaScript to Smart Pascal (including numbered links to the code of the new files), for the introductions to series of demonstrations and tests, for a page of suggestions about programs to attempt and for some tips.

Using the Smart Pascal Command Line Compiler

The free command line compiler smsc.exe is easy to install (and is part of the full installation of Smart Mobile Studio). After installation, create a file named BlocklyTest.sproj in Notepad++ and save it in the same folder as smsc.exe. Copy into it this empty console project code and then your generated Smart Pascal code between the lines of hashes near the bottom of the file.

<SMART>
  <Project version="2" subversion="2">
    <Name>BlocklyResult</Name>
    <Options>
      <Compiler>
        <Assertions>1</Assertions>
        <Optimize>1</Optimize>
        <HintsLevel>1</HintsLevel>
      </Compiler>
      <Codegen>
        <RangeChecking>0</RangeChecking>
        <InlineMagics>1</InlineMagics>
        <Devirtualize>1</Devirtualize>
        <MainBody>1</MainBody>
        <SmartLinking>1</SmartLinking>
        <Verbosity>1</Verbosity>
      </Codegen>
      <ConditionalDefines>
        <HandleExceptions>1</HandleExceptions>
      </ConditionalDefines>
      <Linker>
        <ExternalCSS>0</ExternalCSS>
        <Theme>iOS.css</Theme>
        <EmbedJavaScript>1</EmbedJavaScript>
      </Linker>
      <Output>
        <HtmlFileName>BlocklyResult.html</HtmlFileName>
      </Output>
      <Import />
      <Execute>
         <Server>1</Server>
      </Execute>
    </Options>
    <Files>
      <File type="main">
        <Name>BlocklyResult</Name>
        <Source>
          <![CDATA[uses SmartCL.System, Unit1;
{$IFDEF SMART_INTERNAL_HANDLE_EXCEPTIONS}
try
{$ENDIF}
  var Application := TApplication.Create;
  Application.RunApp;
{$IFDEF SMART_INTERNAL_HANDLE_EXCEPTIONS}
except
  on e: Exception do
    ShowMessage(e.Message);
end;
{$ENDIF}
]]>
        </Source>
      </File>
      <File type="unit">
        <Name>Unit1</Name>
        <Source>
          <![CDATA[unit Unit1;
interface
uses
  System.Types, System.Lists, SmartCL.System, SmartCL.Scroll, SmartCL.Console,
  SmartCL.Components, SmartCL.Application, SmartCL.ConsoleApp;
type
  TApplication = class(TW3CustomConsoleApplication)
  protected
    procedure PopulateConsole; override;
  end;

implementation

procedure TApplication.PopulateConsole;
begin
//#################################################################

//#################################################################
end;
end.
]]>
        </Source>
      </File>
    </Files>
    <Target>Browser</Target>
    <Generator>Console Project</Generator>
  </Project>
</SMART>

Open your command prompt, change directory to the folder containing smsc.exe and BlocklyTest.sproj, and compile your Smart Pascal code with the command smsc BlocklyTest.sproj. You will find BlocklyResult.html in the project folder.

Lightweight Alternative

Instead of using a console project, you might like to try this lightweight alternative. Create a file named BlocklyLightweight.sproj in Notepad++ and copy into it this empty console project code and then your generated Smart Pascal code between the lines of hashes. Open it in Smart Mobile Studio to compile it or use the command line compiler as above. The output file is BlocklyLightweight.html. We have tested this project type with a range of examples of generated Smart Pascal code and have not yet experienced failures. Indeed, this type of project has the advantage that the output can be copied from the screen when we open BlocklyLightweight.html in Chrome, Edge, Firefox, Internet Explorer or Opera. Please let us know of any deficiencies.

<SMART>
  <Project version="2" subversion="2">
    <Name>BlocklyLightweight</Name>
    <Options>
      <Compiler>
        <Assertions>1</Assertions>
        <Optimize>1</Optimize>
        <HintsLevel>1</HintsLevel>
      </Compiler>
      <Codegen>
        <RangeChecking>0</RangeChecking>
        <InlineMagics>1</InlineMagics>
        <Devirtualize>1</Devirtualize>
        <MainBody>1</MainBody>
        <SmartLinking>1</SmartLinking>
        <Verbosity>1</Verbosity>
      </Codegen>
      <ConditionalDefines>
        <HandleExceptions>1</HandleExceptions>
      </ConditionalDefines>
      <Linker>
        <ExternalCSS>1</ExternalCSS>
        <EmbedJavaScript>1</EmbedJavaScript>
      </Linker>
      <Output>
        <HtmlFileName>BlocklyLightweight.html</HtmlFileName>
      </Output>
      <Import />
      <Execute>
         <Server>1</Server>
      </Execute>
    </Options>
    <Files>
      <File type="main">
        <Name>Test</Name>
        <Source>
          <![CDATA[uses W3C.HTML5, SmartCL.System, System.Types;
type
  Dummy = Class
    procedure writeln(s: string);
  end;
procedure Dummy.writeln(s: string);
begin
  document.write(s + '<br>');
end;
var Console := new Dummy;
//###########################################################################

//###########################################################################
Document.body.style.setProperty("font-family", "courier");
Document.body.style.setProperty("font-size", "13pt");
]]>
        </Source>
      </File>
    </Files>
  </Project>
</SMART>

Programming - a skill for life!

How to learn the Smart Pascal language the fun way by making games. Use Blockly blocks at first if coming from Scratch.