circuitverse/circuitverse-presentation-embed

CircuitVerse Presentation Embed

About the project

The project is an extension that allows the user to embed CircuitVerse circuit's in a Google Slide. Unfortunately, Google Slides does not embed iframe. However, it is possible to achieve that by using a combination of Google Slides Add-On on and chrome extension.

Clone this repo

First things first. Make a local clone of this repo so you can work on it from your own computer.

git clone https://github.com/CircuitVerse/CircuitVerse-Presentation-Embed.git
cd CircuitVerse-Presentation-Embed

Installation: Browser Extension

Chrome

1. Goto chrome://extensions/, enable developer mode
2. Click load unpacked extension and select the chrome extension folder

Firefox

1. Goto about:debugging#/runtime/this-firefox on Firefox
2. Click on "Load Temporary AddOn" and select manifest.json in the firefox extension folder

Testing

1. Goto to the following Google Slides presentation: https://docs.google.com/presentation/d/1QybVSk8CujyHEHlLDtdlCiae9vK9qGhWfb4SA-WGCR0/edit#slide=id.g36e2028529a5eb1_0
2. Goto presentation mode. Live Circuits should load.

Reloading the extension

Chrome

1. Goto chrome://extensions on Chrome
2. Click on the reload icon just below your extension to reload

Firefox

1. Goto about:debugging#/runtime/this-firefox on Firefox
2. Click on the "Reload" just below your extension to reload

Installation: Google Docs Add - On

1. Install clasp tool: npm install -g @google/clasp
2. Then enable the Google Apps Script API: https://script.google.com/home/usersettings
3. Login: clasp login
4. Goto to the Add on folder: cd Google\ Slides\ Add\ On
5. Run clasp create --type slides --title "CircuitVerse Embed Project"
6. Run clasp push to push changes from local system to Google Docs
7. Run clasp pull to pull changes from google docs to local system

For more information on how to use clasp, check the main repo.