Skip to content

Instantly share code, notes, and snippets.

@yonicd

yonicd/canvasAce

Last active Apr 23, 2020
Embed
What would you like to do?
canvas shinyace
library(shiny)
library(shinyAce)
modes <- getAceModes()
themes <- getAceThemes()
init <- "createData <- function(rows) {
data.frame(col1 = 1:rows, col2 = rnorm(rows))
}"
l <- shiny::tagList(
shiny::tags$script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'),
shiny::tags$script(src='https://html2canvas.hertzen.com/dist/html2canvas.js'),
shiny::tags$script('$(document).ready(function(){
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on("click", function () {
html2canvas(element[0]).then(function(canvas) {
$("#previewImage").empty()
$("#previewImage").append(canvas);
getCanvas = canvas;
});
});
$("#btn-Convert-Html2Image").click(function () {
html2canvas(element[0]).then(function(canvas) {
saveAs(canvas.toDataURL(), "canvas.png");
});
});
function saveAs(uri, filename) {
var link = document.createElement("a");
if (typeof link.download === "string") {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
});'))
# define UI for application that demonstrates a simple Ace editor
ui <- pageWithSidebar(
headerPanel("Simple Shiny Ace!"),
sidebarPanel(
l,
selectInput("mode", "Mode: ", choices = modes, selected = "r"),
selectInput("theme", "Theme: ", choices = themes, selected = "ambience"),
numericInput("size", "Tab size:", 4),
radioButtons("soft", NULL, c("Soft tabs" = TRUE, "Hard tabs" = FALSE), inline = TRUE),
radioButtons("invisible", NULL, c("Hide invisibles" = FALSE, "Show invisibles" = TRUE), inline = TRUE),
actionButton("reset", "Reset text"),
actionButton("clear", "Clear text"),
actionButton('btn-Preview-Image','preview'),
actionButton('btn-Convert-Html2Image','Download'),
HTML("<hr />"),
helpText(HTML("A simple Shiny Ace editor.
<p>Created using <a href = \"http://github.com/trestletech/shinyAce\">shinyAce</a>."))),
mainPanel(
shiny::tags$div(id = 'html-content-holder',
aceEditor(
outputId = "ace",
# to access content of `selectionId` in server.R use `ace_selection`
# i.e., the outputId is prepended to the selectionId for use
# with Shiny modules
selectionId = "selection",
value = init,
placeholder = "Show a placeholder when the editor is empty ...")
),
shiny::tags$h3('Preview'),
shiny::tags$div(id = 'previewImage')
)
)
# define server logic required to generate simple ace editor
server <- function(input, output, session) {
output$downloadData <- downloadHandler(
filename = function() {
paste('carbonace-', Sys.Date(), '.png', sep='')
},
content = function(con) {
write.csv(data, con)
}
)
observe({
updateAceEditor(
session,
"ace",
theme = input$theme,
mode = input$mode,
tabSize = input$size,
useSoftTabs = as.logical(input$soft),
showInvisibles = as.logical(input$invisible)
)
})
observeEvent(input$reset, {
updateAceEditor(session, "ace", value = init)
})
observeEvent(input$clear, {
updateAceEditor(session, "ace", value = "")
})
}
options(shiny.launch.browser = TRUE)
# Return a Shiny app object
shinyApp(ui = ui, server = server)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.