qrcode with css helper

gistfile1.rb

module QrCodeHelper

  def qr_code(string, options={})
    base_size = options.fetch(:width, 200)
    @qr_logo = options.fetch(:logo, "qr_code_logo.png")
    @qr_logo_size = options.fetch(:logo_size, 48)
    level = options.fetch(:level, :l)

    @qr_data = RQRCode::QRCode.new(string, level: level).to_s.split("\n").collect(&:chars)
    @qr_size = @qr_data.size
    @bit_size = base_size / @qr_size.to_f;
    make_qr_code
  end

  private

  def make_qr_code
    content_tag :div, id: "qrcode" do
      concat qr_content
      concat logo
    end
  end

  def anchor_position?(r, c)
    (r < 7 && c < 7) || (r >= @qr_size - 7 && c < 7) || (r < 7 && c >= @qr_size - 7 )
  end

  def active?(r,c)
    @qr_data[r][c] == "x"
  end

  def class_for_anchor(r,c)
    o_top = r == 0 || r == @qr_size - 7
    o_bottom = r == 6 || r == @qr_size -1
    o_left = c == 0 || c == @qr_size - 7
    o_right = c == 6 || c == @qr_size - 1

    i_top = r == 2 || r == @qr_size - 5
    i_bottom = r == 4 || r == @qr_size -3
    i_left = c == 2 || c == @qr_size - 5
    i_right = c == 4 || c == @qr_size - 3

    clazz = ""
    if o_top && o_left || i_top && i_left
      clazz = "rounded-tl"
    end

    if o_top && o_right || i_top && i_right
      clazz = "rounded-tr"
    end

    if o_bottom && o_left || i_bottom && i_left
      clazz = "rounded-bl"
    end

    if o_bottom && o_right || i_bottom && i_right
      clazz = "rounded-br"
    end

    clazz << " outter" if o_top || o_bottom || o_left || o_right
    clazz << " inner" if i_top || i_bottom || i_left || i_right
    clazz
  end

  def class_for_position(r, c)
    if active?(r,c)
      if anchor_position?(r,c)
        clazz = "square"
        clazz << " #{class_for_anchor(r,c)}"
      else
        clazz = "round"
      end
    end
    clazz
  end

  def make_col(col, c, r)
    content_tag(:div, nil, style: "width: #{@bit_size}px; height: #{@bit_size}px;", class: "c #{class_for_position(r, c)}")
  end

  def make_row(row, r)
    content_tag(:div, style: "height: #{@bit_size}px;", class: "r", data: {row: r}) do
      row.each_with_index.collect do |col, c|
        make_col(col, c, r)
      end.join.html_safe
    end
  end

  def qr_content
    @qr_data.each_with_index.collect do |row, r|
      make_row(row, r)
    end.join.html_safe
  end

  def logo
    image_tag(@qr_logo, height: @qr_logo_size, style: "margin-top: -#{@qr_logo_size / 2}px; margin-left: -#{@qr_logo_size / 2}px")
  end

end




#qrcode {
  $size: 1px;
  display: inline-block;
  position: relative;
  .r {
    height: $size;
    display: block;
    line-height: $size;
    font-size: 0;
    margin: 0;
    padding: 0;
    letter-spacing: 0;
    .c {
      height: $size;
      width: $size;
      display: inline-block;
      line-height: $size;
      background: $white;
      &.round, &.square {
        background: $text-color;
      }
      &.round {
        border-radius: 50%;
      }
    }
    .rounded-tl {border-radius: 10px 0 0 0 }
    .rounded-tr {border-radius: 0 10px 0 0 }
    .rounded-br {border-radius: 0 0 10px 0 }
    .rounded-bl {border-radius: 0 0 0 10px }

    .rounded-tl.outter, .rounded-br.outter {border-radius: 0 0 0 0!important;}
    .rounded-tr.inner, .rounded-bl.inner {border-radius: 0 0 0 0!important;}
    .square.outter, .square.outter{
      background: $primary!important;
      opacity: 0.75;
    }
    .square {
      opacity: 0.65;
    }
  }
  > img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10000;
  }
}