For a project, I'm trying to get an absolute position of an image (to a background image) in an HTML file while the calculation for the position is done in Python.
This is what I passed into Flask with Python:
return render_template('map.html',posx=pos_x, posy=pos_y)
while pos_x and pos_y have values between 0 and 1260 (the height and width of the backround); and this is what i wrote in css and html
.img-container { position: relative; }
.img-container .top {
position: absolute;
top: posx;
left: posy;
z-index: 3
}
</style>
<td>
<div class="img-container">
<img class="top" src="/static/images/map_test1.png" height="70" width="70" alt="">
<img class="bottom" src="/static/images/map_test.png" alt="">
</div>
If you are using flask, a web python framework, you need to put {{}} around your variables you are passing in to your html page.
Related
I have several icons that I want to line up at the end of the application. So that when I click on the image, I was transferred to a link. How should I do it?
So far, I have only managed to add this implementation through st.markdown.but they are arranged vertically because I added a new item every time I wrote markdown.
You can create custom components in streamlit using HTML. Maybe you can create a social media component.
Create a file my_component.html
<html>
<head>
<style>
.body {
height: 64px;
}
.parent {
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
.child {
margin: 5px;
height: 32px;
width: 32px;
}
</style>
</head>
<body>
<div class="parent">
<a class = "child" href="https://www.google.com"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1200px-Google_%22G%22_Logo.svg.png" alt="alt" style="width:32px;height:32px;"></a>
<a class = "child" href="https://wwww.reddit.com"><img src="https://www.redditinc.com/assets/images/site/reddit-logo.png" alt="alt" style="width:32px;height:32px;"></a>
<a class = "child" href="https://wwww.facebook.com"><img src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512" alt="alt" style="width:32px;height:32px;"></a>
</div>
</body>
</html>
I've added 3 links to google, reddit,and facebook respectively. Add or edit these to something custom.
In the streamlit file, you can import HTML files as components using the components library. The implementation I'm sharing is a very simplified version.
import streamlit as st
import streamlit.components.v1 as components
HtmlFile = open("my_component.html", 'r', encoding='utf-8')
source_code = HtmlFile.read()
print(source_code)
st.text("Navbar Component")
components.html(source_code)
It's a bit basic but yields something like this.
My background image is not loading though my CSS file. It loads through the front end with:
<img class="top" src={% static "/store/img/store.jpg" %}>
inside of a div but not with: background: url('{{ STATIC_URL }}/store/img/store.jpg'); on the css file.
My path is apps/store/static/store/img/store.jpg, so that's good.
HTML:
<div class="w3-display-container w3-content w3-wide" style="max-width:1600px;min-width:500px" id="home">
<div class="w3-display-bottomleft w3-padding-large w3-opacity">
<h1>SAN MIGUEL'S EXPORTA</h1>
</div>
</div>
CSS:
#home{
/* The image used */
background: url('{{ STATIC_URL }}/store/img/store.jpg') no-repeat;
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-size: cover;
}
If you are using django's standard templating engine you need to load the static files before referencing them. Paste {% load static %} before <img class="top" src={% static "/store/img/store.jpg" %}>
More help with static files here:
https://docs.djangoproject.com/pt-br/2.0/howto/static-files/#configuring-static-files
Feel free to ask more questions to me if you want!
Can I generate PDF with CSS position: absolute; for <img src="..."/> html tag?
I need to place handwritten signature and company stamp (PNG files) to bottom of order voucher at non standard place, that they run a little on the goods table. Position absolute will save my time for that, but it's don't working.
EDIT:
I have an answer from xhtml2pdf GitHub repo:
Well absolute position is not supported right now, but if you are looking for how to set images in specific part of page in all pages, see frames.
So, my question is still actual. Real usage example with xhtml2pdf frames for images will be great.
And real usage example from Luis Zárate (xhtml2pdf collaborator):
<html>
<head>
<style>
#page {
size: a4 portrait;
#frame content_frame { /* Content Frame */
left: 50pt; width: 512pt; top: 90pt; height: 632pt;
}
#frame footer_frame { /* Another static Frame */
-pdf-frame-content: footer_content;
left: 450pt; width: 300pt; top: 672pt; height: 200pt;
}
}
</style>
</head>
<body>
<!-- Content for Static Frame 'footer_frame' -->
<div id="footer_content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/123px-Tux.svg.png?download">
</div>
{% lorem 10 p %}
<pdf:pdf-next-page />
{% lorem 10 p %}
</body>
</html>
Code generates this PDF file: https://github.com/xhtml2pdf/xhtml2pdf/files/1754033/report-7.pdf
I'm using the uikit css framework, I want to fixed the navbar on the top?
You need to include 'components/sticky.js' file from UIKit package and add data-uk-sticky directive to your fixed bar div.
For example:
<div data-uk-sticky>...</div>
I suggest to use it with navbar component, for example:
<nav id='top-bar' class="uk-navbar" data-uk-sticky>
...
<ul class="uk-navbar-nav">...</ul>
<div class="uk-navbar-content">...</div>
<div class="uk-navbar-content uk-navbar-center">...</div>
</nav>
Add this to your css file:
.uk-fixed-navigation {
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 1030;
}
And add uk-fixed-navigtion class to your navbar.
EDIT
You also can use their sticky component
I'm working on a django app. I have a page that displays a log of items, and each item has a "Print label" link. At the moment, clicking the link displays the label for that particular item in a popup screen, but does not send the label to a printer. The view function behind the "Print label" link is shown below:
#login_required
def print_label(request, id):
s = Item.objects.get(pk = id)
return render_to_response('templates/label.html', {'s': s}, context_instance=RequestContext(request))
The HTML for the label is shown below:
{% load humanize %}
<head>
<style type="text/css">
div{
min-width: 350px;
max-width: 350px;
text-align: center;
}
body{
font-family: Arial;
width: 370px;
height: 560px;
text-align: center;
}
</style>
</head>
<body>
<div id="labelHeader">
<img src="{{ STATIC_URL }}img/label-header.png" width="350px">
</div>
<hr/>
<p></p>
<div id="destinationAddress">
<span style="font-size: xx-large; font-weight: bold;">{{ s.item_number }}</span>
</p>
DESTINATION:
<br/>
<strong>{{s.full_name}}</strong><br/>
<strong>{{ s.address }}</strong><br/>
<strong>{{s.city}}, {{s.state}}</strong><br/>
<strong>Tel: {{s.telephone}}</strong>
</div>
<p></p>
<hr/>
<div id="labelfooter">
<img src="{{ STATIC_URL }}img/label-footer.png" width="350px">
</div>
</body>
My question is, how can I also send the label displayed to a printer in the same function? I researched and found some libraries (like xhtml2pdf, webkit2png, pdfcrowd, etc), but they'll create a pdf or image file of the label and I'll have to send it to a printer. Is it possible to send straight to a printer without creating a pdf copy of the label? If so, please show me how to achieve this.
Your answers and suggestions are highly welcome. Thank you.
Presumably, as this is a Django app, it's the client's printer that you need to use. The only way to do this is to tell the user's browser to print. You will need to use Javascript for this: window.print().