initial commit

This commit is contained in:
Frank Adaemmer 2023-05-18 14:43:03 +02:00
commit 26994d7c67
2 changed files with 189 additions and 0 deletions

115
index.html Normal file
View file

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<title>World Map with OpenStreetMap</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<link href="jquery-ui.css" rel="stylesheet">
<style>
#map {
height: 100vh;
}
#slider {
position: relative;
width: 100%;
margin-bottom:3em;
}
#custom-handle {
width: 8em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
</style>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
</head>
<body>
<div id="slider"> <div id="custom-handle" class="ui-slider-handle"></div></div>
<div id="map"></div>
<script>
const map = L.map('map').setView([51.14027, 10.45863], 7);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
const locations = [
{
"city": "Hamburg",
"lat": "53.64286",
"lng": "9.9753"
},
// {
// "city": "Kiel",
// "lat": "54.3297",
// "lng": "10.1435"
// },
{
"city": "München",
"lat": "48.1341",
"lng": "11.5674"
},
{
"city": "Teisnach",
"lat": "49.0301",
"lng": "12.998"
}
];
const markers = locations.map(location => {
return L.marker([location.lat, location.lng], {icon: L.icon({
iconUrl: location.city + "64.png",
iconAnchor: [32,32]
})}).addTo(map);
});
</script>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(), 0, 1);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay() + 1) / 7);
}
// Set initial date to current calendar week and year
// Initialize slider with current calendar week and year
let now = new Date();
let year = now.getFullYear(); // get the full four-digit year
let week = now.getWeek(); // get the week as a number, where 0 represents the first week of the year
console.log(`The current week of ${year} is ${week}`);
var handle = $( "#custom-handle" );
$("#slider").slider({
value: week,
min: week - 4,
max: week + 12,
step: 1,
create: function() {
handle.text( `KW ${week}/${year}`);
},
slide: function( event, ui ) {
var curweek = ui.value;
var curyear = year;
handle.text( `KW ${curweek}/${curyear}`);
}
});
</script>
</body>
</html>

74
mappersons.py Normal file
View file

@ -0,0 +1,74 @@
import math
from PIL import Image, ImageDraw, ImageFilter
from pathlib import Path
import numpy as np
import math
def circular_mask(img):
center_x = int(img.width / 2)
center_y = int(img.height / 2)
mask = Image.new('L', img.size, 0)
draw = ImageDraw.Draw(mask)
draw.ellipse((2, 2 ,img.width-3,img.height-3),fill=255)
img.putalpha(mask.filter(ImageFilter.GaussianBlur(radius=1)))
return img
def arrange_imager_in_circle(images, spacing=5):
d = images[0].size[0]
dis = d + spacing
theta = 2*math.pi / len(images)
radius = dis/2/math.sin(theta/2)
imgWidth, imgHeight = (int(d+radius*2), int(d+radius*2))
masterImage = Image.new("RGBA", (imgWidth, imgHeight), (255,255,255,0))
#we want the circle to be as large as possible.
#but the circle shouldn't extend all the way to the edge of the image.
#If we do that, then when we paste images onto the circle, those images will partially fall over the edge.
#so we reduce the diameter of the circle by the width/height of the widest/tallest image.
circleCenterX = imgWidth / 2
circleCenterY = imgHeight / 2
for i, curImg in enumerate(images):
angle = i * theta
dx = int(radius * math.cos(angle))
dy = int(radius * math.sin(angle))
#dx and dy give the coordinates of where the center of our images would go.
#so we must subtract half the height/width of the image to find where their top-left corners should be.
pos = (
int(circleCenterX + dx - curImg.size[0]/2),
int(circleCenterY + dy - curImg.size[1]/2)
)
curMask = curImg.split()[-1]
masterImage.paste(curImg, pos, curMask)
return masterImage
def create_circle(image_paths, output_path):
# Resize all images to 64x64 pixels
shrunk_images = [Image.open(path).resize((64, 64)) for path in image_paths]
# Cut out a circle from each image
circular_images = [circular_mask(img) for img in shrunk_images]
circular_images[-1].save('circle.png')
if len(circular_images) == 1:
circular_images[0].save(output_path)
return
output_img = arrange_imager_in_circle(circular_images)
output_path = output_img.save(output_path)
if __name__ == "__main__":
p = Path("test_images")
image_paths = [str(x) for x in p.glob("*.jpg")]*2
for i in range(len(image_paths)):
output_path = "test%i.png" % i
create_circle(image_paths[:i+1], output_path)