Skip to content

Commit

Permalink
Add webcam example
Browse files Browse the repository at this point in the history
  • Loading branch information
texodus committed Nov 17, 2023
1 parent 058844e commit 166163f
Show file tree
Hide file tree
Showing 10 changed files with 373 additions and 5 deletions.
Binary file removed default.profraw
Binary file not shown.
1 change: 1 addition & 0 deletions examples/blocks/examples.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const LOCAL_EXAMPLES = [
"magic",
"streaming",
"covid",
"webcam",
"movies",
"superstore",
"citibike",
Expand Down
7 changes: 2 additions & 5 deletions examples/blocks/src/raycasting/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,16 +98,13 @@ for (var j := 1; j <= radialSegments; j += 1) {
if (t >= 0) {
var t2 := 1 - u - v;
var d1[3] := v0 * t2 + v1 * u + v2 * v;
var d2[3] := d1 - camera;
var dist := norm3(d2);
var dist := norm3(d1 - camera);
if (dist < depth) {
depth := dist;
// Lighting
var ww[3] := v0 - v1;
var zz[3] := v2 - v1;
var n[3];
cross_product3(ww, zz, n);
cross_product3(v0 - v1, v2 - v1, n);
color := acos(dot_product3(light, n) / (light_norm * norm3(n)))
}
}
Expand Down
2 changes: 2 additions & 0 deletions examples/blocks/src/webcam/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

A Perspective example which uses your computer's webcam as a data source.
89 changes: 89 additions & 0 deletions examples/blocks/src/webcam/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
* ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
* ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
* ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
* ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
* ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
* ┃ Copyright (c) 2017, the Perspective Authors. ┃
* ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
* ┃ This file is part of the Perspective library, distributed under the terms ┃
* ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
* ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
*/

body {
background: #242526;
color: white;
font-family: "Roboto Mono";
touch-action: none;
}

* {
box-sizing: border-box;
}

#app {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

#header {
display: flex;
flex-wrap: wrap;
align-items: center;
}

#header a {
display: inline-flex;
}

perspective-viewer {
border-top: 1px solid #666;
flex: 1 1 auto;
}

label {
height: 32px;
font-size: 12px;
padding: 6px 0px;
margin-right: 4px;
margin-left: 14px;
margin-top: 8px;
margin-bottom: 8px;
border: 1px solid transparent;
}

img {
vertical-align: middle;
margin-left: 14px;
}

select, button {
font-family: "Roboto Mono";
font-size: 12px;
appearance: none;
background-color: transparent;
border: 1px solid #666;
border-radius: 2px;
padding: 6px 10px;
color: #f4f5f6;
cursor: pointer;
margin-right: 4px;
margin-left: 4px;
outline: none;
user-select: none;
height: 32px;
margin-top: 8px;
margin-bottom: 8px;
}

select:hover, button:hover {
color: #242526;
background-color: #f4f5f6;
border-color: #f4f5f6;
}
43 changes: 43 additions & 0 deletions examples/blocks/src/webcam/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<link rel="preload" href="/node_modules/@finos/perspective-viewer/dist/cdn/perspective_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
<link rel="preload" href="/node_modules/@finos/perspective/dist/cdn/perspective.js" as="script" type="application/javascript" crossorigin="anonymous" />
<link rel="preload" href="/node_modules/@finos/perspective/dist/cdn/perspective.cpp.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
<link rel="preload" href="/node_modules/@finos/perspective/dist/cdn/perspective.worker.js" as="fetch" type="application/javascript" crossorigin="anonymous" />
<script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
<script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
<script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
<script type="module" src="webcam.js"></script>
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
<style>
perspective-workspace {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
video,
canvas {
display: none;
}
</style>
</head>
<body>
<video id="video" width="80" height="60" autoplay muted></video>
<canvas id="canvas" width="80" height="60"></canvas>
<div id="app">
<div id="header">
<a href="https://perspective.finos.org">
<img height="12" src="https://raw.githubusercontent.com/finos/perspective/master/docs/static/svg/perspective-logo-dark.svg" />
</a>
<label>Webcam Demo</label>
<select></select>
</div>
<perspective-viewer></perspective-viewer>
</div>
</body>
</html>
153 changes: 153 additions & 0 deletions examples/blocks/src/webcam/layouts.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
[
{
"plugin": "Heatmap",
"title": "Heatmap Cam",
"group_by": ["x"],
"split_by": ["y"],
"columns": ["color"],
"expressions": {
"y": "-floor(\"index\" / 80)",
"x": "-\"index\" % 80"
},
"aggregates": {
"New Column 1": "any"
}
},
{
"plugin": "Heatmap",
"plugin_config": {},
"settings": true,
"theme": "Pro Light",
"title": "Downsampled Heatmap Cam",
"group_by": ["x"],
"split_by": ["y"],
"columns": ["color"],
"filter": [],
"sort": [],
"expressions": {
"y": "bucket(-floor(\"index\" / 80), 3)",
"x": "bucket(-\"index\" % 80, 3)"
},
"aggregates": {}
},
{
"plugin": "Datagrid",
"plugin_config": {
"columns": {
"color": {
"bg_gradient": 251.04,
"neg_bg_color": "#ffa38f",
"number_bg_mode": "gradient",
"number_fg_mode": "disabled",
"pos_bg_color": "#346ead"
}
},
"editable": false,
"scroll_lock": false
},
"title": "Spreadsheet Cam",
"group_by": ["y"],
"split_by": ["x"],
"columns": ["color"],
"filter": [],
"sort": [],
"expressions": {
"New Column 1": "bucket(\"color\", 5)",
"y": "floor(\"index\" / 80)",
"x": "-\"index\" % 80"
},
"aggregates": {}
},
{
"plugin": "Y Bar",
"plugin_config": {},
"title": "Luminosity Histogram",
"group_by": ["bucket(\"color\", 5)"],
"split_by": [],
"columns": ["color"],
"filter": [],
"sort": [],
"expressions": {
"bucket(\"color\", 5)": "bucket(\"color\", 5)",
"y": "-floor(\"index\" / 80)",
"x": "-\"index\" % 80"
},
"aggregates": {}
},
{
"plugin": "Datagrid",
"plugin_config": {
"columns": {
"color": {
"bg_gradient": 2463.68,
"neg_bg_color": "#ffa38f",
"number_bg_mode": "gradient",
"number_fg_mode": "disabled",
"pos_bg_color": "#307bb0"
}
},
"editable": false,
"scroll_lock": false
},
"title": "Small Spreadsheet Cam",
"group_by": ["bucket(y, 5)"],
"split_by": ["bucket(x, 5)"],
"columns": ["color"],
"filter": [["bucket(x, 5)", "<", 0.0]],
"sort": [],
"expressions": {
"bucket(y, 5)": "bucket(floor(\"index\" / 80), 2)",
"New Column 1": "bucket(\"color\", 5)",
"bucket(x, 5)": "bucket(-\"index\" % 80, 5)"
},
"aggregates": {}
},
{
"plugin": "Y Line",
"plugin_config": {},
"title": "Max Headroom",
"group_by": ["x"],
"split_by": ["y"],
"columns": ["New Column 2"],
"filter": [["x", "<", 0.0]],
"sort": [],
"expressions": {
"x": "-\"index\" % 80",
"y": "floor(\"index\" / 80)",
"New Column 2": "-floor(\"index\" / 80) * 20 - \"color\""
},
"aggregates": { "New Column 2": "avg" }
},
{
"plugin": "X/Y Scatter",
"plugin_config": {},
"title": "Scatter Cam",
"group_by": ["x", "y"],
"split_by": [],
"columns": ["x", "New Column 2", "color", null, null, null, null],
"filter": [["x", "<", 0.0]],
"sort": [],
"expressions": {
"New Column 2": "-floor(\"index\" / 80) * 50 - \"color\"",
"x": "-\"index\" % 80",
"y": "floor(\"index\" / 80)"
},
"aggregates": { "x": "avg", "New Column 2": "avg" }
},
{
"plugin": "Datagrid",
"plugin_config": {
"columns": {},
"editable": false,
"scroll_lock": false
},
"title": "Raw Stream",
"group_by": [],
"split_by": [],
"columns": ["index", "color"],
"filter": [],
"sort": [],
"expressions": {},
"aggregates": {}
}
]
Binary file added examples/blocks/src/webcam/preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/blocks/src/webcam/thumbnail.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 166163f

Please sign in to comment.