Creating Preview Mode For CLUE

locales/en/package.i18n.json

@@ -13,5 +13,6 @@
     "deviceSimulatorExpressExtension.configuration.title": "Device Simulator Express configuration",
     "deviceSimulatorExpressExtension.configuration.properties.configEnvOnChange": "When you change the Python interpreter, the Device Simulator Express will automatically configure itself for the required dependencies.",
     "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger.",
-    "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask if we can download dependencies. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files."
+    "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask if we can download dependencies. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files.",
+    "deviceSimulatorExpressExtension.configuration.properties.previewMode": "Enable this to test out and play with the new Adafruit CLUE simulator!"
 }

package.json

@@ -144,6 +144,12 @@
                     "default": 5577,
                     "description": "%deviceSimulatorExpressExtension.configuration.properties.debuggerPort%",
                     "scope": "resource"
+                },
+                "deviceSimulatorExpress.previewMode": {
+                    "type": "boolean",
+                    "default": false,
+                    "description": "%deviceSimulatorExpressExtension.configuration.properties.previewMode%",
+                    "scope": "resource"    
                 }
             }
         },

package.nls.json

@@ -13,5 +13,6 @@
     "deviceSimulatorExpressExtension.configuration.title": "Device Simulator Express configuration",
     "deviceSimulatorExpressExtension.configuration.properties.configEnvOnChange": "When you change the Python interpreter, the Device Simulator Express will automatically configure itself for the required dependencies.",
     "deviceSimulatorExpressExtension.configuration.properties.debuggerPort": "The port the Server will listen on for communication with the debugger.",
-    "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask for dependency downloads. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files."
+    "deviceSimulatorExpressExtension.configuration.properties.dependencyChecker": "Whether or not to ask for dependency downloads. If unchecked, the extension will default to never download dependencies, except when automatically creating a virtual environment in the extension files.",
+    "deviceSimulatorExpressExtension.configuration.properties.previewMode": "Enable this to test out and play with the new Adafruit CLUE simulator!"
 }

src/constants.ts

@@ -22,6 +22,7 @@ export const CONFIG = {
     PYTHON_PATH: "python.pythonPath",
     SHOW_DEPENDENCY_INSTALL: "deviceSimulatorExpress.showDependencyInstall",
     SHOW_NEW_FILE_POPUP: "deviceSimulatorExpress.showNewFilePopup",
+    ENABLE_PREVIEW_MODE: "deviceSimulatorExpress.previewMode",
 };
 
 export const CONSTANTS = {

src/extension.ts

@@ -307,8 +307,14 @@ export async function activate(context: vscode.ExtensionContext) {
     const openSimulator: vscode.Disposable = vscode.commands.registerCommand(
         "deviceSimulatorExpress.common.openSimulator",
         async () => {
+            const isPreviewMode = getIsPreviewMode();
+
             const chosen_device = await vscode.window.showQuickPick(
-                Object.values(CONSTANTS.DEVICE_NAME_FORMAL)
+                Object.values(CONSTANTS.DEVICE_NAME_FORMAL).filter(
+                    device =>
+                        isPreviewMode ||
+                        device !== CONSTANTS.DEVICE_NAME_FORMAL.CLUE
+                )
             );
 
             if (!chosen_device) {
@@ -411,8 +417,14 @@ export async function activate(context: vscode.ExtensionContext) {
     const newFile: vscode.Disposable = vscode.commands.registerCommand(
         "deviceSimulatorExpress.common.newFile",
         async () => {
+            const isPreviewMode = getIsPreviewMode();
+
             const chosen_device = await vscode.window.showQuickPick(
-                Object.values(CONSTANTS.DEVICE_NAME_FORMAL)
+                Object.values(CONSTANTS.DEVICE_NAME_FORMAL).filter(
+                    device =>
+                        isPreviewMode ||
+                        device !== CONSTANTS.DEVICE_NAME_FORMAL.CLUE
+                )
             );
 
             if (!chosen_device) {
@@ -782,8 +794,14 @@ export async function activate(context: vscode.ExtensionContext) {
     const deployToDevice: vscode.Disposable = vscode.commands.registerCommand(
         "deviceSimulatorExpress.common.deployToDevice",
         async () => {
+            const isPreviewMode = getIsPreviewMode();
+
             const chosen_device = await vscode.window.showQuickPick(
-                Object.values(CONSTANTS.DEVICE_NAME_FORMAL)
+                Object.values(CONSTANTS.DEVICE_NAME_FORMAL).filter(
+                    device =>
+                        isPreviewMode ||
+                        device !== CONSTANTS.DEVICE_NAME_FORMAL.CLUE
+                )
             );
 
             if (!chosen_device) {
@@ -1003,6 +1021,13 @@ export async function activate(context: vscode.ExtensionContext) {
         }
     );
 
+    const getIsPreviewMode = (): boolean => {
+        const isPreviewMode: boolean = vscode.workspace
+            .getConfiguration()
+            .get(CONFIG.ENABLE_PREVIEW_MODE);
+        return isPreviewMode;
+    };
+
     context.subscriptions.push(
         installDependencies,
         runSimulator,

src/view/pages/__snapshots__/gettingStarted.spec.tsx.snap

@@ -213,6 +213,58 @@ exports[`GettingStartedPage component  should render correctly 1`] = `
     <h2>
        Tutorial for CLUE 
     </h2>
+    <h3>
+       0. Enable Preview Mode to use the CLUE (This is required)
+    </h3>
+    <p>
+       a. Access your settings:
+    </p>
+    <img
+      alt="Open settings"
+      src="https://raw.githubusercontent.com/microsoft/vscode-python-devicesimulator/dev/assets/readmeFiles/clue/open_settings.PNG"
+    />
+    <ul>
+      <li>
+        Windows or Linux: press 
+        <kbd>
+          Ctrl
+        </kbd>
+         + 
+        <kbd>
+          ,
+        </kbd>
+         or go to 
+        <code>
+          File -&gt; Preferences -&gt; Settings
+        </code>
+      </li>
+      <li>
+        Mac: press 
+        <kbd>
+          Cmd
+        </kbd>
+         + 
+        <kbd>
+          ,
+        </kbd>
+         or go to 
+        <code>
+          Code -&gt; Preferences -&gt; Settings
+        </code>
+        .
+      </li>
+    </ul>
+    <p>
+       b. Check the 
+      <code>
+        "Device Simulator Express: Preview Mode"
+      </code>
+       setting.
+    </p>
+    <img
+      alt="Enable preview mode"
+      src="https://raw.githubusercontent.com/microsoft/vscode-python-devicesimulator/dev/assets/readmeFiles/clue/check_preview_mode.gif"
+    />
     <h3>
       1. Import the the main CLUE library (This is required)
     </h3>

src/view/pages/gettingStarted.tsx

@@ -136,6 +136,15 @@ export class GettingStartedPage extends React.Component {
                     {/* prettier-ignore */}
                     <div id="CLUE" className="inv">
                         <h2> Tutorial for CLUE </h2>
+                        <h3> 0. Enable Preview Mode to use the CLUE (This is required)</h3>
+                        <p> a. Access your settings:</p>
+                        <img alt='Open settings' src='https://raw.githubusercontent.com/microsoft/vscode-python-devicesimulator/dev/assets/readmeFiles/clue/open_settings.PNG'></img>
+                        <ul>
+                            <li>Windows or Linux: press <kbd>Ctrl</kbd> + <kbd>,</kbd> or go to <code>File -> Preferences -> Settings</code></li>
+                            <li>Mac: press <kbd>Cmd</kbd> + <kbd>,</kbd> or go to <code>Code -> Preferences -> Settings</code>.</li>
+                        </ul>
+                        <p> b. Check the <code>"Device Simulator Express: Preview Mode"</code> setting.</p>
+                        <img alt='Enable preview mode' src='https://raw.githubusercontent.com/microsoft/vscode-python-devicesimulator/dev/assets/readmeFiles/clue/check_preview_mode.gif'></img>
                         <h3>
                             1. Import the the main CLUE library (This is
                             required)