The solution of my problem is probably very simple but yet out of my understanding. I am trying to load an HTML file into a QWebEngineView with PyQt5. The way I am doing it is:
self.webView = QtWebEngineWidgets.QWebEngineView(self.splitter)
html = r"C:\DATI\git\webgis\map.html"
self.webView.setHtml(html)
The only thing I get is a string representing the path and name of my HTML file:
C:\DATI\git\webgis\map.html
My map.html looks like this:
<html>
<head>
<title>Simple Map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
<script src=".js/qwebchannel.js"></script>
<style>
body { padding: 0; margin: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src="./js/map.js"></script>
</body>
</html>
Strangely (to me at least), if I do self.webView.setHtml("<html><head></head><body><h1>ciao</h1></body></html>"), this will render the HTML properly.
What am I missing?
The setHtml method does exactly what its name suggests: it loads html content from a string. What you are trying to do is load a url, so for that, you need to use the load method:
url = QtCore.QUrl.fromLocalFile(r"C:\DATI\git\webgis\map.html")
self.webView.load(url)
Related
I am working on a web application using Flask and Tailwind CSS and can’t import custom fonts. I can build the CSS file but the HTML template isn’t showing the font. How do I get my custom font to import?
I have this in my CSS build file:
#tailwind base;
#tailwind components;
#tailwind utilities;
#font-face {
font-family: 'Grifter';
src: url(../../static/Skyer-Regular.otf);
}
Here is a sample of when I try to use my imported font:
<head>
<link rel="stylesheet" href="{{ url_for('static', filename=’mainStyles.css') }}"/>
</head>
<body class = 'bg-black'>
<div class = "font-pri text-3xl text-center text-white">
Sample Text
</div>
</body>
I had this exact problem a while ago and have a solution that works. I ended up having to link a separate CSS file to each HTML template. Here is an example of what I did. I have my custom font and CSS file in my static folder. gameStyles.css is my Tailwind CSS file.
<link rel="stylesheet" href="{{ url_for('static', filename='gameStyles.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='styles2.css') }}"/>
Here is an example of what I would put in styles2.css:
#font-face {
font-family: 'reg';
src: url(../static/ObjectSans-Regular.otf);
}
body {
font-family: 'reg';
}
I tried everything and this was the only thing that worked for me. Hopefully this helps!
I want to change the font size of a specific markdown cell in jupyter lab, and not the whole output. I will convert my project at the end into an html file.
I already tried this:
<html>
<head>
<style>
div.a {
font-size: 300%;
}
</style>
<body>
<div class="a">My text in here</div>
</body>
</head>
</html>
But this is not changing my text size after I run my cell under Markdown.
I also don't want to use in order to not give a automatic number to that particular text.
Thanks in advance
I see you want to change the font-size:
<html>
<head>
<style type="text/css">
.a{ //for class use .(class-name)
font-size: 300%;
}
</style>
</head> // all the styling is to be done inside the head tag.
<body>
<div class="a">My text in here</div>
</body>
</html>
I'm using an open source for using Google Map API, but I don't know how to resize the map. Here's my code. Please help me.
index.html
<body><div>{{sndmap.html}}</div></body>
main.py
#app.route('/')
def index():
sndmap = Map(
identifier="sndmap",
varname="sndmap",
lat=37.4419,
lng=-122.1419,
markers=[(37.4419, -122.1419), (37.4500, -122.1350), (37.4300, -122.1400, "Hello World")]
)
return render_template('index.html', sndmap=sndmap, GOOGLEMAPS_KEY=request.args.get('apikey'))
You can easily include inline styling, but adding a stylesheet is largely considered the most maintainable method.
This is done by giving your desired tag a class. Then linking a css stylesheet to your html and updating the css as needed.
I've included an example.
projectroot/index.html
<html lang="en">
<head>
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='style/style.css') }}">
</head>
<!-- Other html -->
<body>
<div class="google-map">
{{ sndmap.html }}
</div>
</body>
<!-- Other html -->
</html>
projectroot/static/styles/style.css
/* More css */
.google-map {
max-width: 500px;
max-height: 200px;
}
/* More css */
This shouldn't be copied verbatim as you'll need to play around with the exact styling to achieve the look you want. The number of customization options through standard css are endless. I'd recommend looking up common patterns and coping what you like.
Everything was working fine before Python Flask. Now I tried to connect my HTML page with Python Flask. CSS is working fine but when I define images inside the CSS file the image is no longer loaded into the web site. Instead it is showing error 404.
python app.py code
from flask import Flask, render_template, url_for
app = Flask(__name__ , static_url_path='/static')
#app.route('/')
def index():
return render_template('/intro.html')
if __name__ == '__main__':
app.run(debug=True)
HTML code :-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename = 'css/owl.theme.default.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/firstone.css') }}">
</head>
<body>
<div class="main">
<div class="cover-image">
<div class="menu">
<div class="leftmenu">
CSS file
#charset "utf-8";
/* CSS Document */
*{
margin: 0px ;
padding: 0px ;
}
/* ------------cover image -------------*/
.cover-image {
background-image: url({{ url_for('static',filename = '/images/cover4.jpg')}});
background-size: 100% 100%;
width: 100%;
height: 110vh;
}
Please help.
You are using url_for in a CSS file, which does not work. You need to specify the url of the background image either in the HTML file, or specify a proper URL in your CSS.
So either add this to your CSS:
background-image: url('/static/images/cover4.jpg')}});
Or change your cover-image div in your HTML file to this:
<div class="cover-image" style="background-image: url({{ url_for('static',filename = '/images/cover4.jpg')}});">
Unless you plan on changing your static folder (or your cover image) regularly, I would advise going the first route, to make sure you separate style and semantics.
I have tried using #fontface css style, but the font doesn't get rendered.
Is there another way of doing this using python/flask??
<!DOCTYPE html>
<html>
<style type="text/css">
#font-face {
font-family: trial;
src: url_for('CENTRALESANSCND-BOLD.otf') ;
font-weight:bold; }
</style>
<body>
<p style="font-family:trial; font-weight: bold"> Hello </p>
</body>
</html>
The above is my HTML template.
Unfortunately, when I render it using Flask, it doesn't reflect the font.
The following is my .py code:
from flask import Flask, render_template
app=Flask(__name__)
app.secret_key='1234'
#app.route('/', methods=['post', 'get'])
def output():
c=2+3
print c
return render_template('f.html', c=c)
if __name__=='__main__':
app.run(port=9876)
Thanks a lot for all your help.. A combination of all the suggestions finally worked.
Posting the solution here:
CSS file:
#font-face{
font-family: trial;
src: url('CENTRALESANSCND-BOLD.otf');
font-weight: bold;}
body {font-family: georgia; color:green}
h1 {font-family:trial; color: pink}
HTML file:
<!DOCTYPE html>
<html>
<link type="text/css" rel="stylesheet" href="{{url_for('static', filename='mystyle.css')}}"/>
<body>
<p > Hello... </p>
<h1> welcome </h1>
</body>
</html>
url_for takes a function name, and you need to wrap it in double curly brackets... try:
<style type="text/css">
#font-face {
font-family: trial;
src: {{ url_for('static', filename='CENTRALESANSCND-BOLD.otf') }};
font-weight:bold; }
</style>
<style>
#font-face {
font-family: FontName;
src: url("{{ url_for('static', filename='FontFile.otf') }}");
}
</style>