Help for where to start with QR Code

Hello,
I would like to build a graphical communication protocol like QR Code with JS. but I don’t know where to start. Is it possible with JS and which technologies do i need ?
I have to precise that I don’t have to use any library and I have to built it from scratch.
Can someone help me please and give me advice.
Thanks.

Where does this insane requirement of “use no libraries” come from? Node is a library, so count that out, for one. No image manipulation libraries either. And I guess you can’t use this library either (first hit on google for “qr code reader javascript”)

Seriously, if you want less snarky responses, use a library. Your task is simply impossible without them.

So for a standard barcode. Say you have a string. You are going to want to map each character some code.

Decide on what each possible character you are going to allow should map to. For simplicity, it would help if these mappings are all the same length. For ease, map them to binary strings (so would look like, for example “1101011101”).

  1. Take the data, and encode:
  2. Convert each character, so “hello” turns into “110100101101001111010101101010…”
  3. 1 is a black bar, 0 is a space. You can draw it using canvas or SVG whatever. Say 1 unit for 1 piece of a character’s code, so if your binary string for any given character is 10 units long, it takes 10 units to draw it.
  4. This is decodable: You know how big the binary string is for each character (say it’s 10), and you can count 10 units in, check where the areas of black are, and that gives you a binary string for a given character. Then count ten more units in and so on.

A QR code is the same base logic, but it’s 2D, so you place the areas of black into a matrix instead of them just being linear.

It doesn’t matter how you represent the data once you have a way to programmatically encode/decode, it could be all different kinds of emojis, or different pictures of amusing dogs, or different sound clips of Oscar prize speeches. It won’t work very well, because the difficulty is not in encoding some representation, it’s how you physically decode it. This is why you use a library, because then you use an internationally-standardized method that physical reader tech can read.

@DanCouper yeah this is exactly what I need but for exemple how lenght of byte do I have to encode message.
Can you more explain me about encoding and decoding the message.
Thanks

:man_shrugging: I have no idea what you’re trying to encode, that’s up to you.

What I wrote is a very basic description of how barcodes work, this is the first thing I pulled off google that seems to give an good overall view of the cipher used for a common format (CODE 128):

Encode:

Take some data, say a string.
Split the string into characters.
Have a map of character → code, where all the codes are the same length.
Map each character to the code.

Decode:

Read the list of codes
Have a map of code → character
Convert the codes to characters.
Join the characters back into a string

So say you allow just the letters of the English alphabet, and number them a: 01, b: 02 and so on. And say a space character is 00. So “hello world” would map to “0805121215002315181204”. There is the code. To decode, take every two characters and map the code to the correct letter/space, so back to “hello world”

Again, this is not the difficult part: you can do this with a pen and paper or whatever, people have been doing it for thousands of years. As long as you know how a character maps to a code and vice versa, how you implement it is entirely up to you. But the issue is that if you just make one up, you now need to know how to print it out in image form in such a way that it can be read. Then you need technology that understands the encoding, and can take that image of that printout then calculate accurately how it is broken down into individual codes. And again, this is something people have done for thousands of years, for example, from the 1500s: Vigenère cipher - Wikipedia

Hello again @DanCouper I created a protocol as you said by the way thanks for that so as you said the problem is how to display it in an image and make it readable. So I’m wondering between Java et JS witch one have more image manipulation library.
I though I was not so clear about what I said “built from scratch” that’s not mean I can’t use image manipulation library but I can’t use QR code make library those already exists.

I changed my encode and decode function now I’m using charCodeAt function which is JS built-in function and some special caracter for encode but I need help for put it in matrix and keep it readable and at the end make a graphical things.