Using below code It is just view on the first page. I want to show watermark on all pages.
<div class="watermark_report">
<img t-att-src="'data:image/png;base64,'+ doc.company_id.report_header_logo"/>
</div>
You already have the answer here:
Add this code for watermark in header of external layout. Its external id is report.external_layout_header:
<style>
.watermark {
position: absolute;
opacity: 0.25;
z-index: 1000;
transform: rotate(300deg);
-webkit-transform: rotate(300deg);
width: 150%;
}
</style>
<div class="watermark">
<p>WATERMARK</p>
<img t-att-src="'/module_name/static/src/img/image_name.png'" />
</div>
I have added a image stored as a file. If you are going to use a static image I think this is the most appropriate way
Note: Instead of using the css attribute opacity you can use a png image with opacity and transparent backgroud. That´s what I had to do
Note 2: I am afraid this does not work in Odoo v11
Update
This solution only is valid if you want to add the same image to all the reports.
There is a module developed by the OCA to add watermarks to the reports. A field appears in all reports where an images (with A4 size) can be added. The module name is report_qweb_pdf_watermark
Related
I am trying to style my navbar with BS5 installed, nowhere do I have navbar-expand-md as a className, instead, I assign a navbar-expand-custom myself.
navbar = _dbc.Navbar(
[
_dbc.Col(
# Logo Contents
),
_dbc.Col(
# Title Contents
),
_dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
_dbc.Collapse(
children=[right_elems],
id="navbar-collapse",
is_open=False,
navbar=True
),
],
className="navbar-expand-custom",
id="navbar-id",
style=style,
**{**navbardefaults, **navbarkwargs},
)
whenever I go to inspect the elements, there seems to be navbar-expand-md assigned as a className, which is overriding what I need in terms of styling.
I tried using JS to get the navbar-id and removing the className but I am wondering if there is any reason why it is assigning it by default with no mention of it in my code? Is there any way to override it? The logic doesn't even make sense because even with both classnames present, the navbar-expand-custom comes after the navbar-expand-md in the bs5.css file.
navbar-expand-* is applied by default as per documentation:
expand (boolean | string; default 'md'): Specify breakpoint at which
to expand the menu bar. Options are: 'xs', 'sm', 'md', 'lg', or 'xl'.
Below this breakpoint the navbar will collapse and navitems will be
placed in a togglable collapse element.
So try setting expand=False on dbc.Navbar.
If that fails, add the class navbar-expand on dbc.Navbar (class_name="navbar-expand"). From the bootstrap documentation:
For navbars that never collapse, add the .navbar-expand class on the
navbar. For navbars that always collapse, don’t add any .navbar-expand
class.
Also note the likely reason why your CSS is not overriding the navbar-expand-md class is because its CSS rules are all inside #media queries, at Bootstrap's medium breakpoint:
#media (min-width: 768px)
.navbar-expand-md {
flex-wrap: nowrap;
justify-content: flex-start;
}
#media (min-width: 768px)
.navbar-expand-md .navbar-toggler {
display: none;
}
#media (min-width: 768px)
.navbar-expand-md .navbar-collapse {
display: flex!important;
flex-basis: auto;
}
I just created a matplot figure from a csv in django (line graph) and rendering it to the html template and I can't modify its dimensions
imgdata = io.StringIO()
fig.savefig(imgdata, format='svg')
imgdata.seek(0)
data = imgdata.getvalue()
return data
data = isolate(selected_loc)
return render(request, 'hello.html', {'data': data, 'locations' : list(locations)})
html template
<div class="figure" style="">{{ data|safe }}</div>
i tried styling the div in css
.figure {
width: 40%;
height: 500px;
}
and it doesnt working only the div container expands but not the svg that just rendered
enter image description here
xml.etree.ElementTree is a python library that allows you to parse and manipulate svgs.
Side note -> IDK what's happening with the 2 return statements, but I am going to assume I am ignorant as opposed to you being wrong, because presumably your svg is being shown.
import xml.etree.ElementTree as ET
from io import StringIO
imgdata = io.StringIO()
fig.savefig(imgdata, format='svg')
imgdata.seek(0)
data = imgdata.getvalue()
return data
data = isolate(selected_loc)
return render(request, 'hello.html', {'data': data, 'locations' : list(locations)})
tree = ET.parse(imgdata)
root = tree.getroot()
# whatever the namespace is typically "http://www.w3.org/2000/svg"
# elements are the elements you are looking for
for e in root.findall("{namespace}elements"):
e.attrib["attribute_to_set"] = ""
root.attrib["height"] = "100%"
root.attrib["width"] = "100%"
# tree.write() saves the file so you can write it to a BytesIO or StringIO
# the below should work.
tree.write(imgdata)
Your css should also work, but I think you should be attaching it to the svg itself and not the container. There is a chance that some style is taking precedence over the style you're trying to apply, so you could always add an !important at the end of it, like so, border: solid black 1px !important; to rule that out.
Given the information above, you have 2 options; Either use the CSS below or use the etree code and remove the svg {...} css I have below.
If you don't have an id attached to the svg itself, you would have to select it:
svg
{
width: 100%;
/*height: 100%;*/
}
.container
{
width: 40%;
height: 500px;
}
Try it like this .
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="your path"></svg>
I am making a Python program using PyQt5 GUI library.
I found out that using runJavaScript() method does not work for executing JavaScript code on my HTML document.
Here is my HTML document - a Mapbox GL JS component. It can also be found here: https://docs.mapbox.com/mapbox-gl-js/example/simple-map/ .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script><script src="qrc:///qtwebchannel/qwebchannel.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidmxhZGlra2lyIiwiYSI6ImNsNno2dnN3cjAxamYzbm4xeDhxa2xuY2oifQ.HhDTHZglHlDNte7XwGZ1Xg';
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
projection: 'globe' // display the map as a 3D globe
});
map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style
});
</script>
</body>
</html>
Here is a part of my Python code:
# Creating QWebEngineView widget called "mapView"
self.mapView = QtWebEngineWidgets.a
mapSizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Minimum)
mapSizePolicy.setHeightForWidth(self.mapView.sizePolicy().hasHeightForWidth())
self.mapView.setSizePolicy(mapSizePolicy)
self.mapView.setObjectName("mapView")
self.detstartpointMapLayout.addWidget(self.mapView)
# Opening an HTML document and passing the components to QWebEngineView widget
with open('mapboxjs.html', 'r') as file:
mapHTML = file.read()
self.mapView.setHtml(mapHTML)
# Running a JavaScript code (with no success).
self.mapView.page().runJavaScript("const marker1 = new mapboxgl.Marker().setLngLat([12.554729, 55.70651]).addTo(map);")
Here is an error that my program returned:
js: Uncaught ReferenceError: mapboxgl is not defined .
I suppose this happens because runJavaScript() or QWebEngineView do not notice libraries that I have imported before in HEAD section of the HTML document using tag. How to I bypass that?
The same JavaScript command works with no errors when I open the HTML code in Firefox and send JS code into the console.
My suggestion was right - it happened because the JS function in page.runJavaScript() was executed before the .js script in HEAD section of the HTML file has completed it's execution.
So, to solve the issue I delayed page().runJavascript() execution until the HTML file finishes loading completely (including .js file in the HEAD section) by replacing
self.widgetname.page().runJavaScript("someJavaScriptFunction")
with
self.widgetname.page().loadFinished.connect(lambda: self.widgetname.page().runJavaScript("someJavaScriptFunction"))
Don't forget to include lambda: before the self.widgetname.page().runJavaScript() .
I'm doing some web scraping with Python and the last step is to use Google Fusion maps, but as somebody who has never touched any CSS styling before, I have no idea how to do something probably incredibly simple: hide a column title in the info window if it's blank. Not all the data have entries in my Amenities column, so I would like that to be gone from the info window if it's blank.
I've read this (https://support.google.com/fusiontables/answer/3081246?hl=en&ref_topic=2575652), but it's complete gibberish to me at this stage.
This is the default HTML they provide for the info window (with my data):
<div class='googft-info-window'>
<b>Location:</b> {Location}<br>
<b>Movie Title:</b> {Movie Title}<br>
<b>Date:</b> {Date}<br>
<b>Amenities:</b> {Amenities}
</div>
This shot in the dark didn't work:
<div class='googft-info-window'>
<b>Location:</b> {Location}<br>
<b>Movie Title:</b> {Movie Title}<br>
<b>Date:</b> {Date}<br>
<b>{if Amenities.value}
Amenities:
{/if}Amenities:</b> {Amenities}<br>
</div>
This question isn't related to CSS, try this:
{template .contents}
<div class='googft-info-window'>
<b>Location:</b> {$data.value.Location}<br/>
<b>Movie Title:</b> {$data.value['Movie Title']}<br/>
<b>Date:</b> {$data.value.Date}<br/>
{if $data.value.Amenities}
<b>Amenities:</b>{$data.value.Amenities}<br/>
{/if}
</div>
{/template}
I'm trying to do a conversion of a custom language to html.
The following example should be intuitive-easy enough to understand without explaining:
This input file...
css:
define(style):
if default:
background-color=black
if hovered:
background-color=blue
apply(style, tag=h1, tag=h2)
html:
body(id="hello"):
paragraph(id=demo):
"This is a paragraph.
input(type="button", onclick="displayDate()"):
"Display Date
js:
def displayDate():
document.getElementById("demo").innerHTML=Date()
...should be translated to...
h1 {
background-color: black
}
h1 :hover {
background-color: blue
}
id {
background-color=black
}
id :hover {
background-color=blue
}
<html>
<body id="hello">
<p id="demo">This is a paragraph.</p>
<input type="button", onclick="displayDate()">Display Date</button>
</body>
<script>
function displayDate() {
document.getElementById("demo").innerHTML=Date()
}
</script>
</html>
The input file has the following rules:
It has the same indent-based syntax as Python, so there should be
indent checking.
Lines starting in quotation marks are interpreted as content.
Certain statements should exist only in certain context, for example, the define statement
should only exist inside a css block.
I've been writing my parser using Regex, but halfway realised that Regex is slow, and may not be adequate since the generation of the HTML should be quick, which is not one of Regex strengths.
Googling/surfing brings pyparsing, PLY, ANTLR to my eyes, but I don't really know/understand what they do and whether should I use them.
Which path should I follow?