-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f7a7072
commit d16d2af
Showing
20 changed files
with
414 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| #' Create image look_up objects for html viewer | ||
| #' | ||
| #' @author George Moroz <[email protected]> | ||
| #' | ||
| #' @param img_src string or vector of strings with a image(s) path(s). | ||
| #' @param img_caption string or vector of strings that will be displayed when image is clicked. | ||
| #' @param text string o vector of strings that will be displayed as view link. By default it is eye emoji (👁). | ||
| #' @return a string or vector of strings | ||
| #' | ||
| #' @examples | ||
| #' create_image_look_up("path/to/your/file") | ||
| #' | ||
| #' @export | ||
| #' | ||
|
|
||
| create_image_look_up <- function(img_src, | ||
| img_caption = "", | ||
| text = "👁"){ | ||
| if(length(img_src) != length(img_caption)){ | ||
| stop(paste0("It looks like the img_src variable contains ", | ||
| length(img_src), | ||
| " objects and the img_caption variable contains ", | ||
| length(img_caption))) | ||
| } | ||
| paste0("<a ", | ||
| "onmouseover=\"resize(this, '200%')\" ", | ||
| "onmouseout=\"resize(this, '100%')\" ", | ||
| "onclick = 'pic_appear(\"", | ||
| img_src, | ||
| "\", \"", | ||
| img_caption, | ||
| "\")'> ", | ||
| text, | ||
| "<a>") | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| #' Create audio play objects for html viewer | ||
| #' | ||
| #' @author George Moroz <[email protected]> | ||
| #' | ||
| #' @param snd_src string or vector of strings with a image(s) path(s). | ||
| #' @param text string o vector of strings that will be displayed as view link. By default it is ear emoji (👂). | ||
| #' @return a string or vector of strings | ||
| #' | ||
| #' @examples | ||
| #' create_image_look_up("path/to/your/file") | ||
| #' | ||
| #' @export | ||
| #' | ||
|
|
||
| create_sound_play <- function(snd_src, | ||
| text = "👂"){ | ||
| paste0("<a ", | ||
| "onmouseover=\"resize(this, '200%')\" ", | ||
| "onmouseout=\"resize(this, '100%')\" ", | ||
| "onclick = 'sound_play(\"", | ||
| snd_src, | ||
| "\")'> ", | ||
| text, | ||
| "<a>") | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
102 changes: 81 additions & 21 deletions
102
inst/rmarkdown/templates/annotation_viewer/skeleton/skeleton.Rmd
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,102 @@ | ||
| --- | ||
| title: "Sound Viewer" | ||
| output: html_document | ||
| params: | ||
| data: your_file.csv | ||
| merge_column: "merge_column" | ||
| caption_column: "caption_column" | ||
| about: about.Rmd | ||
| editor_options: | ||
| chunk_output_type: console | ||
| --- | ||
|
|
||
| <style> | ||
| .main-container { | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| #my_block { | ||
| display: none; | ||
| position: fixed; | ||
| z-index: 1; | ||
| padding-top: 100px; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| overflow: auto; | ||
| background-color: rgba(0,0,0, 0.1); | ||
| } | ||
| #my_img { | ||
| margin: auto; | ||
| display: block; | ||
| width: 80%; | ||
| max-width: 700px; | ||
| } | ||
| #caption { | ||
| margin: auto; | ||
| display: block; | ||
| width: 80%; | ||
| max-width: 700px; | ||
| text-align: center; | ||
| padding: 10px 0; | ||
| height: 150px; | ||
| } | ||
| </style> | ||
|
|
||
| <img id="expandedImg" style="position: fixed; top: 0; left: 900px; width:50%"> | ||
| # {.tabset .tabset-fade .tabset-pills} | ||
| ## data | ||
|
|
||
| ```{r make_viewer, echo=FALSE, message=FALSE, warning=FALSE} | ||
| df <- read.csv(params$data, stringsAsFactors = FALSE) | ||
| df$audio <- | ||
| paste0('<audio controls> <source src="', | ||
| if(Sys.info()[1] == "Windows") "file:///", | ||
| df$audio, | ||
| '" type="audio/wav"></audio>') | ||
| df$pictures <- | ||
| paste0('<img src="', | ||
| if(Sys.info()[1] == "Windows") "file:///", | ||
| df$pictures, | ||
| '" style="width:10%" onclick="myFunction(this);">') | ||
| merge <- which(colnames(df) %in% params$merge_column) | ||
| captions <- which(colnames(df) %in% params$caption_column) | ||
| df[,merge] <- | ||
| paste(df[,merge], | ||
| phonfieldwork::create_image_look_up(img_src = df$pictures, | ||
| img_caption = df[,captions]), | ||
| phonfieldwork::create_sound_play(snd_src = df$audio)) | ||
| df <- df[, -which(colnames(df) %in% c("audio", "pictures"))] | ||
| DT::datatable(data = df, | ||
| filter = 'top', | ||
| rownames = FALSE, | ||
| options = list(pageLength = 50, dom = 'tip'), | ||
| escape = FALSE) | ||
| ``` | ||
|
|
||
| <div class = "my_block" id="my_block" onclick = "pic_disappear()"> | ||
| <span class="close">×</span> | ||
| <img class = "my_img" id="my_img"> | ||
| <div class = "caption" id="caption"> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| ## about | ||
|
|
||
| ```{r, child = params$about} | ||
| ``` | ||
|
|
||
|
|
||
| <script> | ||
| function myFunction(imgs) { | ||
| var expandImg = document.getElementById("expandedImg"); | ||
| var imgText = document.getElementById("imgtext"); | ||
| expandImg.src = imgs.src; | ||
| imgText.innerHTML = imgs.alt; | ||
| expandImg.parentElement.style.display = "block"; | ||
| } | ||
| function pic_appear(path, caption) { | ||
| var path, caption; | ||
| var block = document.getElementById("my_block"); | ||
| var block_img = document.getElementById("my_img"); | ||
| var caption_text = document.getElementById("caption"); | ||
| block.style.display = "block"; | ||
| block_img.src = path; | ||
| caption_text.innerHTML = caption; | ||
| } | ||
| function pic_disappear() { | ||
| var block = document.getElementById("my_block"); | ||
| block.style.display = "none"; | ||
| } | ||
| function sound_play(x) { | ||
| var audio = new Audio(); | ||
| audio.src = x; | ||
| audio.play(); | ||
| } | ||
| function resize(elem, percent) { | ||
| elem.style.fontSize = percent; | ||
| } | ||
| </script> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.