find all connected pixels on an image - javascript or PHP - javascript

I am trying to build a simple OCR system (if there is such a thing!)
I have a successful working model (90% recognition - which I call success :-P) for single characters - I am now trying to make it recognise multiple characters.
What I want to do is find all connected pixels (this system is designed for none joined up writing only)
so if I read across a 1 pixel high line i find a 'black' pixel - how would I then find every connected pixel - efficiently :-P
I could brute force it by literally looking at the pixel above, below, right and left and then looking at each of those pixels in the same manner but I am assuming there is a better methodology.
Or is it better to add every pixel to a matrix and then do comparisons on it then?
I basically want to output a multi dimensional array along the lines of:
1 1 1 1
1 1 1 1
0 1 1 0
0 1 1 0
0 1 1 0
0 1 1 0
1 1 1 1
1 1 1 1
Which would be a capital I
Javascript is what it is written in, but if someone has the method in PHP I should be able to convert (unless it has multiple libraries needed!)
Hope that is clear - any further info please ask in comments.

Related

Reading File, Segregating and Tesseract.js Performance

I'm trying to read a file whose content is a bunch of Multiple Choice Questions jot down together like below:
SCHOOL NAME NAME OF EXAMINATION sto-vit TIME ;2 HOURS MAXIMUM MARKS 50
LFill in the blanks Marks -15 1 =0 2 (D157 39k IL True of false Marks
-5 1. Integers are closed under subtraction 2. Difference of two negative integers cannot be a positive integer. IIL. Evaluate using
distributivity property:- Marks - 10 1. -39x99 2. 8543+ 43x-15
3.53%9--109x53 4. 6817+ 683 IV. Solve the problems:- Marks - 10 1. A vehicle covers a distance of 43.2 km in 2.4 litre of petrol. How much
distance will it cover in 1 litre of petrol? V. Evaluate:- Marks - 10
11005105 2. 10101 %001
I have got this by reading an image (a question paper) with the help of Tesseract.js.
First of all, some of the mathematical digits including decimal points are omitted. Can I improve the performance?
Is there a way to identify the questions with their options separately so that it can be stored in a database for people to answer?
The object can be of this format:
{
[
q: 'Which website is this?',
options: ['Github', 'Stackoverflow', 'Google']
],
[
...
]
}

Can I represent NULL for a specific bit in a byte flag?

I have a simple byte flag with two bits that represents if a person was invited to, and is attending, an online interview. Attendance is represented by two Radio selectors in a form, and could be either Yes, No, or NULL. Invited can be NULL.
bit index 0 = INVITED?
bit index 1 = ATTENDING?
7 6 5 4 3 2 1 0 bit index
=========================================================
128 64 32 16 8 4 2 1 binary notation
=========================================================
1 1 invited, attending
1 0 invited, not attending
0 1 not invited, attending
0 0 not invited, not attending
The user can change the Attending bit via radio controls in the
form. It can be Yes, No, or NULL.
The user cannot switch the Invited bit. It is set to 1 on initial
import, otherwise, it is NULL.
The Invited bit is set to 1 upon initial import into the
application. However, the Attending bit should be NULL, since there
we don't know yet if they're attending.
That's my problem!! The Attending bit is naturally 0, because the user hasn't confirmed if you are attending.
I don't know how to represent the state of "on initial import, Attendance is unconfirmed"
Can I represent a "NULL" state at bit index 1? Should I just add an additional bit to represent an unconfirmed state? Should I change my byte flag to better represent what's going on?
Something like this. I would have to remember to clear bit index 2.
bit index 0 = INVITED?
bit index 1 = ATTENDING?
bit index 2 = UNCONFIMRED ATTENDANCE?
7 6 5 4 3 2 1 0 bit index
=========================================================
128 64 32 16 8 4 2 1 binary notation
=========================================================
1 0 1 invited, not attending, attendance not established yet
0 1 1 invited, attending, attendance established

how to print 1 when user enters 0 in input field without using any condition or loop in java script

yesterday i went to an interview i was asked a question which is below
Create an input field and button user should enter only 0 or 1 when the user enters 0 the output should be 1. when the user enters 1 the output should be 0. Write the logic of minimum 5 possible way of the output?
Note:
We should not use any if,for,while,do while,if else,switch,.. (no condition and loops) should be used.
It should be done in java script and minimum 5 possible way to print the out .
I don't know whether it is possible or not for 5 times. if any one knows please help me
One possibility is to use bitwise operators:
console.log(~ document.getElementById('input_field').value + 2 );
~ Inverts the bits, so you will get -2 for the input 1 and -1 for the input 0. Then just add 2 to get your result.
Edit #2:
console.log(document.getElementById('input_field').value ^ 1);
Using the XOR (^) Operator.
Edit #3:
Plain simple, just subtract the input from 1:
console.log(1 - document.getElementById('input_field').value);

What is the meaning of "<<" in javascript? [duplicate]

This question already has answers here:
What are bitwise shift (bit-shift) operators and how do they work?
(10 answers)
Closed 6 years ago.
A user named ZPiDER answered a question about generating random colour strings in JS.
Random color generator in JavaScript
This is the code:
"#"+((1<<24)*Math.random()|0).toString(16)
I am trying to parse it to understand how it works but I really don't get it. Could someone please Explain what the << means?
I tried google but I suspect that the search engines interpret the characters as special somehow.
It is the left shift operator just like in many other languages like C or Java.
1<<24 means, the 1 left shifted by 24 bits, so you get 0x1000000. Multiplied by a random value (that is from 0 inclusive to 1 exclusive) you get something between 0x000000 and 0xFFFFFF. This is exactly what you want to do for a random color.
But keep in mind, that the author of this code does not respect, that this random function does not generated uniformly distributed random values. So it is likely that you do not get a "real" random color, but something very close to it.
This is a bit shift: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators
The number 1 (2^0) is being shifted left 24 bits to become 16777216 (2^24). From the documentation:
<< (Left shift)
This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.
For example, 9 << 2 yields 36:
<< or >> is bit operation, bit shift. This takes two arguments, for example
x << y. This is x: 1 1 0 0 0 1 1 1 . Lets shift it by 3 bytes right: 1 1 1 1 1 0 0 0

Getting data for a Google Line Chart Visualization from PHP/MySQL

I'm trying to build a Google Line Chart with MySQL data and while I understand Javascript and how to get data with PHP I'm having a hard time wrapping my head around getting and/or formatting the data in the correct manner.
Right now my table looks like this
PERSON WEEK PRODUCTION
Bob 2 1
Bob 3 0
Bob 4 0
Bob 5 2
Bob 6 0
Paul 1 0
Paul 2 0
Paul 3 0
Paul 4 2
Paul 5 3
Paul 6 1
Mike 1 0
Mike 2 1
Mike 3 1
Mike 4 4
Mike 5 0
Mike 6 1
Ron 1 1
Ron 3 0
Ron 4 0
Ron 6 0
And the graph I essentially want create looks like this
I was able to make that in the Google Code Playground by manually tweaking the data to look like this
WEEK BOB PAUL MIKE RON
1 0 0 0 1
2 1 0 1 0
3 0 0 1 0
4 0 2 4 0
5 5 3 0 0
6 0 1 1 0
So my big question though is how do I do this in an automated fashion? Obviously I need to either modify my sql query to do the heavy lifting there or massage the data with PHP afterwards, but I'm as lost as a babe in the woods on how to do that. Further complicating the issue, at least in my eyes, is that in the original data set not every has all the weeks, but needs them to be created and zero'ed out in the final result set. Also while I'm showing 4 persons it could be 1 to N.
If anyone could point me in the right direction I would be eternally grateful!
UPDATE
#asgallant pointed me to this example he had written up - http://jsfiddle.net/asgallant/HkjDe/
I tried implementing the solution he presented, which can be seen here - http://thejspot.ws/qa/table.php
While the first table populates, the second table never displays. I've tracked it down to this line of code, but I'm not sure what the issue is.
var pivotedData = google.visualization.data.group(view, [0], groupColumns);
Any suggestions?

Categories

Resources