Our customers wanted a lot of different custom inputs inside our app. They see a website on the internet and want exactly the same inside our shiny app. \u201cCan we get this feature into the app?\u201d. Upon this question I start reading the tutorial about custom inputs<\/a> from RStudio again and often again. Don\u2019t understand me wrong, it\u2019s a great tutorial. But people tell me, they are missing the key message. I am missing a clear definition of steps you have to follow, to get your input ready to work.<\/p>\n\n\n\n For me it is sometimes really hard to reproduce what I did for one custom input in another custom input. This is the main reason why I am now creating this tutorial. There are key elements in implementing custom inputs that you shall think about. Some of them you will already be keen on, so you can ignore one or the other paragraph. But the one\u2019s you do not know about, please read them carefully. And whenever you are building a new input, make sure you checked the 7 steps I will explain below.<\/p>\n\n\n\n The full outcome of this tutorial can be found in the github repository zappingseb\/customshinyinput.<\/a><\/p>\n\n\n\n The final app runs at: https:\/\/sebastianwolf.shinyapps.io\/customshinyinput\/<\/a><\/p>\n\n\n\n These are the chapters I will go through to build an app with custom shiny inputs and the things you need to know to do it yourself:<\/p>\n\n\n\n My example is pretty artificial, but there is a reason for that. I want to make it hard to get the value of the input and use jQuery, because it has a lot of really cool features and is already included in shiny . So let\u2019s imagine you want to define two colors. One is your bar border color, the other is your bar fill color. Both shall be entered using a color picker. Upon being too close (e.g. red and dark red) there shall be a little note on this. I will do this using the Telephones by region App <\/a>from the Shiny Gallery because it includes a The app shall get two inputs that allow you to choose colors. Such inputs are called color pickers. This tutorial will deal with jQuery inputs. JQuery is easy to learn and already included in shiny. So let\u2019s start searching for inputs by googling the following: \u201ccolorpicker jquery\u201d .These are my results:<\/p>\n\n\n\n Let\u2019s double check the first two. The ColorPicker\u200a\u2014\u200ajQuery plugin looks like that from the code description (https:\/\/www.eyecon.ro\/colorpicker<\/a>):<\/p>\n\n\n\n or on the page \u201cImplement\u201d<\/p>\n\n\n\n The Spectrum color picker (https:\/\/bgrins.github.io\/spectrum\/<\/a>) documentation looks like that from the code description:<\/p>\n\n\n\n You can already see a difference in documentation. While spectrum gives you the HTML element to use + the JavaScript code, ColorPicker leaves you with some pure JavaScript code. This is something you should be aware of. If you use the first one, you might have to find out what the HTML has to look like on your own.<\/p>\n\n\n\n Second of all you shall be aware that it might be hard to derive the value of the color picker. Later in this tutorial I will talk about the getValue<\/em> function of R-Shiny custom elements. In this case it is actually kind of easy, as the inputs work as real So please try to always use custom inputs that can be designed as html So for reasons of simplicity and documentation I will use the spectrum.js color picker.<\/p>\n\n\n\n Takeaway #1: Search for jQuery based tools that provide HTML in their tutorials<\/p><\/blockquote>\n\n\n\n This chapter is about the front-end setup of your custom input element. Therefore you need to know some basic HTML. First thing to know: what is a class <\/a>and what is an I<\/a>D. Please read this at the desired links on w3schools<\/a> if you do not know the difference.<\/p>\n\n\n\n Your custom input shall have both. An ID to make it easy to use the spectrum.js, or any other JavaScript feature you will stumble upon. Most of such special input features use IDs. Additionally you shall use a class, to make it reproducible. You may want to have multiple of your custom input elements in your final shiny app. Therefore they shall all get one class to look the same or behave the same.<\/p>\n\n\n\n The element we want to build shall be a So the things we have to replace are:<\/p>\n\n\n\n Additionally I already mentioned a produces<\/p>\n\n\n\n as one part of its code. Meaning we can build a shiny + spectrum.js input like this in R:<\/p>\n\n\n view raw<\/a>custom_inputs_lessonone_textInput.R<\/a> hosted with \u2764 by GitHub<\/a><\/p>\n\n\n\n Of course you do not want to hard code the word \u201ccustom\u201d here. Using the view raw<\/a>DoubleColorPickerInput.R<\/a> hosted with \u2764 by GitHub<\/a><\/p>\n\n\n\n Now inside your shiny app there are just two files missing. You can find both in the spectrum.js tutorial. You need to source the JS and CSS files. This is necessary for the app to work. Therefore you download spectrum.js from their website<\/a> and place the \u201cspectrum.js\u201d and \u201cspectrum.css\u201d files in the \u201cwww\u201d directory of your app (here \u201ccustomshinyinput\u201d).<\/p>\n\n\n\n Now you can source both files using the html sourcing procedures:<\/p>\n\n\n\n In shiny it looks like this:<\/p>\n\n\n\n The full app with finished user interface<\/strong> you can then create would include just your custom input in the UI:<\/p>\n\n\n view raw<\/a>custom_inputs_lessonone.R<\/a> hosted with \u2764 by GitHub<\/a><\/p>\n\n\n\n and look like this:<\/p>\n\n\n\n Now you can see that spectrum.js took over your Note: This is not a custom shiny input, as we do not receive the input values, yet. In the next chapter we will make it a real custom input.<\/p>\n\n\n\n Takeaway #2: Try to use Shiny Input Elements inside your custom elements.<\/p><\/blockquote>\n\n\n\n Takeaway #3: Do not forget to source the JavaScript and CSS files of your custom element.<\/p><\/blockquote>\n\n\n\n Takeaway #4: Put a The first step to make your input a real custom input is creating a JavaScript file as described in the tutorial by RStudio<\/a>. It has to contain three main elements.<\/p>\n\n\n\n #1 and #3 are easy to do. Just give it a name and use the two functions<\/p>\n\n\n\n The hard part comes for Part #2. Part #2 shall contain 5 functions<\/p>\n\n\n\n Let\u2019s start with the where view raw<\/a>custom_inputs_lessontwo.js<\/a> hosted with \u2764 by GitHub<\/a><\/p>\n\n\n\n Takeaway #5: <\/em>Use the jQuery.find() function to get your element into the Shiny.InputBinding.<\/p><\/blockquote>\n\n\n\n Here comes the hard part. We now want to access the value of our custom input and hand it over to R. Therefore we need to work on the The example I constructed makes it a bit harder than what you would expect. In this case we do not want to include just the value of one input element, but two. Therefore the best way to handle two values between JavaScript and R is the json-Format<\/a>. It allows you to send dictionaries as well as arrays. Here we would like to get an array with dictionaries that tells us something like this: border_color=red, fill_color=blue. In JSON this would look like this<\/p>\n\n\n\n It means you get an array of two objects that both have the attributes name <\/em>and the attributes color<\/em>. We can do this now inside our view raw<\/a>custom_inputs_lessonthree.js<\/a> hosted with \u2764 by GitHub<\/a><\/p>\n\n\n\n The functions you need to know are In the R Code of In case you want a more difficult input you might have to look up how to get the value of an element. It can be different than basically using the To make the output array readable in R you have to return it as a JSON string. Inside JavaScript the Takeaway #6: Derive input element Values by jQuery.val()<\/p><\/blockquote>\n\n\n\n Takeaway #7: Use JSON arrays to derive multiple input values<\/p><\/blockquote>\n\n\n\n Now we have a custom input using two color pickers and we are able to derive the value of this input. Next we need shiny to also react upon changes of this input. This is what is called subscribe.<\/em><\/p>\n\n\n\n There are two ways how you can subscribe to an input. The first one will use no rate policy, meaning you send everything that changes immediately to R. The second one can use a rate policy, meaning you wait a certain time for inputs to change and then send the values. The second one is really important for text input fields. In case somebody types a word, you do not want shiny to react upon each letter the person types, but on the whole word. Therefore you will need a rate policy. The rate policy is explained in detail inside the RStudio tutorial<\/a>.<\/p>\n\n\n\n Here we would like our app to change on any color change we have in our DoubleColorPicker. As each element inside our DoubleColorPicker is an input, we can basically check for changes of those. Therefore jQuery contains a function that is called Our subscription to the color pickers will look like this:<\/p>\n\n\n view raw<\/a>custom_inputs_lessonfour_part.js<\/a> hosted with \u2764 by GitHub<\/a><\/p>\n\n\n\n Instead of Though I prepared an example of such a complicated input for anyone who is interested as a Gist (Example of a difficult multi input custom input)<\/strong>.<\/a><\/p>\n\n\n\n The whole JavaScript file now looks like that:<\/p>\n\n\n view raw<\/a>custom_inputs_lessonfour.js<\/a> hosted with \u2764 by GitHub<\/a><\/p>\n\n\n\n it also contains an unsubscribe function, which you can always do in the same way using the Takeaway #8: Use the jQuery.change() function to derive changes of inputs.<\/p><\/blockquote>\n\n\n\n Takeaway #9: Try to give each element inside your custom input a desired HTML\/CSS class.<\/p><\/blockquote>\n\n\n\n Now we have a custom input that allows you to read two color pickers into one JSON string. This JSON string is available inside R by a shiny input. Additionally changes on one of the two colors will do a callback<\/em> to shiny and inform it, that it has to react. We are finished with our custom input? No, we want it to come out of the JavaScript interaction not as a JSON string, but as a nice and readable list like:<\/p>\n\n\n\n Therefore we need to add a 1 The first step is easy. You basically have to change the JavaScript functions to contain the following:<\/p>\n\n\n Now shiny will know which type you defined for your custom input. To see the whole input binding now, look at this Github Gist (adding getType for InputBinding in shiny)<\/a>.<\/p>\n\n\n\n 2 The second part is just coding a function to get a list out of a JSON string in R. This can be done by view raw<\/a>custom_inputs_lessonfive.R<\/a> hosted with \u2764 by GitHub<\/a><\/p>\n\n\n\n Takeaway #10: Use registerInputHandler function to parse the response from your custom input over into something useful in R.<\/p><\/blockquote>\n\n\n\n Actually, you are done with the application. Get the shiny Telephones by Region example<\/a> and make sure your ui.R<\/em> sources DoubleColorPicker.R <\/em>and contains in it to source the Javascript files. You can access the colors in your server.R <\/em>by:<\/p>\n\n\n and receive this app:<\/p>\n\n\n\n for the full example please see https:\/\/github.com\/zappingseb\/customshinyinput<\/a><\/p><\/blockquote>\n\n\n\n At the beginning of this tutorial I told you about the one feature I want to have, that is easy to do in shiny, but you should not do it. It\u2019s double checking if the two inserted colors are too close as e.g. red and dark red. This feature comes along with calculating something from your input, that does not <\/strong>change your R calls or R calculations, but your user interface. For example you want to give a warning upon the two colors being too close to each other. Of course you can do it in R, but this means the following:<\/p>\n\n\n\n Pick the color \u2192 check the value with the inputBinding \u2192 send it to shiny \u2192 use the inputHandler \u2192 run R code on it \u2192 change a shiny warning output<\/p>\n\n\n\n You can get this much faster using pure JavaScript<\/p>\n\n\n\n Pick the color \u2192 check the value \u2192 change a warning item<\/p>\n\n\n\n Of course the 5 step process via shiny runs fast and you wont\u2019t notice any difficulties if you have one custom input, but upon having maybe 20 or 30 of those inputs, we noticed in our apps, that they get kind of slow. This could be due to our bad R code or our bad JavaScript code. But we have 5 places where we can do something wrong. The second way just has 3 places to do something wrong. Therefore whenever you want to do something simple with your custom input that does not influence R calculations, do it in JavaScript.<\/strong><\/p>\n\n\n\n My solution for dealing with colors comparison came from a stackoverflow entry<\/a>.<\/p><\/blockquote>\n\n\n\n As the response we need a warning HTML item (class=\u2019warning\u2019) and a function call to check the item by its ID. Both can be setup in shiny. The warning shall not be shown at the beginning (display: none) and have red text (color:red). The function call shall check for changes of the item using the What is important for a custom shiny input?<\/h3>\n\n\n\n
The example<\/h3>\n\n\n\n
barplot<\/code>. But let\u2019s start from scratch<\/p>\n\n\n\n1 Know how to find fancy and easy to implement inputs<\/h3>\n\n\n\n
![\"\"\/](\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*yfCRPHu5fmVxHd4OkBmQQQ.png\")
$('#colorpickerHolder').ColorPicker({flat: true});<\/pre>\n\n\n\n$('input').ColorPicker(options);<\/pre>\n\n\n\n<input type='text' id=\"custom\" \/><\/pre>\n\n\n\n
<script>
$(\"#custom\").spectrum({
color: \"#f00\"
});
<\/script><\/pre>\n\n\n\ninput<\/code> elements. input<\/code> elements can be read in jQuery using<\/p>\n\n\n\n$('input').val()<\/pre>\n\n\n\n<input><\/code> elements. Additionally if the input like for spectrum is just a basic <input type=\"text\"><\/code> you can stick to shiny standard inputs in your code, meaning you can reuse something like the shiny function textinput<\/a><\/code>as it also produces a <input type=\"text\"><\/code> element, but covers additional features like a label.<\/p>\n\n\n\n2 Know some basic HTML and JS for the setup<\/h3>\n\n\n\n
div<\/code> element with a specific ID and two color pickers inside. From the spectrum.js website we know one color picker looks like this:<\/p>\n\n\n\n<input type='text' id=\"custom\" \/><\/pre>\n\n\n\n
<script>
$(\"#custom\").spectrum({
color: \"#f00\"
});
<\/script><\/pre>\n\n\n\nshiny::textInput<\/code> also generates this code inside e.g.<\/p>\n\n\n\nshiny::textInput(inputId = \"custom\")<\/pre>\n\n\n\n
<input type='text' id=\"custom\" \/><\/pre>\n\n\n\n
\ndiv(\n shiny::textInput(inputId = "custom"),\n HMTL("<script>\n $('#custom').spectrum({\n color: '#f00'\n });\n <\/script>"\n )\n)\n<\/pre><\/div>\n\n\nglue<\/a><\/code>-package we can generate a pretty nice id parser. Additionally wrapping our two textInputs<\/code> inside a div<\/code> function and use glue<\/code> to also parse the JavaScript code inside. Finally we get a function that will generate an input element including two text inputs where one is shiny made and one is custom made by HTML code (see below). Additionally the necessary JavaScript code for spectrum.js is parsed underneath the elements. We use the value preferredFormat: 'hex'<\/code> as we like to get hex color values in R as a return.<\/p>\n\n\n\n#' Function to return a DoubleColorPicker input\n#' @param id (\\code{character}) A web element ID, shall not contain dashes or underscores or colon\n#' @param col_border (\\code{character}) A hex code for the border color default value\n#' @param col_fill (\\code{character}) A hex code for the fill color default value\n#' @return An \\code{shiny::div} element with two color pickers\n#' @author Sebastian Wolf \\email{sebastian@@engel-wolf.com}\nDoubleColorPickerInput <- function(id="fancycolorpicker", col_border = "#f00", col_fill="#00f"){\n \n # Return a div element of class "doubleclorpicker"\n div(\n id=id,\n class="doublecolorpicker",\n \n # Include two shiny textInputs\n textInput(inputId=glue("{id}-input-border"),label="Border Color",value = col_border),\n tags$label("Fill Color"),\n HTML(glue("<input type='text' id='{id}-input-fill' value='{col_fill}'\/>")),\n \n # Include the Javascript code given by the spectrum.js website\n HTML(\n glue(\n "<script>\n $('#{id}-input-border').spectrum({{\n color: '{col_border}',\n preferredFormat: 'hex'\n }});\n $('#{id}-input-fill').spectrum({{\n color: '{col_fill}',\n preferredFormat: 'hex'\n }}); \n <\/script>"\n \n )\n )# HTML\n )#div\n \n}\n<\/pre><\/div>\n\n\n![\"\"\/](\"https:\/\/cdn-images-1.medium.com\/max\/600\/1*7XGjzFMW-6oR83caq22z_A.png\")
<script src='spectrum.js<\/a>'><\/script>
<link rel='stylesheet' href='spectrum.css<\/a>' \/><\/pre>\n\n\n\ntags$head(
tags$link(rel = \"stylesheet\", type = \"text\/css\",
href = \"spectrum.css\"),
tags$script(src=\"spectrum.js\")
)<\/pre>\n\n\n\n\nlibrary(shiny)\nlibrary(glue)\n\nsource("DoubleColorPickerInput.R")\n\nui <- fluidPage(\n \n tags$head(\n tags$link(rel = "stylesheet", type = "text\/css", href = "spectrum.css"),\n tags$script(src="spectrum.js")\n ),\n \n # Generate a row with a sidebar\n sidebarLayout( \n \n # Define the sidebar with one custom input\n sidebarPanel(\n DoubleColorPickerInput()\n ),\n \n mainPanel(\n )\n \n )\n)\n\nserver <- function(input, output) {\n\n}\nshinyApp(ui, server)\n<\/pre><\/div>\n\n\n![\"\"\/](\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*dREwTFpDBaBCwp_2eeTX3A.png\")
shiny::textInput<\/code> and made it a color picker input. This is not really a custom input. But you can already see it is a nice feature that you can have a simple text input that allows you to read colors.<\/p>\n\n\n\ndiv<\/code> container around your element and give it a special class.<\/p><\/blockquote>\n\n\n\n3 Know how to start with the JavaScript InputBinding file<\/h3>\n\n\n\n
\/\/ #1
var DoubleColorPickerBinding = new Shiny.InputBinding();
\/\/ #3
Shiny.inputBindings.register(DoubleColorPickerBinding);<\/pre>\n\n\n\nfind<\/code> function. The find<\/code> function allows you to call your custom input inside all other (2\u20135) functions by the el<\/code> variable. This is pretty nice to work with, as you don\u2019t have to find the element again and again and again. In our case we defined that each custom input shall have the HTML class doublecolorpicker<\/code> . To find the element, we just use:<\/p>\n\n\n\nfind: function(scope) {
return $(scope).find(\".doublecolorpicker\");
}<\/pre>\n\n\n\nscope<\/code> is the website you are working on and find<\/a><\/code> is a function that comes with jQuery<\/a> and the .<\/code> operator of CSS calls for classes. Do not mess up the two different find<\/code> functions. One is defined inside your JavaScript file, the other one comes from jQuery. Now you\u2019ve got it. You found your custom input element again and can work inside it. The whole JavaScript file you need to add to your app now looks like this, in future we call it DoubleColorPickerInput.js<\/code>:<\/p>\n\n\n\n\/\/ DoubleColorPicker Input Binding\n\/\/\n\/\/ Definition of a Shiny InputBinding extension to\n\/\/ get the values of two color pickers.\n\/\/\n\/\/ https:\/\/github.com\/zappingseb\/customshinyinput\n\/\/ Author: Sebastian Wolf\n\/\/ License: MIT\n\n\/\/ -----------------------------------------------------\n\n\/\/ Create a shiny input binding\n\/\/ Each custom input needs to be a shiny input binding\n\/\/ that is defined by the JavaScript class "Shiny" and\n\/\/ using the method "InputBinding"\n\/\/ The name can be chosen, here it is "DoubleColorPickerBinding"\nvar DoubleColorPickerBinding = new Shiny.InputBinding();\n\n\/\/ Extend the binding with the functions seen here\n$.extend(DoubleColorPickerBinding, {\n \n \/\/ The scope defines how the element is described in HTML code\n \/\/ The best way to find the scope \n find: function(scope) {\n return $(scope).find(".doublecolorpicker");\n },\n getValue: function(el) {\n \/\/ todo\n },\n setValue: function(el, value) {\n \/\/ todo\n },\n subscribe: function(el, callback) {\n \/\/ todo\n },\n unsubscribe: function(el) {\n \/\/ todo\n }\n});\n\n\/\/ Registering the shiny input\n\/\/\n\/\/ The following function call is used to tell shiny that\n\/\/ there now is a new Shiny.InputBinding that it shall\n\/\/ deal with and that it's functionality can be found in\n\/\/ the variable "DoubleColorPickerBinding"\nShiny.inputBindings.register(DoubleColorPickerBinding);\n<\/pre><\/div>\n\n\n4 Know what your getValue<\/em> function looks like<\/strong><\/h3>\n\n\n\n
getValue<\/code> function inside the JavaScript file. This function basically returns the values of your custom input element into your shiny input<\/code> variable.<\/p>\n\n\n\n[
{name:'border',
color:'red'},
{name:'fill',
color:'blue'}
]<\/pre>\n\n\n\ngetValue<\/code> function by using some basic jQuery Tools.<\/p>\n\n\n\ngetValue: function(el) {\n \/\/ create an empty output array\n var output = []\n\n \/\/ go over each input element inside the\n \/\/ defined InputBinding and add the ID\n \/\/ and the value as a dictionary to the output\n $(el).find("input").each(function(inputitem){\n\n output.push({\n name: $(this).attr("id"),\n value: $(this).val()\n });\n });\n\n \/\/ return the output as JSON \n return(JSON.stringify(output))\n\n}\n<\/pre><\/div>\n\n\neach<\/code>, attr<\/code>and val<\/code> . These three functions allow you to iterate over your inputs (each<\/code>), to derive their ID (attr<\/code>) and to derive their value (val<\/code>).<\/p>\n\n\n\nDoubleColorPickerInput.<\/a>R<\/code>we encoded the IDs an a way that they represent border color or for the fill color. The IDs make a good name by this encoding.<\/p>\n\n\n\nval<\/code> function or you need a different find<\/code> call. For example using a textarea <\/em>input you cannot find it using the $(el).find('input')<\/code> statement. You will have to use $(el).find('textarea')<\/code> and also append the value of this element to your output array.<\/p>\n\n\n\nJSON.stringify<\/code> function will do it for you.<\/p>\n\n\n\n5 Know what your subscribe function looks like<\/h3>\n\n\n\n
change<\/code> that notices any change of the value of an element or changes of classes, too. Other candidates in jQuery for such change recognition of changes are: keyup<\/code> , keydown<\/code> , keypress<\/code> .<\/p>\n\n\n\n\nsubscribe: function(el, callback) {\n \/\/ the jQuery "change" function allows you\n \/\/ to notice any change to your input elements\n $(el).on('change.input', function(event) {\n callback(false);\n \/\/ When called with false, it will NOT use the rate policy,\n\t \/\/ so changes will be sent immediately\n }); \n }\n<\/pre><\/div>\n\n\nchange.input<\/code> seems like an easy thing to check on. But you might have more difficult inputs inside your shiny custom input element. Therefore I would recommend to give each of your custom inputs an additional class OR find out what is the class of your shiny-input. I built a shiny input out of shiny selectInput<\/code> functions. They all have the class selectized<\/code> . So you can make a subscribe function like that:<\/p>\n\n\n\n$(el).on('change.selectized', function(event) {<\/pre>\n\n\n\n callback(false);<\/pre>\n\n\n\n
});<\/pre>\n\n\n\n
selectized<\/code> you can insert your own class that you assign to each of your single elements. Assigning an own class like doublecolorpickerItem<\/code> will also allow you to derive the values easier because you do not care for the type of your input element. The code of your app would look really different then, but you could do it and I recommend it. In case of this app here, it is not possible as shiny::textInput<\/code> does not allow to set a custom class.<\/p>\n\n\n\n\n\/\/ DoubleColorPicker Input Binding\n\/\/\n\/\/ Definition of a Shiny InputBinding extension to\n\/\/ get the values of two color pickers.\n\/\/\n\/\/ https:\/\/github.com\/zappingseb\/customshinyinput\n\/\/ Author: Sebastian Wolf\n\/\/ License: MIT\n\n\/\/ -----------------------------------------------------\n\n\/\/ Create a shiny input binding\n\/\/ Each custom input needs to be a shiny input binding\n\/\/ that is defined by the JavaScript class "Shiny" and\n\/\/ using the method "InputBinding"\n\/\/ The name can be chosen, here it is "DoubleColorPickerBinding"\nvar DoubleColorPickerBinding = new Shiny.InputBinding();\n\n\/\/ Extend the binding with the functions seen here\n$.extend(DoubleColorPickerBinding, {\n \n \/\/ The scope defines how the element is described in HTML code\n \/\/ The best way to find the scope \n find: function(scope) {\n return $(scope).find(".doublecolorpicker");\n },\n getValue: function(el) {\n \/\/ create an empty output array\n var output = []\n \n \/\/ go over each input element inside the\n \/\/ defined InputBinding and add the ID\n \/\/ and the value as a dictionary to the output\n $(el).find("input").each(function(inputitem){\n \n output.push({\n name: $(this).attr("id"),\n value: $(this).val()\n });\n });\n \n \/\/ return the output as JSON \n return(JSON.stringify(output))\n\n },\n setValue: function(el, value) {\n \/\/ todo\n },\n subscribe: function(el, callback) {\n \/\/ the jQuery "change" function allows you\n \/\/ to notice any change to your input elements\n \t$(el).on('change.input', function(event) {\n \t callback(false);\n \t});\t\n },\n unsubscribe: function(el) {\n $(el).off('.doublecolorpicker');\n }\n});\n\n\/\/ Registering the shiny input\n\/\/\n\/\/ The following function call is used to tell shiny that\n\/\/ there now is a new Shiny.InputBinding that it shall\n\/\/ deal with and that it's functionality can be found in\n\/\/ the variable "DoubleColorPickerBinding"\nShiny.inputBindings.register(DoubleColorPickerBinding);\n<\/pre><\/div>\n\n\noff<\/code> function.<\/p>\n\n\n\n6 Know how to handle the input<\/h3>\n\n\n\n
[[\"fill\"]]
\"#f00000\"
[[\"border\"]]
\"#00000f\"<\/pre>\n\n\n\nregisterInputHandler<\/a><\/code>function call to our shiny application. This will allow you to not only have a custom input, but also a custom value derived from your custom input. It needs two things in the setup.<\/p>\n\n\n\n\ngetType: function(el) {\n return "DoubleColorPickerBinding";\n }\n<\/pre><\/div>\n\n\njsonlite<\/code> easily. jsonlite<\/code> will return a data.frame that you can parse into a list. All of this has to happen inside the registerInputHandler<\/a><\/code>function call. You can add this code snippet to the file where you defined the custom input and it will be sourced upon starting the app.<\/p>\n\n\n\n# Try to remove the input Handler as shiny does not allow double input\n# handlers\ntry({ removeInputHandler("DoubleColorPickerBinding") })\n\n# Use the shiny registerInputHandler function to\n# register a way to deal with the inputs coming\nshiny::registerInputHandler(\n "DoubleColorPickerBinding", \n function(x, shinysession, name) {\n \n if(is.null(x)) {\n return(x)\n \n } else {\n # Parse return value from JSON into R format dataframe\n colors_df <- jsonlite::fromJSON(x)\n \n # Extract the values of the data frame as a list\n res <- list() \n \n res[["fill"]] <- colors_df$value[\n which(grepl(colors_df$name,pattern="fill"))\n ]\n res[["border"]] <- colors_df$value[\n which(grepl(colors_df$name,pattern="border"))\n ]\n \n return(res)\n }\n }\n)\n<\/pre><\/div>\n\n\n7 Don\u2019t build reactive stuff about you input in R, do as much as possible in JavaScript<\/h3>\n\n\n\n
DoubleColorPickerInput(\"myid\")<\/code> inside your sidePanel<\/code> . Additionally your ui.R <\/em>should have<\/p>\n\n\n\ntags$head(\n tags$link(rel = "stylesheet", type = "text\/css", href = "spectrum.css"),\n tags$script(src="spectrum.js"),\n tags$script(src="DoubleColorPickerInput.js")\n)\n<\/pre><\/div>\n\n\n
\ncolor_list <- input$myid\nbarplot(WorldPhones[,input$region]*1000, \n main=input$region,\n ylab="Number of Telephones",\n xlab="Year",\n col = color_list[["fill"]],,\n border = color_list[["border"]],\n lwd=3\n )\n<\/pre><\/div>\n\n\n
![\"\"\/](\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*Mqnc2uvNZcwJMq5PFI8e6Q.png\")
jQuery.change<\/code> function.<\/p>\n\n\n