App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Curso de App inventor 2 en español - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
___________________________
169W.- JavaScript. Crear imagen QR sin salir a Internet.
p168W_javascript_qr.aia
- Escribimos un texto y obtenemos una imagen de su código QR en nuestra SdCard.
- El código se encuentra en un archivo de la aplicación, no es necesario salir a internet.
- Nos basaremos en el archivo qrcode.js de kazuhikoarase:
https://github.com/kazuhikoarase/qrcode-generator/tree/master/js
qr.html
- Aquí he puesto parte del archivo qr.html, falta la parte correspondiente a qrcode.js
- He utilizado || como separador de campo, puedes cambiarlo si te interesa.
qr.html (- qrcode.js) |
<!DOCTYPE html><html><head></head>
<body>
<script type="text/javascript">
// https://github.com/kazuhikoarase/qrcode-generator
// Modified by Juan A. Villalpando - http://kio4.com
datos = window.AppInventor.getWebViewString(); // ENTRADA APP INVENTOR
datos = datos + "||";
data = datos.split("||");
text = data[0].replace(/^[\s\u3000]+|[\s\u3000]+$/g, '');
t = data[1]; // '4'
e = data[2]; // 'M'
m = 'Byte';
mb = 'UTF-8';
var update_qrcode = function() {
var salida = create_qrcode(text, t, e, m, mb);
result = salida.split("\"");
result = result[1].replace('data:image/gif;base64,','');
window.AppInventor.setWebViewString("" + result); // SALIDA APP INVENTOR
};
var create_qrcode = function(text, typeNumber,errorCorrectionLevel, mode, mb) {
qrcode.stringToBytes = qrcode.stringToBytesFuncs[mb];
var qr = qrcode(typeNumber || 4, errorCorrectionLevel || 'M');
qr.addData(text, mode);
qr.make();
return qr.createImgTag();
};
...............
+ CÓDIGO DEL ARCHIVO qrcode.js
|
- El código obtiene el QR y lo pasa mediante Base64. El Lienzo toma esa Base64 y lo muestra como imagen. Además se guarda en la SdCard.
- Si utilizas un Android 10+, debes cambiar el directorio, guardarlo en el ASD.
________________________________
- Diseño.
________________________________
- Bloques.
_________________________________________
- Kaledoscopio: https://kazuhikoarase.github.io/kaleidoscope/
https://www.pepperoni.blog/canvas-kaleidoscope/
__________________________________
|