Let's look at each chunk of index.html in turn, as shown in the following code:
<html>
<head>
<title>HTML minimal example</title>
<script src="shared/jquery.js"
type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="shared/shiny.css"/>
<style type = "text/css">
body {
background-color: #ecf1ef;
}
#navigation {
position: absolute;
width: 300px;
}
#centerdoc {
max-width: 600px;
margin-left: 350px;
border-left: 1px solid #c6ec8c;
padding-left: 20px;
}
</style>
</head>
The <head> section contains some important setup code for Shiny, loading the JavaScript and jQuery scripts, which make it work, as well as a style sheet for Shiny. You will need to add some CSS of your own, unless you want every element of the interface and output to be displayed as a big jumble at the bottom of the screen, making the whole thing look very ugly. For simplicity, I've added some very basic CSS in the <head> section; you could, of course, use a separate CSS file and add a link to it, just as shiny.css is referenced.
The body of the HTML contains all the input and output elements that you want to use, as well as any other content that you want on the page. In this case, I've mixed up a Shiny interface with a picture of my cats because no web page is complete without a picture of a cat! Have a look at the following code:
<body>
<h1>Minimal HTML UI</h1>
<div id = "navigation">
<p>
<label>Title for graph:</label><br />
<textarea name="comment" rows = "4"
cols = "30">My first graph</textarea>
</p>
<div class="attr-col shiny-input-radiogroup" id="graph">
<p>
<label>What sort of graph would you like?</label><br>
<input type="radio" name="graph" value="1"
title="Straight line" checked>Linear<br>
<input type="radio" name="graph" value="2"
title="Curve">Quadratic<br>
</p>
</div>
<label>Here's a picture of my cats</label><br />
<img src="cat.jpg" alt="My cats" width="300" height = "300">
</div>
<div id = "centerdoc">
<div id="textDisplay" class="shiny-text-output"></div>
<br/>
<div id="plotDisplay" class="shiny-plot-output"
style="width: 80%; height: 400px"></div>
</div>
</body>
</html>
There are three main elements: a title and two <div> sections, one for the inputs and one for the output. The UI is defined within the navigation <div>, which is left aligned. Recreating Shiny widgets in HTML is pretty simple, and you can also use HTML elements that are not given in Shiny. Instead of replacing the textInput() widget with <input type="text"> (which is equivalent to it), I have instead used <textarea>, which allows more control over the size and shape of the input area.
The radioButtons() widget can be recreated with <input type = "radio">. You can see that both get a name attribute, which is referenced in the server.R file as input$name (in this case, input$comment and input$graph). You will note that there is another <div> around the radio button definition, <div class="attr-col shiny-input-radiogroup" id="graph">. This is a necessary extra when using Shiny with HTML, as discussed at goo.gl/Lrx9GB. Another advantage of using your own HTML is that you can add tooltips; I have added these to the radio buttons using the title attribute.
The output region is set up with two <div> tags: one that is named textDisplay and picks up output$textDisplay, as defined in server.R, and the other that is named plotDisplay and picks up output$plotDisplay from the server.R file. In your own code, you will need to specify the class (as shown in the previous example) as either shiny-text-output (for text), shiny-plot-output (for plots), or shiny-html-output (for tables or anything else that R will output as HTML). You will need to specify the height of plots (in px, cm, and so on), and can optionally specify the width either in absolute or relative (%) terms.
Just to demonstrate that you can throw anything in there that you like, there's a picture of my cats underneath the UI. You will, of course, have something a bit more sophisticated in mind. Add more <div> sections, links, pictures, and whatever you like.