Virtual gift card in javascript

Sunday, 16 October 2022
Écrit par
Grégory Soutadé

For a birthday I wanted to offer a gift card (something to buy online or later). As I don't have a printer, I decided to create a simple web page containing this card. The address has to be flashed by a Qr Code. But, instead of directly display the gift, I wanted to have something that the person has to discover progressively.

With a little bit of javascript and thanks to HTML5 Canvas API, we can do it easily ! The idea is to create a canvas and then fill the blurred gift or a gift paper. When the person click and drag the mouse over the card, it progressively draw the clear gift card.

Here, I hardcoded some values, but it's possible to get them from image details and do it fully dynamic (Canvas API allows to scale drawn pictures in drawImage() method). Some parts of the code is just a copy/paste from Internet (sorry for copyright, I didn't save the link).

Or the same image with a gift paper :

Javascript source code :

    <canvas id="canvas" width="400" height="200" style="cursor:url(cursor32.png), auto ;">
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      var rect = {};
      var drag = false;
      var imageObj = null, image2Obj = null;

      function init() {
          imageObj = new Image();

          // Gift paper version
          imageObj.onload = function () { ctx.drawImage(imageObj, 0, 0); };
          imageObj.src = 'paper.jpg';

          // Blur version
          imageObj.onload = function () { ctx.filter = 'blur(15px)'; ctx.drawImage(imageObj, 0, 0); ctx.filter = 'none'; };
          imageObj.src = 'gift.jpg';

          // Next
          image2Obj = new Image();
          image2Obj.src = 'gift.jpg';

          canvas.addEventListener('mousedown', mouseDown, false);
          canvas.addEventListener('mouseup', mouseUp, false);
          canvas.addEventListener('mousemove', mouseMove, false);
          canvas.addEventListener('touchstart', touchStart, false);
          canvas.addEventListener('touchmove', touchMove, false);

      function drawClearImage(x, y)
          var canvasRect = canvas.getBoundingClientRect();
          rect.startX = x - canvasRect.left - 5;
          rect.startY = y - - 5;
          if (rect.startX < 0) rect.startX = 0;
          if (rect.startY < 0) rect.startY = 0;

          ctx.drawImage(image2Obj, rect.startX, rect.startY, 40, 40, rect.startX, rect.startY, 40, 40);
      function mouseDown(e) {
          drag = true;
          drawClearImage(e.clientX, e.clientY);

      function mouseUp(e) { drag = false; }

      function mouseMove(e) {
          if (drag)
              drawClearImage(e.clientX, e.clientY);

      function drawClearImageForTouch(x, y)
          var canvasRect = canvas.getBoundingClientRect();
          rect.startX = x - canvasRect.left - 60;
          rect.startY = y - - 60;
          if (rect.startX < 0) rect.startX = 0;
          if (rect.startY < 0) rect.startY = 0;
          ctx.drawImage(image2Obj, rect.startX, rect.startY, 120, 120, rect.startX, rect.startY, 120, 120);

      function touchStart(e) {
          for (var i=0; i<e.changedTouches.length; i++)
              drawClearImage(e.changedTouches[i].clientX, e.changedTouches[i].clientY);

      function touchMove(e) {
          for (var i=0; i<e.changedTouches.length; i++)
              drawClearImage(e.changedTouches[i].clientX, e.changedTouches[i].clientY);



gPass 1.2

Saturday, 08 October 2022
Écrit par
Grégory Soutadé

Logo gPass

Reminder : gPass is an online password manager. It's a free, open source and self hostable alternative to laspass. All of your passwords are stored encrypted on YOUR server and you're the only one to know the master key needed to decrypt them.

Some weeks ago I received an email from Chrome's team asking me to remove one unused permission to gPass webextension with a delay of 14 days. It makes me see that manifest v2 will not be supported starting 2023, so I decided to migrate my extension to manifest v3. What a hell ! A lot of things changed with apparently no reason. After struggling a long week trying only yo keep the same functionalities, I was able to submit a new version !

So, main changes since v1 are :

Server side :

  • Remove old v1 crypto
  • When decrypting a password for a specific website, go to the entry
  • New UI (the first one was very ugly)
  • You can filter results for masterkey validation (avoid to display all your passwords to everyone)
  • Add a button to copy password into clipboard
  • Change button's name instead of displaying an alert

Client side :

  • Update to manifest v3 (Chrome only)
  • Add an option to deactivate form's hook
  • Some bug fixes
  • Add a checkbox in popup to copy password into clipboard

Extensions are available here (Firefox) and there (Chrome). You can download server side on my project page.

Libgourou v0.8

Sunday, 11 September 2022
Écrit par
Grégory Soutadé

Reminder : Libgourou is a free ADEPT protocol implementation (from Adobe) that helps download ACSM files from Linux.

Good news, libgourou v0.8 is out now !

I missed to speak about it since v0.5 (april 2022), but a lot of work has been done :

  • Bug fixes, especially in PDF part
  • Qt has been replaced by libcurl (lighter & better display when downloading ePub)
  • Option to resume (big) downloads that may have failed
  • Manage loaned (and returnable) books
  • Migrate utils to OpenSSL 3
  • Integrate Base64 code into sources
  • Support for over encrypted private key when removing DRM (192 bytes keys)

Another improvement asked by a lot of people is the build of an AppImage. I don't really like it because it's big and you do not receive (security) updates from your package manager, but it allows to run on most of Linux platforms by embedding all necessary dependencies.

Gimp tutorial : Custom sepia tone effect

Sunday, 06 February 2022
Écrit par
Grégory Soutadé

Sepia filters were re popularized some years ago with instagram filters before disappear once again. It helps create some nice "old style" picture effects or simply for artistic pictures. Gimp offers a quick menu to change your picture into sepia colors. But I don't really agree with this filter as it's more N&B + dark yellow rather than red/brown/bronze tones. Here is a small and simple tutorial to get custom effect.

First, let's take a random picture from

Original picture

Then, we simply apply Gimp effect

Colors -> Desaturate -> Sepia

Gimp sepia effect

After that, we have to create a new transparent layer and select a red like color (195 / 22 / 22 for instance)

Fill created layer with this color and change mixing mode to "Hard light"

Select Mode -> Hard Light

Finally, play with opacity (here 30%)

Final result

Source color is a key parameter for effect tuning. It allows lighter or darker result. Opacity has also to be adjusted for each picture depending on original luminosity.

Another example with a darker color mask (108 / 19 / 19) and 50% opacity. We get something more brown and heavier :

Brown result

Libgourou v0.5

Sunday, 19 December 2021
Écrit par
Grégory Soutadé

Reminder : Libgourou is a free ADEPT protocol implementation (from Adobe) that helps download ACSM files from Linux.

It's Christmas soon. A time of heavy natural resources consumption, in all domains, because tradition and technological progress makes earth burning a bit more again and again. I suggest you to offer culture more than stupid and useless things.

And, what a good news, I have a gift for you ! Libgourou in version 0.5. It doesn't look like great as it's not the v1.0, but it's a big update. First versions were mainly bugfixes (plus PDF support) and I would like to tkank everyone who reported all that, more or less, stupid bugs. Reporting is not funny, but very useful for me and everybody.

So, my first intention when I created libgourou was not to support DRM removal but I saw a lot of people buying PDF (while I was focused on ePub). Using an eReader for reading PDF is not the best solution, big colored screens are so much better. After a long work in both libgourou and uPDFParser, you can now use the new adept_remove utility to remove DRM form ePub AND PDF ! Another good thing is the add of anonymous account support (no need to create or use your account from I recommend to use anonymous account only with a DRM removal software (like adept_remove), because the book will not be linked to your account and in case of failure, you'll have to buy/loan it once again.

I hope you'll enjoy this release. You can retrieve source code here or directly download pre compiled binaries (for Debian testing) here.

See you in 2022 !