光沢のあるアプリでイメージマップのクリックを処理する

debugcn 投稿 Dev

ブライアンスタンパー

selectInput機能が従来のHTML選択ドロップダウンとクリック可能なイメージマップの両方として表示されるShinyアプリを構築しています。私の現在の戦略は、URLパラメーターを追加してイメージマップポリゴンをアプリにリンクし、そのURLを解析して、選択を更新することです。もちろん、これは毎回アプリをリセットしますが、これは問題ありませんが、UIのちらつきはあまり優雅ではありません。

私の質問は次のとおりです。

画像のクリックをキャプチャして入力を更新するためのより良い方法はありますか？
ソリューションを続行する場合selectInput、URLが解析されるまで表示されないようにレンダリングを遅らせて、パラメーター化された選択にちらつく前にデフォルトの選択がしばらく表示されないようにすることはできますか？

これがデモです：

library(shiny)
ui <- fluidPage(
   sidebarLayout(
      sidebarPanel(
         selectInput("letter_select",
                     "Pick a letter:",
                     choices = c('A' = 1, 'B' = 2, 'C' = 3, 'D' = 4))
      ),
      mainPanel(
         h3('Or click a letter'),
         img(src = 'testpattern.png', usemap = '#image-map'),
         HTML('
<map name="image-map">
<area target="_self" title="A" href="?letter=1" coords=0,0,50,0,50,50,0,50" shape="poly">
<area target="_self" title="B" href="?letter=2" coords=50,0,100,0,100,50,50,50" shape="poly">
<area target="_self" title="C" href="?letter=3" coords=0,50,50,50,50,100,0,100" shape="poly">
<area target="_self" title="D" href="?letter=4" coords=50,50,100,50,100,100,50,100" shape="poly">
</map>
              ')
      )
   )
)

server <- function(input, output, session) {
  observe({
    query <- parseQueryString(session$clientData$url_search)
    if (!is.null(query[['letter']])) {
      updateSelectInput(session, 'letter_select', selected = query[['letter']])
    }
  })
}

shinyApp(ui = ui, server = server)

以下に示すように、画像は「www /testpattern.png」にあります。

MrFlick

状態を維持し、ページ全体をリロードしてフラッシュを防ぐことは困難になります。最善の回避策は、おそらくjavascriptでイベントをキャプチャし、アプリケーションの状態を更新することです。以下は、これがどのように機能するかについての概念の非常に大まかな証明です。まず、イメージマップのアイデアを抽象化します

imageMap <- function(inputId, imgsrc, opts) {
  areas <- lapply(names(opts), function(n) 
    shiny::tags$area(title=n, coords=opts[[n]], 
                     href="#", shape="poly"))
  js <- paste0("$(document).on('click', 'map area', function(evt) {
  evt.preventDefault();
  var val = evt.target.title;
  Shiny.onInputChange('", inputId, "', val);})")
  list(
    shiny::tags$img(src=imgsrc, usemap=paste0("#", inputId),
    shiny::tags$head(tags$script(shiny::HTML(js)))),
    shiny::tags$map(name=inputId, areas))
}

これにより、渡したURLとオプションリストから画像とマップデータがレンダリングされます。画像マップのクリックイベントをキャプチャするために、JavaScriptを少し追加します。例えば

imgsrc <- "https://i.stack.imgur.com/C5aoV.png"
mapopts <- list(A="0,0,50,0,50,50,0,50",
  B="50,0,100,0,100,50,50,50",
  C="0,50,50,50,50,100,0,100",
  D ="50,50,100,50,100,100,50,100")
imageMap("map1", imgsrc, mapopts)

これをUIで使用できます

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      selectInput("letter_select",
                  "Pick a letter:",
                  choices = c('A', 'B', 'C', 'D'))
    ),
    mainPanel(
      h3('Or click a letter'),
      imageMap("map1", imgsrc , mapopts)
    )
  )
)

これで、サーバーでイベントをリッスンし、選択入力を変更できます

server <- function(input, output, session) {
  observeEvent(input$map1,  {
    updateSelectInput(session, "letter_select", selected=input$map1)
  })  
}

今、あなたはただ走ることができます

shinyApp(ui = ui, server = server)

画像内の文字をクリックすると、選択入力の値が一致するように変化することがわかります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-1

コメントを追加

サインイン

分類Dev

Related 関連記事

記事