{"id":24562815,"url":"https://github.com/jhk0530/shinyroughjsbasic","last_synced_at":"2025-08-30T09:33:38.714Z","repository":{"id":137114792,"uuid":"227747697","full_name":"jhk0530/shinyRoughJSbasic","owner":"jhk0530","description":null,"archived":false,"fork":false,"pushed_at":"2019-12-21T13:15:09.000Z","size":4284,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-30T05:52:59.831Z","etag":null,"topics":["htmlwidgets","roughjs","shiny","tutorial"],"latest_commit_sha":null,"homepage":null,"language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhk0530.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-12-13T03:26:33.000Z","updated_at":"2019-12-21T13:15:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"da723695-947f-4494-ae40-8a9141ba4d92","html_url":"https://github.com/jhk0530/shinyRoughJSbasic","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jhk0530/shinyRoughJSbasic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhk0530%2FshinyRoughJSbasic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhk0530%2FshinyRoughJSbasic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhk0530%2FshinyRoughJSbasic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhk0530%2FshinyRoughJSbasic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhk0530","download_url":"https://codeload.github.com/jhk0530/shinyRoughJSbasic/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhk0530%2FshinyRoughJSbasic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272833298,"owners_count":25000870,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["htmlwidgets","roughjs","shiny","tutorial"],"created_at":"2025-01-23T09:18:01.959Z","updated_at":"2025-08-30T09:33:38.702Z","avatar_url":"https://github.com/jhk0530.png","language":"R","readme":"# shinyRoughJSbasic\ntutorial package for build shinyRoughJS with htmlwidgets as shinyRoughJSbasic\n\ni learned with dean attali's this [awesome tutorial](https://deanattali.com/blog/htmlwidgets-tips/)\n\n# step 0. think what to build, and decide package name\n\nas my goal is use rough.js in shiny, we'll make some rectangles that given as example\n\u003cimg src = 'https://user-images.githubusercontent.com/6457691/70847241-88b19d00-1ea5-11ea-8d0a-52d9d6c65b2f.png' width = 500\u003e\u003c/img\u003e\n\nand i prefer shiny package name as \u003cp\u003eshiny~~JS, shiny + ~~ + JavaScript\u003c/p\u003e since my first shiny package shinyCyJS\n\u003cbr\u003e\nso i'll use shinyRoughJS(+basic for tutorial)\n\u003cbr\u003e\n\n\n# step 1. make R project and publish repository\n\u003cimg src = 'https://user-images.githubusercontent.com/6457691/70766992-f45f1180-1da2-11ea-995c-a4ff467283cd.png' width = 300\u003e\u003c/img\u003e\n\u003cbr\u003e\n\u003cimg src ='https://user-images.githubusercontent.com/6457691/70767065-2ec8ae80-1da3-11ea-857e-a1ee51a57e42.png' width = 300\u003e\u003c/img\u003e\n\u003cbr\u003e\n\u003cimg src ='https://user-images.githubusercontent.com/6457691/70767112-5455b800-1da3-11ea-8e7e-cd4c34054dad.png' width = 300\u003e\u003c/img\u003e\n\u003cbr\u003e\n\u003cimg src = 'https://user-images.githubusercontent.com/6457691/70767188-9252dc00-1da3-11ea-8203-3cf3f50e9561.png' width = 300\u003e\u003c/img\u003e\n\u003cbr\u003e\n\n# step 2. make directory and files.\n\nR/shinyRoughJSbasic.R\n\u003cbr\u003e\ninst/\n\u003cbr\u003e\ninst/htmlwidgets\n\u003cbr\u003e\ninst/htmlwidgets/shinyRoughJSbasic.js\n\u003cbr\u003e\ninst/htmlwidgets/shinyRoughJSbasic.yaml\n\u003cbr\u003e\ninst/htmlwidgets/lib\n\n# step 3. put base javascript library (rough.js)\n\n[rough.js](https://github.com/pshihn/rough) \u003cbr\u003e\ninst/htmlwidgets/lib/rough-3.1.0 \n\n# step 4. write yaml file. \n\nthis yaml file will take format of\n\u003cbr\u003e\n```\ndependencies:\n  - name: \n    version: \n    src: (base javascript file's location)\n    script: (base javascript file)\n    stylesheet: (for dependent css file)\n```\nalso need empty new line at end of file and make comment with #\n\u003cbr\u003e\ni used this content as shinyRoughJSbasic\n``` yaml\ndependencies:\n  - name: rough\n    version: 3.1.0\n    src: htmlwidgets/lib/rough-3.1.0 # directory\n    script: rough-3.1.0.js # script\n    \n```\n[For multiple](https://github.com/unistbig/shinyCyJS/blob/master/inst/htmlwidgets/shinyCyJS.yaml)\n\n# step 5. write js file.\n\nthis javascript consists with\n```\nHTMLWidgets.widget({\n  name : ,\n  type : 'output',\n  \n  factory : function(el,width,height){\n    return {\n      renderValue : function(input){\n        \n      }\n    }\n  }\n})\n```\n\nnotice that, each base javascript needs different initiation.\n\u003cbr\u003e\ni used this for shinyRoughJSbasic\n\u003cbr\u003e\n``` javascript\n\nHTMLWidgets.widget({\n  name : 'shinyRoughJSbasic',\n  type : 'output',\n\n  factory : function(el, width, height) {\n\tvar container = document.getElementById(el.id);\n\t\n\t// Initialisation\n\tvar cv = document.createElement(\"canvas\");\n\tcv.id = 'minicv'; // mini canvas\n\tcontainer.appendChild(cv)\n\tcv.setAttribute('width',container.clientWidth)\n\tcv.setAttribute('height',container.clientHeight)\n\n    var rc = rough.canvas(document.getElementById('minicv'));\n    return {\n      renderValue: function(input) {\n        var Items = input.items;\n        for( var i = 0; i\u003cItems.length; i++){\n          var thisItem = Items[i];\n          if(thisItem.type=='rectangle'){\n            rc.rectangle(thisItem.x, thisItem.y, thisItem.w, thisItem.h, thisItem.options)\n          }\n        }\n      }\n    }\n  }\n});\n\n```\n\n# step 6. write R file\n\nR file needs \u003cb\u003eimport\u003c/b\u003e htmlwidgets\n\u003cbr\u003e\nR file needs 3 function at least with \u003cb\u003eexport\u003c/b\u003e\n\u003cbr\u003e\n1) widget function\nthis will take input and options \n\u003cbr\u003e\nand make htmlwidgets with base javascript functions\n\u003cbr\u003e\n\nfor example, shinyRoughJSbasic will require \u003cb\u003eelement, with type, size, location\u003c/b\u003e\n``` r\n#' @export\nshinyRoughJSbasic = function(items = list(),options = list(),width = NULL, height = NULL, elementId = NULL){\n  input = list( items = items, options = options )  \n  htmlwidgets::createWidget(\n    name = 'shinyRoughJSbasic',\n    input,\n    width = width,\n    height = height,\n    package = 'shinyRoughJSbasic',\n    elementId = elementId\n  )\n}\n\n```\nand remain two paired function will send/recieve r object to shiny application.\n\u003cbr\u003e\nfor more information, see this official [cheatsheet](https://shiny.rstudio.com/articles/cheatsheet.html)\n\n2) render function \n``` r\n#' @export\nrenderRough = function(expr, env = parent.frame(), quoted = FALSE){\n  if(!quoted){ expr = substitute(expr) } # force quoted\n  htmlwidgets::shinyRenderWidget(expr, shinyRoughJSbasicOutput, env, quoted = TRUE)\n}\n```\n3) output function\n\n``` r\n#' @export\nshinyRoughJSbasicOutput = function(outputId, width = '100%', height = '400px'){\n  htmlwidgets::shinyWidgetOutput(outputId, 'shinyRoughJSbasic', width, height, package = 'shinyRoughJSbasic')\n}\n```\n  \n# step 7. build package with ctrl+shift+B and check run\n\nto pass r object to shiny, it should be capsuled in \u003cb\u003elist\u003c/b\u003e\n\u003cbr\u003e\nhere are codes i used to check shinyRoughJSbasic in viewer or web browser\n\u003cbr\u003e\n\n```r\n// RoughRect is function to build rectangle object with (xpos, ypos, width, height)\n// which also included in R file\n\nshinyRoughJSbasic(\n  list(\n  RoughRect(15,15,80,80, RoughOptions(roughness = 0.5, fill='red')),\n  RoughRect(120,15,80,80, RoughOptions(roughness = 2.8, fill='blue')),\n  RoughRect(220,15,80,80, RoughOptions(bowing = 6, stroke = 'green', strokeWidth = 3, fill = 'white'))\n  )\n)\n\n```\n\n\u003cimg src ='https://user-images.githubusercontent.com/6457691/70847404-57d26780-1ea7-11ea-8236-d3f9b086a5ed.png' width = 500\u003e\u003c/img\u003e\n\nalso this code is example code with render - output paired function\n```r\nlibrary(shiny)\nlibrary(shinyRoughJSbasic)\nlibrary(shinyjs)\nui \u003c- fluidPage(\n  shinyRoughJSbasicOutput(outputId = 'cv', height = '500px')\n)\n\nserver \u003c- function(input, output, session) {\n  output$cv = renderRough(\n    shinyRoughJSbasic(\n      items = list(\n        # x,y,w,h\n        RoughRect(1,1,100,100, RoughOptions(fill='#FFFFFF')),\n        RoughRect(101,1,100,100,RoughOptions(fill='#74b9ff')),\n        RoughRect(201,1,100,100, RoughOptions(fill='#FFFFFF')),\n        RoughRect(301,1,100,100, RoughOptions(fill='#FFFFFF')),\n\n        RoughRect(1,101,100,100, RoughOptions(fill='#FFFFFF')),\n        RoughRect(101,101,100,100,RoughOptions(fill='#74b9ff')),\n        RoughRect(201,101,100,100, RoughOptions(fill = '#00b894')),\n        RoughRect(301,101,100,100, RoughOptions(fill='#FFFFFF')),\n\n        RoughRect(1,201,100,100, RoughOptions(fill='#FFFFFF')),\n        RoughRect(101,201,100,100,RoughOptions(fill='#74b9ff')),\n        RoughRect(201,201,100,100, RoughOptions(fill = '#00b894')),\n        RoughRect(301,201,100,100, RoughOptions(fill ='#fbc531')),\n\n        RoughRect(1,301,100,100,RoughOptions(fill='#fd79a8')),\n        RoughRect(101,301,100,100,RoughOptions(fill='#74b9ff')),\n        RoughRect(201,301,100,100, RoughOptions(fill = '#00b894')),\n        RoughRect(301,301,100,100, RoughOptions(fill ='#fbc531'))\n\n        )\n    )\n  )\n}\n\nshinyApp(ui, server)\n```\n\u003cimg src='https://user-images.githubusercontent.com/6457691/70847220-340e2200-1ea5-11ea-88aa-4281da1b1f2c.png' width = 300\u003e\u003c/img\u003e\n\n# step8. now you have build your own shiny application with Rough.js\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhk0530%2Fshinyroughjsbasic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhk0530%2Fshinyroughjsbasic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhk0530%2Fshinyroughjsbasic/lists"}