Skip to content

Commit 473562e

Browse files
Splinesbhoov
Splines
and
bhoov
authored
Init Manim Notebook walkthrough (#90)
* Init walkthrough with Manim installation check * Add open sample scene to walkthrough * Add preview cell SVG * Remove unknown property * Remove invalid key from openTextDocument * Fix media JSON key * Add open tab to Figma Preview Cell SVG * Add step to show all extension commands in walkthrough * Reexport svg without VSCode theme support * Add open walkthrough command * Improve header of section * Make `Preview Manim Cell` clickable in svg * Also make commands svg clickable * Improve wording in sample scene file * Add walkthrough step to show keyboard shortcuts * Add walkthrough step to open settings * Add walkthrough step to open wiki in browser * Add additional linebreak to warning box * Add hotkey comment to python walkthrough example * Extract the id of the extension from the context, in case the owner changes (as it will eventually) * Fix spelling mistake in Python sample file comments * Lint extension.ts file * Add accidentally deleted export scene command back * Directly call `self.frame` in Python sample code * Show the terminal for manim version printing * Remove wait() in example for quick cell execution --------- Co-authored-by: Ben Hoover <[email protected]>
1 parent dc1a24d commit 473562e

File tree

10 files changed

+657
-2
lines changed

10 files changed

+657
-2
lines changed

‎package.json‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@
6262
"title": "Record Log File",
6363
"category": "Manim Notebook"
6464
},
65+
{
66+
"command": "manim-notebook.openWalkthrough",
67+
"title": "Open Walkthrough",
68+
"category": "Manim Notebook"
69+
},
6570
{
6671
"command": "manim-notebook.exportScene",
6772
"title": "Export current scene as CLI command",
@@ -149,6 +154,86 @@
149154
"highContrastLight": "#C3DDF7"
150155
}
151156
}
157+
],
158+
"walkthroughs": [
159+
{
160+
"id": "manim-notebook-walkthrough",
161+
"title": "Manim Notebook",
162+
"description": "Welcome 👋 Get to know how to make the best out of Manim Notebook.",
163+
"steps": [
164+
{
165+
"id": "checkManimInstallation",
166+
"title": "Check Manim Installation",
167+
"description": "Let's see if you have installed ManimGL.\n[Check Manim version](command:manim-notebook-walkthrough.checkManimVersion)\n[Open installation guide](https://3b1b.github.io/manim/getting_started/installation.html)",
168+
"media": {
169+
"markdown": "src/walkthrough/manim-installation.md"
170+
},
171+
"completionEvents": [
172+
"onCommand:manim-notebook-walkthrough.checkManimVersion"
173+
]
174+
},
175+
{
176+
"id": "startExample",
177+
"title": "Start with an example",
178+
"description": "Open an example file to see how Manim Notebook works.\n[Open Sample](command:manim-notebook-walkthrough.openSample)",
179+
"media": {
180+
"svg": "src/walkthrough/preview-cell.svg",
181+
"altText": "Preview Manim Cell"
182+
},
183+
"completionEvents": [
184+
"onCommand:manim-notebook-walkthrough.openSample"
185+
]
186+
},
187+
{
188+
"id": "showAllAvailableCommands",
189+
"title": "Show all available commands",
190+
"description": "Get a list of all available commands in Manim Notebook.\n[Show Commands](command:manim-notebook-walkthrough.showCommands)",
191+
"media": {
192+
"svg": "src/walkthrough/commands.svg",
193+
"altText": "Manim Notebook commands"
194+
},
195+
"completionEvents": [
196+
"onCommand:manim-notebook-walkthrough.showCommands"
197+
]
198+
},
199+
{
200+
"id": "showKeyboardShortcuts",
201+
"title": "Show keyboard shortcuts",
202+
"description": "See all available keyboard shortcuts in Manim Notebook and modify them to whatever you like.\n[Show Shortcuts](command:manim-notebook-walkthrough.showShortcuts)",
203+
"media": {
204+
"svg": "src/walkthrough/shortcuts.svg",
205+
"altText": "Manim Notebook keyboard shortcuts"
206+
},
207+
"completionEvents": [
208+
"onCommand:manim-notebook-walkthrough.showShortcuts"
209+
]
210+
},
211+
{
212+
"id": "showSettings",
213+
"title": "Show settings",
214+
"description": "Customize your Manim Notebook experience by changing settings.\n[Show Settings](command:manim-notebook-walkthrough.showSettings)",
215+
"media": {
216+
"svg": "src/walkthrough/settings.svg",
217+
"altText": "Manim Notebook settings"
218+
},
219+
"completionEvents": [
220+
"onCommand:manim-notebook-walkthrough.showSettings"
221+
]
222+
},
223+
{
224+
"id": "openWiki",
225+
"title": "Open Wiki",
226+
"description": "Learn more about Manim Notebook on the GitHub Wiki.\n[Open Wiki](command:manim-notebook-walkthrough.openWiki)",
227+
"media": {
228+
"svg": "src/walkthrough/wiki.svg",
229+
"altText": "Manim Notebook Wiki"
230+
},
231+
"completionEvents": [
232+
"onCommand:manim-notebook-walkthrough.openWiki"
233+
]
234+
}
235+
]
236+
}
152237
]
153238
},
154239
"scripts": {

‎src/extension.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { previewCode } from './previewCode';
77
import { startScene, exitScene } from './startStopScene';
88
import { exportScene } from './export';
99
import { Logger, Window, LogRecorder } from './logger';
10+
import { registerWalkthroughCommands } from './walkthrough/commands';
1011
import { ExportSceneCodeLens } from './export';
1112

1213
export function activate(context: vscode.ExtensionContext) {
@@ -53,7 +54,6 @@ export function activate(context: vscode.ExtensionContext) {
5354
await LogRecorder.recordLogFile(context);
5455
});
5556

56-
// Internal commands
5757
const exportSceneCommand = vscode.commands.registerCommand(
5858
'manim-notebook.exportScene', async (sceneName?: string) => {
5959
Logger.info("💠 Command requested: Export Scene");
@@ -64,21 +64,32 @@ export function activate(context: vscode.ExtensionContext) {
6464
{ language: 'python' }, new ExportSceneCodeLens())
6565
);
6666

67+
const openWalkthroughCommand = vscode.commands.registerCommand(
68+
'manim-notebook.openWalkthrough', async () => {
69+
Logger.info("💠 Command requested: Open Walkthrough");
70+
await vscode.commands.executeCommand('workbench.action.openWalkthrough',
71+
`${context.extension.id}#manim-notebook-walkthrough`, false);
72+
});
73+
74+
// internal command
6775
const finishRecordingLogFileCommand = vscode.commands.registerCommand(
6876
'manim-notebook.finishRecordingLogFile', async () => {
6977
Logger.info("💠 Command requested: Finish Recording Log File");
7078
await LogRecorder.finishRecordingLogFile(context);
7179
});
7280

81+
registerWalkthroughCommands(context);
82+
7383
context.subscriptions.push(
7484
previewManimCellCommand,
7585
previewSelectionCommand,
7686
startSceneCommand,
7787
exitSceneCommand,
7888
clearSceneCommand,
7989
recordLogFileCommand,
90+
openWalkthroughCommand,
8091
exportSceneCommand,
81-
finishRecordingLogFileCommand
92+
finishRecordingLogFileCommand,
8293
);
8394
registerManimCellProviders(context);
8495
}

‎src/walkthrough/commands.svg‎

Lines changed: 57 additions & 0 deletions
Loading

‎src/walkthrough/commands.ts‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import * as vscode from 'vscode';
2+
import { ExtensionContext, window, workspace, commands, extensions } from 'vscode';
3+
import { Logger, Window } from '../logger';
4+
import { ManimShell } from '../manimShell';
5+
import fs from 'fs';
6+
import path from 'path';
7+
8+
export function registerWalkthroughCommands(context: ExtensionContext) {
9+
const checkManimVersionCommand = commands.registerCommand(
10+
'manim-notebook-walkthrough.checkManimVersion', async () => {
11+
Logger.info("💠 Command Check Manim Version requested");
12+
await checkManimVersion();
13+
});
14+
15+
const openSampleFileCommand = commands.registerCommand(
16+
'manim-notebook-walkthrough.openSample', async () => {
17+
Logger.info("💠 Command Open Sample File requested");
18+
await openSampleFile(context);
19+
});
20+
21+
const showAllCommandsCommand = commands.registerCommand(
22+
'manim-notebook-walkthrough.showCommands', async () => {
23+
Logger.info("💠 Command Show All Commands requested");
24+
await showAllCommands();
25+
}
26+
);
27+
28+
const showKeyboardShortcutsCommand = commands.registerCommand(
29+
'manim-notebook-walkthrough.showShortcuts', async () => {
30+
Logger.info("💠 Command Show Keyboard Shortcuts requested");
31+
await showKeyboardShortcuts();
32+
}
33+
);
34+
35+
const showSettingsCommand = commands.registerCommand(
36+
'manim-notebook-walkthrough.showSettings', async () => {
37+
Logger.info("💠 Command Show Settings requested");
38+
await showSettings();
39+
}
40+
);
41+
42+
const openWikiCommand = commands.registerCommand(
43+
'manim-notebook-walkthrough.openWiki', async () => {
44+
Logger.info("💠 Command Open Wiki requested");
45+
await openWiki();
46+
}
47+
);
48+
49+
context.subscriptions.push(
50+
checkManimVersionCommand,
51+
openSampleFileCommand,
52+
showAllCommandsCommand,
53+
showKeyboardShortcutsCommand,
54+
showSettingsCommand,
55+
openWikiCommand
56+
);
57+
}
58+
59+
async function checkManimVersion() {
60+
const terminal = window.createTerminal("Manim Version");
61+
terminal.show()
62+
await new Promise((resolve) => setTimeout(resolve, 1500));
63+
terminal.sendText("manimgl --version");
64+
}
65+
66+
/**
67+
* Opens a sample Manim file in a new editor that the user can use to get started.
68+
*
69+
* @param context The extension context.
70+
*/
71+
async function openSampleFile(context: ExtensionContext) {
72+
const sampleFilePath = path.join(context.extensionPath,
73+
'src', 'walkthrough', 'sample_scene.py');
74+
const sampleFileContent = fs.readFileSync(sampleFilePath, 'utf-8');
75+
76+
const sampleFile = await workspace.openTextDocument({
77+
language: 'python',
78+
content: sampleFileContent
79+
});
80+
81+
await window.showTextDocument(sampleFile);
82+
}
83+
84+
/**
85+
* Opens the command palette with all the "Manim Notebook" commands.
86+
*/
87+
async function showAllCommands() {
88+
await commands.executeCommand('workbench.action.quickOpen', '>Manim Notebook:');
89+
}
90+
91+
/**
92+
* Opens the keyboard shortcuts page in the settings.
93+
*/
94+
async function showKeyboardShortcuts() {
95+
await commands.executeCommand(
96+
'workbench.action.openGlobalKeybindings', "Manim Notebook");
97+
}
98+
99+
/**
100+
* Opens the settings page for the extension.
101+
*/
102+
async function showSettings() {
103+
await commands.executeCommand(
104+
'workbench.action.openSettings', "Manim Notebook");
105+
}
106+
107+
/**
108+
* Opens the GitHub wiki page for the extension.
109+
*/
110+
async function openWiki() {
111+
const wikiUrl = "https://github.com/Manim-Notebook/manim-notebook/wiki";
112+
await vscode.env.openExternal(vscode.Uri.parse(wikiUrl));
113+
}

‎src/walkthrough/manim-installation.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# 🎈 Manim Installation
2+
3+
> **Manim Notebook only works with ManimGL by 3Blue1Brown,<br>NOT with the community edition of Manim (Manim CE)**.
4+
5+
If you haven't already installed ManimGL, follow the [**Manim installation guide**](https://3b1b.github.io/manim/getting_started/installation.html). This will be the most difficult part of all the steps here and there are quite a few dependencies to install. But don't despair; with a bit of patience and StackOverflow you will get there.
6+
7+
We recommend to install Manim by cloning the GitHub repo and using
8+
9+
```bash
10+
git clone https://github.com/3b1b/manim.git
11+
cd manim
12+
pip install -e .
13+
```
14+
15+
This way, you can easily update Manim by pulling the latest commits from the repo (`git pull`) and don't have to wait for a new release.
16+
17+
Check your Manim version by running `manimgl --version` or just click on the button on the left.

0 commit comments

Comments
 (0)