Enhanced Electronic Library Cards in Koha

In today’s digital age, forgetting your wallet no longer spells disaster. From mobile payments for your morning coffee to e-tickets for public transport and concerts, digital solutions streamline everyday tasks. But what about a visit to your local library?

Thanks to this blog post by Lucas Gass from ByWater, we know that patrons leaving their library card at home is no longer a problem, thanks to the introduction of electronic library cards. Building on this foundation, the latest enhancement to electronic library cards adds personalisation and offers the opportunity to take functionality to new heights.

Inspired by the physical ID cards used by many university libraries, the electronic library cards now boast the addition of patron images, allowing them to be used as electronic ID cards across the campus. With this in mind, the electronic library cards have been styled to mirror their traditional counterparts, including the addition of the establishment’s logo and the display of the card holder’s role.

Adding the enhancements:

Building on the existing report used to return the correct card number, we can add a few simple adjustments to access patron images and roles:

SELECT
    borrowers.categorycode,
    borrowers.cardnumber
FROM
    borrowers
JOIN categories ON borrowers.categorycode = categories.categorycode
WHERE
    borrowers.borrowernumber = <>

Base64 Encoding

You will notice that the patronimage.imagefile undergoes a process called TO_BASE64. This converts the binary data of the image into a ASCII string format. This is a text-based format, making it easier to transmit the image data, especially when working with web technologies such as jQuery, which primarily deal with text data.

As noted in the previous blog from ByWater, you will want to make sure this report is public before you save it and make a note of the report number.

jQuery

Now let’s move across to the OPACUserJS system preference and adjust the custom jQuery. You can replace the previous /* start e-card jQuery*/ with the following:

/* start e-card jQuery */
$(document).ready(function () {
  if ($("#usermenu").length) {
    var ecard_report_number = 420;
    var eborrowernumber = $(".loggedinusername").attr("data-borrowernumber");

    $.getJSON('/cgi-bin/koha/svc/report?id=' + ecard_report_number + '&sql_params=' + eborrowernumber)
      .done(function (data) {
        if (Array.isArray(data) && data.length > 0) {
          $.each(data, function (index, value) {
              console.log("Data at index", index, ":", value);
            var ecard_number = data[0][0];
            console.log("ecard_number: ", ecard_number);
            var ecard_name_obj = $(".userlabel").text();
            var ecard_image = data[0][1];
            var ecard_name = ecard_name_obj.split("Welcome, ")[1];
            var ecard_role = data[0][2] || "Unknown Role";
            console.log('role: ', ecard_role);

            $("#menu").prepend(
              'Your Library Card'
            );

            var logo_html = ecard_image 
              ? ''
              : '
Logo Here
';

            $("body").append(
              '
 
 
 
 
Your Library eCard
 
 
' +
                logo_html +
                '
' +
                ecard_name +
                ' 
' + ecard_role + '
  
 Close 
'
            );

            $.getScript("https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.min.js")
              .done(function (script, textStatus) {
                console.log("JsBarcode script loaded successfully.");
                var element = document.getElementById("barcode_placeholder");
                if (element) {
                  console.log("Barcode element found:", element);
                  try {
                    JsBarcode(element, ecard_number, {
                      format: "codabar", 
                      width: 3,
                      height: 75,
                      displayValue: true,
                    });
                    console.log("Barcode generated successfully with codabar format.");
                  } catch (e) {
                    console.error("Error generating barcode with codabar format:", e);
                    // Fallback to another format if codabar fails
                    try {
                      JsBarcode(element, ecard_number, {
                        format: "CODE128",
                        width: 4,
                        height: 75,
                        displayValue: true,
                        fontSize: 10,
                      });
                      console.log("Barcode generated successfully with CODE128 format.");
                    } catch (e) {
                      console.error("Error generating barcode with CODE128 format:", e);
                    }
                  }
                } else {
                  console.error("Barcode placeholder element not found.");
                }
              })
              .fail(function (jqxhr, settings, exception) {
                console.error("Failed to load JsBarcode script:", exception);
              });
          });
        } else {
          console.error("No data received or data format is incorrect.");
        }
      })
      .fail(function (jqxhr, textStatus, error) {
        console.error("Failed to fetch report data:", error);
      });
  }
});
/* end e-card query */

Lines you will need to edit:

Let ecard_report_number = 420;

Make sure that the report number corresponds to the report number you noted earlier.

If you want to include your library’s logo, replace the path to your image in the ‘src’ section and adjust the title of your logo.

Styling

Finally, let’s update the OPACUserCSS System Preference to reflect the layout of the physical ID cards:

/* e-card css */
#library_ecard{ 
border: 4px solid #003D50; 
border-radius: 7px; 
display: flex;
flex-direction: column;
  align-items: center;
height: 290px;
}

.fa-user-circle-o {
 font-size: 12vw !important;
 padding: 15px;
}

#barcode_placeholder {
  width: 100%;
  height: 70%;
  align-items: right;
  display: flex;
  align-self: center;
}

#photo {
  width: 33%;
  height: 100%;
}

#photo img {
  width: 100%;
  height: 100%;
}

#name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 60%;
  height: 100%;
}

#name span h2{
  font-size: 1.6vw;
  width: 100%;
  padding-left: 5px;
}

#logo_here {
  width: 100%;
  height: 65%;
}

#name_photo {
 display: flex;
 flex-direction: row-reverse;
 position: relative;
 align-items: center;
 justify-content:space-between;
 padding: 10px 15px 10px 15px;
 width:100%;
 height: 60%;
}

#barcode_role_container {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
}

#role {
  height: 50%;
  padding-left: 20px;
}
/* end e-card css */

That’s it! Your electronic library card will now reflect the latest enhancements.