qrcode

Playground/debug.html

@@ -20,10 +20,15 @@
 
         <!-- DatGUI -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        
         <!-- jszip -->
         <script src="libs/jszip.min.js"></script>
         <script src="libs/fileSaver.js"></script>
 
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>        
+
         <!-- Dependencies -->
         <script src="https://preview.babylonjs.com/ammo.js"></script>
         <script src="https://preview.babylonjs.com/recast.js"></script>

Playground/frame.html

@@ -24,6 +24,10 @@
         <script src="libs/jszip.min.js"></script>
         <script src="libs/fileSaver.js"></script>
 
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>        
+
         <!-- Dependencies -->
         <script src="https://preview.babylonjs.com/ammo.js"></script>
         <script src="https://preview.babylonjs.com/recast.js"></script>

Playground/full.html

@@ -31,6 +31,10 @@
         <script src="https://preview.babylonjs.com/Oimo.js"></script>
         <script src="https://preview.babylonjs.com/libktx.js"></script>
         <script src="https://preview.babylonjs.com/earcut.min.js"></script>
+
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>        
         
         <!-- Babylon.js -->
         <script src="https://preview.babylonjs.com/babylon.js"></script>

Playground/index-local.html

@@ -24,6 +24,10 @@
         <script src="libs/jszip.min.js"></script>
         <script src="libs/fileSaver.js"></script>
 
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>        
+
         <!-- Dependencies -->
         <script src="/dist/preview%20release/ammo.js"></script>
         <script src="/dist/preview%20release/recast.js"></script>

Playground/index.html

@@ -24,6 +24,10 @@
         <script src="libs/jszip.min.js"></script>
         <script src="libs/fileSaver.js"></script>
 
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>        
+
         <!-- Dependencies -->
         <script src="https://preview.babylonjs.com/ammo.js"></script>
         <script src="https://preview.babylonjs.com/recast.js"></script>

Playground/src/components/commandBarComponent.tsx

@@ -139,6 +139,10 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
                     {
                         label: "metadata",
                         onClick: () => {this.props.globalState.onDisplayMetadataObservable.notifyObservers(true)}
+                    },
+                    {
+                        label: "QR code",
+                        onClick: () => {this.props.globalState.onQRCodeRequiredObservable.notifyObservers(true)}
                     }
                 ]}/>
                 </div>

Playground/src/components/examplesComponent.tsx

@@ -91,7 +91,7 @@ export class ExamplesComponent extends React.Component<IExamplesComponentProps,
             <div id="examples" className={this._state} ref={this._rootRef}>
                 <div id="examples-header">Examples</div>
                 <div id="examples-filter">
-                    <input type="text" placeholder="Filter examples" value={this.state.filter} onChange={evt => {
+                    <input id="examples-filter-text" type="text" placeholder="Filter examples" value={this.state.filter} onChange={evt => {
                         this.setState({filter: evt.target.value});
                     }}/>
                 </div>

Playground/src/components/metadataComponent.tsx

@@ -75,15 +75,15 @@ export class MetadataComponent extends React.Component<IMetadataComponentProps,
                 <div id="metadata-editor" className={(this.props.globalState.language === "JS" ? "background-js" : "background-ts")}>
                     <label htmlFor="title">TITLE</label>
                     <div className="separator"></div>
-                    <input type="text" maxLength={120} id="title" className="save-form-title" ref={this._titleRef} value={this.props.globalState.currentSnippetTitle}/>
+                    <input type="text" maxLength={120} id="title" className="save-form-title" ref={this._titleRef} defaultValue={this.props.globalState.currentSnippetTitle}/>
 
                     <label htmlFor="description">DESCRIPTION</label>
                     <div className="separator"></div>
-                    <textarea id="description" rows={4} cols={10} ref={this._descriptionRef} value={this.props.globalState.currentSnippetDescription}></textarea>
+                    <textarea id="description" rows={4} cols={10} ref={this._descriptionRef} defaultValue={this.props.globalState.currentSnippetDescription}></textarea>
 
                     <label htmlFor="tags">TAGS (separated by comma)</label>
                     <div className="separator"></div>
-                    <textarea id="tags" rows={4} cols={10} ref={this._tagsRef} value={this.props.globalState.currentSnippetTags}></textarea>
+                    <textarea id="tags" rows={4} cols={10} ref={this._tagsRef} defaultValue={this.props.globalState.currentSnippetTags}></textarea>
 
                     <div className="editor-buttons" id="buttons">
                         <div id="ok" onClick={() => this.onOk()}>OK</div>

Playground/src/components/qrCodeComponent.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+
+require("../scss/qrCode.scss");
+
+declare var $: any;
+
+interface IQRCodeComponentProps {
+    globalState: GlobalState;
+}
+
+export class QRCodeComponent extends React.Component<IQRCodeComponentProps, {isVisible: boolean}> {    
+  
+    public constructor(props: IQRCodeComponentProps) {
+        super(props);
+        this.state = {isVisible: false};
+
+        this.props.globalState.onQRCodeRequiredObservable.add(value => {
+            this.setState({isVisible: value});
+        })
+    }    
+
+    componentDidUpdate() {
+        this._syncQRCOde();
+    }
+
+    private _syncQRCOde() {
+        if (!this.state.isVisible) {
+            return;
+        }
+
+        document.getElementById("qr-code-image")!.innerHTML = "";
+        $("#qr-code-image").qrcode({ text: "https://playground.babylonjs.com/frame.html" + location.hash });
+
+    }
+
+    public render() {
+        if (!this.state.isVisible) {
+            return null;
+        }
+        return (
+            <div className="qr-code" onClick={() => this.setState({isVisible: false})}>
+                <div id="qr-code-image">
+                </div>
+            </div>
+        )
+    }
+}

Playground/src/components/rendererComponent.tsx

@@ -96,7 +96,12 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
 
             let zipVariables = "var engine = null;\r\nvar scene = null;\r\nvar sceneToRender = null;\r\n";
             let defaultEngineZip = "var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); }";
-            let code = await this.props.globalState.getCompiledCode();        
+            let code = await this.props.globalState.getCompiledCode();     
+            
+            if (!code) {
+                return;
+            }
+            
             let createEngineFunction = "createDefaultEngine";
             let createSceneFunction = "";
             let checkCamera = true;

Playground/src/globalState.ts

@@ -60,6 +60,7 @@ export class GlobalState {
     public onLanguageChangedObservable = new Observable<void>();
     public onNavigateRequiredObservable = new Observable<{lineNumber: number, column: number}>();
     public onExamplesDisplayChangedObservable = new Observable<void>();
+    public onQRCodeRequiredObservable = new Observable<boolean>();
 
     public loadingCodeInProgress = false;
     public onCodeLoaded = new Observable<string>();

Playground/src/playground.tsx

@@ -14,6 +14,7 @@ import { Utilities } from './tools/utilities';
 import { ShortcutManager } from './tools/shortcutManager';
 import { ErrorDisplayComponent } from './components/errorDisplayComponent';
 import { ExamplesComponent } from './components/examplesComponent';
+import { QRCodeComponent } from './components/qrCodeComponent';
 
 require("./scss/main.scss");
 const Split = require('split.js').default;
@@ -146,7 +147,8 @@ export class Playground extends React.Component<IPlaygroundProps, {errorMessage:
                     <HamburgerMenuComponent globalState={this._globalState}/>
                 }
                 <ExamplesComponent globalState={this._globalState}/>
-                <FooterComponent globalState={this._globalState}/>    
+                <FooterComponent globalState={this._globalState}/>   
+                <QRCodeComponent globalState={this._globalState}/>   
                 <ErrorDisplayComponent globalState={this._globalState}/>            
                 <WaitRingComponent globalState={this._globalState}/>
                 <MetadataComponent globalState={this._globalState}/>

Playground/src/scss/examples.scss

@@ -39,7 +39,7 @@
         align-content: center;
         justify-content: center;
 
-        input {
+        #examples-filter-text {
             border: none;
             padding: 0;
             border-bottom: solid 1px #337ab7;

Playground/src/scss/metadata.scss

@@ -35,6 +35,8 @@
             margin-bottom: 20px;
             padding: 5px;
             resize: none;
+            border: 1px solid #999;
+            background: white;
         }
 
         .editor-buttons{

Playground/src/scss/qrCode.scss

@@ -0,0 +1,15 @@
+.qr-code {
+    position: absolute;
+    grid-column: 1 / 3;
+    grid-row: 1 / 3;
+    bottom: 0px;
+    right: calc(50% - 150px);
+    width: 300px;
+    height: 300px;
+    z-index: 100;
+    display: grid;    
+    align-content: center;
+    justify-content: center;
+    user-select: none;
+    cursor: pointer;
+}

Playground/src/tools/monacoManager.ts

@@ -67,8 +67,12 @@ export class MonacoManager {
                 return;
             }
 
-            this._editor?.setValue(code);            
-            this.globalState.onRunRequiredObservable.notifyObservers();
+            if (this._editor) {
+                this._editor?.setValue(code);            
+                this.globalState.onRunRequiredObservable.notifyObservers();
+            } else {
+                this.globalState.currentCode = code;
+            }
         });
 
         globalState.onFormatCodeRequiredObservable.add(() => {
@@ -178,6 +182,10 @@ export class MonacoManager {
         }
 
         this.globalState.getCompiledCode = () => this._getRunCode();
+
+        if (this.globalState.currentCode) {
+            this.globalState.onRunRequiredObservable.notifyObservers();
+        }
     }
 
     public async setupMonacoAsync(hostElement: HTMLDivElement) {