Linking images to their ImageOutput nodes

[bartbutenaers]

Hi riku,

I'm not sure whether you get notifications about your Github issues, so will try to mention you here (@rikukissa).

Currently I'm using your node already all over the place, and it is really useful to analyze video related stuff in my flows.

When a lot of those ImageOutput nodes are being used in a single flow, it might become (a little bit) confusing which image belongs to which ImageOutput node. It is not a big deal, but I added a small enhancement to your code to make this a little bit more visual:

This is the new code:

  function render(id, data) {
    let $img = document.getElementById(`image-output-img-${id}`)

    if(!$img) {
      const $container = document.getElementById(id)
      if(!$container) {
        return
      }

      let $bubble = document.getElementById(`image-output-bubble-${id}`)
      const bubble = document.createElementNS("http://www.w3.org/2000/svg", 'polygon')
      bubble.setAttribute('id', `image-output-bubble-${id}`)
      bubble.setAttribute('style', 'fill:#a6bbcf')
      $container.insertBefore(bubble, $container.lastChild.nextSibling)

      const img = document.createElementNS("http://www.w3.org/2000/svg", 'image')
      img.setAttribute('id', `image-output-img-${id}`)
      img.setAttribute('width', `200`)
      img.setAttribute('y', `45`)
      $container.insertBefore(img, $container.lastChild.nextSibling)
      $img = img
    }

    $img.setAttribute('href', `data:image/png;base64,${data}`)

    $img.onload = function() {
        let bubbleId = this.id.replace("img", "bubble");
        let $bubble = document.getElementById(bubbleId)

        let imgBbox = this.getBBox()
        let left = imgBbox.x - 5
        let top = imgBbox.y - 5
        let right = imgBbox.x + imgBbox.width + 5
        let bottom = imgBbox.y + imgBbox.height + 5
        let points = left + "," + top + " " +
                     (left+50) + "," + top + " " +
                     (left+55) + "," + (top-10) + " " +
                     (left+60) + "," + top + " " +
                     right + "," + top + " " + 
                     right + "," + bottom + " " + 
                     left + "," + bottom
        $bubble.setAttribute('points', points)
    }
  }

The 'onload' event has been used to make sure that the image is loaded, and has it's correct width and height (via the bounding box).

If you like this visual effect, I can create a pull request (if you find that more convenient) ...

Thanks again, Bart

[rikukissa]

Damn, I have no idea why I didn't receive notifications from these issues until now. Sorry about that. I'll go through them straight away :)

[rikukissa]

Published as @0.1.1 🙂

Cheers!