I hope you're well,
I'm looking for a plugin or a tutorial for :
a- allow my users to fill in their address on their profile. The best would be to have a map on which they can identify their address or like on the UberEats site.
b- to be able to find the closest users according to their address.
If you have any ideas, I'm interested,
I have already made the profile on Django, all I need is the address field.
The below code will do. You will need Javascript to play around a bit and set your form fields with the returned address.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
<title>Places Searchbox</title>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
map.addListener('click', function (locationdata) {
console.log(locationdata.latLng.lat());
console.log(locationdata.latLng.lng());
var myLatlng = new google.maps.LatLng(locationdata.latLng.lat(), locationdata.latLng.lng());
var myOptions = {
zoom: 13,
center: myLatlng
}
});
var geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'click', function (event) {
geocoder.geocode({
'latLng': event.latLng
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
alert(results[0].formatted_address);
}
}
});
});
var markers = [];
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
console.log("lat: " + place.geometry.location.lat() + " lng: " + place.geometry.location.lng())
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
// [END region_getplaces]
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkwr5rmzY9btU08sQlU9N0qfmo8YmE91Y&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
You will need to add markers on map for each select. The code will console log the long and lat also, and return an alert with the address once you click it.
Credit goes to these two threads Link1 and Link2.
I managed to combine both codes and give results as you have mentioned.
Related
Hi I've been trying to learn how to build an ecommerce site and am getting stuck with the Django Stripe integration for a custom pay flow. I can get the pre built checkout to work but can't for custom pay flow.
Stripe seems to have updated the code on their docs a few months ago so when I try to look up tutorials, they all don't seem to have the same code and I can't seem to figure out how to get it to work. I'm self taught and just a beginner/intermediate maybe so might be missing something obvious.
I'm using the code from this page https://stripe.com/docs/payments/integration-builder and trying to convert it into Django.
This is my views.py
from django.shortcuts import render
import stripe
from django.http import JsonResponse
import json
# Create your views here.
from django.views import View
stripe.api_key = "xxxxxxxxx"
class StripeIntentView(View):
def post(self, request, *args, **kwargs):
try:
intent = stripe.PaymentIntent.create(
amount=2000,
currency='usd'
)
return JsonResponse({
'clientSecret': intent['client_secret']
})
except Exception as e:
return JsonResponse({'error':str(e)})
def payment_method_view(request):
return render(request, 'custom-landing.html')
This is my urls.py
from django.contrib import admin
from django.urls import path
from products.views import payment_method_view,StripeIntentView
urlpatterns = [
path('admin/', admin.site.urls),
path('custom-landing/', payment_method_view, name='custom-landing-page'),
path('create-payment-intent/', StripeIntentView.as_view(), name='create-payment-intent'),
]
This is my Landing-page.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Accept a card payment</title>
<meta name="description" content="A demo of a card payment on Stripe" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="global.css" />
<script src="https://js.stripe.com/v3/"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
<script src='{% static "js/client.js" %}'></script>
<style>
/* Variables */
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
display: flex;
justify-content: center;
align-content: center;
height: 100vh;
width: 100vw;
}
form {
width: 30vw;
min-width: 500px;
align-self: center;
box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
border-radius: 7px;
padding: 40px;
}
input {
border-radius: 6px;
margin-bottom: 6px;
padding: 12px;
border: 1px solid rgba(50, 50, 93, 0.1);
height: 44px;
font-size: 16px;
width: 100%;
background: white;
}
.result-message {
line-height: 22px;
font-size: 16px;
}
.result-message a {
color: rgb(89, 111, 214);
font-weight: 600;
text-decoration: none;
}
.hidden {
display: none;
}
#card-error {
color: rgb(105, 115, 134);
text-align: left;
font-size: 13px;
line-height: 17px;
margin-top: 12px;
}
#card-element {
border-radius: 4px 4px 0 0;
padding: 12px;
border: 1px solid rgba(50, 50, 93, 0.1);
height: 44px;
width: 100%;
background: white;
}
#payment-request-button {
margin-bottom: 32px;
}
/* Buttons and links */
button {
background: #5469d4;
color: #ffffff;
font-family: Arial, sans-serif;
border-radius: 0 0 4px 4px;
border: 0;
padding: 12px 16px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: block;
transition: all 0.2s ease;
box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
width: 100%;
}
button:hover {
filter: contrast(115%);
}
button:disabled {
opacity: 0.5;
cursor: default;
}
/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
border-radius: 50%;
}
.spinner {
color: #ffffff;
font-size: 22px;
text-indent: -99999px;
margin: 0px auto;
position: relative;
width: 20px;
height: 20px;
box-shadow: inset 0 0 0 2px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.spinner:before,
.spinner:after {
position: absolute;
content: "";
}
.spinner:before {
width: 10.4px;
height: 20.4px;
background: #5469d4;
border-radius: 20.4px 0 0 20.4px;
top: -0.2px;
left: -0.2px;
-webkit-transform-origin: 10.4px 10.2px;
transform-origin: 10.4px 10.2px;
-webkit-animation: loading 2s infinite ease 1.5s;
animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
width: 10.4px;
height: 10.2px;
background: #5469d4;
border-radius: 0 10.2px 10.2px 0;
top: -0.1px;
left: 10.2px;
-webkit-transform-origin: 0px 10.2px;
transform-origin: 0px 10.2px;
-webkit-animation: loading 2s infinite ease;
animation: loading 2s infinite ease;
}
#-webkit-keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#media only screen and (max-width: 600px) {
form {
width: 80vw;
}
}
</style>
</head>
<body>
<!-- Display a payment form -->
<form id="payment-form">
<div id="card-element"><!--Stripe.js injects the Card Element--></div>
<button id="submit">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay now</span>
</button>
<p id="card-error" role="alert"></p>
<p class="result-message hidden">
Payment succeeded, see the result in your
Stripe dashboard. Refresh the page to pay again.
</p>
</form>
</body>
</html>
This is what shows up on my http://127.0.0.1:8000/custom-landing/
I'm not sure why but the card elements aren't showing up.
I've only changed the python code. The javascript, html and CSS code are the same as on the Stripe docs.
Any idea on how I can get the card element to load?
And any feedback on whether the the django code is views is much appreciated.
Thanks
edit: This is the code that shows in my browser console.
line 10 of the client.js is
document.querySelector("button").disabled = true;
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Closed 2 years ago.
I am making a 404 error page, I have made an HTML file and An CSS file but it's not working. The file is in same directory, Can anyone Help Me? Please. Thanks
I am trying this for days, no fixes. Thanks ! Any help is appreciated.
Below You can see code.
My Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Awesome 404 Error Page Design - Vikas Kukreti</title>
<meta name="keywords" content="404, error, 404 error, 404 error page design, design, html, css, Vikas, Vikas kukreti" />
<meta name="description" content="Awesome 404 error page design for 404 errors including cool looks and animations with HTML and CSS only. Developed with love ❤ by Vikas Kukreti" />
</head>
<body>
<div id="particles" class="particles">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<main>
<section>
<h1>Page Not Found!</h1>
<div>
<span>4</span>
<span class="circle">0</span>
<span>4</span>
</div>
<p>We are unable to find the page.<br>you're looking for.</p>
<div>
<button>Back to mHome Page</button>
</div>
</section>
</main>
</body>
</html>
My CSS Code:
* {
padding: 0;
margin: 0;
}
body {
background: radial-gradient( circle, rgb(28, 27, 90) 0%, rgb(15, 18, 44) 30%, rgb(15, 13, 31) 100%);
height: 100vh;
color: #efefef;
}
.particles {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.particles span {
position: absolute;
top: 10%;
left: 10%;
display: block;
content: '';
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.6);
border-radius: 0.5rem;
filter: blur(5px);
}
.particles span:nth-child(2) {
top: 15%;
left: 70%;
filter: blur(3px);
}
.particles span:nth-child(3) {
top: 70%;
left: 40%;
filter: blur(5px);
}
.particles span:nth-child(4) {
top: 52%;
left: 20%;
filter: blur(4px);
}
.particles span:nth-child(5) {
top: 74%;
left: 90%;
filter: blur(5px);
}
.particles span:nth-child(6) {
top: 85%;
left: 10%;
filter: blur(7px);
}
.particles span:nth-child(7) {
top: 67%;
left: 79%;
filter: blur(3px);
}
.particles span:nth-child(8) {
top: 48%;
left: 40%;
filter: blur(4px);
}
.particles span:nth-child(9) {
top: 45%;
left: 30%;
filter: blur(5px);
}
.particles span:nth-child(10) {
top: 96%;
left: 29%;
filter: blur(4px);
}
.particles span:nth-child(11) {
top: 55%;
left: 89%;
filter: blur(6px);
}
.particles span:nth-child(12) {
top: 55%;
left: 60%;
filter: blur(7px);
}
main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: cursive;
}
main h1{
font-weight: normal;
}
main h1 {
text-align: center;
text-shadow: 0 0 5px #c3d168a2;
}
main div {
margin-top: 2rem;
text-align: center;
}
main div span{
font-size: 5rem;
line-height: 6rem;
text-shadow: 0 0 7px #c3d168a2;
}
.circle {
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
display: inline-block;
position: relative;
width: 6rem;
height: 6rem;
text-shadow: none;
background: #e6f1a3 radial-gradient(#f9ffd2, #ecff70);
color: rgba(0, 0, 0, 0);
border-radius: 50%;
box-shadow: 0 0 7px #e7f1a3a2;
}
.circle:after {
display: block;
position: absolute;
content: '';
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 10rem;
height: 4rem;
border-radius: 50%;
border: 2px solid #fafafa;
border-top: 0px solid #fafafa;
border-bottom: 4px solid #fafafa;
z-index: 2
}
.circle:before {
display: block;
position: absolute;
content: '';
top: 50%;
left: 50%;
background: #124;
border-radius: 50%;
width: 4px;
height: 4px;
transform-origin: 2.5rem 0;
transform: translate(-2.5rem, 0) rotate(0deg);
animation: circle-around 5s infinite linear;
}
#keyframes circle-around {
0% { transform: translate(-2.5rem, 0) rotate(0deg); }
100% { transform: translate(-2.5rem, 0) rotate(360deg); }
}
main p {
margin-top: 3rem;
text-align: center;
text-shadow: 0 0 5px #c3d168a2;
}
main button {
padding: 0.55rem 1.2rem;
border: none;
outline: none;
appearance: none;
border-radius: 1rem;
background: rgb(17, 141, 44);
color: #fafafa;
box-shadow: 0 0 4px #e1f17859;
}
main button:hover {
cursor: pointer;
}
Please Help Why This Doesn't works?
I tested your code, It is working well. I recommend you trying a different browser or trying Ctrl + F5 in your browser to force an update.
try doing it like this ... try removing the "." in your href
Can you please also post any messages from your console. If you are using Chrome, then go to View -> Developer -> Developer Tools, the click on Console. If you are using a different browser, then see here how to open it: https://balsamiq.com/support/faqs/browserconsole/
Also, try loading your website in a different browser or in Incognito mode. Usually if CSS isn't being applied, it may have been cached so it is not updating for you.
I would make this a comment if I had enough reputation.
I am scraping an aspx rendered web page Link to Page
the website is .aspx, i chose Selenium , mechanize , urllib , lxml , Beautiful soup , requests . any insights/recommendations on coding the next steps. Also used scrapy.
I have used requests :
import requests
from bs4 import BeautifulSoup
request.get(url_to_page)
print request.content
it gives
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>
www.tournamentsoftware.com
</title>
<style>
body {
font: normal 12px/20px Arial, Helvetica, sans-serif;
color: #505050;
background: #ccc url(//static.tournamentsoftware.com/images/cw_bg.png) repeat-x;
}
h2 {
font: bold 16px/16px Arial, Helvetica, sans-serif !important;
color: #000;
margin: 4px 0;
}
h4 {
font: bold 13px/13px Arial, Helvetica, sans-serif !important;
margin: 0 0 -8px 0;
}
p {
font: normal 12px/20px Arial, Helvetica, sans-serif;
margin: 12px 0;
}
p.note {
font: normal 10px/10px Arial, Helvetica, sans-serif;
margin: 8px 0 0 0;
text-align: center;
color: #999;
}
p.note.error {
font: bold 13px/20px Arial, Helvetica, sans-serif;
color: #f00;
}
.langtoggle { display:inline; margin-right:6px; }
.langtoggle.active { display:none; }
.langmessage { display:none; margin-bottom:20px; }
.langmessage.active { display:block; }
input.button {
margin: 4px 0;
}
</style>
</head>
<body>
<form method="post" action="./default.aspx?returnurl=%2fsport%2fdraw.aspx%3fid%3dE880C7A5-0A60-4A98-8FF9-A3B7DD58F3E2%26draw%3d4" id="form1" class="lang1033">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="p4eGoAC3005ctvGuhkv1w6Nanrs87p7iDcl4Hlk1SNw/cJovTDsJZeq54VdP4JR0injIJb59okjgeTpi30pz0LH9qjU=" />
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="A86F2231" />
<div id="messagewindow">
<p class="toggles"><a id="Lang1033" class="lang langtoggle active" href="#" onclick="switchLang(this)">English</a> </p><div id="divLang1033" class="langmessage active"><h2>The use of cookies on www.tournamentsoftware.com</h2><p>We are legally obliged to get your
elems = document.getElementsByClassName('langmessage');
for (var i = 0; i < elems.length; i++) {
elems[i].className = 'langmessage';
}
document.getElementById(AThis.id).className = 'langtoggle active';
document.getElementById('div' + AThis.id).className = 'langmessage active';
return false;
}
function toggleCookiesHelp(AElmID) {
document.getElementById(AElmID).style.display = 'block';
return false;
}
function toggleCookiesHelpByClassName() {
var elems = document.getElementsByClassName('removecookies');
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = 'block';
}
elems = document.getElementsByClassName('note');
for (var i = 0; i < elems.length; i++) {
elems[i].className = 'note error';
}
return false;
}
if (storageAvailable()) {
if (localStorage.getItem('cookiewall')) {
toggleCookiesHelpByClassName();
}
var elems = document.getElementsByClassName('button');
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener('click', function (e) {
localStorage.setItem('cookiewall', '1');
});
}
}
function storageAvailable() {
try {
var x = '__storage_test__';
localStorage.setItem(x, x);
localStorage.removeItem(x);
return true;
} catch(e) {
return false;
}
}
</script>
</form>
</body>
</html>
Also tried with mechanize, scrapy. All of them are giving this result only. How to scrape those websites. But I am able to see the source code in the browser. Is there any way to scrape those data.
import requests
from bs4 import BeautifulSoup
r_obj = requests.Session()
url = "http://www.tournamentsoftware.com/cookie/default.aspx?returnurl=%2fdefault.aspx"
fr_soup = r_obj.get(url)
soup = BeautifulSoup(fr_soup.content , "lxml")
#print soup
l = soup.find_all("input",type="hidden")
#print l
data = {
l[0]['name']:l[0]['value'],
l[1]['name']:l[1]['value'],
'btnAccept':'Yes, I accept'}
r_obj.post(url,verify=False,data=data)
url_needed = "http://www.tournamentsoftware.com/sport/draw.aspx?id=E880C7A5-0A60-4A98-8FF9-A3B7DD58F3E2&draw=4"
final = r_obj.get(url_needed)
#print final.content
soup1 = BeautifulSoup(final.content,"lxml")
detail_tab = soup1.find_all("table")
You need to use a framework which runs the client-side code for you. headless-chrome is one such tool.
I've implemented a Website with a geolocation function and Button.
This Webpage gets displayed fine in a QwebEngineView (OSM Map too).
The Webpage is loaded
def __init__(self, parent=None):
super(MainGUI, self).__init__(parent)
self.ui = uic.loadUi("GPS.ui", self)
self.ui.w3View.load(QtCore.QUrl('file:///Map.html'))
All native OpenLayers Buttons (Zoom IN and OUT) are working fine.
I created a new custom button to display my geolocation on the OpenLayers Map.
This is the function im using to geolocate me:
var handleGeolocation = function() {
var coordinates;
var geolocation = new ol.Geolocation({
projection: view.getProjection(),
tracking: true
});
// handle geolocation error.
geolocation.on('error', function (error) {
var info = document.getElementById('info');
info.innerHTML = error.message;
info.style.display = '';
});
var accuracyFeature = new ol.Feature();
geolocation.on('change:accuracyGeometry', function () {
accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
});
var positionFeature = new ol.Feature();
positionFeature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#3399CC'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
}));
geolocation.once('change:position', function () {
coordinates = geolocation.getPosition();
positionFeature.setGeometry(coordinates ?
new ol.geom.Point(coordinates) : null);
map.getView().setCenter(coordinates);
map.getView().setZoom(17);
});
new ol.layer.Vector({
map: map,
source: new ol.source.Vector({
features: [accuracyFeature, positionFeature]
})
});
}
I created the Button with the help from here.
the whole Webpage looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Accessible Map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.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.2.0/build/ol-debug.js"></script>
<style>
a.skiplink {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
a.skiplink:focus {
clip: auto;
height: auto;
width: auto;
background-color: #fff;
padding: 0.3em;
}
#map:focus {
outline: #4A74A8 solid 0.15em;
}
map{
max-width: 760 px;
max-height: 50 px;
}
.geoButton {
top: 80px;
left: .5em;
}
</style>
</head>
<body>
<div id="map" class="map" tabindex="0"></div>
<script>
window.app = {};
var app = window.app;
view = new ol.View({
center: [0, 0],
zoom: 2
});
app.getLocation = function(opt_options) {
var options = opt_options || {};
var geoButton = document.createElement('button');
geoButton.innerHTML = 'L';
var handleGeolocation = function() {
/* var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPod|iPad/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i);
},
any: function () {
return ((isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()));
}
};
if (isMobile.any()){
geolocation.setTrackingOptions(enableHighAccuracy );
} */
var coordinates;
var geolocation = new ol.Geolocation({
projection: view.getProjection(),
tracking: true
});
// handle geolocation error.
geolocation.on('error', function (error) {
var info = document.getElementById('info');
info.innerHTML = error.message;
info.style.display = '';
});
var accuracyFeature = new ol.Feature();
geolocation.on('change:accuracyGeometry', function () {
accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
});
var positionFeature = new ol.Feature();
positionFeature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#3399CC'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
}));
geolocation.once('change:position', function () {
coordinates = geolocation.getPosition();
positionFeature.setGeometry(coordinates ?
new ol.geom.Point(coordinates) : null);
map.getView().setCenter(coordinates);
map.getView().setZoom(17);
});
new ol.layer.Vector({
map: map,
source: new ol.source.Vector({
features: [accuracyFeature, positionFeature]
})
});
}
geoButton.addEventListener('click', handleGeolocation, false);
geoButton.addEventListener('touchstart', handleGeolocation, false);
var element = document.createElement('div');
element.className = 'ol-unselectable ol-control geoButton';
element.appendChild(geoButton);
ol.control.Control.call(this, {
element: element,
target: options.target
});
};
ol.inherits(app.getLocation, ol.control.Control);
//Standard Initialisierung
// Geolocation function
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}).extend([new app.getLocation()]),
view: view
});
//Display Input Datastream
</script>
</body>
</html>
Inside a normal browser it's working fine but not inside my PyQt app.
After clicking the custom Button nothing happens.
What am i doing wrong or is not possible?
The main problem is to enable the permissions, if you run in a browser like Firefox, Chrome, etc. will show you a popup asking you to accept or not the GeoLocation permission.
In this case it must be enabled by code, for this the QWebEnginePage emits a signal every time authorization is required, it does this through the signal featurePermissionRequested, we connect it to some slot and we enable the permission with the function setFeaturePermission().
self.ui.w3View..page().featurePermissionRequested.connect(self.onFeaturePermissionRequested)
def onFeaturePermissionRequested(self, securityOrigin, feature):
self.sender().setFeaturePermission(securityOrigin,
QWebEnginePage.Geolocation,
QWebEnginePage.PermissionGrantedByUser)
Note: On Linux I still experience problems with the Geoclue provider, the error message reads as follows:
Failed to set Geoclue positioning requirements. Geoclue error:
org.qtproject.QtDBus.Error.InvalidObjectPath
Adding the following lines solved my Problems:
self.ui.w3View.page().featurePermissionRequested.connect(self.permissionRequested)
def permissionRequested(self, frame, feature):
self.ui.w3View.page().setFeaturePermission(frame, feature, QtWebEngineWidgets.QWebEnginePage.PermissionGrantedByUser)
Found it in this post and editing it to PyQt 5.9.
Ok so I have the web.py file called app.py.
app.py references index.html and foo.html.
Both of these html files call just fine, what I mean is when I run app.py and go to http://localhost:8080/ and http://localhost:8080/Foo both of them display a webpage just fine, the issue is with the foo.html file tho. I have a large section in there that is supposed to use the rotate.css file and make the text in the section spin. The problem is the text doesn't even show up.
Files are below:
app.py
import web
urls = (
'/', 'Index',
'/Foo', 'Foo'
)
app = web.application(urls, globals())
render = web.template.render('templates/')
class Index(object):
def GET(self):
greeting_Index = "Hello World"
return render.index(greeting = greeting_Index)
class Foo(object):
def GET(self):
greeting_Foo = 'FooBAR'
return render.foo(greeting = greeting_Foo)
if __name__ == "__main__":
app.run()
foo.html
$def with (greeting)
$var cssfiles: static/rotate.css
<html>
<head>
<meta charset="UTF-8">
<title>Foobar</title>
</head>
<body>
$if greeting:
<em style="color: red; font-size: 5em;">Welcome to the Foo bar. $greeting.</em>
$else:
Herro world!
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>Real poetry is like</span>
<span>creating</span>
<div class="rw-words rw-words-1">
<span>breathtaking moments</span>
<span>lovely sounds</span>
<span>incredible magic</span>
<span>unseen experiences</span>
<span>happy feelings</span>
<span>beautiful butterflies</span>
</div>
<br />
<span>with a silent touch of</span>
<div class="rw-words rw-words-2">
<span>sugar</span>
<span>spice</span>
<span>colors</span>
<span>happiness</span>
<span>wonder</span>
<span>happiness</span>
</div>
</h2>
</section>
</body>
</html>
rotate.css
.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-sentence{
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
color: #444;
white-space: nowrap;
font-size: 200%;
font-weight: normal;
}
.rw-words{
display: inline;
text-indent: 10px;
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;
}
.rw-words-1 span{
animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2){
animation-delay: 3s;
color: #6b889d;
}
.rw-words span:nth-child(3){
animation-delay: 6s;
color: #6b739d;
}
.rw-words span:nth-child(4){
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words span:nth-child(5){
animation-delay: 12s;
color: #8d6b9d;
}
.rw-words span:nth-child(6){
animation-delay: 15s;
color: #9b6b9d;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
According to http://webpy.org/cookbook/staticfiles you may have to alter your apache.conf file to allow apache to serve up those files.
And I did notice that nowhere in your html file do you actually link to the css file
<link rel="stylesheet" href="static/rotate.css" type="text/css">
somewhere in the head is missing or since your using it as a variable it should be
<link rel="stylesheet" href="$cssfiles" type="text/css">