[PYTHON] Un script qui facilite la création de menus riches avec l'API de messagerie LINE

Aperçu

Si vous définissez le menu riche à partir de l'API de messagerie, vous pouvez le définir de manière assez flexible et vous pouvez définir jusqu'à 20 boutons. Cependant, il est ridiculement gênant de faire en sorte que Json le définisse, j'ai donc écrit un script qui peut être défini facilement.

Par exemple, si vous avez une image comme celle-ci Si vous définissez huit boutons sur chaque cercle, il serait trop fastidieux de connaître les coordonnées, la hauteur et la largeur.

étape 1

Tout d'abord, créez une image originale avec une taille de 2500x1686 pour le menu riche. C'est bien s'il ne s'agit que d'une simple figure comme cette image, mais il n'est pas possible de reconnaître des figures compliquées telles que des photos et des personnages, c'est donc une bonne idée de créer des images individuelles qui ne mettent en valeur que la partie sur laquelle vous souhaitez créer un bouton.

Appelons l'image où la partie bouton est facile à comprendre sample.png```

Étape 2

Nourrissez le script.

$ python menu_gen.py sample.png

Le script ressemble à ceci.

menu_gen.py

import cv2
import json
import collections as cl
import codecs
import sys

def main():

  args = sys.argv

  file_name = args[1]

  img_color = cv2.imread(file_name) #Importer l'image originale
  img_gray = cv2.imread(file_name, cv2.IMREAD_GRAYSCALE) #Importer l'image en échelle de gris
  ret, img_binary = cv2.threshold(img_gray, 250, 255, cv2.THRESH_BINARY_INV) #Binariser les images en échelle de gris
  contours, hierarchy = cv2.findContours(img_binary, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE) #Extraction de contour
  #cv2.drawContours(img_color, contours, -1, (0,0,255), 2) #Dessinez du rouge sur le contour
  print(len(contours),"J'en ai trouvé un") #Nombre de contours

  rich_menu_json = cl.OrderedDict()
  rich_menu_json["size"] = {"width": 2500, "height": 1686}
  rich_menu_json["selected"] = "true"
  rich_menu_json["name"] = file_name
  rich_menu_json["chatBarText"] = 'menu'
  rich_menu_json["areas"] = []

  for i, c in enumerate(contours):
    x,y,w,h = cv2.boundingRect(c) #Jugement rectangulaire
    # print("["+str(i)+"]",x,y,w,h)

    img_color = cv2.rectangle(img_color, (x,y), (x+w, y+h), (255,0,0), 3)
    img_color = cv2.putText(img_color, "b_"+str(i), (x+int(w/3),y+int(h/2)), cv2.FONT_HERSHEY_SIMPLEX, 4, (255,255,255), 2, cv2.LINE_AA)

    tmp = cl.OrderedDict()
    tmp["bounds"] = {
      "x": x,
      "y": y,
      "width": w,
      "height": h
    }
    tmp["action"] = {
      "type": "postback",
      "label": "b_"+str(i),
      "data": "{  }",
      "displayText": str(i)
    }
    rich_menu_json["areas"].append(tmp)



  fw = codecs.open(file_name.split('.')[0]+"_created_.json", 'w', "utf-8")
  json.dump(rich_menu_json, fw, indent=4, ensure_ascii=False)

  print('''
Créez un menu riche avec le contenu suivant

  curl -v -X POST https://api.line.me/v2/bot/richmenu \\
  -H 'Authorization: Bearer {Jeton d'accès}' \\
  -H 'Content-Type: application/json' \\
  -d \\
  '
Insérez le Json édité ici
  '

  ''')

  cv2.imwrite(file_name.split('.')[0]+"_created_.jpg ", img_color)
  cv2.imshow("window", img_color)
  cv2.waitKey()
  cv2.destroyAllWindows()

if __name__ == '__main__':
  main()

Ensuite, une image avec une étiquette pour chaque bouton comme `` b_1 '' est générée comme ceci.

En même temps, sample_created.json``` est créé à partir des informations de coordonnées, de hauteur et de largeur.

Cela ressemble à ce qui suit

{
    "size": {
        "width": 2500,
        "height": 1686
    },
    "selected": "true",
    "name": "sample.png ",
    "chatBarText": "menu",
    "areas": [
        {
            "bounds": {
                "x": 91,
                "y": 1131,
                "width": 407,
                "height": 407
            },
            "action": {
                "type": "postback",
                "label": "b_0",
                "data": "{  }",
                "displayText": "0"
            }
        },
        {
            "bounds": {
                "x": 2002,
                "y": 1130,
                "width": 407,
                "height": 407
            },
            "action": {
                "type": "postback",
                "label": "b_1",
                "data": "{  }",
                "displayText": "1"
            }
        },
        {
            "bounds": {
                "x": 1047,
                "y": 1130,
                "width": 406,
                "height": 407
            },
            "action": {
                "type": "postback",
                "label": "b_2",
                "data": "{  }",
                "displayText": "2"
            }
        },
        {
            "bounds": {
                "x": 1534,
                "y": 640,
                "width": 407,
                "height": 407
            },
            "action": {
                "type": "postback",
                "label": "b_3",
                "data": "{  }",
                "displayText": "3"
            }
        },
        {
            "bounds": {
                "x": 559,
                "y": 639,
                "width": 407,
                "height": 407
            },
            "action": {
                "type": "postback",
                "label": "b_4",
                "data": "{  }",
                "displayText": "4"
            }
        },
        {
            "bounds": {
                "x": 1047,
                "y": 149,
                "width": 406,
                "height": 407
            },
            "action": {
                "type": "postback",
                "label": "b_5",
                "data": "{  }",
                "displayText": "5"
            }
        },
        {
            "bounds": {
                "x": 91,
                "y": 149,
                "width": 407,
                "height": 407
            },
            "action": {
                "type": "postback",
                "label": "b_6",
                "data": "{  }",
                "displayText": "6"
            }
        },
        {
            "bounds": {
                "x": 2002,
                "y": 148,
                "width": 407,
                "height": 407
            },
            "action": {
                "type": "postback",
                "label": "b_7",
                "data": "{  }",
                "displayText": "7"
            }
        }
    ]
}

Pour le moment, il est au format postback, mais il semble que vous puissiez gagner du temps en remplissant le contenu tout en comparant le contenu ici avec l'image.

C'est une explication approximative, mais si cela aide quelqu'un.