Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. souvikdey1996
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    souvikdey1996

    @souvikdey1996

    0
    Reputation
    1
    Posts
    235
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online
    Location India Age 25

    souvikdey1996 Follow

    Posts made by souvikdey1996

    • How to create E-sign functionality for browser and mobile version using Onsen UI Javasript? I made a e-sign functionality which worked in browser version but when I try to use it mobile version it didn't work. How to solve this problem?

      //Onsen ui design coding
      <ons-list-item>
      <ons-row>
      Date    <u id=“curDate”></u>
      </ons-row>
      <ons-row>
      <ons-col>Signature</ons-col>
      <ons-col style=“text-align:right;”><ons-button class=“button button–material” style=“width:100px;” onclick=“erase()”>clear</ons-button></ons-col>
      </ons-row>
      <ons-row style=“background-color: white;”>
      <ons-col>
      <!–<u><img src=“sigimg.png” alt=“Sig IMG” style=“width: 100%”></u>–>
      <canvas id=“can” width=“350” height=“200” style=“border:2px solid black;”>
      </canvas>
      </ons-col>
      </ons-row>
      </ons-list-item>
      //Javascript coding
      var canvas, ctx, flag = false,
      prevX = 0,
      currX = 0,
      prevY = 0,
      currY = 0,
      xval = 0,
      yval = 0,
      dot_flag = false;

      var x = “black”,
      y = 2;

      function init(xv, yv) {
      //debugger;
      xval = xv;
      yval = yv;
      canvas = document.getElementById(‘can’);
      ctx = canvas.getContext(“2d”);
      w = canvas.width;
      h = canvas.height;

      canvas.addEventListener("mousemove", function(e) {
          findxy('move', e)
      }, false);
      canvas.addEventListener("mousedown", function(e) {
          findxy('down', e)
      }, false);
      canvas.addEventListener("mouseup", function(e) {
          findxy('up', e)
      }, false);
      canvas.addEventListener("mouseout", function(e) {
          findxy('out', e)
      }, false);
      

      }

      function color(obj) {
      switch (obj.id) {
      case “green”:
      x = “green”;
      break;
      case “blue”:
      x = “blue”;
      break;
      case “red”:
      x = “red”;
      break;
      case “yellow”:
      x = “yellow”;
      break;
      case “orange”:
      x = “orange”;
      break;
      case “black”:
      x = “black”;
      break;
      case “white”:
      x = “white”;
      break;
      }
      if (x == “white”) y = 14;
      else y = 2;

      }

      function draw() {
      ctx.beginPath();
      ctx.moveTo((prevX - xval), (prevY - yval));
      ctx.lineTo((currX - xval), (currY - yval));
      ctx.strokeStyle = x;
      ctx.lineWidth = y;
      ctx.stroke();
      ctx.closePath();
      }

      function erase() {
      //var m = confirm(“Want to clear”);
      //if (m) {
      ctx.clearRect(0, 0, w, h);
      //document.getElementById(“canvasimg”).style.display = “none”;
      //}
      }

      function save() {
      //document.getElementById(“canvasimg”).style.border = “2px solid”;
      var dataURL = canvas.toDataURL();
      //document.getElementById(“canvasimg”).src = dataURL;
      //document.getElementById(“canvasimg”).style.display = “inline”;
      return dataURL;
      }

      function findxy(res, e) {
      if (res == ‘down’) {
      prevX = currX;
      prevY = currY;
      currX = e.clientX - canvas.offsetLeft;
      currY = e.clientY - canvas.offsetTop;

          flag = true;
          dot_flag = true;
          if (dot_flag) {
              ctx.beginPath();
              ctx.fillStyle = x;
              ctx.fillRect((currX - 5), (currY - 140), 2, 2);
              ctx.closePath();
              dot_flag = false;
          }
      }
      if (res == 'up' || res == "out") {
          flag = false;
      }
      if (res == 'move') {
          if (flag) {
              prevX = currX;
              prevY = currY;
              currX = e.clientX - canvas.offsetLeft;
              currY = e.clientY - canvas.offsetTop;
              draw();
          }
      }
      

      }

      posted in Onsen UI
      souvikdey1996