Access LCD Module with Javascript
<!doctype html>
<html>
<head>
<title>piFace display - Hello World Example</title>
<script src="zkpifacecad.js"></script>
<script>
var pi;
function init(){
pi = zkpifacecad.plugin();
pi.pifacecad_open();
pi.pifacecad_lcd_backlight_on();
pi.pifacecad_lcd_write("Hello World");
};
</script>
</head>
<body onload="init()">
<h3>Hello World Example</h3>
Add text: <input id="message" type="text" name="message">
<input type="submit" value="Show" onclick="pi.pifacecad_lcd_write(document.getElementById('message').value);"></br>
<button onclick="pi.pifacecad_lcd_backlight_off();">Backlight OFF</button>
<button onclick="pi.pifacecad_lcd_backlight_on();">Backlight ON</button></br>
</body>
</html>
Access Camera Module and display on screen
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple plugin example</title>
<script src="zkraspistill.js"></script>
<script>
var pi, savedPhoto = [], newSavedPhoto;
function init() {
console.log("init");
pi = zkraspistill.plugin();
};
function takephoto(filename) {
console.log("takephoto");
pi.raspistill(filename + ".jpg" + " -w 800 -h 600");
console.log(filename + ".jpg saved");
newSavedPhoto = filename + ".jpg";
savedPhoto.push(filename + ".jpg");
var newImg = document.createElement("img");
newImg.setAttribute("src", newSavedPhoto);
document.getElementById("showImage").innerHTML = '<img src="'+ newSavedPhoto + '">';
setTimeout(function(){
var newImg = document.createElement("img");
newImg.setAttribute("src", newSavedPhoto);
document.getElementById("showImage").innerHTML = '<img src="'+ newSavedPhoto + '">';
}, 5000);
};
</script>
<style>
textarea {
resize: none;
}
</style>
</head>
<body onload="init();">
<h1>ZKRASPISTILL</h1>
<h3>take photo Example</h3>
<hr> Filename:
<input id="filename" type="text" name="filename">
<button onclick="takephoto(document.getElementById('filename').value);">Take Photo</button>
</br>
<hr>
<div id="showImage">
</div>
<button type="button" onclick=window.close();>Exit</button>
</body>
</html>
