今天和大家介紹最後一種樣板訊息圖片轉盤樣版，以及圖片地圖、日期時間按鈕。
圖片地圖為點選圖片的特定區域以執行指定功能，日期時間功能則會顯示日期時間圖形介面讓使用者選取日期及時間。
圖片轉盤樣版與轉盤樣版相似，只是轉盤的元素由按鈕樣版改為圖片，也就是圖片為按鈕本身。
基本語法
image_carousel_template_message = TemplateSendMessage(
alt_text = 取代文字,
template=ImageCarouselTemplate(
columns=[
ImageCarouselColumn(
ithumbnail_image_url = 圖片網址一,
action = 按鈕元件一
)
),
ImageCarouselColumn(
ithumbnail_image_url = 圖片網址二,
action = 按鈕元件二
)
),
......
]
)
)
練習程式
def sendImgCarousel(event):
try:
message = TemplateSendMessage(
alt_text = '圖片轉盤樣板',
template = ImageCarouselTemplate(
columns = [
ImageCarouselColumn(
image_url='https://i.imgur.com/pRdaAmS.jpg',
action = PostbackTemplateAction(
label='選擇披薩',
text='選擇披薩',
data='action=sell&item=披薩'
)
),
ImageCarouselColumn(
image_url='https://i.imgur.com/MyLoA5d.jpg',
action = PostbackTemplateAction(
label='選擇飲料',
text='選擇飲料',
data='action=sell&item=飲料'
)
)
]
)
)
line_bot_api.reply_message(event.reply_token,message)
except:
line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))
def sendBack_sell(event, backdata):
try:
message = TextSendMessage(
text = '你選擇的是'+backdata.get('item')
)
line_bot_api.reply_message(event.reply_token,message)
except:
line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))
圖片地圖為一個矩形圖片，提供使用者點選某矩形區域時，就會執行該矩形區域對應的程式指令。
基本語法
imagemap_message = ImagemapSendMessage(
base_url = 圖片網址,
alt_text = 替代文字,
base_size=BaseSize(height=圖片高度, width=圖片寬度),
actions=[
圖片地圖按鈕一,
圖片地圖按鈕二,
......
]
)
使用者點選文字圖片地圖按鈕就會回傳文字訊息
基本語法
MessageImagemapAction(
text = 回傳文字訊息內容,
area=ImagemapArea(
x = 矩形左上角X座標,
y = 矩形左上角Y座標,
width = 矩形寬度,
height = 矩形高度
)
),
使用者點選連結圖片地圖按鈕就會開啟指定的網頁。
基本語法
URIImagemapAction(
link_uri = 要開啟的網頁連結網址,
area = ImagemapArea(
x = 矩形左上角X座標,
y = 矩形左上角Y座標,
width = 矩形寬度,
height = 矩形高度
)
),
練習程式
def sendImgmap(event):
try:
image_url = 'https://i.imgur.com/Yz2yzve.jpg'
imgwidth = 1040
imgheight = 300
message = ImagemapSendMessage(
base_url = image_url,
alt_text = "圖片地圖範例",
base_size = BaseSize(height=imgheight, width=imgwidth),
actions=[
MessageImagemapAction(
text = '選擇紅色',
area = ImagemapArea( #設定圖片範圍左方1/4
x = 0,
y = 0,
width = imgwidth * 0.25,
height = imgheight
)
),
MessageImagemapAction(
text = '選擇藍色',
area = ImagemapArea( #設定圖片範圍右方1/4
x = imgwidth * 0.75,
y = 0,
width = imgwidth * 0.25,
height = imgheight
)
),
]
)
line_bot_api.reply_message(event.reply_token,message)
except:
line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))
日期時間按鈕為回應樣板訊息的按鈕件，包含日期、時間及日期時間三種模式。
基本語法
DatetimePickerTemplateAction(
label = 按鈕文字,
data = postback資料,
mode = 模式,
initial = 顯示時間初始值,
min = 最小日期,
max = 最大日期
)
練習程式
def sendDatetime(event):
try:
message = TemplateSendMessage(
alt_text = "日期時間範例",
template = ButtonsTemplate(
thumbnail_image_url='https://i.imgur.com/pRdaAmS.jpg',
title='日期時間練習',
text='請選擇：',
actions=[
DatetimePickerTemplateAction(
label = "選取日期",
data = "action=sell_time&mode=date",
mode = "date",
initial = "2022-09-24",
min = "2022-03-24",
max = "2022-12-25"
),
DatetimePickerTemplateAction(
label = "選取時間",
data = "action=sell_time&mode=time",
mode = "time",
initial = "10:00",
min = "00:00",
max = "23:59"
),
DatetimePickerTemplateAction(
label = "選取日期時間",
data = "action=sell_time&mode=datetime",
mode = "datetime",
initial = "2022-09-24T10:00",
min = "2022-03-24T00:00",
max = "2022-12-25T23:59"
)
]
)
)
line_bot_api.reply_message(event.reply_token,message)
except:
line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))
def sendData_sell(event, backdata):
try:
if backdata.get('mode') == 'date':
dt = '日期為：'+ event.postback.params.get('date')
elif backdata.get('mode') == 'time':
dt = '時間為：'+ event.postback.params.get('time')
elif backdata.get('mode') == 'datetime':
# 讀取日期時間
dt = datetime.datetime.strptime(event.postback.params.get('datetime'), '%Y-%m-%dT%H:%M')
#轉為字串
dt = dt.strftime('{d}%Y-%m-%d, {t}%H:%M').format(d='日期為:', t='時間為:')
message = TextSendMessage(
text = dt
)
line_bot_api.reply_message(event.reply_token,message)
except:
line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))
日期模式：
時間模式：
日期時間模式：
接下來和大家介紹可以客製化的Flex message吧(๑•̀ㅂ•́)و✧
看影片追技術