Блог

Я пишу приложение dash с дивами с изображениями в них. Я хочу создать новое изображение при добавлении новой строки в базу данных SQLite. Кроме того, я хочу нажать на это новое изображение, чтобы переместить его в другой раздел. Проблема,с которой я сталкиваюсь, заключается в том, что, хотя я могу добавить ввод([идентификатор нового изображения], n_clicks) в список входов, выходов и состояний, которые я передал обратному вызову, он не прослушивает этот новый ввод. Упрощенные фрагменты кода являются:

Для создания изображения:

  def text(sql_row,id_name):
    #font_size=16
    color='blue'
    image = Image.new("RGB", (400, 500), color)
    draw = ImageDraw.Draw(image)
    row=10
    for row, item in enumerate(sql_row):
        draw.text((10,35, item)
    return html.Img(src=image,id=id_name)
 

и для добавления нового изображения в div, перемещения изображения в следующий div при нажатии и для попытки добавить n_clicks для нового изображения на входы обратного вызова

 
#create the callbacks for the function
callback_children=[Output('div1','children'),Output('div2','children')]
for img in image_list:
    callback_children.append(Input(img.id,'n_clicks'))
callback_children=callback_children [Input('interval-component', 'n_intervals')] [State(component_id='order_in',component_property='children'),State(component_id='order_up',component_property='children'),State(component_id='order_out',component_property='children')] 





@app.callback(callback_children)#children contain n_clicks input for images in divs, div children states and div children outputs
def update_orders(*args):

...
    #add new image to children of div1:
    global callback_children
    new_img=text(new_item,str(new_sql_row))
    div1_children.append(new_img)#This puts the new image in div1
    callback_children.insert(3,Input(new_img.id,'n_clicks'))

    #move image to next div when clicked
    changed_id = [p['prop_id'] for p in ctx.triggered][0]
    ctx = dash.callback_context
    for item,click_value in list(ctx.inputs.items()):
            img_id=str(item).split('.')[0]
            if img_id in changed_id.split('.')[0]:#if image was clicked
                div2_children.append(img_id)#add image to div2 children
                ...
                #code to remove image from div1 children

                ...

    return [div1_children, div2_children]


 

Этот код успешно добавляет изображение в первый div и перемещает изображение из первого div во второй при нажатии, но нажатие на изображение, которое было добавлено в первый div с помощью обратного вызова, ничего не делает, так как его ввод n_clicks отсутствовал в callback_children при запуске сценария. Есть ли способ обновить входные данные обратного вызова, чтобы добавить n_clicks для нового изображения?

Для этого вам нужно будет использовать обратные вызовы с сопоставлением шаблонов. Обновление обратного вызова Dash после инициализации не изменит его поведение, но эти обратные вызовы могут использовать несколько динамические входы и выходы, что должно помочь.