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 :

    <center>
    <canvas id="canvas" width="400" height="200" style="cursor:url(cursor32.png), auto ;">
    </canvas>
    </center>
    <script>
      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 - canvasRect.top - 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 - canvasRect.top - 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);
      }

      //
      init();

    </script>

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.

La version 3 de mon extension Generic Monitor pour Gnome Shell vient d'être revue et validée ! Tout est parti d'un ticket ouvert sur ma forge me demandant si l'on ne pouvait pas ajouter un popup pour faire une prévisualisation d'une image ou autre. Je me suis dit qu'il suffirait de dériver mon objet principal d'un objet menu et le tour serait joué.

Finalement j'ai dû retravailler tout le code, changer le protocole et ajouter des nouveaux signaux !

Changements principaux :

• Nouveau protocole DBUS un peu plus verbeux car l'on passe désormais des "objets" JSON en paramètre (pour le moment la rétro compatibilité est assurée)
• Ajout d'un exemple picture.py permettant d'afficher une image aléatoire du site unsplash.com
• Possibilité d'avoir des actions différentes pour les sous catégories de clicks : gauche, double et droits
• Ajout des signaux onEnter, onLeave, onScrollUp et onScrollDown
• Ajout d'un objet popup pouvant accepter des objets textes et images

Les sources sont disponibles sur ma forge

Let's play with some strangefun C stuff related to macro implementation in GCC compiler.

In the next code, we will work on this kind of structure which is a basic implementation of a matrix structure :

typedef struct {
  int width;
  int height;
  double* data;
} matrix;

In a standard algorithm implementation, we would use malloc() for at least .data field. But, in embedded world, it's preferable to use static allocations (if we use "static" matrices with known parameters).

Use an array as a C macro parameter

First trap of our compiler. We want to statically initalize an array like this :

#define STATIC_ARRAY(_name, _values) double _name[] = _values

STATIC_ARRAY(myArray, {0.0, 0.1, 0.2};

Compilation returns this error :

b.c:5:38: error: macro "STATIC_ARRAY" passed 4 arguments, but takes just 2
STATIC_ARRAY(myArray, {0.0, 0.1, 0.2});

The second argument is not considered as an array, but a list of arguments. My question is WHY ??? This seems a non sense as the goal of macros is to copy paste without interpretation.

Solution I found is to use a variadic macro parameter. This will only works for one array value.

#define STATIC_ARRAY(_name, ...) double _name[] = __VA_ARGS__

STATIC_ARRAY(myArray, {0.0, 0.1, 0.2});

In flight shadow array

Another problem come if I make a more complex macro to initialize my structure. Basically, we may do something like this :

#define STATIC_MATRIX(_name, _width, _height, ...)          \
  static matrix _name = {.width = _width, .height=_height, .data=__VA_ARGS__}

STATIC_MATRIX(myMat, 2,2, {0.0, 0.1, 0.2, 0.3});

Which give a wonderful error :

b.c:13:1: warning: braces around scalar initializer
STATIC_MATRIX(myMat, 2,2, {0.0, 0.1, 0.2, 0.3});
^
b.c:13:1: note: (near initialization for ‘myMat.data’)
b.c:13:28: error: incompatible types when initializing type ‘double *’ using type ‘double’
STATIC_MATRIX(myMat, 2,2, {0.0, 0.1, 0.2, 0.3});

The correct way to initialize our structure is to declare an array and affect it to .data field. We can embbed this declaration in macro definition :

#define CONCAT_DIRECT(s1, s2) s1##s2
#define CONCAT(s1, s2) CONCAT_DIRECT(s1, s2)

#define STATIC_MATRIX(_mat, _w, _h, ...)            \
static double CONCAT(sarr_,__LINE__)[]=__VA_ARGS__;static matrix _mat={.width=_w,.height=_h,.data=CONCAT(sarr_,__LINE__)}

STATIC_MATRIX(myMat, 2,2, {0.0, 0.1, 0.2, 0.3});

This a bit long, but it works ! The macro creates two statics objects, one named by user and one which is unique thanks to line number concatenation. Note, that we cannot split it on two lines due to line number in the name.

We can modify this macro (or create a new one) by removing static attributes. In this case, be careful if you define it in an header, and use it in two separate file at the same line. It could be interesting to use static objects or not depending on variables usage.

Another improvement could be to create const array if data is not updated. Thus, compiler can use a the same memory space for multiple matrix arrays with the same values.

Last but not least. Here, the created array has a variable length that depends on value in parameter. We can fix its size with :

static double CONCATENATE(static_darray_,__LINE__)[_width*_height]

La version 2 de mon extension Generic Monitor pour Gnome Shell vient d'être validée ! Le choix de sortir une seconde version rapidement est volontaire. Il s'agissait de suivre le modèle RERO (Release Early, Release Often). La v1 posait la fonctionnalité de base, tandis que la v2 apporte (presque) tout ce qui manquait. Le but étant aussi de garder un code simple et réduit. Les principaux changements sont :

• Ajout des signaux "onActivate", "onDesactivate", "onClick", "onRightClick", "onDblClick" et "onRightDblClick"
• Ajout de la propriété box (left, center, right)
• Refonte des exemples pour utiliser une classe de base qui manipule la partie DBus plutôt que de tout faire à la main à chaque fois
• Passage de GPLv2 à GPLv3

La gestion des widgets (côté extension), migre du contrôleur principal à la classe MonitorWidget vu qu'elle prend déjà en charge la box.

C'est donc une version avec beaucoup d'interactivité, et une classe principale dans les exemple qui permet de construire très simplement des minis applications !