Skip to content

Commit 166163f

Browse files
texodustexodus
committed
Add webcam example
1 parent 058844e commit 166163f

File tree

10 files changed

+373
-5
lines changed

10 files changed

+373
-5
lines changed

‎default.profraw‎

-14.7 MB
Binary file not shown.

‎examples/blocks/examples.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const LOCAL_EXAMPLES = [
2121
"magic",
2222
"streaming",
2323
"covid",
24+
"webcam",
2425
"movies",
2526
"superstore",
2627
"citibike",

‎examples/blocks/src/raycasting/index.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -98,16 +98,13 @@ for (var j := 1; j <= radialSegments; j += 1) {
9898
if (t >= 0) {
9999
var t2 := 1 - u - v;
100100
var d1[3] := v0 * t2 + v1 * u + v2 * v;
101-
var d2[3] := d1 - camera;
102-
var dist := norm3(d2);
101+
var dist := norm3(d1 - camera);
103102
if (dist < depth) {
104103
depth := dist;
105104
106105
// Lighting
107-
var ww[3] := v0 - v1;
108-
var zz[3] := v2 - v1;
109106
var n[3];
110-
cross_product3(ww, zz, n);
107+
cross_product3(v0 - v1, v2 - v1, n);
111108
color := acos(dot_product3(light, n) / (light_norm * norm3(n)))
112109
}
113110
}

‎examples/blocks/src/webcam/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
A Perspective example which uses your computer's webcam as a data source.

‎examples/blocks/src/webcam/index.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
2+
* ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
3+
* ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
4+
* ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
5+
* ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
6+
* ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
7+
* ┃ Copyright (c) 2017, the Perspective Authors. ┃
8+
* ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
9+
* ┃ This file is part of the Perspective library, distributed under the terms ┃
10+
* ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
11+
* ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
12+
*/
13+
14+
body {
15+
background: #242526;
16+
color: white;
17+
font-family: "Roboto Mono";
18+
touch-action: none;
19+
}
20+
21+
* {
22+
box-sizing: border-box;
23+
}
24+
25+
#app {
26+
display: flex;
27+
flex-direction: column;
28+
position: absolute;
29+
top: 0;
30+
left: 0;
31+
right: 0;
32+
bottom: 0;
33+
}
34+
35+
#header {
36+
display: flex;
37+
flex-wrap: wrap;
38+
align-items: center;
39+
}
40+
41+
#header a {
42+
display: inline-flex;
43+
}
44+
45+
perspective-viewer {
46+
border-top: 1px solid #666;
47+
flex: 1 1 auto;
48+
}
49+
50+
label {
51+
height: 32px;
52+
font-size: 12px;
53+
padding: 6px 0px;
54+
margin-right: 4px;
55+
margin-left: 14px;
56+
margin-top: 8px;
57+
margin-bottom: 8px;
58+
border: 1px solid transparent;
59+
}
60+
61+
img {
62+
vertical-align: middle;
63+
margin-left: 14px;
64+
}
65+
66+
select, button {
67+
font-family: "Roboto Mono";
68+
font-size: 12px;
69+
appearance: none;
70+
background-color: transparent;
71+
border: 1px solid #666;
72+
border-radius: 2px;
73+
padding: 6px 10px;
74+
color: #f4f5f6;
75+
cursor: pointer;
76+
margin-right: 4px;
77+
margin-left: 4px;
78+
outline: none;
79+
user-select: none;
80+
height: 32px;
81+
margin-top: 8px;
82+
margin-bottom: 8px;
83+
}
84+
85+
select:hover, button:hover {
86+
color: #242526;
87+
background-color: #f4f5f6;
88+
border-color: #f4f5f6;
89+
}

‎examples/blocks/src/webcam/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
5+
<link rel="preload" href="/node_modules/@finos/perspective-viewer/dist/cdn/perspective_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
6+
<link rel="preload" href="/node_modules/@finos/perspective/dist/cdn/perspective.js" as="script" type="application/javascript" crossorigin="anonymous" />
7+
<link rel="preload" href="/node_modules/@finos/perspective/dist/cdn/perspective.cpp.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
8+
<link rel="preload" href="/node_modules/@finos/perspective/dist/cdn/perspective.worker.js" as="fetch" type="application/javascript" crossorigin="anonymous" />
9+
<script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
10+
<script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
11+
<script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
12+
<script type="module" src="webcam.js"></script>
13+
<link rel="stylesheet" href="index.css" />
14+
<link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
15+
<style>
16+
perspective-workspace {
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
bottom: 0;
21+
right: 0;
22+
}
23+
video,
24+
canvas {
25+
display: none;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<video id="video" width="80" height="60" autoplay muted></video>
31+
<canvas id="canvas" width="80" height="60"></canvas>
32+
<div id="app">
33+
<div id="header">
34+
<a href="https://perspective.finos.org">
35+
<img height="12" src="https://raw.githubusercontent.com/finos/perspective/master/docs/static/svg/perspective-logo-dark.svg" />
36+
</a>
37+
<label>Webcam Demo</label>
38+
<select></select>
39+
</div>
40+
<perspective-viewer></perspective-viewer>
41+
</div>
42+
</body>
43+
</html>

‎examples/blocks/src/webcam/layouts.json‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
[
2+
{
3+
"plugin": "Heatmap",
4+
"title": "Heatmap Cam",
5+
"group_by": ["x"],
6+
"split_by": ["y"],
7+
"columns": ["color"],
8+
"expressions": {
9+
"y": "-floor(\"index\" / 80)",
10+
"x": "-\"index\" % 80"
11+
},
12+
"aggregates": {
13+
"New Column 1": "any"
14+
}
15+
},
16+
{
17+
"plugin": "Heatmap",
18+
"plugin_config": {},
19+
"settings": true,
20+
"theme": "Pro Light",
21+
"title": "Downsampled Heatmap Cam",
22+
"group_by": ["x"],
23+
"split_by": ["y"],
24+
"columns": ["color"],
25+
"filter": [],
26+
"sort": [],
27+
"expressions": {
28+
"y": "bucket(-floor(\"index\" / 80), 3)",
29+
"x": "bucket(-\"index\" % 80, 3)"
30+
},
31+
"aggregates": {}
32+
},
33+
{
34+
"plugin": "Datagrid",
35+
"plugin_config": {
36+
"columns": {
37+
"color": {
38+
"bg_gradient": 251.04,
39+
"neg_bg_color": "#ffa38f",
40+
"number_bg_mode": "gradient",
41+
"number_fg_mode": "disabled",
42+
"pos_bg_color": "#346ead"
43+
}
44+
},
45+
"editable": false,
46+
"scroll_lock": false
47+
},
48+
"title": "Spreadsheet Cam",
49+
"group_by": ["y"],
50+
"split_by": ["x"],
51+
"columns": ["color"],
52+
"filter": [],
53+
"sort": [],
54+
"expressions": {
55+
"New Column 1": "bucket(\"color\", 5)",
56+
"y": "floor(\"index\" / 80)",
57+
"x": "-\"index\" % 80"
58+
},
59+
"aggregates": {}
60+
},
61+
{
62+
"plugin": "Y Bar",
63+
"plugin_config": {},
64+
"title": "Luminosity Histogram",
65+
"group_by": ["bucket(\"color\", 5)"],
66+
"split_by": [],
67+
"columns": ["color"],
68+
"filter": [],
69+
"sort": [],
70+
"expressions": {
71+
"bucket(\"color\", 5)": "bucket(\"color\", 5)",
72+
"y": "-floor(\"index\" / 80)",
73+
"x": "-\"index\" % 80"
74+
},
75+
"aggregates": {}
76+
},
77+
{
78+
"plugin": "Datagrid",
79+
"plugin_config": {
80+
"columns": {
81+
"color": {
82+
"bg_gradient": 2463.68,
83+
"neg_bg_color": "#ffa38f",
84+
"number_bg_mode": "gradient",
85+
"number_fg_mode": "disabled",
86+
"pos_bg_color": "#307bb0"
87+
}
88+
},
89+
"editable": false,
90+
"scroll_lock": false
91+
},
92+
"title": "Small Spreadsheet Cam",
93+
"group_by": ["bucket(y, 5)"],
94+
"split_by": ["bucket(x, 5)"],
95+
"columns": ["color"],
96+
"filter": [["bucket(x, 5)", "<", 0.0]],
97+
"sort": [],
98+
"expressions": {
99+
"bucket(y, 5)": "bucket(floor(\"index\" / 80), 2)",
100+
"New Column 1": "bucket(\"color\", 5)",
101+
"bucket(x, 5)": "bucket(-\"index\" % 80, 5)"
102+
},
103+
"aggregates": {}
104+
},
105+
{
106+
"plugin": "Y Line",
107+
"plugin_config": {},
108+
"title": "Max Headroom",
109+
"group_by": ["x"],
110+
"split_by": ["y"],
111+
"columns": ["New Column 2"],
112+
"filter": [["x", "<", 0.0]],
113+
"sort": [],
114+
"expressions": {
115+
"x": "-\"index\" % 80",
116+
"y": "floor(\"index\" / 80)",
117+
"New Column 2": "-floor(\"index\" / 80) * 20 - \"color\""
118+
},
119+
"aggregates": { "New Column 2": "avg" }
120+
},
121+
{
122+
"plugin": "X/Y Scatter",
123+
"plugin_config": {},
124+
"title": "Scatter Cam",
125+
"group_by": ["x", "y"],
126+
"split_by": [],
127+
"columns": ["x", "New Column 2", "color", null, null, null, null],
128+
"filter": [["x", "<", 0.0]],
129+
"sort": [],
130+
"expressions": {
131+
"New Column 2": "-floor(\"index\" / 80) * 50 - \"color\"",
132+
"x": "-\"index\" % 80",
133+
"y": "floor(\"index\" / 80)"
134+
},
135+
"aggregates": { "x": "avg", "New Column 2": "avg" }
136+
},
137+
{
138+
"plugin": "Datagrid",
139+
"plugin_config": {
140+
"columns": {},
141+
"editable": false,
142+
"scroll_lock": false
143+
},
144+
"title": "Raw Stream",
145+
"group_by": [],
146+
"split_by": [],
147+
"columns": ["index", "color"],
148+
"filter": [],
149+
"sort": [],
150+
"expressions": {},
151+
"aggregates": {}
152+
}
153+
]

‎examples/blocks/src/webcam/preview.png‎

137 KB
Loading

‎examples/blocks/src/webcam/thumbnail.png‎

34.1 KB
Loading

0 commit comments

Comments
 (0)