Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

Playground/index-local.html

@@ -97,6 +97,12 @@
                     <div class="option" id="minimapToggle1600">Minimap
                         <i class="far fa-square" aria-hidden="true"></i>
                     </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -443,6 +449,9 @@
     </div>
 
     <script src="https://code.jquery.com/jquery.js"></script>
+    <script src="js/jquery.qrcode.js"></script>
+    <script src="js/qrcode.js"></script>
+    
 
     <script src="js/actions.js"></script>
     <script src="js/pbt.js"></script>

Playground/index.html

@@ -115,6 +115,12 @@
                     <div class="option" id="minimapToggle1600">Minimap
                         <i class="far fa-square" aria-hidden="true"></i>
                     </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -461,6 +467,8 @@
     </div>
 
     <script src="js/libs/jquery.min.js"></script>
+    <script src="js/jquery.qrcode.js"></script>
+    <script src="js/qrcode.js"></script>
 
     <script src="js/actions.js"></script>
     <script src="js/pbt.js"></script>

Playground/indexStable.html

@@ -207,6 +207,12 @@
                             <div class="option" onclick="setVersion('stable');">Stable</div>
                         </div>
                     </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -442,6 +448,8 @@
     </div>
 
     <script src="https://code.jquery.com/jquery.js"></script>
+    <script src="js/jquery.qrcode.js"></script>
+    <script src="js/qrcode.js"></script>
 
     <script>
         Split(['#jsEditor', '#canvasZone']);

Playground/js/index.js

@@ -848,6 +848,11 @@ function showError(errorMessage, errorEvent) {
             setToMultipleID("currentFontSize", "innerHTML", "Font: " + size);
         };
 
+        showQRCode = function() {
+            $("#qrCodeImage").empty();
+            $("#qrCodeImage").qrcode({text: window.location.href});
+        };
+
         // Fullscreen
         document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function() {
             if (document.webkitIsFullScreen) goFullPage();

Playground/js/libs/jquery.qrcode.js

@@ -0,0 +1,89 @@
+(function( $ ){
+	$.fn.qrcode = function(options) {
+		// if options is string, 
+		if( typeof options === 'string' ){
+			options	= { text: options };
+		}
+
+		// set default values
+		// typeNumber < 1 for automatic calculation
+		options	= $.extend( {}, {
+			render		: "canvas",
+			width		: 256,
+			height		: 256,
+			typeNumber	: -1,
+			correctLevel	: QRErrorCorrectLevel.H,
+                        background      : "#ffffff",
+                        foreground      : "#000000"
+		}, options);
+
+		var createCanvas	= function(){
+			// create the qrcode itself
+			var qrcode	= new QRCode(options.typeNumber, options.correctLevel);
+			qrcode.addData(options.text);
+			qrcode.make();
+
+			// create canvas element
+			var canvas	= document.createElement('canvas');
+			canvas.width	= options.width;
+			canvas.height	= options.height;
+			var ctx		= canvas.getContext('2d');
+
+			// compute tileW/tileH based on options.width/options.height
+			var tileW	= options.width  / qrcode.getModuleCount();
+			var tileH	= options.height / qrcode.getModuleCount();
+
+			// draw in the canvas
+			for( var row = 0; row < qrcode.getModuleCount(); row++ ){
+				for( var col = 0; col < qrcode.getModuleCount(); col++ ){
+					ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
+					var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
+					var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
+					ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);  
+				}	
+			}
+			// return just built canvas
+			return canvas;
+		}
+
+		// from Jon-Carlos Rivera (https://github.com/imbcmdth)
+		var createTable	= function(){
+			// create the qrcode itself
+			var qrcode	= new QRCode(options.typeNumber, options.correctLevel);
+			qrcode.addData(options.text);
+			qrcode.make();
+			
+			// create table element
+			var $table	= $('<table></table>')
+				.css("width", options.width+"px")
+				.css("height", options.height+"px")
+				.css("border", "0px")
+				.css("border-collapse", "collapse")
+				.css('background-color', options.background);
+		  
+			// compute tileS percentage
+			var tileW	= options.width / qrcode.getModuleCount();
+			var tileH	= options.height / qrcode.getModuleCount();
+
+			// draw in the table
+			for(var row = 0; row < qrcode.getModuleCount(); row++ ){
+				var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);
+				
+				for(var col = 0; col < qrcode.getModuleCount(); col++ ){
+					$('<td></td>')
+						.css('width', tileW+"px")
+						.css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
+						.appendTo($row);
+				}	
+			}
+			// return just built canvas
+			return $table;
+		}
+  
+
+		return this.each(function(){
+			var element	= options.render == "canvas" ? createCanvas() : createTable();
+			jQuery(element).appendTo(this);
+		});
+	};
+})( jQuery );

Playground/ts.html

@@ -388,6 +388,12 @@
                                 <div class="option" onclick="setVersion('stable');">Stable</div>
                             </div>
                         </div>
+                        <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
+                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub">
+                                <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -466,6 +472,8 @@
         </div>
 
         <script src="js/libs/jquery.min.js"></script>
+        <script src="js/jquery.qrcode.js"></script>
+        <script src="js/qrcode.js"></script>
 
         <script src="js/actions.js"></script>
         <script src="js/pbt.js"></script>