I have a query regarding the use of html to link parts of a page to a sidebar. I have managed to do this with one page on a flexdashboard rmd. See example code below:
---
title: "My multi-page multi-sidebar href html problem"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
df_print: paged
---
<style type="text/css">
body{
font-family: bahnschrift;
}
</style>
IRIS {data-orientation=rows}
=======================
Sidebar-iris {.sidebar}
-------------
<br>
### My Iris sidebar
<font size='-1'>
<ul>
<li>Summary</li>
<li>Head of table</li>
<li>Plot</li>
</li></ul></font size>
</p>
Row {data-height=30}
----------------------------------------------------
<font size = '6'><span style="color: #0073B7;">**My IRIS Page**</font size>
Row {data-height=100}
----------------------------------------------------
Row {data-height=30}
----------------------------------------------------
<font size = '4'><span style="color: #0073B7;">*Information part 1**</font size>
Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------
`{r}
summary(iris)
`
Row {data-height=30}
----------------------------------------------------
<font size = '4'><span style="color: #0073B7;">**Information Part 2**</font size>
Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------
`{r}
head(iris)
`
Row {data-height=30}
----------------------------------------------------
<font size = '4'><span style="color: #0073B7;">**information Part 3**</font size>
Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------
`{r}
plot(iris)
`
To note in the above snippet the R chunks need three tick marks but formatting wasn't allowing for it on Stack Overflow (not too sure why)
When you knit this rmd, you land on the Iris page, and the components of the sidebar roughly work to take you to the desired section based on the row id. We do this using href. My problems arises when adding a second page to the dashboard, see below code:
---
title: "My multi-page multi-sidebar href html problem"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
df_print: paged
---
<style type="text/css">
body{
font-family: bahnschrift;
}
</style>
IRIS {data-orientation=rows}
=======================
Sidebar-iris {.sidebar}
-------------
<br>
### My Iris sidebar
<font size='-1'>
<ul>
<li>Summary</li>
<li>Head of table</li>
<li>Plot</li>
</li></ul></font size>
</p>
Row {data-height=30}
----------------------------------------------------
<font size = '6'><span style="color: #0073B7;">**My IRIS Page**</font size>
Row {data-height=100}
----------------------------------------------------
Row {data-height=30}
----------------------------------------------------
<font size = '4'><span style="color: #0073B7;">*Information part 1**</font size>
Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------
`{r}
summary(iris)
`
Row {data-height=30}
----------------------------------------------------
<font size = '4'><span style="color: #0073B7;">**Information Part 2**</font size>
Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------
`{r}
head(iris)
`
Row {data-height=30}
----------------------------------------------------
<font size = '4'><span style="color: #0073B7;">**information Part 3**</font size>
Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------
`{r}
plot(iris)
`
Cars {data-orientation=rows}
=======================
Sidebar-cars {.sidebar}
-------------
<br>
### My Cars sidebar
<font size='-1'>
<ul>
<li>Summary</li>
<li>Head of table</li>
<li>Plot</li>
</li></ul></font size>
</p>
Row {data-height=30}
----------------------------------------------------
<font size = '6'><span style="color: #0073B7;">**My Cars Page**</font size>
Row {data-height=100}
----------------------------------------------------
Row {data-height=30}
----------------------------------------------------
<font size = '4'><span style="color: #0073B7;">*Information part 1**</font size>
Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------
`{r}
summary(cars)
`
Row {data-height=30}
----------------------------------------------------
<font size = '4'><span style="color: #0073B7;">**Information Part 2**</font size>
Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------
`{r}
head(cars)
`
Row {data-height=30}
----------------------------------------------------
<font size = '4'><span style="color: #0073B7;">**information Part 3**</font size>
Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------
`{r}
plot(cars)
`
When you knit this dashboard, again you land on the Iris page. The sidebar works as usual. When you switch to the second page Cars, everything renders appropriately. However, when you use the cars sidebar is the same desired way, the user is sent back to page Iris. This is despite the cars sidebar using href linking to the appropriate row id on the cars page. I've inspected the elements of the rmd and there was no conflicting id's. I'm not sure whether it is a problem with the pages themselves, but maybe it can be bypassed.
I have tried using two child rmd's but this does not work.
Not too familiar with html so any advice would be greatly appreciated!
Related
I'm trying to implement a pandas dataframe in to this HTML code.
So, instead of User in the Dear User row,
I can take a specific value from the last row of my data frame.
And instead of Users daily amount after the Reason: row I will get a specific reason from the last row of a data frame.
Sample Code:
msg.attach(MIMEText(
'''
<html>
<body>
<p><img src="cid:1" width="900" height="100"></p>
<b><h1 style="text-align: left;">Pay Attention!</h1></b>
<h3 style="text-align: left;">Dear User,</h3>
<p>There has been an anomaly in the following meaurement: </p>
<b><p>Users daily amount </p></b>
<h3>Reasons: </h3>
<p> - Increase in the amount of Information Request sent</p>
<p> - Unknown new rule firing </p>
<h3>Last 2 Weeks Activity</h3>
<p><img src="cid:0"></p>
</body>
</html>
''',
'html', 'utf-8'))
Hope I'm clear, Thanks a lot!
It is not entirely clear what you want to achieve, but as far as I understood, you want to pass a value from pandas dataframe to your html code. In this case, you can simply concatenate the strings.
user = df.iloc[-1][0] //index of value
html = '''
<html>
<body>
<p><img src="cid:1" width="900" height="100"></p>
<b><h1 style="text-align: left;">Pay Attention!</h1></b>
<h3 style="text-align: left;">Dear ''' + user + ''',</h3>
<p>There has been an anomaly in the following meaurement: </p>
<b><p>Users daily amount </p></b>
<h3>Reasons: </h3>
<p> - Increase in the amount of Information Request sent</p>
<p> - Unknown new rule firing </p>
<h3>Last 2 Weeks Activity</h3>
<p><img src="cid:0"></p>
</body>
</html>
'''
msg.attach(MIMEText(html, 'html'))
I'm trying to make a little HTML file using Rmarkdown. I'm using HTML to set the images into the blocks.
Here is what I currently have.
But my desired goal is do something like this. Where I have two images per block.
I'm not sure if HTML is the best way to do this but I am open to using knitr
Here is my code
---
title: "Landing Page"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
```
<div style="text-align:center;">
<div style="display:inline-block;">
<div class="wp-block-image" style="display:inline-block;">
<center>
<figure class="aligncenter size-full">
<a href="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" target="_blank" rel="noopener">
<img loading="lazy" width="517" height="261" src="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" alt="" class="wp-image-5379">
</a>
<br>
<figcaption>
<b><u><font size="+2">
Dashboard Example 1
</font size>
</b></u>
</figcaption>
</figure>
</center>
</div>
</div>
Adopted from this answer, you can put images in a kable:
---
title: "Fun with flags"
output: html_document
---
```{r results='asis'}
image_stringer = function(abbr){
sprintf('', abbr)
}
dat <- data.frame(
col1 = c(image_stringer('nl'), image_stringer('de')),
col2 = c(image_stringer('ch'), image_stringer('be'))
)
library(knitr)
kable(dat, col.names=NULL)
```
Alternatively, you can put your image in a <table> format (for an example, just inspect the output of the kable block), which gives wider control over formatting.
I'm going to create a "news ticker" using adobe flash. I have a single line and dynamic TLFTextField with html content. The problem I have is fitting the width of the TLFTextField to the html text length. There is a "autoSize" property that I set to left. when I set the content with text property it works but when I use htmlText property it does not fit the width. my action scpript looks like this:
var ticker:TLFTextField = TLFTextField(f0);
var text:String = 'title_1 07:45 <font color="#27ae60">***</font> title_2 08:50 <font color="#27ae60">***</font> title_3 09:00 <font color="#27ae60">***</font> title_4 10:00 <font color="#27ae60">***</font> title_5 11:00 <font color="#27ae60">***</font> title_6 12:00 <font color="#27ae60">***</font> title_7 13:55';
//the text would be dynamic
ticker.autoSize = TextFieldAutoSize.LEFT;
ticker.htmlText = text;
//ticker.text = text; //when I use this the width of ticker fits the text lenght but the text is raw and html tags are not rendered
any ideas?
I'm scraping a website and I was able to reduce a variable called "gender" to this :
[<span style="text-decoration: none;">
Lass Christian, du Danemark, à Yverdon-les-Bains, avec 200 parts de CHF 100
</span>, <span style="text-decoration: none;">associé gérant </span>]
And now I'd like to have only "associé" in the variable but I can't find a way to split this html code.
The reason is that I want to know if it's "associé" (male) or "associée" (female).
does anyone have any ideas ?
Cheers
----- edit ----
here my code which gets me the html output
url = "http://www.rc2.vd.ch/registres/hrcintapp-pub/companyReport.action?rcentId=5947621600000055031025&lang=FR&showHeader=false"
r = requests.get(url)
soup = BeautifulSoup(r.content,"lxml")
table = soup.select_one("#adm").find_next("table") #select_one finds only the first tag that matches a selector:
table2 = soup.select_one("#adm").find_all_next("table")
output = table.select("td span[style^=text-decoration:]", limit=2) #.text.split(",", 1)[0].strip()
print(output)
Whatever the parent of the two elements is you can call span:nth-of-type(2) to get the second span, then just check the text:
html = """<span style="text-decoration: none;">
Lass Christian, du Danemark, à Yverdon-les-Bains, avec 200 parts de CHF 100
</span>
<span style="text-decoration: none;">associé gérant </span>"""
soup = BeautifulSoup(html)
text = soup.select_one("span:nth-of-type(2)").text
Or if it not always the second span you can search for the span by the partial text associé:
import re
text = soup.find("span", text=re.compile(ur"associé")).text
For your edit, all you need is to extract the text last element and use .split(None, 1)[1] to get the gender:
text = table.select("td span[style^=text-decoration:]", limit=2)[-1].text
gender = text.split(None, 1)[1] # > gérant
is it possible with xpath to extract something in another Level ?
In my table there are diffrent diffrent rows . In one if it there is my row where somewhere is print "bpmtestinstanz". I need to get the URL (href) of the the Link where is "Instanz abbauen" in the Link and in the table-row (tr) "bpmtestinstanz" inside . But I don't know how i should handle xpath over the diffrent levels of the Link and the printed text .
<tr class="htmlobject_tr even" onclick="tr_click(this, 'idp54bf6c72037f1')" onmouseover="tr_hover(this, 'idp54bf6c72037f1')" onmouseout="tr_hover(this, 'idp54bf6c72037f1')">
<td class="htmlobject_td state">
<span class="pill active">
active</span>
</td>
<td class="htmlobject_td config">
<b>
Request ID</b>
14218305642887<br>
<b>
Hostname</b>
bpmtestinstanz<br>
<b>
Typ</b>
KVM VM (localboot)<br>
<b>
CPU</b>
1<br>
<b>
Speicher</b>
1.024 GB<br>
<b>
Kernel</b>
default<br>
<b>
Festplatte</b>
5 GB<br>
<b>
Image</b>
13982361680940.cloud_14218305642887_1_<br>
<b>
IP</b>
192.168.200.166, 172.26.41.105</td>
<td class="htmlobject_td comment">
Requested by user danieldrichardt<hr>
<a class="plugin console" onclick="sshwindow = window.open('https://172.26.41.105:8022','window1722641105', 'location=0,status=0,scrollbars=yes,resizable=yes,width=973,height=500,left=100,top=100,screenX=400,screenY=100'); sshwindow.focus(); return false;" href="#">
Ajaxterm</a>
<a class="plugin novnc" target="_blank" href="api.php?action=novnc&appliance_id=14218305990082">
noVNC</a>
</td>
<td class="htmlobject_td action">
<a data-message="" class="pause" title="Instanz pausieren" href="index.php?cloud_ui=pause&cloudappliance_id[]=14218308730556">
Instanz pausieren</a>
<a data-message="" class="restart" title="Instanz neu starten" href="index.php?cloud_ui=restart&cloudappliance_id[]=14218308730556">
Instanz neu starten</a>
<a data-message="" class="private" title="Privates Image anlegen" href="index.php?cloud_ui=image_private&appliance_id=14218305990082">
Privates Image anlegen</a>
<a data-message="" class="edit" title="Instanz bearbeiten" href="index.php?cloud_ui=appliance_update&cloudappliance_id=14218308730556">
Instanz bearbeiten</a>
<a data-message="" class="remove" title="Instanz abbauen" href="index.php?cloud_ui=deprovision&cloudappliance_id[]=14218308730556">
Instanz abbauen</a>
</td>
</tr>
It can be done, but it's slightly complicated.
//tr[td[#class = 'htmlobject_td config' and contains(b[contains(., 'Hostname')]
/following-sibling::text()[1],'bpmtestinstanz')]]/td[#class = 'htmlobject_td action']
/a[contains(.,'Instanz abbauen')]/#href
which means
//tr[td[#class = 'htmlobject_td config' Select all `tr` elements anywhere in
the document, but only if they have
at least one `td` child element that
has a `class` attribute with the
value "htmlobject_td config"
and contains(b[contains(., 'Hostname')] and only if this `td` child element
also has a child element `b` whose
text value contains "Hostname"
/following-sibling::text()[1],'bpmtestinstanz')]] and if the first following sibling
of this `b` element which is a text
node contains "bpmtestinstanz"
/td[#class = 'htmlobject_td action'] of this `tr` select a child `td`
element that has a `class` attribute
with the value "htmlobject_td action"
/a[contains(.,'Instanz abbauen')]/#href and select its child `a` if its text
contains "Instanz abbauen" - and
finally select the `href` attribute
of this `a` element.
This solution requires "bpmtestinstanz" to be immediately after <b>Hostname</b>. If it can appear anywhere in the tr element, you can somewhat simplify the expression.