Posted on

Coding for fun: JavaScript based simple doodle

Here is a pure JavaScript based, basic drawing tool. It supports both mouse and tap.

Demo URL: https://ninethsense.github.io/code-share/Doodle/

image

001 <html>
002     <head>
003         <meta http-equiv="content-type" content="text/html; charset=utf-8">
004         <style>
005             body {
006                 margin: 0 0;   
007                 overflow:hidden;
008                 cursor:url(pencil1.cur), auto;
009                 touch-action: none;
010             }
011             #d {
012                 display: flex;
013             }
014             #sb {
015                 background-color: #ddd;
016                 box-shadow: 2px 2px 5px;
017                 padding: 2 2;
018                 position:absolute;
019                 top:0;
020                 left:0;
021             }
022             #sb input {
023                 min-width:100px;
024                 min-height:70px;
025             }
026             #sb input {
027                 font-family: Arial, Helvetica, sans-serif;
028                 font-size: 13pt;
029                 font-weight:bold;
030                 cursor: pointer;
031             }
032         </style>
033     </head>
034     <body>
035     <div id="sb">
036         <input type="button" value="C L E A R" id="clear" />
037     </div>
038     <canvas id="d"></div>
039
040     <script>
041         var d = document.getElementById("d");
042         d.width = window.innerWidth;
043         d.height = window.innerHeight;
044         var ctx = d.getContext("2d");
045         ctx.lineWidth = 3;
046         px=0, py=0;clk=false;
047
048   
049         
050         startdraw = function(e) {
051             px = e.clientX - d.offsetLeft;
052             py = e.clientY - d.offsetTop;
053             clk = true; 
054         }
055
056         draw = function(e) {
057             
058             if (clk) {
059                 e = e.touches?e.touches[0]:e;
060                 ctx.beginPath();
061                 ctx.moveTo(px,py);
062                 px = e.clientX - d.offsetLeft;
063                 py = e.clientY - d.offsetTop;
064                 ctx.lineTo(px,py);
065                 ctx.strokeStyle = '#ff0000';
066                 ctx.stroke();
067                 ctx.closePath();
068             }
069         }
070
071         document.getElementById("clear").addEventListener("click", function() {
072             if (confirm("Clear the whiteboard?")) {
073                 ctx.clearRect(0,0,d.width,d.height);
074             }
075         });
076        
077         d.addEventListener("touchstart", startdraw);
078         d.addEventListener("mousemove", draw, false);
079         d.addEventListener("mousedown", startdraw, false);
080         d.addEventListener("touchmove", draw, false);
081         d.addEventListener("mouseup", function() { clk = false });
082         d.addEventListener("touchend", function() { clk = false });
083
084     </script>
085     </body>
086 </html>
View in GitHub | Made with wp-showgithubfile plugin
Posted on

Bash script to backup using lftp

Can use below script to gzip a folder, and upload to a FTP site. We can use a cron task to schedule it.



#!/bin/bash

Fn=myvps-backup-$(date +%Y%m%d).tar.gz

tar cf - websites | gzip -9 - > $Fn  lftp -u user@name,password myhostname.com << EOF

set ssl:check-hostname no

set ssl:verify-certificate false

cd /public_ftp

put $Fn

bye

EOF
Posted on

A basic JavaScript drawing interpreter

Coding for fun… An attempt to make a fully JavaScript based canvas drawing interpreter in മലയാളം/Malayalam.

Try in action here – https://ninethsense.github.io/code-share/CanvasDrawing/

Source Code:

001 <html>
002     <head>
003         <meta http-equiv="content-type" content="text/html; charset=utf-8">
004         <style>
005             #c {
006               display: flex;
007                 width:100%;
008                 height:100%;
009             }
010             #t {
011               width:100%;
012             }
013             .col {
014               flex:1;min-height:80%;
015               background-color: #eee;
016               margin:1px 1px;
017             }
018             #e {
019               font-family: monospace;
020               font-weight: bold;
021               font-size:12pt;
022               caret-color: red;
023             }
024         </style>
025     </head>
026     <body>
027       <div style="display:flex;min-height:80%;border:solid 1px black;">
028         <div id="e" class="col" contenteditable>
029           മായ്‌ക്കുക<br>
030           രേഖ (ഇടത്=100, മുകൾ=100, വീതി=200, ഉയരം =200)<br>
031           വൃത്തം (ഇടത്=200, മുകൾ=200, ആരം=50, നിറം ="പച്ച" )<br>
032           ചതുരം (ഇടത്=50, മുകൾ=50, വീതി=300, ഉയരം=200)<br>
033           ചതുരം (ഇടത്=50, മുകൾ=50, വീതി=300, ഉയരം=200, നിറം = "ചുവപ്പ്")<br>
034           രേഖ (ഇടത്=100, മുകൾ=100, വീതി=200, ഉയരം =300,  നിറം ="#0000ff")
035         </div>
036         <div class="col">
037           <canvas id="c"></canvas>
038             <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
039           </svg>
040         </div>
041       </div>
042       
043       <input type="button" value="Draw" id="ok" />
044       
045
046     <script>
047       var c = document.getElementById("c");
048       c.width = c.offsetWidth;
049       c.height = c.offsetHeight;
050       var cx = c.getContext("2d");
051       
052       document.getElementById("ok").addEventListener("click", function(){
053         
054         var pgm = document.getElementById("e").innerText;
055         var lines = pgm.split("\n");
056         
057         lines.forEach(function(stmt, i) {
058           if (!stmt.trim()) return;
059           
060           var cmd = stmt.split(/{|\(| /)[0];
061           
062           var params = stmt.replace(cmd, "" ).replace(/=/g,":").replace(/\(/g,"{").replace(/\)/g,"}");
063           
064
065           params = params.replace(/ഇടത്|മുകൾ|ആരം|വീതി|ഉയരം|നിറം/gi, function(matched){
066                   return {
067                     "ഇടത്":"\"left\"", 
068                     "മുകൾ":"\"top\"", 
069                     "ആരം":"\"radius\"",
070                     "വീതി":"\"width\"",
071                     "ഉയരം":"\"height\"",
072                     "നിറം":"\"color\""
073                   }[matched];
074                 });
075           var col = {"പച്ച":"#00ff00", "ചുവപ്പ്":"#ff0000", "നീല":"#0000ff"};
076                 
077           var j = {};
078           try {
079             j = JSON.parse( params );
080             
081           } catch {
082             if (cmd != "മായ്‌ക്കുക") {
083               Err();
084               return;
085             }
086           }
087
088           if ('color' in j) {
089             if (j.color in col) {
090               cx.strokeStyle = col[j.color];
091             } else {
092               cx.strokeStyle = j.color;
093             }
094           } else {
095             cx.strokeStyle = "#000";
096           }
097           
098           cx.beginPath();
099           switch(cmd) {
100             case "മായ്‌ക്കുക":
101               cx.clearRect(0,0,c.offsetWidth,c.offsetHeight);
102               break;
103             case "വൃത്തം":
104               if ( !Number.isInteger(j.left) || !Number.isInteger(j.top) || !Number.isInteger(j.radius)) {
105                 Err();
106               }
107                 cx.arc(j.left, j.top,j.radius,0, 2 * Math.PI, false);
108               break;
109             case "രേഖ":
110               cx.moveTo(j.left, j.top);
111               cx.lineTo(j.width, j.height);
112               break;
113             case "ചതുരം":
114               cx.rect(j.left, j.top, j.width, j.height);
115               break;
116             default:
117               Err();
118               break;
119           }
120           function Err() {
121             alert(`Syntax Error in "${cmd}" at line ${i+1}`);
122           }
123
124           if (cmd != "മായ്‌ക്കുക") cx.stroke();
125           cx.closePath();
126         });
127       });
128       
129     </script>
130     </body>
131 </html>
View in GitHub | Made with wp-showgithubfile plugin
Posted on

Web based single-page, light weight HTML editor with auto-save, using HTML, JavaScript and PHP

image

Source Code:

001 <?php
002     /**
003      *  A lightweight, single page HTML editor with live preview and auto-save
004      *  Author: Praveen Nair @ http://blog.ninethsense.com/
005      *  
006      */
007
008     $f = $fn = "";
009     if (count($_GET) == 1)  {
010         $f = key($_GET);
011         $fn = "$f.html";
012     } else {
013         die();
014     }
015
016      if ( isset($_POST["c"]) )  {
017         $content = $_POST["c"];
018         echo  (file_put_contents($fn, $content))?"1":"-1";
019         die();
020     }
021    
022 ?>
023 <html>
024     <head>
025         <meta http-equiv="content-type" content="text/html; charset=utf-8">
026         <style>
027             #tb {
028                 margin-left: 5;
029             }
030             #editor, #preview {
031                 flex: 1 0 0;
032                 background:#eee;
033                 margin: 5 5;
034                 padding: 5 5;
035                 overflow:auto;
036             }
037             #editor {
038                 font-family: monospace;
039             }
040             #preview, a {
041                 font-family: Arial, Helvetica, sans-serif;
042             }
043             [placeholder]:empty::before {
044                 content: attr(placeholder);
045                 color: #ccc; 
046             }
047             #saved {
048                 font-size:8pt;
049                 margin-left:5px;   
050             }
051         </style>
052     </head>
053     <body>
054         <div id="tb">
055             <input type="button" value="Save" onclick="Save()" /><span id="saved"></span>
056             <a href="preview.php?<?=$f?>" target="_blank" style="float:right;font-size:8pt">[Preview]</a>
057         </div>
058         <div style="display: flex;height:90%">
059             
060             <div id="editor" contenteditable="true" onkeyup="LivePreview()" placeholder="Your HTML Code"></div>
061
062             <div id="preview" placeholder="Preview Area"></div>
063         </div>
064
065         <script>
066             var editor = document.getElementById("editor");
067             var preview = document.getElementById("preview");
068             var IsSaved = true;
069             editor.focus();
070             function LivePreview() {
071                 preview.innerHTML = editor.innerText;
072                 IsSaved = false;
073             }
074             function Save() {
075                 var xhttp = new XMLHttpRequest();
076                 xhttp.onreadystatechange = function() {
077                     if (this.readyState == 4 && this.status == 200) {
078                         if (xhttp.responseText == "1") {
079                             document.getElementById("saved").style.color = 'green';
080                             document.getElementById("saved").innerText = "Last saved at " + new Date() ;
081                             IsSaved = true;
082                         } else {
083                             ShowError();
084                         }
085                     } 
086                 };
087                 var formData = new FormData();
088                 formData.append("c", editor.innerText);
089                 xhttp.open("POST", "<?= $_SERVER["PHP_SELF"]. "?$f" ?>", true);
090                 xhttp.send(formData);
091
092             }
093             setInterval(() => {
094                 if (!IsSaved) {
095                     Save();
096                 }
097             }, 5000);
098
099             ShowError = function() {
100                 var ele = document.getElementById("saved");
101                 ele.style.color = 'red';
102                 ele.innerText = "Couldn't Auto-save. Will retry soon" ;
103             }
104             window.onload = function() {
105                 <?php
106                     $content = "";                
107                     if ( $_SERVER['REQUEST_METHOD'] != 'POST' ) {
108                         if (file_exists($fn)) {
109                             $content = file_get_contents($fn);
110                         } 
111                         echo "editor.innerText = `$content`;";
112                     }
113                 ?>
114                 LivePreview();
115             }
116             
117         </script>
118     </body>
119 </html>
120
View in GitHub | Made with wp-showgithubfile plugin

Posted on

Whitepaper on Designing an efficient Virtual Queue Management System

Recently I wrote a research paper on the said topic, and here are the links I published:

  1. Original, updated version @ GitHub – https://github.com/ninethsense/VirtualQueue/blob/master/README.md
  2. Medium – https://medium.com/@ninethsense_8477/yet-another-virtual-queue-management-system-design-44cdee123a0b

Additionally, a small excerpt in a Malayalam online news paper – https://www.janmabhumi.in/read/bevq-failure-is-a-lesson-how-to-build-the-best-virtual-queue-app/