Comments (8)
krystian8207
commented on June 21, 2024
I suggest the following solution:
- Copy HOME.html file content into home.R script, with all html code contained in
"..."and assigned tohomevariable. - Type
source(home.R)in your Router.R script. - Finally change ui code with:
ui <- shinyUI(fluidPage(
HTML(home),
router_ui()
))
Please let me know if this helped.
from shiny.router.
ccwitt
commented on June 21, 2024
So I did as you said and made home.R and put all HTML in "..." and assigned it as a variable home, I had to change a lot of double quotes to make this work no big deal. Then I went to my router page and did as you said. But when I open and run router.R and hit the Cluster link it does not open page2 ("screen1.R") inside the <iframe> I would like it to do. I seems to load the page outside the
iframe. How do code this so when I click the Clustering link in my header, screen1.R appears in the iframe? See attached code.
Router.R
library(shiny)
#devtools::install_github("Appsilon/shiny.router")
library(shiny.router)
source("//filer1/ppi/SamplingProject/home.R")
page2<-source("//filer1/ppi/SamplingProject/2SampleSelection/screen1.R")
router <- make_router(
route("/page2", page2))
ui <- shinyUI(fluidPage(
HTML(home),
router_ui()
))
# Plug router into Shiny server.
server <- shinyServer( function(input, output) {
router(input,output)
})
# Run server in a standard way.
shinyApp(ui=ui, server=server)
home.R
home <-"<!DOCTYPE HTML>
<html>
<head>
<title>PPI Sampling System</title>
<style type='text/css'>
body{background-color:white;}
#PPI-title{
font: 2em times, sans-serif;
color: white;
text-shadow: 1px 1px black;
}
.header{
padding: 0px 0px 0px 15px;
background: linear-gradient(#b4c9dd, white);
border: 1px solid black;
}
#nav-one{
background-color:white;
color: black;
font: 14 px arial, sans-serif;
border: 1px solid black;
width: 100%
}
#nav-two{
background-color: white;
font: 14px verdana;
font-weight: bold;
border: 1px solid black;
top-border: 0px;
color: blue;
width: 100%
}
#nav-three{
background-color: #b4c9dd;
border: 1px solid black;
font: 14px arial, sans-serif;
font-weight: regular;
width: 100%
}
.dropbtn1 {
background-color: transparent;
color: black;
font: 14px arial, sans-serif;
font-weight: bold;
border: none;
cursor: pointer;
display: inline-block;
z-index:1000;
}
.dropbtn2 {
background-color: #ffffff;
color: black;
font: 14px arial, sans-serif;
font-weight: bold;
border: none;
cursor: pointer;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
border-style: solid;
border-width: 1px;
min-width: 160px;
}
.dropdown-content a {
color: black;
font: 12px arial, sans-serif;
text-decoration: none;
display: block;
font-weight:regular;
padding: 2px;
z-index:1;
}
.dropdown a:hover {background-color: #a4a4a4}
.dropdown:hover .dropdown-content {display: block;}
.show {display:block;}
#first-box{
border-style: solid;
border-width: 1px;
}
.panes-container {
display: flex;
width: 100%;
overflow: hidden;
}
.left-pane {
width: 45%;
border-style: solid;
border-width: 1px;
}
.panes-separator {
width: 1px;
background: black;
position: relative;
cursor: col-resize;
}
.right-pane {
flex: auto;
border-style: solid;
border-width: 1px;
}
.panes-container,
.panes-separator,
.left-pane,
.right-pane {
margin: 5px;
padding: 5px;
}
.blue { color: blue; }
.tiny-button{
background-color: transparent;
color: black;
font: 12px arial, sans-serif;
font-weight: bold;
border: none;
cursor: pointer;
display: inline-block;
width:10px;
height:15px;
}
.white-button{
background-color: #ffffff;
color: black;
font: 12px arial, sans-serif;
border: none;
cursor: pointer;
display: inline-block;
}
.button-style{
background-color: #ffffff;
color: black;
border-style:solid;
font: 12px arial, sans-serif;
cursor: pointer;
display: inline-block;
padding:4px;
box-shadow: 0 1 2 0 black;
}
body {
font-size:12px;
}
.tit {
font-size:3em;
}
.sub {
font-size:2em;
}
.cont {
font-size:1em;
}
.button {
position:relative;
top:0;
font-size:15px;
cursor: pointer;
}
</style>
</head>
<!--Same as Previous Cycle Mockup 1, attempting to add split screen-->
<body onload='script();'>
<!-- header of site -->
<div id='colorchange' class='header'>
<div id='PPI-title'>
<img src='http://www.conferenceharvester.com/uploads/harvester/photos/-ExhibitorLogo-45716.png' width='75' style='display:inline-block;'>
<!-- image source: http://www.conferenceharvester.com/uploads/harvester/photos/-ExhibitorLogo-45716.png -->
<h2 id='header' style='display:inline-block; padding:0 0 0 10px;'>PPI: Sampling System</h2>
</div>
<!-- Table for username, database, role-->
<table style='position:absolute; right:250px; top:20px;font:12px arial, sans-serif;' cellspacing='5px'>
<tr>
<td><b>User:</b> Doe_j</td>
<td><b>DB:</b> ips-udb-samp</td>
</tr>
<tr>
<td><b>Role:</b> IA</td>
</tr>
</table >
<!-- Table for changing font size/header color -->
<table style='position:absolute; right:20px; top:20px; font:12px arial, sans-serif;'>
<tr>
<td><b> Font:
<div class='button' style='display:inline-block; font:12px arial;'> <a class='inc' > + </a> </div>
<div class='button' style='display:inline-block; font:12px arial;'> <a class='dec' > - </a> </div>
<div class='button' style='display:inline-block; font:12px arial;'> <a class='reset'> Reset </a> </b> </div>
</td>
</tr>
<tr>
<td><b>Color Scheme:</b>
<button class='tiny-button' style='background:linear-gradient(to right,white,#b4c9dd,black)' onclick='document.getElementById('colorchange').style.background = 'linear-gradient(#b4c9dd,white)''></button>
<button class='tiny-button' style='background:linear-gradient(to right,white,#b4ddb5,black)' onclick='document.getElementById('colorchange').style.background = 'linear-gradient(#b4ddb5,white)''></button>
<button class='tiny-button' style='background:linear-gradient(to right,white,#f5ce6c,black)' onclick='document.getElementById('colorchange').style.background = 'linear-gradient(#f5ce6c,white)''></button>
</td>
<td>
<button class='tiny-button' style='background:linear-gradient(to right,white,#b4c9dd,black)' onclick='document.getElementById('nav-three').style.background = '#b4c9dd''></button>
<button class='tiny-button' style='background:linear-gradient(to right,white,#b4ddb5,black)' onclick='document.getElementById('nav-three').style.background = '#b4ddb5''></button>
<button class='tiny-button' style='background:linear-gradient(to right,white,#f5ce6c,black)' onclick='document.getElementById('nav-three').style.background = '#f5ce6c''></button>
</td>
</tr>
</table>
</div>
<!-- first navigation bar -->
<div>
<table id='nav-one' cellspacing='10'>
<tr>
<th> Home </th>
<th>
<div class='dropdown'>
<button class='dropbtn2'>Sampling Process</button>
<div class='dropdown-content'>
<a href='#'>Browse Frame</a>
<a href='#'>Frame Refinement</a>
<a href='#'>Approve Sample Parameters</a>
<a href='#'>Sample Refinement Round I</a>
<a href='#'>Sample Refinement Round II</a>
<a href='#'>Browse Sample</a>
</div>
</div>
</th>
<th> Tools</th>
<th> Help </th>
<th width='50%'></th>
<th><a style='font:12px arial, sans-serif; float:right;'>Go To: <input type='text'></a></th>
<th><button class='white-button'>Logout</button><th>
</tr>
</table>
</div>
<!--second naviagtion bar-->
<div>
<table id='nav-two' cellspacing='10'>
<tr>
<th> Frame Refinement </th>
<th> Sample - 99 </th>
<th> Industry - 311311 </th>
<th> Cycle - F </th>
<th> Status Code - 2 </th>
<th width='30%'></th>
</tr>
</table>
</div>
<!--third navigation bar-->
<div class='ex1'>
<table id='nav-three' cellspacing='10'>
<tr>
<th> <a class='item1' href='#' target='main' >Search Frame </th>
<th> <a class='item2' href='#' target='main' > View Detail </th>
<!-- link not working -->
<th> <a class='item3' href='/page2' target='main' > Clustering </a> </th>
<th> <a class='item4' href='/page2' target='main'> Reports </a> </th>
<th> <a class='item5' href='' target='main' > View Changes </th>
<th> <a class='item6' href='#' target='main' > Search Universe </th>
<th>
<div class='dropdown'>
<button class='dropbtn1'> Search Previous</button>
<div class='dropdown-content'>
<a href='#' target='main'> Selected Industry</a>
<a href='#' target='main'> Any Industry</a>
</div>
</div>
</th>
<th> Industry Status </th>
<th width='25%'></th>
</tr>
</table>
</div>
<iframe name='main' src='http://www.yahoo.com' width='1570' height='560' scrolling='auto' > <p>Your browser does not support iframes.</p></iframe>
<script src='https://cdn.rawgit.com/lingtalfi/simpledrag/master/simpledrag.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script>
$(document).ready(function(){
var fontSize = parseInt($('body').css('font-size'),10);
$('.inc').on('click',function(){
fontSize++;
$('body').css('font-size',fontSize+'px');
})
$('.dec').on('click',function(){
fontSize--;
$('body').css('font-size',fontSize+'px');
})
$('.reset').on('click',function(){
$('body').css('font-size','12px');
})
})
</script>
</body>
</html>"
from shiny.router.
krystian8207
commented on June 21, 2024
I can see now two possible solutions:
- Include in HTML just header and use my solution above.
- Maybe it will be valuable for you to use tabsets, see: Shiny's or our solution.
from shiny.router.
ccwitt
commented on June 21, 2024
Yes, but if I include just the header where in the world do I put the rest of the html code I have from home.R? I see that tabsets might be easier but then again the whole point is to expand my knowledge of R as well as the usefulness of the router package. I believe what I am doing is highly customized. I will try to continue to keeping working on this and hopefully have a break through. Thanks for your help.
from shiny.router.
ccwitt
commented on June 21, 2024
I think I see your point now on tabsets. I will rework my header images and then use tabsets to navigate between .R pages. Seems to be the only solution. Thanks for all your help
from shiny.router.
krystian8207
commented on June 21, 2024
I realised that you don't change your header at all so my proposition to use tabsets was natural.
Another similiar case with htmlTemplate you can see here: #23. Maybe this can help you in your case.
from shiny.router.
ccwitt
commented on June 21, 2024
Honestly, after viewing all of this it seems best to abandon the idea of a custom HTML header. It seems Shiny router is not able to handle .R page links. I think the best solution is to just use Shiny Dashboard.
from shiny.router.
ccwitt
commented on June 21, 2024
I discovered that you can use a package called Knitr, it will take a page that has HTML with R code embedded and convert it to HTML. You have to save your pages as R HTML then use the knitr button to create your HTML pages. Also something of interest is R markdown. Thanks for all your help.
from shiny.router.
Related Issues (20)
- New documentation page for shiny.router
- New CI for shiny router
- New labels for shiny.router
- [Bug]: shiny.router does not work when deploying a shiny app in docker HOT 1
- [Feature]: Only load the html for the route HOT 2
- [Bug]: 404 page does not work when a user opens a non-valid link without going to a valid one first
- [Feature]: Examples need for ui.R and server.R app design
- Building a markdown-based survey platform in {shiny}
- semantic tabset not working with router HOT 4
- Feature request: support dynamic population of `make_router()`
- Using shiny.router with separate ui and server files HOT 1
- Using shiny.router to receive POST requests on specific routes HOT 1
- shiny.router not working on RSConnect server HOT 2
- Internal linking?
- multiple_radio position inline not working HOT 1
- semantic_DT: selected rows are not highlghted HOT 1
- Callback behavior changed with 0.2.2
- Question: How to use shiny.router with moduleServer? HOT 6
- [Bug]: Error: 'router_ui' is not an exported object from 'namespace:shiny.router' HOT 2
- disable_bootstrap_on_bookmark() errors out with development version of Shiny HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from shiny.router.