Skip to content

Commit b7da9de

Browse files
committed
Dev container tutorial
1 parent 7269f05 commit b7da9de

File tree

2 files changed

+121
-104
lines changed

2 files changed

+121
-104
lines changed

README.md

+27-104
Original file line numberDiff line numberDiff line change
@@ -2,140 +2,63 @@
22

33
# Raspberry Pi Pico Docker SDK
44

5-
Lightweight Raspberry Pi Pico C++ SDK container.
5+
A lightweight SDK environment for Raspberry Pi Pico in a Docker container.
66

7-
## Pull container from Docker Hub and run
7+
## Pulling the Image from Docker Hub and Running
8+
9+
The latest image is available on [Docker Hub](https://hub.docker.com/repository/docker/lukstep/raspberry-pi-pico-sdk/general)
10+
and can be used to run a container.
11+
The following commands show how to run the container using the Docker Hub image:
812

9-
The latest version of the image is stored on [Docker Hub](https://hub.docker.com/repository/docker/lukstep/raspberry-pi-pico-sdk/general)
10-
and can be used for container runs.
11-
Commands below show how to run a container, using an image from Docker Hub
1213
```
1314
docker run -d -it --name pico-sdk --mount type=bind,source=${PWD},target=/home/dev lukstep/raspberry-pi-pico-sdk:latest
14-
1515
docker exec -it pico-sdk /bin/sh
1616
```
1717

18-
The directory from which the `docker run` command was called will be mounted to /home/dev in the container.
19-
So after attaching to the SDK container you can build your project following the steps:
18+
The directory from which the `docker run` command was executed will be mounted in the container at `/home/dev`.
19+
After attaching to the SDK container, you can build your project by executing the following steps:
2020

2121
```
2222
cd /home/dev
23-
2423
mkdir build
25-
2624
cd build
27-
2825
cmake .. && make -j4
2926
```
3027

31-
## Build image and run container:
28+
## Building the Image and Running the Container
3229

33-
To build your own SDK image, You need to clone this repository and run the following commands:
30+
To build your own SDK image, clone this repository and run the following commands:
3431

3532
```
3633
cd raspberry-pi-pico-docker-sdk
37-
3834
docker build . --tag pico-sdk
39-
4035
docker run -d -it --name pico-sdk --mount type=bind,source=${PWD},target=/home/dev pico-sdk
41-
4236
docker exec -it pico-sdk /bin/sh
4337
```
4438

45-
## Visual Studio Code as Rassberry Pi PICO projects IDE
46-
47-
You can use the SDK container with Visual Studio Code as Raspberry Pi Pico projects IDE.
48-
49-
### Attaching VSCode to SDK Docker container
50-
51-
Follow the instruction below to set up VSCode:
52-
53-
1. Install [Visual Studio Code](https://code.visualstudio.com) and next [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extensions.
54-
55-
![image-1](https://user-images.githubusercontent.com/20487002/201380432-da387680-f6b0-4542-8c02-6a3eec8e103d.png)
56-
57-
2. Open the terminal and go to the projects you want to open in VSCode.
58-
59-
3. Pull SDK image from Docker HUB and run SDK container via the following command. The container must be running while you attach to it via VSCode.
60-
61-
```
62-
docker run -d -it --name pico-sdk --mount type=bind,source=${PWD},target=/home/dev lukstep/raspberry-pi-pico-sdk:latest
63-
64-
docker exec -it pico-sdk /bin/sh
65-
```
66-
67-
4. When the container is launched, go to VSCode, click the green button in the lower left corner of VSCode and select options: Attach to Running Container...
68-
69-
![image-2](https://user-images.githubusercontent.com/20487002/201471437-b12dc225-28ab-4ebd-b694-fc7058d34e2e.png)
70-
71-
5. Select the SDK container.
72-
73-
![image-4](https://user-images.githubusercontent.com/20487002/201383009-54a3fc62-1206-4105-83d0-d956448434dd.png)
74-
75-
6. Then a new VSCode window will open. At the bottom window, you can see that it is attached to the SDK container.
76-
77-
![image-5](https://user-images.githubusercontent.com/20487002/201383452-10573842-de2a-46c3-9ebf-f6fd5f06c687.png)
78-
79-
7. Now, there is needed to open project files. Your project is mounted to `/home/dev` in the container. Go to EXPLORE tab in VSCode and click Open Folder. In opened window write `/home/dev` and click the OK button.
80-
81-
![image-6](https://user-images.githubusercontent.com/20487002/201386202-dd0934b2-5fae-4a2d-8875-f2cb40b1dc59.png)
82-
83-
8. Now You can explore, develop and build your Raspberry Pi Pico project via Visual Studio Code!
84-
85-
![image-7](https://user-images.githubusercontent.com/20487002/201389505-d1346622-a8e1-4d0b-842c-57e5b54f9183.png)
86-
87-
### Pico SDK aware Intellisense
88-
89-
For an IntelliSense that will be aware of Raspberry Pi Pico SDK dependencies, we will use [Clangd](https://clangd.llvm.org). Clangd is a C/C++ language server provided by the LLVM project. To Setup Clang as Intellisense engine follow instruction below:
90-
91-
1. To begin with, you need to install the server itself (Clangd is not installed by default in the SDK container image), to do this in the terminal call the command:
92-
93-
```
94-
apk add clang-extra-tools
95-
```
96-
97-
2. Next is needed to install the Visual Studio Code [Clangd extension](https://marketplace.visualstudio.com/items?itemName=llvm-vs-code-extensions.vscode-clangd).
98-
99-
![image-1](https://user-images.githubusercontent.com/20487002/201468256-be7741a2-9092-406a-8be1-d4d9640a85e7.png)
100-
101-
1. To set-up The Clangd extension, in the project root directory, create folder .vcode with file settings.json. To settings.json past configuration from the snippet below:
102-
103-
```json
104-
{
105-
"C_Cpp.intelliSenseEngine": "Disabled",
106-
"clangd.path": "/usr/bin/clangd",
107-
"clangd.checkUpdates": false,
108-
"clangd.restartAfterCrash": true,
109-
"clangd.detectExtensionConflicts": true,
110-
"clangd.arguments": ["-log=verbose",
111-
"-pretty",
112-
"--background-index",
113-
"--query-driver=/usr/bin/arm-none-eabi-gcc",
114-
"--compile-commands-dir=/home/dev/build"]
115-
}
116-
```
117-
118-
![image-2](https://user-images.githubusercontent.com/20487002/201468479-7de7e598-3aac-4fe4-a240-d7404200a0a6.png)
39+
## Visual Studio Code as IDE for Raspberry Pi Pico Projects
11940

41+
You can use the SDK container with Visual Studio Code to create an IDE for Raspberry Pi Pico projects.
42+
There are two solutions prepared: a new one using the Visual Studio Dev Containers extension and an old one with manual configuration.
12043

121-
4. For clangd to work, it needs a `compile_commands.json` file. This file contains the compilation and dependency information of each file in the project. To create it you need to add to the CMake command, `-DCMAKE_EXPORT_COMPILE_COMMANDS=1`. So You need to build your project with the command:
44+
### [Visual Studio Code Dev Container](https://code.visualstudio.com/docs/devcontainers/containers)
12245

123-
```
124-
mkdir build
125-
126-
cd build
127-
128-
cmake -DCMAKE_EXPORT_COMPILE_COMMANDS=1 ..
129-
130-
make
131-
```
46+
#### Prerequisites
13247

133-
5. Now IntelliSense should work!. Now you should see a prompt when you start typing. If you hover your cursor over a function from the SDK you should see its documentation, You can go to the function definition by pressing F12.
48+
To use the dev container, you need to have VSCode, Docker, and the VSCode extensions installed.
49+
Follow [this](https://code.visualstudio.com/docs/devcontainers/tutorial#_prerequisites) guide for setup.
13450

135-
![image-3](https://user-images.githubusercontent.com/20487002/201469349-b8a9721f-4169-4bf6-a8d6-d459f8f97180.png)
51+
#### Using the Dev Container for Pico IDE
13652

137-
![image-4](https://user-images.githubusercontent.com/20487002/201468782-50fc6abb-1f82-49d5-8b93-631dd30f1f58.png)
53+
- Clone [pico-dev-container](https://github.com/lukstep/pico-dev-container/tree/main) repository.
54+
- Open `pico-dev-container` folder in Visual Studio Code.
55+
- In VSCode, click the button in the bottom left corner of VSCode and select: Reopen in Container...
56+
![image-1](https://github.com/lukstep/raspberry-pi-pico-docker-sdk/assets/20487002/f1f06bca-cb0b-4c2d-bf4c-611ef004e70a)
57+
- Build the project.
58+
- Enjoy coding you Pico project with Intellisense.
59+
![image-1](https://github.com/lukstep/raspberry-pi-pico-docker-sdk/assets/20487002/ed367c06-aa9f-440a-9ca2-ddfbd7bdd266)
13860

139-
![image-5](https://user-images.githubusercontent.com/20487002/201468813-2ef7b04f-ede6-46cb-84e2-a40db595811d.png)
61+
### Manual configuration of VSCode as Pico IDE (old)
14062

63+
Refer [here](docs/vscode_manual_setup.md) for step-by-step instruction
14164

docs/vscode_manual_setup.md

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
2+
# Manual configuration of VSCode as Pico IDE
3+
4+
## Prerequisites
5+
6+
You need to Visual Studio Code and Docker installed.
7+
8+
## Attaching VSCode to SDK Docker container
9+
10+
Follow the instruction below to set up VSCode:
11+
12+
- Install [Visual Studio Code](https://code.visualstudio.com) and next [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extensions.
13+
14+
![image-1](https://user-images.githubusercontent.com/20487002/201380432-da387680-f6b0-4542-8c02-6a3eec8e103d.png)
15+
16+
- Open the terminal and go to the projects you want to open in VSCode.
17+
18+
- Pull SDK image from Docker HUB and run SDK container via the following command. The container must be running while you attach to it via VSCode.
19+
20+
```
21+
docker run -d -it --name pico-sdk --mount type=bind,source=${PWD},target=/home/dev lukstep/raspberry-pi-pico-sdk:latest
22+
docker exec -it pico-sdk /bin/sh
23+
```
24+
25+
- When the container is launched, go to VSCode, click the green button in the lower left corner of VSCode and select options: Attach to Running Container...
26+
27+
![image-2](https://user-images.githubusercontent.com/20487002/201471437-b12dc225-28ab-4ebd-b694-fc7058d34e2e.png)
28+
29+
- Select the SDK container.
30+
31+
![image-4](https://user-images.githubusercontent.com/20487002/201383009-54a3fc62-1206-4105-83d0-d956448434dd.png)
32+
33+
- Then a new VSCode window will open. At the bottom window, you can see that it is attached to the SDK container.
34+
35+
![image-5](https://user-images.githubusercontent.com/20487002/201383452-10573842-de2a-46c3-9ebf-f6fd5f06c687.png)
36+
37+
- Now, there is needed to open project files. Your project is mounted to `/home/dev` in the container. Go to EXPLORE tab in VSCode and click Open Folder. In opened window write `/home/dev` and click the OK button.
38+
39+
![image-6](https://user-images.githubusercontent.com/20487002/201386202-dd0934b2-5fae-4a2d-8875-f2cb40b1dc59.png)
40+
41+
- Now You can explore, develop and build your Raspberry Pi Pico project via Visual Studio Code!
42+
43+
![image-7](https://user-images.githubusercontent.com/20487002/201389505-d1346622-a8e1-4d0b-842c-57e5b54f9183.png)
44+
45+
## Pico SDK aware Intellisense
46+
47+
For an IntelliSense that will be aware of Raspberry Pi Pico SDK dependencies, we will use [Clangd](https://clangd.llvm.org). Clangd is a C/C++ language server provided by the LLVM project. To Setup Clang as Intellisense engine follow instruction below:
48+
49+
- To begin with, you need to install the server itself (Clangd is not installed by default in the SDK container image), to do this in the terminal call the command:
50+
51+
```
52+
apk add clang-extra-tools
53+
```
54+
55+
- Next is needed to install the Visual Studio Code [Clangd extension](https://marketplace.visualstudio.com/items?itemName=llvm-vs-code-extensions.vscode-clangd).
56+
57+
![image-1](https://user-images.githubusercontent.com/20487002/201468256-be7741a2-9092-406a-8be1-d4d9640a85e7.png)
58+
59+
- To set-up The Clangd extension, in the project root directory, create folder .vcode with file settings.json. To settings.json past configuration from the snippet below:
60+
61+
```json
62+
{
63+
"C_Cpp.intelliSenseEngine": "Disabled",
64+
"clangd.path": "/usr/bin/clangd",
65+
"clangd.checkUpdates": false,
66+
"clangd.restartAfterCrash": true,
67+
"clangd.detectExtensionConflicts": true,
68+
"clangd.arguments": ["-log=verbose",
69+
"-pretty",
70+
"--background-index",
71+
"--query-driver=/usr/bin/arm-none-eabi-gcc",
72+
"--compile-commands-dir=/home/dev/build"]
73+
}
74+
```
75+
76+
![image-2](https://user-images.githubusercontent.com/20487002/201468479-7de7e598-3aac-4fe4-a240-d7404200a0a6.png)
77+
78+
79+
- For clangd to work, it needs a `compile_commands.json` file. This file contains the compilation and dependency information of each file in the project. To create it you need to add to the CMake command, `-DCMAKE_EXPORT_COMPILE_COMMANDS=1`. So You need to build your project with the command:
80+
81+
```
82+
mkdir build
83+
cd build
84+
cmake -DCMAKE_EXPORT_COMPILE_COMMANDS=1 ..
85+
make
86+
```
87+
88+
- Now IntelliSense should work!. Now you should see a prompt when you start typing. If you hover your cursor over a function from the SDK you should see its documentation, You can go to the function definition by pressing F12.
89+
90+
![image-3](https://user-images.githubusercontent.com/20487002/201469349-b8a9721f-4169-4bf6-a8d6-d459f8f97180.png)
91+
92+
![image-4](https://user-images.githubusercontent.com/20487002/201468782-50fc6abb-1f82-49d5-8b93-631dd30f1f58.png)
93+
94+
![image-5](https://user-images.githubusercontent.com/20487002/201468813-2ef7b04f-ede6-46cb-84e2-a40db595811d.png)

0 commit comments

Comments
 (0)