Title: | In-Text Resize for Images, Tables and Fancy Resize Containers in 'shiny', 'rmarkdown' and 'quarto' Documents |
---|---|
Description: | Automatic resizing toolbar for containers, images and tables. Various resizer or expandable container functionalities are also included. Most suitable to include in 'shiny', 'markdown' and 'quarto' documents. |
Authors: | Obinna Obianom [aut, cre] |
Maintainer: | Obinna Obianom <[email protected]> |
License: | MIT + file LICENSE |
Version: | 1.9.2 |
Built: | 2024-11-25 19:33:14 UTC |
Source: | CRAN |
The current function allows inclusion of jQuery in an HTML output
add.JQuery(version = "3.5.1")
add.JQuery(version = "3.5.1")
version |
jQuery version |
script tag with jQuery link
This function holds significance across the entire package, particularly in scenarios where a specific HTML output lacks the inclusion of the jQuery script required by other functions within this package. It serves as a crucial mechanism for ensuring that functionalities within the package remain operable even when the necessary jQuery script is absent from the HTML page by default knitting. By providing a fallback option, this function enhances the robustness and reliability of the package, allowing it to gracefully handle situations where jQuery is not explicitly included. Its role is pivotal in maintaining consistent behavior and functionality across diverse HTML environments, thereby facilitating seamless integration and usage of the package across various web development contexts.
add.JQuery() add.JQuery("3.7.0") # add a specific version
add.JQuery() add.JQuery("3.7.0") # add a specific version
Set options for the inclusion of sizing toolbar in documents
add.resizer( theme.color = NULL, position = c("top", "bottom"), font.size = NULL, font.color = NULL, tables = TRUE, images = TRUE, line.color = NULL, thumb.width = NULL, thumb.height = NULL, line.width = NULL, line.height = NULL, dim.units = "px", default.image.width = NULL )
add.resizer( theme.color = NULL, position = c("top", "bottom"), font.size = NULL, font.color = NULL, tables = TRUE, images = TRUE, line.color = NULL, thumb.width = NULL, thumb.height = NULL, line.width = NULL, line.height = NULL, dim.units = "px", default.image.width = NULL )
theme.color |
theme color for resizer and table e.g. black or #000000 |
position |
position of the resize toolbar e.g. top or bottom |
font.size |
size of the page font in px e.g. 14px |
font.color |
color of the page font in e.g. darkblue or #006699 |
tables |
boolean. TRUE or FALSE, to add resize toobar to tables |
images |
boolean. TRUE or FALSE, to add resize toobar to images |
line.color |
color of the resizer track e.g. red or #f5f5f5 |
thumb.width |
width of the resizer thumb e.g. 25 |
thumb.height |
height of the resizer thumb e.g. 25 |
line.width |
width of the resizer track e.g. 200 |
line.height |
height of the resizer track e.g. 10 |
dim.units |
unit for the height and width of the track or thumb |
default.image.width |
default width of all images on the page e.g. 100 |
Inclusion of mini toolbar for images and tables within a page
More examples and demo pages for this function are located at this link - https://r2resize.obi.obianom.com.
# default settings r2resize::add.resizer() # add resizer to only images r2resize::add.resizer( tables = FALSE, images = TRUE ) # add resizer to only tables r2resize::add.resizer( tables = TRUE, images = FALSE ) # add resizer to both images r2resize::add.resizer( tables = TRUE, images = TRUE ) # set position of the resize toolbar r2resize::add.resizer( position = "top" #this is the default, another is 'bottom' ) # set resizer line color, height and width r2resize::add.resizer( line.color = "green", line.width = 150, line.height = 5 ) #declare more arguments including default image size r2resize::add.resizer( theme.color = "blue", position = "top", font.size = "12px", font.color = "brown", tables = TRUE, images = TRUE, line.color = "green", line.width = 150, line.height = 5, default.image.width = "40%" ) # customized settings
# default settings r2resize::add.resizer() # add resizer to only images r2resize::add.resizer( tables = FALSE, images = TRUE ) # add resizer to only tables r2resize::add.resizer( tables = TRUE, images = FALSE ) # add resizer to both images r2resize::add.resizer( tables = TRUE, images = TRUE ) # set position of the resize toolbar r2resize::add.resizer( position = "top" #this is the default, another is 'bottom' ) # set resizer line color, height and width r2resize::add.resizer( line.color = "green", line.width = 150, line.height = 5 ) #declare more arguments including default image size r2resize::add.resizer( theme.color = "blue", position = "top", font.size = "12px", font.color = "brown", tables = TRUE, images = TRUE, line.color = "green", line.width = 150, line.height = 5, default.image.width = "40%" ) # customized settings
Automatic elastic card holder for images or navigation items
elastiCard( ..., height.px = NULL, width.px = NULL, border.color = "white", border.width.px = 1, active.panel = 1 )
elastiCard( ..., height.px = NULL, width.px = NULL, border.color = "white", border.width.px = 1, active.panel = 1 )
... |
list of image containers, see example below |
height.px |
height of container as numeric |
width.px |
width of container as numeric |
border.color |
color of border of each container |
border.width.px |
width of the container border |
active.panel |
the active panel or container e.g. 1 |
Multiple cards with hover elastic functionality
More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.
#basic example with texts alone r2resize::elastiCard( item1 = c( icon = "edit", title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", subtitle="A cool subtitle", text.color="blue"), item2 = c( title="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", subtitle="A cool subtitle", text.color = "brown" ) ) #basic example with background image and texts r2resize::elastiCard( item1 = c( bg = "https://r2resize.obi.obianom.com/m/image1.jpg", icon = "edit", title="Sample text 1", subtitle="A cool subtitle"), item2 = c( bg = "https://r2resize.obi.obianom.com/m/image2.jpg", title="Sample text 2", subtitle="A cool subtitle", text.color = "brown" ) )
#basic example with texts alone r2resize::elastiCard( item1 = c( icon = "edit", title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", subtitle="A cool subtitle", text.color="blue"), item2 = c( title="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", subtitle="A cool subtitle", text.color = "brown" ) ) #basic example with background image and texts r2resize::elastiCard( item1 = c( bg = "https://r2resize.obi.obianom.com/m/image1.jpg", icon = "edit", title="Sample text 1", subtitle="A cool subtitle"), item2 = c( bg = "https://r2resize.obi.obianom.com/m/image2.jpg", title="Sample text 2", subtitle="A cool subtitle", text.color = "brown" ) )
Emphasis container
empahsisCard(..., bg.color = NULL)
empahsisCard(..., bg.color = NULL)
... |
content of the card |
bg.color |
content background color |
container with a moving border to denote emphasis
More examples and demo pages are located at this link - https://r2resize.obi.obianom.com.
#make a simple emphasis card #add as much content as need r2resize::empahsisCard( "sample rpkg.net 1", "sample rpkg.net 2 " ) #specify the color of the background r2resize::empahsisCard( "sample rpkg.net 1", "sample rpkg.net 2 ", bg.color = "brown" )
#make a simple emphasis card #add as much content as need r2resize::empahsisCard( "sample rpkg.net 1", "sample rpkg.net 2 " ) #specify the color of the background r2resize::empahsisCard( "sample rpkg.net 1", "sample rpkg.net 2 ", bg.color = "brown" )
Emphasis container
emphasisCard(..., bg.color = NULL)
emphasisCard(..., bg.color = NULL)
... |
content of the card |
bg.color |
content background color |
container with a moving border to denote emphasis
More examples and demo pages are located at this link - https://r2resize.obi.obianom.com.
#make a simple emphasis card #add as much content as need r2resize::empahsisCard( "sample rpkg.net 1", "sample rpkg.net 2 " ) #specify the color of the background r2resize::empahsisCard( "sample rpkg.net 1", "sample rpkg.net 2 ", bg.color = "brown" )
#make a simple emphasis card #add as much content as need r2resize::empahsisCard( "sample rpkg.net 1", "sample rpkg.net 2 " ) #specify the color of the background r2resize::empahsisCard( "sample rpkg.net 1", "sample rpkg.net 2 ", bg.color = "brown" )
Expandable flexible card holder for images or navigation items
flexCard( ..., height.px = NULL, width.px = NULL, border.color = "white", border.width.px = 1, active.panel = 1 )
flexCard( ..., height.px = NULL, width.px = NULL, border.color = "white", border.width.px = 1, active.panel = 1 )
... |
list of image containers, see example below |
height.px |
height of container as numeric |
width.px |
width of container as numeric |
border.color |
color of border of each container |
border.width.px |
width of the container border |
active.panel |
the active panel or container e.g. 1. Use 0 to make all panels inactive |
Multiple cards with flex functionality
More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.
r2resize::flexCard( item1 = c( bg = "https://r2resize.obi.obianom.com/m/image1.jpg", icon = "edit", title="Sample text 1", subtitle="A cool subtitle"), item2 = c( bg = "https://r2resize.obi.obianom.com/m/image2.jpg", icon = "edit", title="Sample text 2", subtitle="A cool subtitle", icon.color = "blue", text.color = "brown" ) )
r2resize::flexCard( item1 = c( bg = "https://r2resize.obi.obianom.com/m/image1.jpg", icon = "edit", title="Sample text 1", subtitle="A cool subtitle"), item2 = c( bg = "https://r2resize.obi.obianom.com/m/image2.jpg", icon = "edit", title="Sample text 2", subtitle="A cool subtitle", icon.color = "blue", text.color = "brown" ) )
Elegant image viewer and resizer for images
shinyExpandImage(imageid = c())
shinyExpandImage(imageid = c())
imageid |
one or more IDs of a div containing images |
Feature that allows images to be easily expanded and viewed
Use in a shiny application for image(s) that you'd like to carry a viewer feature on click.
When the image is clicked, it is expanded and toolbars appear to allow the user to in zoom in or out, as well as download the image.
if there are multiple images within the imageid holder, then they are automatically ordered at the bottom for ease of transition.
# simple expansion for 2 images in a shiny app if (interactive()) { shiny::shinyApp( ui = shiny::fluidPage( shinyExpandImage(c("ccgal1")), htmltools::tags$div( id = "ccgal1", htmltools::tags$a( href = "https://r2resize.obi.obianom.com/m/1b.jpg", htmltools::tags$img( src = "https://r2resize.obi.obianom.com/m/1b.jpg", alt="sample text for image 1") ), htmltools::tags$a( href = "https://r2resize.obi.obianom.com/m/1.jpg", htmltools::tags$img( src = "https://r2resize.obi.obianom.com/m/1.jpg", alt="sample text for image 2") ) ) ), server = (function(input, output) {}) ) }
# simple expansion for 2 images in a shiny app if (interactive()) { shiny::shinyApp( ui = shiny::fluidPage( shinyExpandImage(c("ccgal1")), htmltools::tags$div( id = "ccgal1", htmltools::tags$a( href = "https://r2resize.obi.obianom.com/m/1b.jpg", htmltools::tags$img( src = "https://r2resize.obi.obianom.com/m/1b.jpg", alt="sample text for image 1") ), htmltools::tags$a( href = "https://r2resize.obi.obianom.com/m/1.jpg", htmltools::tags$img( src = "https://r2resize.obi.obianom.com/m/1.jpg", alt="sample text for image 2") ) ) ), server = (function(input, output) {}) ) }
Highly customizable and resizable container content holder
sizeableCard(..., bg.color = NULL, border.color = NULL)
sizeableCard(..., bg.color = NULL, border.color = NULL)
... |
content of container |
bg.color |
content background color e.g red, black or #333333 |
border.color |
border color of container e.g. red or #f5f5f5 |
Container with a resizing toolbar feature on the right
More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.
#simple sizeable card attribute r2resize::sizeableCard( "sample rpkg.net text" ) #specify the background color for the card r2resize::sizeableCard( "sample r2resume text", bg.color = "lightgray" ) #specify the border color additionally r2resize::sizeableCard( "sample r2resume text", bg.color = "lightgray", border.color="black" )
#simple sizeable card attribute r2resize::sizeableCard( "sample rpkg.net text" ) #specify the background color for the card r2resize::sizeableCard( "sample r2resume text", bg.color = "lightgray" ) #specify the border color additionally r2resize::sizeableCard( "sample r2resume text", bg.color = "lightgray", border.color="black" )
Highly customizable and resizable split screen container
splitCard( left, right, splitter.color = NULL, bg.left.color = NULL, left.bg.url = NULL, right.bg.url = NULL, bg.right.color = NULL, border.color = NULL, position = c("vertical", "horizontal"), text.left.color = "black", text.right.color = "black", min.height = NULL, left.width = NULL )
splitCard( left, right, splitter.color = NULL, bg.left.color = NULL, left.bg.url = NULL, right.bg.url = NULL, bg.right.color = NULL, border.color = NULL, position = c("vertical", "horizontal"), text.left.color = "black", text.right.color = "black", min.height = NULL, left.width = NULL )
left |
content on the left or top |
right |
content on the right or bottom |
splitter.color |
splitter color e.g red, black or #333333 |
bg.left.color |
left panel color e.g red, black or #333333 |
left.bg.url |
left panel background image e.g image1.png or https://..image1.png |
right.bg.url |
right panel background image e.g image1.png or https://..image1.png |
bg.right.color |
right panel color e.g red, black or #333333 |
border.color |
border color of the container e.g. red or #f5f5f5 |
position |
position of divider or splitter |
text.left.color |
color of left panel text |
text.right.color |
color of right panel text |
min.height |
minimum height of the panel |
left.width |
width of the left panel e.g. 100 percent or 500 px |
Resizeable split screen container
More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.
#basic attributes r2resize::splitCard( "Sample text", "Sample text 2" ) #specify background color for each side r2resize::splitCard( "Sample r2symbols 1", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray", position = "vertical" ) #add the split card attribute on vertical r2resize::splitCard( "Sample shinyStorePlus", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray", border.color = "black", text.left.color = "black", text.right.color = "black", position = "vertical" ) #specify width of the left container #specify height of the entire panel r2resize::splitCard( "pkg card.pro", "pkg r2social", bg.right.color = "white", bg.left.color = "lightgray", border.color = "black", text.left.color = "black", text.right.color = "black", min.height = '400px', left.width = "80%" ) # specify split card on the horizontal position r2resize::splitCard( "Sample sciRmdTheme 1", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray", border.color = "gray", text.left.color = "black", text.right.color = "black", position = "horizontal" )
#basic attributes r2resize::splitCard( "Sample text", "Sample text 2" ) #specify background color for each side r2resize::splitCard( "Sample r2symbols 1", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray", position = "vertical" ) #add the split card attribute on vertical r2resize::splitCard( "Sample shinyStorePlus", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray", border.color = "black", text.left.color = "black", text.right.color = "black", position = "vertical" ) #specify width of the left container #specify height of the entire panel r2resize::splitCard( "pkg card.pro", "pkg r2social", bg.right.color = "white", bg.left.color = "lightgray", border.color = "black", text.left.color = "black", text.right.color = "black", min.height = '400px', left.width = "80%" ) # specify split card on the horizontal position r2resize::splitCard( "Sample sciRmdTheme 1", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray", border.color = "gray", text.left.color = "black", text.right.color = "black", position = "horizontal" )
Highly customizable and re sizable split screen container version 2
splitCard2( left, right, bg.left.color = NULL, bg.right.color = NULL, border.color = NULL, text.left.color = "black", text.right.color = "black", slider.position = charNum1to100 )
splitCard2( left, right, bg.left.color = NULL, bg.right.color = NULL, border.color = NULL, text.left.color = "black", text.right.color = "black", slider.position = charNum1to100 )
left |
content on the left or top |
right |
content on the right or bottom |
bg.left.color |
left panel color e.g red, black or #333333 |
bg.right.color |
right panel color e.g red, black or #333333 |
border.color |
border color of the container e.g. red or #f5f5f5 |
text.left.color |
color of left panel text |
text.right.color |
color of right panel text |
slider.position |
position of the slider in percent |
Realizable split screen container style 2
More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.
#Use the default split card 2 function #add a question on one side, and answer on the other r2resize::splitCard2( shiny::tags$h1("Question 1"), shiny::tags$h1("Answer 1"), slider.position = "40" ) #specify the backgroun color for the sides r2resize::splitCard2( "Sample r2symbols 1", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray" ) #alter the border color #specify the text color for each side r2resize::splitCard2( "Sample shinyStorePlus", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray", border.color = "black", text.left.color = "black", text.right.color = "black" ) ##change the text color from one side to the other r2resize::splitCard2( "Sample sciRmdTheme 1", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray", border.color = "gray", text.left.color = "red", text.right.color = "blue" )
#Use the default split card 2 function #add a question on one side, and answer on the other r2resize::splitCard2( shiny::tags$h1("Question 1"), shiny::tags$h1("Answer 1"), slider.position = "40" ) #specify the backgroun color for the sides r2resize::splitCard2( "Sample r2symbols 1", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray" ) #alter the border color #specify the text color for each side r2resize::splitCard2( "Sample shinyStorePlus", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray", border.color = "black", text.left.color = "black", text.right.color = "black" ) ##change the text color from one side to the other r2resize::splitCard2( "Sample sciRmdTheme 1", "Sample nextGen 1", bg.right.color = "white", bg.left.color = "lightgray", border.color = "gray", text.left.color = "red", text.right.color = "blue" )
Easily expandable and resizable content container holder
windowCard( ..., title = "Sample title", width = "50%", bg.color = NULL, border.color = NULL, header.text.color = NULL, body.text.color = NULL )
windowCard( ..., title = "Sample title", width = "50%", bg.color = NULL, border.color = NULL, header.text.color = NULL, body.text.color = NULL )
... |
content of the container |
title |
title of the header |
width |
width of the container |
bg.color |
background color of the content area |
border.color |
color of the container border |
header.text.color |
color of the header text |
body.text.color |
color of the content text |
A window-like card container that is expandable and resizable
More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.
Please note that only one windowCard may be created by page
#simple window card with default attributes #shows up centered on the screen r2resize::windowCard("sample r2symbols text") #specify the width of the window card #specify the title #specify the header color #speciy other features r2resize::windowCard( title = "Sample Window card", width = "500px", bg.color = "white", border.color = "brown", header.text.color = "white", body.text.color = "black")
#simple window card with default attributes #shows up centered on the screen r2resize::windowCard("sample r2symbols text") #specify the width of the window card #specify the title #specify the header color #speciy other features r2resize::windowCard( title = "Sample Window card", width = "500px", bg.color = "white", border.color = "brown", header.text.color = "white", body.text.color = "black")