Live programming @ University of Washington
qr_img = qr_code(qrtext)//html`${qr_code(qrtext)}<style>img {width: 50%}</style>`
video = {
var video = document.createElement("video");
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
var loadingMessage = document.getElementById("loadingMessage");
var outputContainer = document.getElementById("output");
var outputMessage = document.getElementById("outputMessage");
var outputData = document.getElementById("outputData");
function drawLine(begin, end, color) {
canvas.beginPath();
canvas.moveTo(begin.x, begin.y);
canvas.lineTo(end.x, end.y);
canvas.lineWidth = 4;
canvas.strokeStyle = color;
canvas.stroke();
}
// Use facingMode: environment to attemt to get the front camera on phones
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
video.srcObject = stream;
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
video.play();
requestAnimationFrame(tick);
});
function tick() {
//loadingMessage.innerText = "⌛ Loading video..."
if (video.readyState === video.HAVE_ENOUGH_DATA) {
// loadingMessage.hidden = true;
// canvasElement.hidden = false;
// outputContainer.hidden = false;
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
if (code) {
drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
//outputMessage.hidden = true;
//outputData.parentElement.hidden = false;
mutable outputData = code.data;
} else {
//outputMessage.hidden = false;
//outputData.parentElement.hidden = true;
}
}
requestAnimationFrame(tick);
}
return video
}
{
const {height, width} = test_png;
//return imageData_from_png(test_png)
return read_qr(imageData_from_png(test_png), height, width)
try {
read_qr(imageData_from_png(test_png), height, width)
} catch (e) {
return e
}
return 'done'
}
test_png = html`<img src="${URL.createObjectURL(test_image)}">`
imageData = (canvas) => {
//const img = screenShot()
const context = canvas.getContext('2d')
return context.getImageData(0, 0, canvas.height, canvas.width)
}
import {select, text, file, textarea} from '@jashkenas/inputs'
read_qr = (imageData, height, width) => {
return jsQR(imageData.data, height, width)
}
qr_code = (str) => {
let uri = null
QRCode.toDataURL(str, { errorCorrectionLevel: 'H' }, function (err, url) {
uri = url
})
return html`<img src="${uri}">`
}
imageData_from_png = (image) => {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = image
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0 );
return context.getImageData(0, 0, img.width, img.height)
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.