Skip to content

Commit 950b220

Browse files
furasfuras
committed
new examples
1 parent f186b6f commit 950b220

File tree

25 files changed

+858
-0
lines changed

25 files changed

+858
-0
lines changed

‎flask/send-file-numpy-pillow-bytesio-canvas/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
This example shows how to convert `numpy array` to `PIL.Image`
2+
and then use it with `io.BytesIO` to create file `PNG` in memory.
3+
4+
And then it uses `send_file()` to send this `PNG` to client.
5+
6+
It also shows how to get image and put on `canvas`, and convert to `ImageData`
7+
8+
![#1](images/image.png?raw=true)
9+
10+
More about Canvas: [Pixel manipulation with canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)

‎flask/send-file-numpy-pillow-bytesio-canvas/images/image.png

6.76 KB
Loading

‎flask/send-file-numpy-pillow-bytesio-canvas/main.py

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
2+
# date: 2019.07.13
3+
# https://stackoverflow.com/questions/57014217/putting-an-image-from-flask-to-an-html5-canvas/57015262#57015262
4+
#
5+
# more on Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
6+
#
7+
8+
from flask import Flask, send_file
9+
10+
import numpy as np
11+
from PIL import Image
12+
import io
13+
14+
15+
app = Flask(__name__)
16+
17+
@app.route('/')
18+
def index():
19+
return '''
20+
<!DOCTYPE html>
21+
<html>
22+
<body>
23+
<canvas></canvas>
24+
<script>
25+
var canvas = document.getElementsByTagName('canvas');
26+
var ctx = canvas[0].getContext('2d');
27+
28+
var img = new Image();
29+
img.src = "/api/b";
30+
31+
// it can't draw it at once. it has to wait till it is loaded
32+
//ctx.drawImage(img, 0, 0);
33+
34+
img.onload = function() {
35+
img.style.display = 'none'; // I don't know why they hide it
36+
37+
console.log('WxH: ' + img.width + 'x' + img.height)
38+
39+
// convert Image to ImageData
40+
//(it has to draw on canvas so it could need second canvas for this)
41+
42+
ctx.drawImage(img, 0, 0);
43+
var imageData = ctx.getImageData(0, 0, img.width, img.height)
44+
45+
//put ImageData many times
46+
for(x = 0 ; x < 100 ; x += 10) {
47+
for(y = 0 ; y < 100 ; y += 10) {
48+
ctx.putImageData(imageData, x, y);
49+
}
50+
}
51+
};
52+
53+
</script>
54+
</body>
55+
</html>
56+
'''
57+
58+
59+
@app.route('/api/a')
60+
def image():
61+
'''send image from disk'''
62+
return send_file('/home/furas/Obrazy/ball.png', mimetype='image/png')
63+
64+
65+
@app.route('/api/b')
66+
def array():
67+
'''
68+
generate image from numpy.array using PIL.Image
69+
and send without saving on disk using io.BytesIO'''
70+
71+
arr = np.array([
72+
[255, 255, 0, 0, 0, 0, 0, 0, 255, 255],
73+
[255, 0, 255, 255, 255, 255, 255, 255, 0, 255],
74+
[ 0, 255, 255, 255, 255, 255, 255, 255, 255, 0],
75+
[ 0, 255, 255, 0, 255, 255, 0, 255, 255, 0],
76+
[ 0, 255, 255, 255, 255, 255, 255, 255, 255, 0],
77+
[ 0, 255, 255, 255, 255, 255, 255, 255, 255, 0],
78+
[ 0, 255, 0, 255, 255, 255, 255, 0, 255, 0],
79+
[ 0, 255, 255, 0, 0, 0, 0, 255, 255, 0],
80+
[255, 0, 255, 255, 255, 255, 255, 255, 0, 255],
81+
[255, 255, 0, 0, 0, 0, 0, 0, 255, 255],
82+
])
83+
84+
img = Image.fromarray(arr.astype('uint8')) # convert arr to image
85+
86+
file_object = io.BytesIO() # create file in memory
87+
img.save(file_object, 'PNG') # save as PNG in file in memory
88+
file_object.seek(0) # move to beginning of file
89+
# so send_file() will read data from beginning of file
90+
91+
return send_file(file_object, mimetype='image/png')
92+
93+
94+
app.run()

‎pygame/drag-many-images/example-1-drag-two_images.py

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
#!/usr/bin/env python
2+
3+
# date: 2019.07.11
4+
# https://stackoverflow.com/questions/56984542/is-there-an-effiecient-way-of-making-a-function-to-drag-and-drop-multiple-pngs
5+
6+
# It drags two images at the same time, You can click in any place.
7+
8+
import pygame
9+
10+
# --- constants ---
11+
12+
RED = (213, 43, 67)
13+
14+
# --- main ---
15+
16+
pygame.init()
17+
screen = pygame.display.set_mode((800,600))
18+
19+
chew1 = pygame.image.load("hal_9000.jpg")
20+
chew1_rect = chew1.get_rect(x=400, y=400)
21+
22+
chew2 = pygame.image.load("hal_9000.jpg") # use different image
23+
chew2_rect = chew1.get_rect(x=200, y=200)
24+
25+
drag = 0
26+
27+
# --- mainloop ---
28+
29+
clock = pygame.time.Clock()
30+
game_exit = False
31+
32+
while not game_exit:
33+
34+
# - events -
35+
for event in pygame.event.get():
36+
if event.type == pygame.QUIT:
37+
game_exit = True
38+
39+
elif event.type == pygame.MOUSEBUTTONDOWN:
40+
drag = 1
41+
elif event.type == pygame.MOUSEBUTTONUP:
42+
drag = 0
43+
elif event.type == pygame.MOUSEMOTION:
44+
if drag:
45+
chew1_rect.move_ip(event.rel)
46+
chew2_rect.move_ip(event.rel)
47+
48+
# - draws -
49+
screen.fill(RED)
50+
screen.blit(chew1, chew1_rect)
51+
screen.blit(chew2, chew2_rect)
52+
pygame.display.update()
53+
54+
# - FPS -
55+
clock.tick(30)
56+
57+
# --- end ---
58+
59+
pygame.quit()

‎pygame/drag-many-images/example-2-drag-Group-Sprite.py

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
#!/usr/bin/env python
2+
3+
# date: 2019.07.11
4+
# https://stackoverflow.com/questions/56984542/is-there-an-effiecient-way-of-making-a-function-to-drag-and-drop-multiple-pngs
5+
6+
# It uses Group and Sprite to drag all images. You can click in any place.
7+
8+
import pygame
9+
10+
# --- constants ---
11+
12+
RED = (213, 43, 67)
13+
BLACK = (0, 0, 0)
14+
15+
# --- classes ---
16+
17+
class Item(pygame.sprite.Sprite):
18+
19+
def __init__(self, image, x, y):
20+
super().__init__()
21+
self.image = pygame.image.load(image)
22+
self.rect = self.image.get_rect(x=x, y=y)
23+
24+
def update(self, rel):
25+
self.rect.move_ip(rel)
26+
27+
# --- main ---
28+
29+
pygame.init()
30+
screen = pygame.display.set_mode((800,600))
31+
32+
items = pygame.sprite.Group(
33+
Item("hal_9000.jpg", 150, 50),
34+
Item("hal_9000.jpg", 400, 50),
35+
Item("hal_9000.jpg", 150, 300),
36+
Item("hal_9000.jpg", 400, 300),
37+
)
38+
39+
dragged = pygame.sprite.Group()
40+
41+
drag = 0
42+
43+
# --- mainloop ---
44+
45+
clock = pygame.time.Clock()
46+
game_exit = False
47+
48+
while not game_exit:
49+
50+
# - events -
51+
for event in pygame.event.get():
52+
if event.type == pygame.QUIT:
53+
game_exit = True
54+
elif event.type == pygame.MOUSEBUTTONDOWN:
55+
drag = 1
56+
elif event.type == pygame.MOUSEBUTTONUP:
57+
drag = 0
58+
elif event.type == pygame.MOUSEMOTION:
59+
if drag:
60+
items.update(event.rel)
61+
62+
# - draws -
63+
screen.fill(BLACK)
64+
items.draw(screen)
65+
pygame.display.update()
66+
67+
# - FPS -
68+
clock.tick(30)
69+
70+
# --- end ---
71+
72+
pygame.quit()

‎pygame/drag-many-images/example-3-drag-only-selected.py

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
#!/usr/bin/env python
2+
3+
# date: 2019.07.11
4+
# https://stackoverflow.com/questions/56984542/is-there-an-effiecient-way-of-making-a-function-to-drag-and-drop-multiple-pngs
5+
6+
# It uses second Group to drag only clicked images.
7+
# If you click in place where images overlapped then it will move many images.
8+
9+
import pygame
10+
11+
# --- constants ---
12+
13+
RED = (213, 43, 67)
14+
15+
# --- classes ---
16+
17+
class Item(pygame.sprite.Sprite):
18+
19+
def __init__(self, image, x, y):
20+
super().__init__()
21+
self.image = pygame.image.load(image)
22+
self.rect = self.image.get_rect(x=x, y=y)
23+
24+
def update(self, rel):
25+
self.rect.move_ip(rel)
26+
27+
# --- main ---
28+
29+
pygame.init()
30+
screen = pygame.display.set_mode((800,600))
31+
32+
items = pygame.sprite.Group(
33+
Item("hal_9000.jpg", 150, 50),
34+
Item("hal_9000.jpg", 400, 50),
35+
Item("hal_9000.jpg", 150, 300),
36+
Item("hal_9000.jpg", 400, 300),
37+
)
38+
39+
dragged = pygame.sprite.Group()
40+
41+
# --- mainloop ---
42+
43+
clock = pygame.time.Clock()
44+
game_exit = False
45+
46+
while not game_exit:
47+
48+
# - events -
49+
for event in pygame.event.get():
50+
if event.type == pygame.QUIT:
51+
game_exit = True
52+
elif event.type == pygame.MOUSEBUTTONDOWN:
53+
dragged.add(x for x in items if x.rect.collidepoint(event.pos))
54+
elif event.type == pygame.MOUSEBUTTONUP:
55+
dragged.empty()
56+
elif event.type == pygame.MOUSEMOTION:
57+
dragged.update(event.rel)
58+
59+
# - draws -
60+
screen.fill(RED)
61+
items.draw(screen)
62+
pygame.display.update()
63+
64+
# - FPS -
65+
clock.tick(30)
66+
67+
# --- end ---
68+
69+
pygame.quit()

‎pygame/drag-many-images/example-X-pyglet.py

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
#!/usr/bin/env python
2+
3+
# date: 2019.07.11
4+
# https://stackoverflow.com/questions/56984542/is-there-an-effiecient-way-of-making-a-function-to-drag-and-drop-multiple-pngs
5+
6+
# It drags two images at the same time, You can click in any place.
7+
8+
import pyglet
9+
10+
window = pyglet.window.Window(width=800, height=600)
11+
12+
batch = pyglet.graphics.Batch()
13+
items = [
14+
pyglet.sprite.Sprite(pyglet.resource.image('hal_9000.jpg'), x=200, y=100, batch=batch),
15+
pyglet.sprite.Sprite(pyglet.resource.image('hal_9000.jpg'), x=400, y=300, batch=batch),
16+
]
17+
18+
@window.event
19+
def on_draw():
20+
#window.clear()
21+
22+
#RED = (213, 43, 67)
23+
pyglet.graphics.draw(4, pyglet.gl.GL_QUADS, ('v2f', [0,0, 800,0, 800,600, 0,600]), ('c3B', [213,43,67, 213,43,67, 213,43,67, 213,43,67]))
24+
25+
batch.draw()
26+
27+
@window.event
28+
def on_mouse_drag(x, y, dx, dy, buttons, modifiers):
29+
for i in items:
30+
i.x += dx
31+
i.y += dy
32+
33+
pyglet.app.run()
34+

‎pygame/drag-many-images/hal_9000.jpg

8.41 KB
Loading

‎pygame/fade-out/example1.py

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
# date: 2019.07.13
3+
# it shows image and fade out after ESC
4+
5+
import pygame
6+
7+
pygame.init()
8+
screen = pygame.display.set_mode((800,600))
9+
10+
img = pygame.image.load('image.jpg').convert()
11+
#img = pygame.Surface((800, 600))
12+
#img.fill((255, 0 , 0))
13+
img_rect = img.get_rect()
14+
15+
alpha = pygame.Surface((800, 600), pygame.SRCALPHA)
16+
alpha_rect = alpha.get_rect()
17+
18+
alpha_val = 0
19+
alpha_step = 10
20+
21+
clock = pygame.time.Clock()
22+
running = True
23+
fading = False
24+
25+
26+
while running:
27+
28+
for event in pygame.event.get():
29+
if event.type == pygame.QUIT:
30+
running = False
31+
elif event.type == pygame.KEYDOWN:
32+
if event.key == pygame.K_ESCAPE:
33+
fading = True
34+
35+
if fading:
36+
alpha.fill((0,0,0,alpha_val))
37+
if alpha_val < 256-alpha_step:
38+
alpha_val += alpha_step
39+
else:
40+
running = False
41+
42+
screen.blit(img, img_rect)
43+
screen.blit(alpha, alpha_rect)
44+
45+
pygame.display.flip()
46+
clock.tick(30)
47+
48+
pygame.quit()

0 commit comments

Comments
 (0)