diff --git a/package.json b/package.json
index e17e2e93..04310d4f 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,11 @@
"title": "Record Log File",
"category": "Manim Notebook"
},
+ {
+ "command": "manim-notebook.openWalkthrough",
+ "title": "Open Walkthrough",
+ "category": "Manim Notebook"
+ },
{
"command": "manim-notebook.exportScene",
"title": "Export current scene as CLI command",
@@ -149,6 +154,86 @@
"highContrastLight": "#C3DDF7"
}
}
+ ],
+ "walkthroughs": [
+ {
+ "id": "manim-notebook-walkthrough",
+ "title": "Manim Notebook",
+ "description": "Welcome 👋 Get to know how to make the best out of Manim Notebook.",
+ "steps": [
+ {
+ "id": "checkManimInstallation",
+ "title": "Check Manim Installation",
+ "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)",
+ "media": {
+ "markdown": "src/walkthrough/manim-installation.md"
+ },
+ "completionEvents": [
+ "onCommand:manim-notebook-walkthrough.checkManimVersion"
+ ]
+ },
+ {
+ "id": "startExample",
+ "title": "Start with an example",
+ "description": "Open an example file to see how Manim Notebook works.\n[Open Sample](command:manim-notebook-walkthrough.openSample)",
+ "media": {
+ "svg": "src/walkthrough/preview-cell.svg",
+ "altText": "Preview Manim Cell"
+ },
+ "completionEvents": [
+ "onCommand:manim-notebook-walkthrough.openSample"
+ ]
+ },
+ {
+ "id": "showAllAvailableCommands",
+ "title": "Show all available commands",
+ "description": "Get a list of all available commands in Manim Notebook.\n[Show Commands](command:manim-notebook-walkthrough.showCommands)",
+ "media": {
+ "svg": "src/walkthrough/commands.svg",
+ "altText": "Manim Notebook commands"
+ },
+ "completionEvents": [
+ "onCommand:manim-notebook-walkthrough.showCommands"
+ ]
+ },
+ {
+ "id": "showKeyboardShortcuts",
+ "title": "Show keyboard shortcuts",
+ "description": "See all available keyboard shortcuts in Manim Notebook and modify them to whatever you like.\n[Show Shortcuts](command:manim-notebook-walkthrough.showShortcuts)",
+ "media": {
+ "svg": "src/walkthrough/shortcuts.svg",
+ "altText": "Manim Notebook keyboard shortcuts"
+ },
+ "completionEvents": [
+ "onCommand:manim-notebook-walkthrough.showShortcuts"
+ ]
+ },
+ {
+ "id": "showSettings",
+ "title": "Show settings",
+ "description": "Customize your Manim Notebook experience by changing settings.\n[Show Settings](command:manim-notebook-walkthrough.showSettings)",
+ "media": {
+ "svg": "src/walkthrough/settings.svg",
+ "altText": "Manim Notebook settings"
+ },
+ "completionEvents": [
+ "onCommand:manim-notebook-walkthrough.showSettings"
+ ]
+ },
+ {
+ "id": "openWiki",
+ "title": "Open Wiki",
+ "description": "Learn more about Manim Notebook on the GitHub Wiki.\n[Open Wiki](command:manim-notebook-walkthrough.openWiki)",
+ "media": {
+ "svg": "src/walkthrough/wiki.svg",
+ "altText": "Manim Notebook Wiki"
+ },
+ "completionEvents": [
+ "onCommand:manim-notebook-walkthrough.openWiki"
+ ]
+ }
+ ]
+ }
]
},
"scripts": {
diff --git a/src/extension.ts b/src/extension.ts
index f02b943d..509494b8 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -7,6 +7,7 @@ import { previewCode } from './previewCode';
import { startScene, exitScene } from './startStopScene';
import { exportScene } from './export';
import { Logger, Window, LogRecorder } from './logger';
+import { registerWalkthroughCommands } from './walkthrough/commands';
import { ExportSceneCodeLens } from './export';
export function activate(context: vscode.ExtensionContext) {
@@ -53,7 +54,6 @@ export function activate(context: vscode.ExtensionContext) {
await LogRecorder.recordLogFile(context);
});
- // Internal commands
const exportSceneCommand = vscode.commands.registerCommand(
'manim-notebook.exportScene', async (sceneName?: string) => {
Logger.info("💠 Command requested: Export Scene");
@@ -64,12 +64,22 @@ export function activate(context: vscode.ExtensionContext) {
{ language: 'python' }, new ExportSceneCodeLens())
);
+ const openWalkthroughCommand = vscode.commands.registerCommand(
+ 'manim-notebook.openWalkthrough', async () => {
+ Logger.info("💠 Command requested: Open Walkthrough");
+ await vscode.commands.executeCommand('workbench.action.openWalkthrough',
+ `${context.extension.id}#manim-notebook-walkthrough`, false);
+ });
+
+ // internal command
const finishRecordingLogFileCommand = vscode.commands.registerCommand(
'manim-notebook.finishRecordingLogFile', async () => {
Logger.info("💠 Command requested: Finish Recording Log File");
await LogRecorder.finishRecordingLogFile(context);
});
+ registerWalkthroughCommands(context);
+
context.subscriptions.push(
previewManimCellCommand,
previewSelectionCommand,
@@ -77,8 +87,9 @@ export function activate(context: vscode.ExtensionContext) {
exitSceneCommand,
clearSceneCommand,
recordLogFileCommand,
+ openWalkthroughCommand,
exportSceneCommand,
- finishRecordingLogFileCommand
+ finishRecordingLogFileCommand,
);
registerManimCellProviders(context);
}
diff --git a/src/walkthrough/commands.svg b/src/walkthrough/commands.svg
new file mode 100644
index 00000000..c86cd1c6
--- /dev/null
+++ b/src/walkthrough/commands.svg
@@ -0,0 +1,57 @@
+
diff --git a/src/walkthrough/commands.ts b/src/walkthrough/commands.ts
new file mode 100644
index 00000000..0d788584
--- /dev/null
+++ b/src/walkthrough/commands.ts
@@ -0,0 +1,113 @@
+import * as vscode from 'vscode';
+import { ExtensionContext, window, workspace, commands, extensions } from 'vscode';
+import { Logger, Window } from '../logger';
+import { ManimShell } from '../manimShell';
+import fs from 'fs';
+import path from 'path';
+
+export function registerWalkthroughCommands(context: ExtensionContext) {
+ const checkManimVersionCommand = commands.registerCommand(
+ 'manim-notebook-walkthrough.checkManimVersion', async () => {
+ Logger.info("💠 Command Check Manim Version requested");
+ await checkManimVersion();
+ });
+
+ const openSampleFileCommand = commands.registerCommand(
+ 'manim-notebook-walkthrough.openSample', async () => {
+ Logger.info("💠 Command Open Sample File requested");
+ await openSampleFile(context);
+ });
+
+ const showAllCommandsCommand = commands.registerCommand(
+ 'manim-notebook-walkthrough.showCommands', async () => {
+ Logger.info("💠 Command Show All Commands requested");
+ await showAllCommands();
+ }
+ );
+
+ const showKeyboardShortcutsCommand = commands.registerCommand(
+ 'manim-notebook-walkthrough.showShortcuts', async () => {
+ Logger.info("💠 Command Show Keyboard Shortcuts requested");
+ await showKeyboardShortcuts();
+ }
+ );
+
+ const showSettingsCommand = commands.registerCommand(
+ 'manim-notebook-walkthrough.showSettings', async () => {
+ Logger.info("💠 Command Show Settings requested");
+ await showSettings();
+ }
+ );
+
+ const openWikiCommand = commands.registerCommand(
+ 'manim-notebook-walkthrough.openWiki', async () => {
+ Logger.info("💠 Command Open Wiki requested");
+ await openWiki();
+ }
+ );
+
+ context.subscriptions.push(
+ checkManimVersionCommand,
+ openSampleFileCommand,
+ showAllCommandsCommand,
+ showKeyboardShortcutsCommand,
+ showSettingsCommand,
+ openWikiCommand
+ );
+}
+
+async function checkManimVersion() {
+ const terminal = window.createTerminal("Manim Version");
+ terminal.show()
+ await new Promise((resolve) => setTimeout(resolve, 1500));
+ terminal.sendText("manimgl --version");
+}
+
+/**
+ * Opens a sample Manim file in a new editor that the user can use to get started.
+ *
+ * @param context The extension context.
+ */
+async function openSampleFile(context: ExtensionContext) {
+ const sampleFilePath = path.join(context.extensionPath,
+ 'src', 'walkthrough', 'sample_scene.py');
+ const sampleFileContent = fs.readFileSync(sampleFilePath, 'utf-8');
+
+ const sampleFile = await workspace.openTextDocument({
+ language: 'python',
+ content: sampleFileContent
+ });
+
+ await window.showTextDocument(sampleFile);
+}
+
+/**
+ * Opens the command palette with all the "Manim Notebook" commands.
+ */
+async function showAllCommands() {
+ await commands.executeCommand('workbench.action.quickOpen', '>Manim Notebook:');
+}
+
+/**
+ * Opens the keyboard shortcuts page in the settings.
+ */
+async function showKeyboardShortcuts() {
+ await commands.executeCommand(
+ 'workbench.action.openGlobalKeybindings', "Manim Notebook");
+}
+
+/**
+ * Opens the settings page for the extension.
+ */
+async function showSettings() {
+ await commands.executeCommand(
+ 'workbench.action.openSettings', "Manim Notebook");
+}
+
+/**
+ * Opens the GitHub wiki page for the extension.
+ */
+async function openWiki() {
+ const wikiUrl = "https://github.com/Manim-Notebook/manim-notebook/wiki";
+ await vscode.env.openExternal(vscode.Uri.parse(wikiUrl));
+}
diff --git a/src/walkthrough/manim-installation.md b/src/walkthrough/manim-installation.md
new file mode 100644
index 00000000..88603373
--- /dev/null
+++ b/src/walkthrough/manim-installation.md
@@ -0,0 +1,17 @@
+# 🎈 Manim Installation
+
+> **Manim Notebook only works with ManimGL by 3Blue1Brown,
NOT with the community edition of Manim (Manim CE)**.
+
+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.
+
+We recommend to install Manim by cloning the GitHub repo and using
+
+```bash
+git clone https://github.com/3b1b/manim.git
+cd manim
+pip install -e .
+```
+
+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.
+
+Check your Manim version by running `manimgl --version` or just click on the button on the left.
diff --git a/src/walkthrough/preview-cell.svg b/src/walkthrough/preview-cell.svg
new file mode 100644
index 00000000..ab8b2330
--- /dev/null
+++ b/src/walkthrough/preview-cell.svg
@@ -0,0 +1,68 @@
+
diff --git a/src/walkthrough/sample_scene.py b/src/walkthrough/sample_scene.py
new file mode 100644
index 00000000..63cc35e6
--- /dev/null
+++ b/src/walkthrough/sample_scene.py
@@ -0,0 +1,42 @@
+from manimlib import *
+
+# ❗
+# ❗ First, make sure to save this file somewhere. Otherwise, nothing will work here.
+# ❗
+
+
+class MyFirstManimNotebook(Scene):
+ def construct(self):
+ ## Your first Manim Cell
+ # Note how a Manim Cell is introduced by a comment starting with `##`.
+ # You should see a button `Preview Manim Cell` above this cell.
+ # Click on it to preview the animation.
+ circle = Circle()
+ circle.set_stroke(BLUE_E, width=4)
+ self.play(ShowCreation(circle))
+
+ ## Transform circle to square
+ # You can also preview the cell with the default hotkey:
+ # `Cmd+' Cmd+e` (MacOS) or `Ctrl+' Ctrl+e` (Windows/Linux)
+ square = Square()
+ self.play(ReplacementTransform(circle, square))
+
+ ## Make it red and fly away
+ self.play(
+ square.animate.set_fill(RED_D, opacity=0.5),
+ self.frame.animate.set_width(25),
+ )
+
+ # Now try to interact with the scene, e.g. press `d` and drag the mouse
+ # (without any mouse buttons pressed) to rotate the camera.
+
+ # Check out the Manim Quickstart Guide for more tips:
+ # https://3b1b.github.io/manim/getting_started/quickstart.html
+
+ # Many more example scenes can be found here:
+ # https://3b1b.github.io/manim/getting_started/example_scenes.html
+
+ # 🌟 Last but not least: if you like this extension, give it a star on
+ # GitHub. That would mean a lot to us :) Feel free to also let us know
+ # what we can improve. Happy Manim Animation! 🌈
+ # https://github.com/Manim-Notebook/manim-notebook
diff --git a/src/walkthrough/settings.svg b/src/walkthrough/settings.svg
new file mode 100644
index 00000000..e1ca3d54
--- /dev/null
+++ b/src/walkthrough/settings.svg
@@ -0,0 +1,51 @@
+
diff --git a/src/walkthrough/shortcuts.svg b/src/walkthrough/shortcuts.svg
new file mode 100644
index 00000000..4abb8021
--- /dev/null
+++ b/src/walkthrough/shortcuts.svg
@@ -0,0 +1,187 @@
+
diff --git a/src/walkthrough/wiki.svg b/src/walkthrough/wiki.svg
new file mode 100644
index 00000000..441627d5
--- /dev/null
+++ b/src/walkthrough/wiki.svg
@@ -0,0 +1,24 @@
+