Skip to content

Commit 088cd1a

Browse files
AtohallanAtohallan
committed
Reviewed and fixed/improved examples
1 parent b8c4527 commit 088cd1a

File tree

5 files changed

+102
-48
lines changed

5 files changed

+102
-48
lines changed

‎example-1.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ class Comp:
1414
_v_novue = ['subtitle'] # property names to exclude from the synchronized state
1515

1616
def __init__(self):
17-
self.i = 25
17+
self.i = 10
1818
# just for the example, starts a loop that increments every few seconds
19-
asyncio.ensure_future(self.demo_incr(2, 3))
19+
asyncio.ensure_future(self.demo_incr(1, 2))
2020

2121
def watch_i(self, i):
2222
print("TEST: UPDATING i2_withwatch")

‎example-4.py

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ def watch_i(self, i):
2424
plt.grid()
2525
plt.plot(x, y)
2626
plt.savefig(fname)
27+
plt.close()
2728
self.fname = fname
28-
29+
2930

3031
start(Comp())

‎example-6.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
this.showGraph()
5151
},
5252
watch: {
53-
toplot: function() { this.showGraph() },
53+
toplot: function(newVal) { this.showGraph(newVal) },
5454
},
5555
computed: { // computed on the js side
5656
toplot: function() {
@@ -118,11 +118,12 @@
118118
methods: {
119119
showGraph: function () {
120120
let [graphs, layout] = this.toplot
121-
121+
let c = v => JSON.parse(JSON.stringify(v))
122+
// don't know why but the copy of graphs is necessary...
122123
if (this.plt === undefined) {
123124
this.plt = Plotly.newPlot(this.$refs.ply, graphs, layout, {responsive: true})
124125
} else {
125-
Plotly.react(this.$refs.ply, graphs, layout, {responsive: true})
126+
Plotly.react(this.$refs.ply, c(graphs), layout, {responsive: true})
126127
}
127128
}
128129
},

‎example-7.html

Lines changed: 93 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<link rel="stylesheet" href="lib/picnic.min.css" />
88
<style>
99
body { padding: 1em; }
10+
.indented { margin-left: 1.5em; padding-left: 1em; border-left: 5px solid lightgrey; }
1011

1112
table { font-size: 13px; border: 1px solid black; border-collapse: collapse;; }
1213
td { text-align: center; }
@@ -17,6 +18,35 @@
1718
.values td:nth-child(n+2) { background: rgba(calc(255 * var(--value)), 255, 0, var(--value))}
1819
.values td:nth-child(n+2) { border-bottom: 3px solid white; }
1920
.values td:nth-child(n+2).picked, input.picked { border-bottom: 3px solid blue !important;}
21+
22+
::selection { color: white; background: chartreuse; text-shadow: black 1px 1px 2px, black -1px 1px 2px, black 1px -1px 2px;}
23+
24+
.help {
25+
position: relative;
26+
background: yellow;
27+
color: red;
28+
border: 1px solid black;
29+
padding: .2em .4em;
30+
cursor: copy;
31+
}
32+
.help::before {
33+
content: attr(title);
34+
white-space: nowrap;
35+
background-color: #333;
36+
padding: .25em;
37+
position: absolute;
38+
bottom: 110%; left: 50%;
39+
transform-origin: center bottom;
40+
transition: transform 250ms, opacity 200ms;
41+
transform: translate(-50%, 0) scale(0, 0);
42+
opacity: 0;
43+
}
44+
/* class is so we can click (TODO) */
45+
.help:hover::before, .help.hover::before {
46+
z-index: 999;
47+
transform: translate(-50%, 0);
48+
opacity: 1;
49+
}
2050
</style>
2151
</head>
2252
<body>
@@ -27,64 +57,86 @@
2757
</p>
2858

2959
<p>
30-
Enter a list expression: <input v-model="input_expr" placeholder="list(range(40, 70))"/>
60+
Enter a list expression:
61+
<help title="list(range(40, 60))" a="input_expr"></help>
62+
<help title="list(range(40, 68))" a="input_expr"></help>
63+
<help title="list(range(40, 69))" a="input_expr"></help>
64+
<help title="list(range(40, 70))" a="input_expr"></help>
65+
<input v-model="input_expr" placeholder="list(range(40, 70))"/>
3166
</p>
3267

33-
<code><pre>
34-
>>> {{i_name}} = {{input_expr}}
68+
<div class="indented">
69+
<pre><code>>>> {{i_name}} = {{input_expr}}
3570
>>> print({{i_name}})
36-
[{{input.join(', ')}}]</pre></code>
71+
[{{input.join(', ')}}]</code></pre>
3772

38-
<h3>Input <code>{{ i_name }}</code></h3>
39-
<table>
40-
<tr class="indices">
41-
<td>Indices</td>
42-
<td v-for="v,i in input">{{i}}</td>
43-
<td/>
44-
</tr>
45-
<tr class="values">
46-
<td>Values</td>
47-
<td v-for="v,i in input" :class="{picked: isPicked(v)}" :style="{'--value': tdValue(v)}">{{v}}</td>
48-
</tr>
49-
<tr class="negative indices">
50-
<td>Negative indices</td>
51-
<td v-for="v,i in input">{{-input.length + i}}</td>
52-
</tr>
53-
</table>
54-
{{input}}
73+
<h3>Input <code>{{ i_name }}</code></h3>
74+
<table>
75+
<tr class="indices">
76+
<td>Indices</td>
77+
<td v-for="v,i in input">{{i}}</td>
78+
<td/>
79+
</tr>
80+
<tr class="values">
81+
<td>Values</td>
82+
<td v-for="v,i in input" :class="{picked: isPicked(v)}" :style="{'--value': tdValue(v)}">{{v}}</td>
83+
</tr>
84+
<tr class="negative indices">
85+
<td>Negative indices</td>
86+
<td v-for="v,i in input">{{-input.length + i}}</td>
87+
</tr>
88+
</table>
89+
{{input}}
90+
91+
</div>
5592

5693
<p>
57-
Now, enter slice expression: <input v-model="slice_expr" class="picked"/>
94+
Now, enter slice expression:
95+
<help title=":" a="slice_expr"></help>
96+
<help title="5:15" a="slice_expr"></help>
97+
<help title="5:" a="slice_expr"></help>
98+
<help title="5:-1" a="slice_expr"></help>
99+
<help title="5:-2" a="slice_expr"></help>
100+
<help title="5:-3" a="slice_expr"></help>
101+
<help title="5:-10" a="slice_expr"></help>
102+
<input v-model="slice_expr" class="picked"/>
58103
</p>
59104

60-
<code><pre>
105+
<div class="indented">
106+
<pre><code>
61107
>>> {{i_name}} = {{input_expr}}
62108
>>> {{o_name}} = {{i_name}}[{{slice_expr}}]
63109
>>> print({{o_name}})
64110
{{is_error ? '..... the expression caused an error... no print' : outputAsStr }}
65-
{{is_error ? error_message : ''}}</pre></code>
111+
{{is_error ? error_message : ''}}</code></pre>
66112

67-
<h3>Output <code>{{o_name}}</code>, after running <code>{{o_name}} = {{i_name}}[{{slice_expr}}]</code></h3>
68-
<table v-if="output.join !== undefined">
69-
<tr class="indices">
70-
<td>Indices</td>
71-
<td v-for="v,i in output">{{i}}</td>
72-
<td/>
73-
</tr>
74-
<tr class="values">
75-
<td>Values</td>
76-
<td v-for="v,i in output" class="picked" :style="{'--value': tdValue(v)}">{{v}}</td>
77-
</tr>
78-
<tr class="negative indices">
79-
<td>Negative indices</td>
80-
<td v-for="v,i in output">{{-output.length + i}}</td>
81-
</tr>
82-
</table>
83-
{{ output }}
113+
<h3>Output <code>{{o_name}}</code>, after running <code>{{o_name}} = {{i_name}}[{{slice_expr}}]</code></h3>
114+
<table v-if="output.join !== undefined">
115+
<tr class="indices">
116+
<td>Indices</td>
117+
<td v-for="v,i in output">{{i}}</td>
118+
<td/>
119+
</tr>
120+
<tr class="values">
121+
<td>Values</td>
122+
<td v-for="v,i in output" class="picked" :style="{'--value': tdValue(v)}">{{v}}</td>
123+
</tr>
124+
<tr class="negative indices">
125+
<td>Negative indices</td>
126+
<td v-for="v,i in output">{{-output.length + i}}</td>
127+
</tr>
128+
</table>
129+
{{ output }}
130+
</div>
84131
</div>
85132

133+
86134
<script src="vuejspython.js"></script>
87135
<script>
136+
Vue.component('help', {
137+
props: ['title', 'a'],
138+
template: `<span class="help" :title="title" @click="$parent[a] = title">?</span>`
139+
})
88140
vuejspython.start('localhost', {
89141
computed: {
90142
minValue() {

‎example-7.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ class Comp:
77
# define properties to forward to vue (or not)
88
i_name = 'l'
99
o_name = 's'
10-
slice_expr = ':'
10+
slice_expr = '5:15'
1111
is_error = False
1212
input_expr = str(list(range(40,60)))
1313

0 commit comments

Comments
 (0)