sbs

sbs

QRCode - Implement QR Code in Elixir

Only 650 LOC, wrote for fun :slight_smile:

Most Liked

Eiji

Eiji

@Raddi_On:
You can use for example request for json.
For example:

defmodule MyAppWeb.Controllers.ExampleController do
  def action_name(conn, %{param_name: param_value}) do
    matrix = QRCode.encode(param_value).matrix
    data = matrix |> Tuple.to_list() |> Enum.map(&Tuple.to_list/1)
    json(conn, data)
  end
end

You can also use probably Drab:

Eiji

Eiji

@Raddi_On: Just few steps:

  1. Of course you need somehow send these data to JavaScript (let’s say in json format)
  2. You need a simple function that draws qrcode - it’s just matrix of 0 (white) and 1 (black) squares. Drawing squares in canvas is one of the easiest things to do.
  3. You need to use export as I already show

I will show you how it could look in Elixir:

defmodule Example do
  # @canvas ...

  def draw_image(matrix) do
    # firstly we need to have enumarable - not tuples, so:
    matrix
    |> Tuple.to_list()
    |> Enum.map(&Tuple.to_list/1)
    # then we need to have a row numbers like:
    |> Enum.with_index()
    # then for all rows:
    |> Enum.map(&draw_row/1)
  end

  defp draw_row({row, index}) do
    row
    # we need to know also column index:
    |> Enum.with_index()
    # then for all cells in row:
    |> Enum.map(&draw_cell(&1, index))
  end

  defp draw_cell({0, column}, row) do
    do_draw_cell(row, column, {255, 255, 255})
  end
  defp draw_cell({1, column}, row) do
    do_draw_cell(row, column, {0, 0, 0})
  end

  defp do_draw_cell(row, column, color) do
    # you have row, column and color to draw
    # simply calculate `x` and `y` like:
    square_size = 5
    x = column * square_size
    y = row * square_size
    # now you can call real draw function
    # with x, y, width (square_size), height (square_size) 
    # and finally fill it with color
    Canvas.draw(@canvas, x, y, square_size, square_size, color)
    # use canvas HTML5 API to export image
    # for example on download button click
  end
end

As you can see square coordinates are noting special. You just need to know in which row and column you are and simply multiply them by number of pixels that you wish to have for each cell.

Eiji

Eiji

@sbs: No need to implement png encoder from scratch. Just draw QR code in canvas and add simple option to export it. :smiley:

For example you can draw a canvas and change it to image really easy in JavaScript:

var canvas = document.querySelector("canvas#selector.here");
var data = canvas.toDataURL("image/png");
document.write('<img src="' + data + '"/>');

It’s much more simpler and allows to simple export in much more formats without any library for this!

Where Next?

Popular in Announcing Top

Crowdhailer
The latest release of Ace (0.10.0) includes serving content over HTTP/2. I have started writing a webserver to teach my self more about...
New
jakub-zawislak
Hi everyone, I’m coming from the Symfony (PHP) framework. I like Phoenix, but it has a one thing that was build much better in the Symfo...
New
mspanc
I am pleased to announce an initial release of the Membrane Framework - an Elixir-based framework with special focus on processing multim...
New
mtrudel
Bandit is an HTTP server for Plug and WebSock apps. Bandit is written entirely in Elixir and is built atop Thousand Island. It can serve...
New
Crowdhailer
Experimenting with this code. OK.try do user &lt;- fetch_user(1) cart &lt;- fetch_cart(1) order = checkout(cart, user) save_or...
New
Qqwy
Hello everyone, I wrote a small library today called MapDiff. It returns a map listing the (smallest amount of) changes to get from map...
New
cjen07
parameterized pipe in elixir: |n&gt; edit: negative index in |n&gt; and mixed usage with |&gt; are supported example: use ParamP...
New
oltarasenko
Dear Elixir community, After a year of development, bug fixes, and improvements, we are proudly ready to share the release of Crawly 0.1...
New
New
tmbb
I’ve decided to create this topic to discuss optimization possibilities for something like Phoenix LiveView. I’ve created this topic unde...
144 10140 141
New

Other popular topics Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
johnnyicon
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I fore...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I'm a nov...
New
hariharasudhan94
Lets say i have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; "XX...
New

We're in Beta

About us Mission Statement