[PYTHON] A script that makes it easy to create rich menus with the LINE Messaging API
Overview
If you set the rich menu from the Messaging API, you can set it quite flexibly, and you can set up to 20 buttons. However, it is ridiculously troublesome to create Json to set it, so I wrote a script that can be set easily.
For example, if you have an image like this If you set eight buttons to each circle, it would be too tedious to find out the coordinates, height, and width.
step 1
First, create an original image with a size of 2500x1686 for the rich menu. Just like the image this time, it's fine if it's just a simple figure, but since it can't recognize complicated figures such as photos and characters, it's a good idea to create individual images that emphasize only the part you want to use as a button.
Let's call the image where the button part is easy to understand `` `sample.png```
Step 2
Feed the script.
$ python menu_gen.py sample.png
The script looks like this.
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) #Import original image
img_gray = cv2.imread(file_name, cv2.IMREAD_GRAYSCALE) #Image loading in grayscale
ret, img_binary = cv2.threshold(img_gray, 250, 255, cv2.THRESH_BINARY_INV) #Binarize grayscale images
contours, hierarchy = cv2.findContours(img_binary, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE) #Contour extraction
#cv2.drawContours(img_color, contours, -1, (0,0,255), 2) #Draw red on the contour
print(len(contours),"I found one") #Number of 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) #Rectangle judgment
# 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('''
Create a rich menu with the following contents
curl -v -X POST https://api.line.me/v2/bot/richmenu \\
-H 'Authorization: Bearer {Access token}' \\
-H 'Content-Type: application/json' \\
-d \\
'
Insert the edited Json here
'
''')
cv2.imwrite(file_name.split('.')[0]+"_created_.jpg ", img_color)
cv2.imshow("window", img_color)
cv2.waitKey()
cv2.destroyAllWindows()
if __name__ == '__main__':
main()
Then, an image with a label for each button like `` `b_1``` is generated like this.
At the same time, `` `sample_created.json``` is created from the coordinates, height, and width information.
It looks like the following
{
"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"
}
}
]
}
For the time being, it is in postback format, but it seems that you can save time by filling in the contents while comparing the contents around here with the image.
It's a rough explanation, but if it helps someone.