Difference between revisions of "Integrated Development Environments (IDE)"
(Created page with " === So what is an IDE ?=== We could operate all of this using the command line and git commands, but unless you really want to, don't. Use an IDE. An IDE (Integrated Develop...") |
m (Wyleu moved page Ide to Integrated Development Environments (IDE): Better naimng) |
Latest revision as of 16:18, 5 September 2025
1 So what is an IDE ?
We could operate all of this using the command line and git commands, but unless you really want to, don't. Use an IDE.
An IDE (Integrated Development Environment) is a collection of programs that work together to ease the difficulties of acquiring, writing, modifying, testing and debugging code that you write along with the possibility of many, many other functions you probably never considered. At the moment there is one that seems to be really sweeping the board with this (yes, I know, emacs users, but I worked on pycharm and intellij and I know which I prefer out of the three).
It's Microsoft's Visual Studio code, https://code.visualstudio.com/ know to friends and enemies alike as VSC (or VSCode).
1.1 So what is a host machine?
Visual Studio Code is a considerable piece of software, Microsoft know an awful lot about writing code and they have placed a suberb, well maintained IDE into the hands of absolutely anybody with a desire to write code. (If you date back far enough to remember "a computer on every desk running Microsoft software" you might generate a rye smile at this point, but the software world is a very different place now, and Microsoft are perfectly willing to produce their IDE for every conceivable platform and operating system they come across and make it work. Anyone who plays around with Arduinos and such will find VSC's platformIO plugin is a considerable improvement on the Arduino's own IDE, and plugins like this are the secret of VSC.) The Python environment is a plugin, tools to view git repositories are a plugin, remote access components are a plugin. I haven't looked but I don't doubt there is some MIDI related plugin out there... So we have a considerable chunk of code to run, which we are going to use to write a considerable chunk of code on a Raspberry Pi... Can you run VSC on a Raspberry Pi? Well yes you can, indeed I have run my VSC environment on a Pi5. But I wouldn't run zynthian and the VSC core UI code on a zynthian. There is a cleverer way. You use the remote connection plugin, to access a separate zynthian doing musical stuff. The VSC remote component installs itself onto the Pi, once you present it with the correct password (Did I mention about getting your passwords sorted out...?), and it handles many, many areas of this process that you can lose yourself into setting up yourself. I have written this process up for other environments and it was..... Involved. OK VSC advert over.
So our development environment consists of two machines, one is the zynthian itself, and the other is another computer running the VSC GI code.
This other machine is the host computer and it can be any number of bizarre, powerful, stylish, home built, clapped out, PC's and goodness knows what else, but as long as it runs VSC and has a network connection you are good to go. As I say my host machine is now a Pi5 running VSC very effectively, but your's could be MAC or a PC or goodness knows what else. This is why using a common IDE provides dividends because we don't need to explain all the different access mechanisms for all these machines. Look up how you install VSC on your host machine and do that. It's pretty easy and if anyone wants to write up specific versions then great! Just say so on the forum.
1.2 How do I install VSC on my host machine?
Go to VSC Download page and pick the appropriate version. For your particular Pi OS. If you are running 64 bit software pick .deb arm64, if you are on a 32 bit Pi OS then pick .deb arm32.If you are on MAC or PC then download accordingly.
This will download the selected version and you install as appropriate to your operating system. On my Pi5 I open the download folder
and right click on the downloaded file and select Package Install.
It will and you will have a new icon appear in your desktop menu in the Programming section.
Simply pressing on the icon will run Visual Studio Code, but for the moment there is a bit more to consider...
1.3 Where are the zynthian source files located on a zynthian?
The zynthian software exists as a set of directories (or folders if you prefer - but get used to us using the more accurate "directories") within a directory on the zynthian called... /zynthian.
The GUI software running on the zynth that operates the touchscreen are located within the zynthian-ui directory. and there is a file called zynthian.sh. This is a shell script which isn't written in python but in a bash. It is a collection of commands one runs on the terminal we mentioned earlier an allows various things to be configured, before the actual python script that does the work, which is called zynthian_main.py, is run.
One thing the shell script sets up is the debugging level which decides what level of message the zynthian generates when it encounters a logging command in the python script...
1.4 What happens if zynthian crashes and how do I stop it restarting on errors ?
When a zynthian starts up, most of the early functions and what gets run gets handled by a Linux tool called systemd. This organises what order things happen in and nursemaids programs, setting up procedures for what to do when programs crash or misbehave. For instance there is no point in starting up the network devices if there is no network, and this is the sort of thing systemd does on your behalf. In the zynthian case it starts up the zynthian program using the scripts we discussed in /zynthian/zynthian-ui and handles a zynthian by restarting the UI if the software crashes for some reason. This is what you want if you are performing but is decidedly irritating if you are trying to write and test code. There are magic incantations to control zynthian via systemd
systemctl stop zynthian systemctl start zynthian systemtl status zynthian
So to stop a running zynthian you issue the first of these and this will tell systemd to ignore the restart so you can take over the running of it.
1.5 How do I start a X11 windows server so I can run the code in a debugger?
Once you have stopped the zynthian process, the GUI layer (X11) required to run zynthian is also stopped so you can start zynthian within the VSC debugger. To allow this to happen you have to start the X11 system to allow you to have something to connect to.
To do this in the window you typed "systemctl stop zynthian", type
X -r -s 0
You can then start the debugger in VSC.
2 How do I Debug a Zynthian?
A careful balancing act is required here because there are a lot of entities attempting to work harmoniously here and a Pi can be a small world.
- The zynthian running on Pi, preferably as meaty as one can get. A Pi3 for instance will run out of resources with more recent engines.
- A Separate Computer Host from where the operation is all controlled.
- Some extra code loaded on the remote machine that communicates with the controlling programme on the host machine.
- A VNC server (A copy of the GUI image that runs in a browser) running on the zynthian to allow the screen to be examined during debugging.
- Some alterations to the launch.json file in .vscode to set things up nicely.
Visual Studio Code is an excellent environment for this and it fairly effortlessly sets up most of the environment for you. It will need to be running on your host machine, be it Windows, Mac or Linux which could be running on a Pi. VSC runs on them all. Indeed this is being typed on a Raspberry Pi desktop machine which has VSC open and already connected to Pi4 (zynthian-rack6.local in this exercise). Running in the Linux subsystem on Chromebook also works (which is how riban had developed much of the recent zynthian code changes)!
There are several things to notice in this screen because it is very carefully designed to be informative and make best use of screen space.
The icons on the left are worth considering. Here's the official docs...
2.1 Explorer
Microsoft attempting to purloin a name. It's files and Directories and when configured as we intend to do here it's the files on the remote Pi4. What you edit here will change on the Pi we are examining.
2.2 Search
It's very useful to be able to perform a word or phrase search right across the entire chunk of code you are working on. This where you do that.
2.3 Source Control
It would be temping to keep all your code efforts safely backed up somewhere and if it could give you a history of what you have done in the past that would be really useful. Welcome to git. It does that for you. You store the code on github.com and VSC handles the transfer of code to and from this repository for you. It also allows you to upload your code for a Pull Request (the ultimate accolade!) consideration for entering in to the zynthian code base, because you are working on a your personal fork on github of the zynthian code, aren't you?
2.4 Run & Debug
This is where we start the code examination and debugging sessions. We don't start the zynthian up with the debugger running as you might suspect, it's a little bit more contrived than that. But we will explain the current (2024-09-04) dance below...
The actual controls to run the debugger are in the little window floating up at the top right of the screen. The VSC documentation is here...
2.5 Extensions
Chunks of code written by many contributors including Microsoft themselves that allow extra functionality to be loaded into VSC. The debugger itself is one such component, as is the Remote Access mechanism and an extension to work intelligently with Python code.
2.6 Remote Explorer
Access to the Remote Machine. This an extension that needs to be installed to allow remote debugging.
2.7 Testing
Testing Module. I've not had a lot of success with this.
2.8 Accounts
Microsofts domain control
2.9 Manage
Admin Tasks
2.10 What should I do before starting VSC for debugging?
Check the VNC connection from your host machine's browser to the zynthian, by selecting VNC.
2.11 How do I set up VSC to use the debugger?
The first requirement is the Remote Explorer mentioned above, use the extensions panel to search and install. Beyond this, the zynthian has specific setup elements that allow the system to run properly. These are outlined in a file called launch.json which VSC can generate if requested but can be manually created in a directory /zynthian/zynthian-ui/.vscode
Here is an example launc.json for debugging zynthian:
{
// Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "Zynthian", "type": "debugpy", "request": "launch", "program": "zynthian_main.py", "python": "/zynthian/venv/bin/python3", "console": "integratedTerminal", "justMyCode": true, "env": { "DISPLAY": ":0" } }, { "name": "Zynthian Debug", "type": "debugpy", "request": "launch", "program": "zynthian_main.py", "python": "/zynthian/venv/bin/python3", "console": "integratedTerminal", "justMyCode": true, "subProcess": true, "env": { "DISPLAY": ":0", "ZYNTHIAN_LOG_LEVEL": "10" } } ]
}
This allows two different configurations to be used for debugging with different levels of log reporting.
2.12 How do I stop the zynthian from within VSC?
Once you have a remote terminal within VSC running you type systemctl stop zynthian.
This will stop the zynthian process, and your GUI Screen will disappear and the zynth wont make any sound. ( well it shouldn't). other processes like webconf will continue to work so we only need to restart the zynthian from within VSC to allow us access to VSC debugging facilities.
2.13 How do I re-allocate the screen?
After typing systemctl stop zynthian
type: X -r -s 0
This sorts out the graphics subsystem to work in the debugging situation.
2.14 How do I actually start the VSC Debugger?
Simply press the Debug Green Arrow button
2.15 How do I tell the world about my contribution...?
You put it on Github because that is where the zynthian software itself resides ...
But that is where Zynthian tells the world about its contribution and you need the good people at zynthian to approve your contribution, and they wont do that till you ask in the right way. . .
You need to submit a pull request.
2.16 How do I submit a pull request...?
This is a concept within the github environment, and to do that you need to have an account at github yourself. So you need to dance your way throu their act of anointing (www.github.com).
Now a Pull request is not a specific git command, it's an agreement amongst mortals that the submitted code is suitable to be included in what zynthian publish to the world. One of these mortals then performs a git merge to take your offering, It's called a branch, it has a name, and it contains the code you have written, and combines it into the 'testing' branch so it can be tested.
But, you say, How do I get my code up to github in the first place, and that is, unfortunately, the wrong way to think of it.
You don't put the code there, you make your own copy of the whole zynthian code base in your own github account and download it from there to your machine.
This is called a fork and it means that your submission is derived from the original git hub zynthian site and can, assuming there aren't disagreements of changes two people make (a conflict), then be merged into the code base, using the git merge command and your code is now in testing ...
Congratulations if you get this far. You have just won an open source gold star by having a PR accepted by an open source project.!
So we better write some code.
3 It is 'suggested' one creates a task/issue? how do I do that ?
"It's a good habit to create a task/issue associated with more relevant changes"
You will need a GitHub account to report issues.
So you will have to got to https://github.com/ and open an account there.
It's a Microsoft owned site so vsc helps to view the code, if you want to see the zynthian components at some stage.
You are redirected by the Report issue button to
https://github.com/zynthian/zynthian-issue-tracking
Which is the location of zynthian issue reporting. Please do it here, not on the individual code branches !!
This is so that we know who reported it and can engage with them in its progress.
So to repeat,
The best way to report a bug is to use the "Report Issue" button in the webconf. This creates a new issue in GitHub issue tracker, from a template with some data populated that is useful to the developers.
Then fill out something relevant
3.1 So what have we gained here ?
Well, the communal zynthian entity gains an area of interest. Even if the task, dies on the vine, and nothing more gets done, there is a possible development signposted. You also get a unique identity number that goes into the zynthian event queue. #941 in this case. This is an identifier you can add into a comment with Pull requests so the call for work and the doing of work can be related, tracked and pull requested, accepted tested and completed.
This sort of structure within a project like zynthian is a very good thing. And if precisely scratching your name into a spaceship excites you, then take this as an early buzz.
An issue could be allocated to somebody else at some later time which means the code magically appears from someone you probably would never have met. Of course if you go ahead yourself and write it then so much the better. You move that one step closer to the "Had An Open Source PR accepted"
The GitHub environment allows these relationships to be managed and the more structured this stuff is the less intimidating it becomes...
3.2 How Do I fork the zynthian GitHub repository?
The GitHub write up is here... But in summary it's done from the appropriate zynthian page end of the process.
And here are the default options which will suit nearly all circumstances. You should only strike from the testing branch.
Here is the confirmation in my personal GitHub space.
3.3 Can I view files on my zynthian-ui GitHub repository?
In fact there is a very useful GitHub element that allows you to view code on gihub within a browser based tool that is nothing more or less than VSC.
It's no coincidence Microsoft bought GitHub...
To operate this feature simple select the appropriate repository home page... https://github.com/wyleu/zynthian-ui/
and press the . key...
and here in VSC in GitHub showing a ctldev file ready to be examined.
4 How Do I pass code from my Zynthian-ui github repository to my Zynthian on my desk?
This is where we return to applications running on our host computer as opposed to browser based github tools . . and use Visual Studio Code(VSC) actually as an application running on our host machine...
So we start it up, select Clone git repository and it's clever enough to populate the drop down if you ask it to select from GitHub.
Give it a local directory. I store my stuff under Code but it really is up to you. Try to be structural.
And there we have a git repository located on our host machine, which is useful upto a point but isn't actually located on the zynthian . . .
4.1 How Do I access code on my zynthian from my host machine?
We need to use Visual Studio Code(VSC) Remote Explorer (remember to install the extension!) to allow us to add on to the zynthian and install enough of an environment to allow VSC to seamlessly pass code between the environment and the desktop machine. Frankly sometimes it feels like magic, and for anyone who has read my previous attempts to do this sort of thing you spent a lot of time making sure the shaky old connections required behaved as machines are restarted and stopped and broken and goodness knows what else. VSC really sorts this out nicely, and it's a blessing. Indeed it is so tenacious in how it manages connections that the following image is actual a bit of a manufactured effort, but worry no it does it all very well.
select Connect to and enter root@zynthian.local or if you have renamed your zynthian as I tend to do to something like root@zynthian-rack2.local you put that in and enter the password for the machine. You will find yourself doing this password entry a fair bit. There are ways to make this once only per machine turning on but we will skip over that for now.
And we now get a new item in the Remote Explorer desktop and are returned to the VSC setup page to describe where we want to locate this connection to the remote machine and it is important that you put
/home/pi/zynthian-ui in here. If you have /zynthian/zynthian-ui in her which might seem like it should work it wont for reasons to do with the long term migration to a more structured system. Don't worry it's in hand.
So we now can examine and edit the code on the zynthian as thou' it is on our desktop... Which is kind of cool.
4.2 How Do I stop being asked for my password?
on your host machine type:
ssh-copy-id root@zynthian-your-machine-name.local
This will copy the key from your host computer to your remote host, where it will allow you to log on without providing the machine password each time, just a first confirmation by asking for your passphrase NOT your password. and when you need to enter the password the first time you will be asked for you pass phrase, if you set one, and since you have probably set this up for github you will have done, This should reduce the chatter a fair bit, but it may still occasionally ask just out of a certain degree of paranoia.. .
4.3 How Do I redirect the zynthian code in zynthian-ui to my personnal repository rather than the zynthian master I forked from ?
We need to edit a specific file on the zynthian within the zynthian-ui folder. It's in a hidden directory .git within the /home/pi/zynthian-ui folder so it won't show up with the ls command, use the ls -las form instead to see it.. Now all this can be done from within VSC using a terminal os you have a nicely set up ssh connection to the machine all maintained by VSC. This terminal is in the lower right hand of the window and it saves you the trouble of having to set up separate connections to do basic housekeeping. Because this file is actually specifically kept out of the repository it doesn't appear in the VSC code listing so we have to go and abuse it by hand, which is why we are using the terminal . . . The terminal opens up in the zynthian-ui folder because that's how we configured it so all we have to do is type
cd .git
if you now type
ls -las
you should see this sort of thing ...
root@zynthian-rack2:/home/pi/zynthian-ui/.git# ls -las total 92
4 drwxr-xr-x 8 root root 4096 Jan 20 21:46 . 4 drwxr-xr-x 14 root root 4096 Jan 15 11:21 .. 4 -rw-r--r-- 1 root root 16 Jan 19 15:47 COMMIT_EDITMSG 4 -rw-r--r-- 1 root root 220 Jan 20 21:02 FETCH_HEAD 4 -rw-r--r-- 1 root root 24 Jan 20 21:44 HEAD 4 -rw-r--r-- 1 root root 41 Jan 20 21:02 ORIG_HEAD 4 drwxr-xr-x 2 root root 4096 Sep 6 2020 branches 4 -rw-r--r-- 1 root root 726 Jan 20 20:55 config 4 -rw-r--r-- 1 root root 73 Sep 5 2020 description 4 drwxr-xr-x 2 root root 4096 Sep 6 2020 hooks 32 -rw-r--r-- 1 root root 32619 Jan 20 21:45 index 4 drwxr-xr-x 2 root root 4096 Sep 6 2020 info 4 drwxr-xr-x 3 root root 4096 Sep 6 2020 logs 4 drwxr-xr-x 133 root root 4096 Jan 19 15:47 objects 4 -rw-r--r-- 1 root root 334 Aug 25 00:11 packed-refs 4 drwxr-xr-x 5 root root 4096 Sep 6 2020 refs
we want to modify the config file in this folder... So lets ook at this file first to see whats in it . . .
cat config
root@zynthian-rack2:/home/pi/zynthian-ui/.git# cat config
[core]
repositoryformatversion = 0
filemode = true
bare = false
logallrefupdates = true
[remote "origin"]
url = https://github.com/zynthian/zynthian-ui.git
fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
remote = origin
merge = refs/heads/master
[branch "testing"]
remote = origin
merge = refs/heads/testing
[branch "staging-2209"]
remote = origin
merge = refs/heads/staging-2209
[branch "stable"]
remote = origin
merge = refs/heads/stable
[branch "staging-2307"]
remote = origin
merge = refs/heads/staging-2307
[branch "chain_manager"]
remote = origin
merge = refs/heads/chain_manager
We want to change the line
url = https://github.com/zynthian/zynthian-ui.git
to point to our own repository, which in my case is
url = https://github.com/wyleu/zynthian-ui.git
to do this we use a little command line text editor called nano... so we type
nano config
Control-X to leave Control-O to write out the file and arrow keys move you around in the file
And you have now redirected your zynthian to look at your repository on github as it's ultimate origin file . . .
git pull will now cement this relationship.
4.4 How Do I Start a new branch and what should I call it ?
The VSC status bar at the very bottom of the screen contains a lit of useful information. It shows the remote machine you are logged onto and it shows the current branch you are located on.
Indeed there are useful plugins that can be added that will show git tram lines and such which are very useful . . . but if you press on the testing button in the status bar you will be presented with a dialog for adding a new branch .
Quite what to call it is upto you but remember it will live long in the github zynthian home, so choose something relevant that you can remember what it's about at some point in the future. If it's too scurrilous your Pull Request will be rejected and you will be asked to change it to something more aligned with house style ... Benevolent dictators are perfectly entitled to behave like that .
In summary. git doesn't forget unless you beat it very hard with a stick cos remembering what happened is it's very purpose in life.
4.5 How do I switch to different branches when I'm developing?
Simply use the branch name switch down on the status line at the bottom left of the vsc window. Here is is set to the branch name I created Duo-piano-device
You can also see that I have added three device files into the ctrldev directory which is the code I working on...
4.6 Can I see a diagram of the my various zynthian various branches?
Here is the git graph vsc plugin showing tramlines for this repository. You will need to install this plugin to get this.
4.7 Can I see a diagram of the various branches in the zynthian github page ?
From the github.com/zynthian/zynthian-ui/ you can select insights in the top menu and then Network in the left hand vertical menu. Github will chug away for a little while having a think then show you this, which now features the duo-piano-device branch waiting for me to submit the completion of the code with some more commits and then the pull request which, if successful will result in the branch being merged into testing, and at some later date in stable . . .
