IoT Web Applications

Easiest Way to build IoT Solutions

  • Web Application Programming with Javascript, HTML5, CSS
  • Separation of Concerns. Focus on your business logic
  • Reuse front-end and back-end infrastructure
  • Build with your programming tools and get community support

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>