Differences

This shows you the differences between two versions of the page.

--- blocks:drivers:tools [2021-11-01 15:28]
admin Revised Atom package installation method
+++ blocks:drivers:tools [2024-03-14 13:04] (current)
mattias [Install the Scripts]
@@ Line 1: / Line 1: @@
 ====== Development Tools and Code ======
+This describes the recommended toolset for development. Other editors and IDEs may work as well (including [[blocks:drivers:tools-atom|Atom]], which we recommend until it was [[https://github.blog/2022-06-08-sunsetting-atom/|discontinued]]), but this is probably the best way to get up and running.
-This describes the recommended toolset for development. Other editors and IDEs may work as well, but this is probably the easiest way to get up and running.
+:!: **NOTE**: The instructions below assume you have a working internet connection.
-  * Install the [[https://atom.io|Atom]] editor.
+==== Install Visual Studio Code ====
-  * Install additional packages using Packages > Settings View > Install Packages.
-  * Install the //atom-ide-ui// package.
-  * Install the //atom-typescript// package from within the Atom editor.
-  * Download the [[https://github.com/pixilab/blocks-script|Blocks scripting]] github repo as a ZIP file and unpack it into the script directory. This is located inside PIXILAB-Blocks-root in your home directory (assuming the Blocks server program has been used on this computer, thus creating the script folder).
-:!: If you already have some of the files or directories matching those obtained from github on your computer, you need to merge the files with the existing ones, replacing any conflicting files as appropriate.
+Install the [[https://code.visualstudio.com/|Visual Studio Code]] editor.
+==== Install NodeJS and NPM ====
+Those programs are required for many script-related operations as well as in some cases to install typescript.
+Follow the instructions here to install [[https://nodejs.org/en/|Node.js and npm]] for Mac or Windows. If you're using our Linux based server, run the following commands in a terminal window, pressing //return// after each. Enter the password of the pixi-admin user when prompted to do so.
+<code>
+su pixi-admin
+sudo apt install nodejs npm
+exit
+</code>
+==== Install Typescript ====
+In a terminal window with administration privileges, now install typescript. On MacOS or Linux, run this command in a terminal window:
+<code>
+sudo npm install -g typescript
+</code>
+:!: If you're using our Linux based server, logged in as the pixi-server user (indicated in the terminal window) you must first switch to the pixi-admin user before you can run the command above. Switch to that user in a terminal window using the following command.
+<code>
+su pixi-admin
+</code>
+Enter the password for the pixi-admin user. Then install typescript as described above. Finally, type exit to return to the pixi-server user (or just close the terminal window)
+==== Install the Scripts ====
+Download the [[https://github.com/pixilab/blocks-script|Blocks scripting]] github repo as a ZIP file. This is done from a menu opened  with the green //code// button.
+{{:blocks:drivers:tools:github_code_btn.png?300|}}
+Decompress the zip file.
+:!: Please make a security copy of the script directory before installing or updating this directory. The //script// directory is located inside PIXILAB-Blocks-root in your home directory.
+Normally any files in there should be overwritten by the new updated ones.
 Once this is done, your PIXILAB-Blocks-root/script directory should contain at least the following items
@@ Line 22: / Line 57: @@
 </code>
-The first three items shown above are directories, containing the files obtained from github. They may contain additional files, if you had driver or other scripts installed before.
+The first three items shown above are directories, containing the files obtained from github. They may contain additional files and directories if you had driver or other scripts installed before.
+:!: Please note that files made available to Blocks, which means files copied from the archive i.e drivers-archive to drivers is not updated automatically, such files must be copied from the archive to the activate directory manually. Currently that applies to user, driver, and feed directories.
+==== Running VSCode for the First Time ====
+  * Start Visual Studio Code.
+  * Open the PIXILAB-Blocks-root/script directory from within Visual Studio Code using File > Open Folder...
+  * Open a new terminal in Visual Studio Code using Terminal > New Terminal.
+  * Install driver development dependencies by typing //npm install// in the terminal, followed by Enter.
+  * Select Terminal > Run Build Task > //tsc: watch// to automatically compile TypeScript files as they are saved.
+**IMPORTANT:** This last step must be repeated after restarting VS Code to re-activate the typescript compiler.
+Under Windows, an error message similar to //"[...] cannot be loaded because running scripts is disabled on this system."// may appear following any of the commands above. This can be resolved by changing the [[https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_execution_policies|Execution Policy]]: Run Windows PowerShell as administrator and type //Set-ExecutionPolicy RemoteSigned//, followed by Enter. Type "a" to select "Yes to all". Restart Visual Studio Code, close the terminal and open it again using Terminal > New Terminal.
 Once you have those pieces in place, restart your local Blocks server and open the Blocks Editor using your web browser. You should now find the drivers on the Driver menu of a TCP Device added on the Manage page. If you don't see the drivers listed there, they're not installed in the proper location (see above).
 Proceed with learning about [[blocks:drivers:concepts|basic concepts]].