Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitd464f4f

Browse files
committed
matplotlib to canvas tag example
1 parent4a2057b commitd464f4f

File tree

2 files changed

+231
-0
lines changed

2 files changed

+231
-0
lines changed

‎pyscriptjs/examples/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,5 +68,8 @@ <h2 class="text-2xl font-bold text-blue-600"><a href="./todo.html" target=”_bl
6868

6969
<h2class="text-2xl font-bold text-blue-600"><ahref="./webgl/raycaster/index.html"target=”_blank”>Webgl Icosahedron Example</a></h2>
7070
<p>Demo showing how a Simple Webgl scene would work in PyScript</code> tag</p>
71+
72+
<h2class="text-2xl font-bold text-blue-600"><ahref="./webgl/raycaster/index.html"target=”_blank”>Matplotlib to Canvas Tag</a></h2>
73+
<p>Demo showing a programmatically generated matplotlib graphic inserted into an HTML canvas tag</p>
7174
</body>
7275
</html>

‎pyscriptjs/examples/plot_display.html

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
<!DOCTYPE html>
2+
<htmllang="en-US">
3+
<head>
4+
<metacharset="UTF-8">
5+
<metaname="viewport"content="width=device-width, initial-scale=1">
6+
<title>py-script demos: matplotlib display</title>
7+
<!-- Styles //-->
8+
<linkhref="https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,400;0,700;1,400&display=swap"rel="stylesheet">
9+
<linkrel="stylesheet"href="static/pyscript.css"/>
10+
<styletype="text/css">
11+
body {
12+
font-family:"Red Hat Text", sans-serif;
13+
font-size:18px;
14+
font-weight:400;
15+
line-height:1.618;
16+
}
17+
18+
#app {
19+
margin:1em auto;
20+
width:1000px;
21+
}
22+
23+
.loading {
24+
display: inline-block;
25+
width:100px;
26+
height:100px;
27+
border:3px solidrgba(255,255,255,0.3);
28+
border-radius:50%;
29+
border-top-color: black;
30+
animation: spin1s ease-in-out infinite;
31+
}
32+
33+
.loading-container {
34+
margin:5em00;
35+
text-align: center;
36+
}
37+
38+
@keyframes spin {
39+
to {
40+
transform:rotate(360deg);
41+
}
42+
}
43+
44+
a {color:#43B029;}
45+
46+
ul#project_list {
47+
margin:1em0;
48+
}
49+
50+
ul#project_listli {
51+
list-style: disc;
52+
margin-left:1.25em;
53+
}
54+
55+
#upload_form,#entry_form {
56+
border-left:3px solid#777;
57+
display: none;
58+
margin:1.618em0;
59+
padding-left:1em;
60+
}
61+
62+
legend {
63+
display: block;
64+
font-size:1.25em;
65+
margin:0.5em0;
66+
}
67+
68+
input[type=submit],button {
69+
background:#43B029;
70+
border-radius:3px;
71+
color: white;
72+
padding:0.35em1.25em;
73+
}
74+
75+
label {
76+
display: block;
77+
}
78+
79+
textarea {
80+
border:1px solid#777;
81+
padding:0.75em;
82+
width:40em;
83+
height:10em;
84+
}
85+
86+
table {
87+
border-collapse: collapse;
88+
margin:1em0;
89+
}
90+
91+
th,td {
92+
border:1px solid#777;
93+
padding:0.35em0.75em;
94+
}
95+
96+
th {
97+
background:#eee;
98+
font-weight: normal;
99+
}
100+
</style>
101+
102+
<!-- pyscript -->
103+
<scriptdefersrc="static/pyscript.js"></script>
104+
</head>
105+
<body>
106+
<divid="app">
107+
<!-- Header //-->
108+
<header>
109+
<h1>py-script Demos: matplotlib plot to<code>&lt;canvas&gt;</code.</h1>
110+
</header>
111+
112+
<main>
113+
<divclass="loading-container">
114+
<divclass="loading"></div>
115+
</div>
116+
117+
<!-- py-script and py-env -->
118+
119+
<py-env>
120+
- matplotlib
121+
</py-env>
122+
123+
<py-script>
124+
from js import (
125+
alert,
126+
document,
127+
Image
128+
)
129+
130+
import base64
131+
from io import BytesIO
132+
133+
import matplotlib.pyplot as plt
134+
135+
data = [
136+
["Day#", "Value"],
137+
[1, 0.4871],
138+
[2, 0.5105],
139+
[3, 0.5338],
140+
[4, 0.3105],
141+
[5, 0.3018],
142+
[6, 0.2931],
143+
[7, 0.2844],
144+
[8, 0.3453],
145+
[9, 0.4062],
146+
[10, 0.4671],
147+
[11, 0.4126],
148+
[12, 0.3581],
149+
[13, 0.4432],
150+
[14, 0.5283],
151+
[15, 0.6134],
152+
[16, 0.6985],
153+
[17, 0.6438],
154+
[18, 0.5892],
155+
[19, 0.5346],
156+
[20, 0.6585],
157+
[21, 0.6133],
158+
[22, 0.5681],
159+
[23, 0.5228],
160+
[24, 0.4776],
161+
]
162+
163+
# Extract plotting data and info from `data`
164+
165+
labels = data.pop(0)
166+
xlabel, ylabel = labels
167+
x = [row[0] for row in data]
168+
y = [row[1] for row in data]
169+
170+
# Create plt
171+
172+
fig, ax = plt.subplots(dpi=100, figsize=(8, 4)) # 800 x 400
173+
ax.bar(x, y)
174+
ax.set_xlabel("Day #")
175+
ax.set_ylabel("Value")
176+
177+
# Save plt to io buffer and encode data for<img> tag
178+
179+
buffer = BytesIO()
180+
fig.savefig(buffer, format="png")
181+
img_data = base64.b64encode(buffer.getbuffer()).decode("ascii")
182+
plt.close() # `pyplot` can cause memory leaks - explicitly close
183+
buffer.close()
184+
185+
# Remove "loading" animation
186+
187+
# Set up canvas and image
188+
189+
def draw(target_img):
190+
<!-- target_img = document.getElementsByTagName("img")[0] -->
191+
<!-- target_img.id = "canvas-plot" -->
192+
canvas = document.getElementById("canvas")
193+
ctx = canvas.getContext("2d")
194+
canvas.width = 820
195+
canvas.height = 420
196+
ctx.drawImage(target_img, 0, 0)
197+
loading = document.getElementsByClassName("loading-container")[0]
198+
loading.style.display = "none"
199+
200+
img = Image.new()
201+
img.style.width = "800px"
202+
img.style.height = "400px"
203+
img.style.display = "block"
204+
img.style.visibility = "visible"
205+
img.src = "data:image/png;base64," + img_data
206+
207+
await asyncio.sleep(0.5)
208+
209+
draw(img)
210+
211+
</py-script>
212+
213+
<!-- end py-script and py-env -->
214+
215+
<!-- Output -->
216+
217+
<divid="container">
218+
<canvasid="canvas"width="820"height="420"></canvas>
219+
<divid="dropbox"></div>
220+
</div>
221+
222+
223+
<!-- End output -->
224+
</main>
225+
</div>
226+
<!-- Scripts //-->
227+
</body>
228+
</html>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp