Package 'r2resize' reference manual

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.1
Built:	2024-10-28 05:21:33 UTC
Source:	https://github.com/oobianom/r2resize

Attach jQuery to current document

Description

The current function allows inclusion of jQuery in an HTML output

Usage

add.JQuery(version = "3.5.1")
add.JQuery(version = "3.5.1")

Arguments

version

jQuery version

Value

script tag with jQuery link

Note

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.

Examples

add.JQuery()
add.JQuery("3.7.0") # add a specific version
add.JQuery()
add.JQuery("3.7.0") # add a specific version

Configure toolbar settings for the page

Description

Set options for the inclusion of sizing toolbar in documents

Usage

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
)

Arguments

`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

Value

Inclusion of mini toolbar for images and tables within a page

Examples for r2resize

More examples and demo pages for this function are located at this link - https://r2resize.obi.obianom.com.

Examples

# 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

Hover elastic card container

Description

Automatic elastic card holder for images or navigation items

Usage

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
)

Arguments

`...`	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

Value

Multiple cards with hover elastic functionality

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

#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"
  )
)

Create an Emphasis Card

Description

Emphasis container

Usage

empahsisCard(..., bg.color = NULL)
empahsisCard(..., bg.color = NULL)

Arguments

`...`	content of the card
`bg.color`	content background color

Value

container with a moving border to denote emphasis

More examples for r2resize

More examples and demo pages are located at this link - https://r2resize.obi.obianom.com.

Examples

#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"
)

Create an Emphasis Card

Description

Emphasis container

Usage

emphasisCard(..., bg.color = NULL)
emphasisCard(..., bg.color = NULL)

Arguments

`...`	content of the card
`bg.color`	content background color

Value

container with a moving border to denote emphasis

More examples for r2resize

More examples and demo pages are located at this link - https://r2resize.obi.obianom.com.

Examples

#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"
)

Flexible card container

Description

Expandable flexible card holder for images or navigation items

Usage

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
)

Arguments

`...`	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

Value

Multiple cards with flex functionality

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

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 viewer functionality for images

Description

Elegant image viewer and resizer for images

Usage

shinyExpandImage(imageid = c())
shinyExpandImage(imageid = c())

Arguments

imageid

one or more IDs of a div containing images

Value

Feature that allows images to be easily expanded and viewed

Use case

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.

Examples

# 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) {})
  )
}

Resizable container content holder

Description

Highly customizable and resizable container content holder

Usage

sizeableCard(..., bg.color = NULL, border.color = NULL)
sizeableCard(..., bg.color = NULL, border.color = NULL)

Arguments

`...`	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

Value

Container with a resizing toolbar feature on the right

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

#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"
)

Resizable split screen container

Description

Highly customizable and resizable split screen container

Usage

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"
)
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"
)

Arguments

`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

Value

Resizeable split screen container

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

#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 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 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"
)

Re sizable split screen container version 2

Description

Highly customizable and re sizable split screen container version 2

Usage

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
)

Arguments

`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

Value

Realizable split screen container style 2

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

#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"
)

Resizable Moveable Expandable Window Card

Description

Easily expandable and resizable content container holder

Usage

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
)

Arguments

`...`	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

Value

A window-like card container that is expandable and resizable

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Note

Please note that only one windowCard may be created by page

Examples

#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")

Package 'r2resize'

Help Index

Attach jQuery to current document

Description

Usage

Arguments

Value

Note

Examples

Configure toolbar settings for the page

Description

Usage

Arguments

Value

Examples for r2resize

Examples

Hover elastic card container

Description

Usage

Arguments

Value

Examples for r2resize

Examples

Create an Emphasis Card

Description

Usage

Arguments

Value

More examples for r2resize

Examples

Create an Emphasis Card

Description

Usage

Arguments

Value

More examples for r2resize

Examples

Flexible card container

Description

Usage

Arguments

Value

Examples for r2resize

Examples

Elegant viewer functionality for images

Description

Usage

Arguments

Value

Use case

Examples

Resizable container content holder

Description

Usage

Arguments

Value

Examples for r2resize

Examples

Resizable split screen container

Description

Usage

Arguments

Value

Examples for r2resize

Examples

Re sizable split screen container version 2

Description

Usage

Arguments

Value

Examples for r2resize

Examples

Resizable Moveable Expandable Window Card

Description

Usage

Arguments

Value

Examples for r2resize

Note

Examples