screenshot-service/annotate_header.sh

#!/bin/bash

get_size(){
  filename=$1
  magick "$filename" -format "%[w]x%[h]" info:
}

get_width(){
  filename=$1
  magick "$filename" -format "%[w]" info:
}


annotate_header(){
  echo annotate $1
  filename=$1
  shift;
  d=$(date "+%Y-%m-%d__%H_%M_%S")
  #filename="2022-03-10__19_33_55__set-cookie.png"
  cropped_filename="${filename}__cropped.png"
  overlay_filename="${cropped_filename}__overlay.png"
  hardoverlay_filename="${cropped_filename}__hardoverlay.png"
  annotated_filename="${cropped_filename}__annotated.png"

  # crop 
  left=2056
  top=330
  width=824
  height=1260
  vips extract_area "$filename" "$cropped_filename" $left $top $width $height

  # prepare overlay canvases
  convert -size $(get_size "$filename") xc:none -fill white "$overlay_filename"
  convert -size $(get_size "$filename") xc:none -fill transparent "$hardoverlay_filename"

  all_positions=$(python ./get-text-position.py "$cropped_filename" )
  
  while [ $# -gt 0 ]
  do
    header=$1
    description=$2
    matching_line=$(echo "$all_positions" | grep "$header" | head -n 1)
    if [ "$matching_line" = "" ]; then
      shift;
      shift;
      continue
    fi;
    coords=$(echo $matching_line | awk '{print $1 " " $2 " " $3 " " $4}')
    highlight_margin=5
    rect_x1=$(($(echo "$coords" | awk '{print $1}') - highlight_margin + left))
    rect_y1=$(($(echo "$coords" | awk '{print $2}') - highlight_margin + top))
    rect_h=$(($(echo "$coords" | awk '{print $4}') + 2 * highlight_margin))
    rect_x2=$((796 + left))
    rect_y2=$((rect_y1 + rect_h))  
    convert "$overlay_filename" \
            -fill "#ff000066" \
            -stroke "#ff000066"  \
            -draw "rectangle $rect_x1,$rect_y1 $rect_x2,$rect_y2" \
            "$overlay_filename" &
    first_job=$!

    triangle_height=30
    triangle_width=30
    
    convert "$hardoverlay_filename" \
            -fill "red" \
            -draw "path 'M $((rect_x1 - 10)),$((rect_y1 + rect_h / 2))  L $((rect_x1 - triangle_width - 10)),$((rect_y1 - triangle_height  + rect_h / 2))  L $((rect_x1 - triangle_width - 10)),$((rect_y1 + triangle_height  + rect_h / 2))  Z' " \
            -draw "rectangle $((rect_x1-20)),$rect_y1 $((rect_x1 - 200)),$rect_y2" \
            -gravity NorthEast \
            -pointsize 50 \
            -undercolor White \
            -font "Noto-Sans-Regular" \
            -draw "text 985,$((rect_y1 - 30)) '$description'" \
            "$hardoverlay_filename" &
    second_job=$!
    wait $first_job;
    wait $second_job;
    shift
    shift
  done
  convert "$filename" "$overlay_filename" -compose Darken -composite "$annotated_filename.step.png"
  convert "$annotated_filename.step.png" "$hardoverlay_filename" -compose src-over -composite "$annotated_filename"
  rm "$overlay_filename" "$annotated_filename.step.png" "$hardoverlay_filename" "$cropped_filename" "$filename"
  echo "SCREENSHOT: <img width=\"720\" height=\"405\" src=\"http://localhost:3000/$(echo "$annotated_filename" | sed 's|/opt/||')\"/>"
}

#annotate_header "set-cookie" "identyfikator internetowy z cookie" "Cookie" "identyfikator internetowy z cookie"