Add files via upload

mtpython · Dec 6, 2018 · ca76c5a · ca76c5a
1 parent e11e438
commit ca76c5a
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# schreib.maschine
+# schreib.maschine
diff --git a/index.html b/index.html
@@ -2,16 +2,15 @@
 <html>
 
 <head>
-<title>Page Title</title>
+<title>SCHREIB.MASCHINE</title>
   <script src='tesseract.js'></script>
   <script src="oauth.js"></script>
   <script src='main.js'></script>
   <script src='filters.js'></script>
-  <link rel="stylesheet" href="index.css">
+  <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
-
     <ul>
         <li>
             <video id="video" autoplay></video>
@@ -20,14 +19,11 @@
             <canvas id="canvas"></canvas>
         </li>
     </ul>
-
-
-
+
   <p id="range1">100: </p>
   <input id="threshold" class="slider" type="range" min=0 max=255 value=100></input>
   <div id='ocr'><h1>Scanning...</h1></div>
   <canvas id="canv2" style="display: none"></canvas>
 
-
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,53 +1,26 @@
-// {
-//   "oauth_token": "1060488553304604672-Z1Pzt1hFGxGDW1WmQ2crSH2ATEmia6",
-//   "oauth_token_secret": "M27VqkmlN5VqPOpBIk55fbhBNEpYzehamg8x1BiKGICha",
-//   "provider": "twitter"
-// }
-// var twitter_application_consumer_key = 'PKPmK2v1MFiwMtHYQeWYDc8Xm';  // API Key
-// var twitter_application_secret = 'CI4lzetMya2J87iowjHAwVWO4Up3cTdbhDLFNHo4PNB7y27jmP';  // API Secret
-// var twitter_user_access_token = '1060488553304604672-Z1Pzt1hFGxGDW1WmQ2crSH2ATEmia6';  // Access Token
-// var twitter_user_secret = 'M27VqkmlN5VqPOpBIk55fbhBNEpYzehamg8x1BiKGICha';  // Access Token Secret
-
 console.log(Tesseract ? '--- ready' : '--- not ready')
-OAuth.initialize('3JBEzStiurwZVNiGclBk1zlFrtA');
+
+const OAUTH_PUBLIC_KEY = '';   // Your OAuth public key - oauth.io
 
 // Constants
-const FRAMES_CAM = 100
-const FRAMES_OCR = 400
+const FRAMES_CAM = 100   // apply filter every X ms, default = 100
+const FRAMES_OCR = 400   // recognize text from image every Y ms, default = 400
 
 const WIDTH = 640
 const HEIGHT = 480
-const CropHEIGHT = HEIGHT / 4;
-const CropLENGTH = HEIGHT / 2;
-const DIV = 6;
-const X = WIDTH/DIV, Y = HEIGHT/DIV, W = WIDTH - X*2, H = HEIGHT - Y*2;
-const TIMEOUT = 500; // give time to load jsFeat
+const CropHEIGHT = 120;
 
+// const DIV = 6;
+// const X = WIDTH/DIV, Y = HEIGHT/DIV, W = WIDTH - X*2, H = HEIGHT - Y*2;
 
 // Code
-var twitterOAuth;
-
 var postBody = {
   'status': "Default Tweet, You didn't input anything!",
   'lat': 49.9028729,
   'long': 8.85785939,
 }
 
-// console.log('Ready to Tweet article:\n\t', postBody.status);
-// oauth.post('https://api.twitter.com/1.1/statuses/update.json',
-// 	twitter_user_access_token,  // oauth_token (user access token)
-//     twitter_user_secret,  // oauth_secret (user secret)
-//     postBody,  // post body
-//     '',  // post content type ?
-// 	function(err, data, res) {
-// 		if (err) {
-// 			console.log(err);
-// 		} else {
-// 			// console.log(data);
-// 		}
-// 	});
-
-let video, canvas, ctx, ctx2, ticks = 0, domResult, flag = true, img1, i =0, coords
+let video, canvas, ctx, ctx2, ticks = 0, domResult, img1, i=0, coords, twitterOAuth
 
 const constraints = {
   audio: false,
@@ -56,41 +29,18 @@ const constraints = {
     facingMode: "environment"
   }]
 }
-//
+
 const handleSuccess = (stream) => {
   console.log(' --- stream success');
-  if (navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition((position) => {
-          coords = position.coords;
-          postBody.lat = coords.latitude;
-          postBody.long = coords.longitude;
-        });
-    } else {
-        console.log(" --- Geolocation is not supported by this browser.");
-    }
+  getGeolocation();
+  setTwitter();
+
 	domResult = document.querySelector('#ocr').firstChild;
   video = document.querySelector('#video')
   canvas = document.querySelector('#canvas')
-  video.addEventListener("click", () =>  flag = !flag, false );
-  // OAuth setup popup
-  OAuth.popup('twitter').then(twitter => {
-    console.log(twitter);
-    twitterOAuth = twitter;
-  })
-  // Shift + P to post setup
-  window.addEventListener("keydown", event => {
-      if (event.key == 'p') console.log(postBody);
-      if (event.key == "P") {
-        twitterOAuth.post({
-            //url: "/1.1/statuses/update.json?status=" + encodeURI(postBody)
-            url: "/1.1/statuses/update.json",
-            data: postBody,
-          }).then(tweet => console.log('Posted tweet: "' + tweet.text + '"!'))
-            .fail(err => console.log("Error: " + JSON.parse(err.responseText).errors[0].message));
-      }});
   ctx = canvas.getContext('2d')
   canvas.width = WIDTH
-  canvas.height = 120;
+  canvas.height = CropHEIGHT;
 
   window.stream = stream; // make stream available to browser console
   video.srcObject = stream
@@ -108,39 +58,66 @@ const recognize = () => {
   })
 }
 
+const setTwitter = () => {
+  OAUTH_PUBLIC_KEY == '' ? alert('Missing Oauth Public Key in main.js') : OAuth.initialize(OAUTH_PUBLIC_KEY);
+  OAuth.popup('twitter').then(twitter => {
+    console.log(twitter);
+    twitterOAuth = twitter;
+  })
+  // Shift + P to post setup
+  window.addEventListener("keydown", event => {
+      if (event.key == 'p') console.log(postBody);
+      if (event.key == "P") {
+        twitterOAuth.post({
+            //url: "/1.1/statuses/update.json?status=" + encodeURI(postBody)
+            url: "/1.1/statuses/update.json",
+            data: postBody,
+          }).then(tweet => console.log('Posted tweet: "' + tweet.text + '"!'))
+            .fail(err => console.log("Error: " + JSON.parse(err.responseText).errors[0].message));
+      }});
+}
+
+const getGeolocation = () => {
+  if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition((position) => {
+          coords = position.coords;
+          postBody.lat = coords.latitude;
+          postBody.long = coords.longitude;
+        });
+    } else {
+        console.log(" --- Geolocation is not supported by this browser.");
+    }
+}
+
 const tick = () => {
   ticks++
   window.requestAnimationFrame(tick)
   if (ticks % FRAMES_CAM == 0){
     console.log("--- tick");
     //var myImage = new Image();
     //myImage.src = 'test1.jpg';
-    //ctx.drawImage(myImage, 0, 0 , W, H, 0, 0, W, H);
-    //ctx.drawImage(video, X, Y, W, H, 0, 0, W, H);
-    
-	ctx.drawImage(video, 0, CropHEIGHT, WIDTH, CropHEIGHT, 0, 0, WIDTH, CropHEIGHT);
-      filter();
+    //ctx.drawImage(myImage, 0, 0 , W, H, 0, 0, W, H);     // from Image File
+    //ctx.drawImage(video, X, Y, W, H, 0, 0, W, H);        // from cropped size video
+
+	  ctx.drawImage(video, 0, (HEIGHT - CropHEIGHT) / 2, WIDTH, CropHEIGHT, 0, 0, WIDTH, CropHEIGHT);
+    filter();
   }
   if (ticks % FRAMES_OCR == 0) {
-
     recognize();
   }
 }
 
 const filter = (s) => {
     var imageData = ctx.getImageData(0, 0, WIDTH, CropHEIGHT);
-    if (flag){
-      imageData = Filters.grayscale(imageData);
-      imageData = Filters.filterImage(Filters.convolute, imageData,
-        [  0, -1,  0,
-          -1,  5, -1,
-           0, -1,  0 ]
-//         [-1, -1, -1,
+    imageData = Filters.grayscale(imageData);
+    imageData = Filters.filterImage(Filters.convolute, imageData,
+      [  0, -1,  0,
+        -1,  5, -1,
+         0, -1,  0 ]
+//         [-1, -1, -1,    // different kind of filter, the center of matrix can 9, 10, 11
 //          -1,  9, -1,
 //          -1, -1, -1]
     );
-  } else imageData = Filters.grayscale(imageData);
-
 
     if (document.querySelector("#range1").innerText !== document.querySelector("#threshold").value)
       document.querySelector("#range1").innerText = document.querySelector("#threshold").value;

diff --git a/styles.css b/styles.css
@@ -0,0 +1,18 @@
+p { display: inline-block; }
+
+canvas { display: inline-block; border-radius: 5px; vertical-align: top; margin-top: 200px;}
+video { display: inline-block; border-radius: 5px}
+
+li {
+    display: inline;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+body {
+  padding-top: 40px;
+  text-align: center;
+  font-family: monaco, monospace;
+  color: whitesmoke;
+  background-color: black;
+}