# basic usage
if(interactive()){
library(shiny)
ui <- fluidPage(
h3("Try to drag pictures locally to canvas"),
canvas("canvas_a")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
}
# multiple canvas on a page
if(interactive()){
library(shiny)
ui <- fluidPage(
h3("multiple canvas on a page"),
p("They are independent"),
p("Dragging from one canvas to another is not supported currently"),
column(6, canvas("canvas_left")),
column(6, canvas("canvas_right"))
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
}
# with capture buttons buttons
if(interactive()){
library(shiny)
library(ggplot2)
ui <- fluidPage(
fluidRow(
id = "new_row",
column(
6,
h3("this is a title"),
column(6, tags$label("plot 1"), plotOutput("plot_1")),
column(6, tags$label("plot 2"), plotOutput("plot_2")),
),
column(
6,
h2("To canvas buttons"),
h4("pure button with `toCanvasBtn`"),
toCanvasBtn(
dom = "plot_1",
label = "capture plot 1",
canvasID = "canvas_b"
), br(),
toCanvasBtn(
dom = "capture_button",
label = "capture this button itself",
canvasID = "canvas_b",
id = "capture_button"
), br(),
toCanvasBtn(
dom = "#new_row .col-sm-6:first-of-type",
label = "complex selector to select left column",
canvasID = "canvas_b",
isID = FALSE
), br(),
h4("button text input for any part of document with `toCanvasBtn`"),
toCanvasTextBtn(
label = "try #plot_2 to for plot 2 or other selector",
canvasID = "canvas_b",
text_value = "#plot_2"
)
)
),
canvas("canvas_b")
)
server <- function(input, output, session) {
output$plot_1 <- renderPlot({
ggplot(mpg, aes(cty, hwy)) +
geom_count(col="tomato3", show.legend=F)
})
output$plot_2 <- renderPlot({
ggplot(mpg, aes(cty, hwy)) +
geom_point()
})
}
shinyApp(ui, server)
}
# start canvas as hidden, initiate later in tab panels
if(interactive()){
library(shiny)
ui <- fluidPage(
tabsetPanel(
id = "tabs",
tabPanel(
"Home page",
value = "tab_1",
h4("Content on home page ...."),
p("Canvas is hidden on start, go to other tabs")
),
tabPanel(
"Canvas C",
value = "tab_2",
markdown(
'
# canvas hidden on start
In this example, you will see if the canvas is hidden,
not on the first tab in a `tabsetPanel`, or other similar
UI where you do not see canvas on start. Then, the canvas
cannot be initiate properly using the default height value (100vh).
Using the dynamic computed CSS height like "100%", or "100vh" with "hidden"
(display = none) elements give the height of `0` on start.
So, you **should not see the canvas** on this tab, but a broken
structure and no canvas grid.
To fix it, either give it a fixed `height` and `width` pixel unit, like
- `height = "800px"`, `width = "1500px"`
or bind the initiation event to a click of a button, the tab title or
any other element you specify with the `on_start` argument. See the
example code and watch how we do it in "canvas D-F".
'
),
canvas(canvasID = "canvas_c")
),
tabPanel(
"Canvas D",
value = "tab_3",
h4("Initiate canvas by a button"),
actionButton("start_canvas", "Start Canvas C"),
canvas(
canvasID = "canvas_d",
on_start = "#start_canvas"
)
),
tabPanel(
"Canvas E",
value = "tab_4",
h4("Initiate canvas by clicking tab title"),
p("Canvas initiate when first time users come to this tab"),
canvas(
canvasID = "canvas_e",
on_start = "#tabs li a[data-value='tab_4']"
)
),
tabPanel(
"Canvas F",
value = "tab_5",
h4("Initiate canvas with fixed height and width"),
canvas(
canvasID = "canvas_f",
height = "800px",
width = "1500px"
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
}
Run the code above in your browser using DataLab