Skip to content

Commit 175abfa

Browse files
danieldubergdanielduberg
committed
Updated page
1 parent 799ca4c commit 175abfa

File tree

6 files changed

+305
-8
lines changed

6 files changed

+305
-8
lines changed

‎docs/demo.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { WebViewer } from "@rerun-io/web-viewer";
2+
3+
const rrdUrl = "https://app.rerun.io/version/0.22.0/examples/structure_from_motion.rrd";
4+
const parentElement = document.getElementById("demo");
5+
6+
const viewer = new WebViewer();
7+
let userScroll = false; // Flag to detect user scroll
8+
9+
// Monitor user scroll events
10+
window.addEventListener('scroll', () => {
11+
userScroll = true; // Set flag when user scrolls
12+
});
13+
14+
window.addEventListener('DOMContentLoaded', function () {
15+
// Prevent scrolling caused by focus during load
16+
const originalFocus = HTMLElement.prototype.focus;
17+
HTMLElement.prototype.focus = function (options) {
18+
if (!this.classList.contains('allow-focus')) {
19+
return; // Block focus calls during load
20+
}
21+
originalFocus.call(this, options);
22+
};
23+
24+
// Ensure scroll behavior only happens if user hasn't scrolled
25+
window.addEventListener('load', () => {
26+
if (!userScroll) {
27+
window.scrollTo(0, 0); // Keep at top only if user hasn't scrolled
28+
}
29+
});
30+
});
31+
await viewer.start(rrdUrl, parentElement, {render_backend: "webgl", hide_welcome_screen: true, panel_state_overrides: {top: "Hidden", blueprint: "Hidden"}});

‎docs/font.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/* latin-ext */
2+
@font-face {
3+
font-family: 'Lato';
4+
font-style: normal;
5+
font-weight: 400;
6+
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
7+
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
8+
}
9+
10+
/* latin */
11+
@font-face {
12+
font-family: 'Lato';
13+
font-style: normal;
14+
font-weight: 400;
15+
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
16+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
17+
}
18+
19+
/* latin-ext */
20+
@font-face {
21+
font-family: 'Lato';
22+
font-style: normal;
23+
font-weight: 700;
24+
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
25+
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
26+
}
27+
28+
/* latin */
29+
@font-face {
30+
font-family: 'Lato';
31+
font-style: normal;
32+
font-weight: 700;
33+
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
34+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
35+
}

‎docs/index.html‎

Lines changed: 95 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,101 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3+
4+
<!-- Header -->
5+
36
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Rerun webpage example</title>
7+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8+
9+
<title>Rerun webpage example</title>
10+
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
12+
<link href="./font.css" rel="stylesheet" type="text/css">
13+
<link href="./style.css" rel="stylesheet" type="text/css">
714
</head>
15+
816
<body>
9-
<h1>Rerun webpage example</h1>
10-
<p>This is an example of how to use Rerun to create a webpage.</p>
11-
<iframe src="https://app.rerun.io/version/0.20.3/?url=https://app.rerun.io/version/0.20.3/examples/arkit_scenes.rrd"></iframe>
17+
18+
<!-- Home section -->
19+
20+
<div class="section">
21+
<div class="header">
22+
<div class="logo">
23+
<a href="https://rerun.io/" target="_blank"><img src="./logo.png"></a>
24+
</div>
25+
<div class="title" style="padding-top: 25pt;">
26+
Rerun webpage example
27+
</div>
28+
</div>
29+
30+
<div class="author">
31+
<a href="https://rerun.io/team" target="_blank">Author 1</a>,
32+
<a href="https://rerun.io/team" target="_blank">Author 2</a>,
33+
<a href="https://rerun.io/team" target="_blank">Author 3</a>
34+
</div>
35+
<div class="institution">
36+
University of Rerun, Stockholm, Sweden
37+
</div>
38+
<div class="link">
39+
<a href="https://rerun.io/docs/howto/integrations/embed-web" target="_blank">[Paper]</a>&nbsp;
40+
<a href="https://github.com/rerun-io/webpage_example" target="_blank">[Code]</a>
41+
</div>
42+
43+
<div id="home-wrapper">
44+
<video id="home-1" width="33%" autoplay loop muted playsinline disablepictureinpicture="" disableremoteplayback="" src="https://static.rerun.io/d4b3aeba88d551833726a9c1b0fa3efe5623d680_tapir_landing_4_3.mp4">
45+
</video>
46+
<video id="home-2" width="33%" autoplay loop muted playsinline disablepictureinpicture="" disableremoteplayback="" src="https://static.rerun.io/99f60820376cc901666de5578dcaa53bc836a405_spot_landing.mp4">
47+
</video>
48+
<video id="home-3" width="33%" autoplay loop muted playsinline disablepictureinpicture="" disableremoteplayback="" src="https://static.rerun.io/7b9cb889b81ac104f35c8651e95a447578f7adca_slahmr_4_3.mp4">
49+
</video>
50+
<div class="clear"></div>
51+
</div>
52+
</div>
53+
54+
<!-- Overview section -->
55+
56+
<div class="section">
57+
<div class="title">Overview</div>
58+
<div class="body">
59+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec tortor elementum, blandit ligula vitae, bibendum erat. Nulla efficitur fringilla erat, sit amet cursus nisl dapibus sed. Maecenas ut lectus purus. Donec lobortis est eu velit ullamcorper aliquam. Fusce eu rutrum urna, nec scelerisque nisl. Quisque rhoncus posuere luctus. Fusce eu semper ligula. Maecenas non enim a arcu sodales porttitor non quis tellus. Donec in diam eleifend, faucibus neque a, suscipit sem. In hac habitasse platea dictumst.
60+
</div>
61+
62+
<div class="teaser">
63+
<img src="https://rerun.io/_app/immutable/assets/hero-illustration.DcsNrpMr.svg">
64+
</div>
65+
</div>
66+
67+
<!-- Results section -->
68+
69+
<div class="section">
70+
<div class="title">Results</div>
71+
<div class="body"></div>
72+
Vestibulum eget sapien bibendum, pulvinar dolor vitae, sagittis tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque a pharetra metus, eu imperdiet arcu. Fusce ullamcorper sed tortor id mollis. Etiam vulputate commodo tincidunt. Pellentesque pellentesque augue id sem finibus auctor. Aenean vel laoreet libero. Nunc quis enim libero. Pellentesque dictum vitae risus dapibus mollis. Fusce tempor vulputate orci, quis vulputate nisi sollicitudin sit amet.
73+
</div>
74+
</div>
75+
76+
<!-- Demo section -->
77+
78+
<div class="section">
79+
<div class="title">Interactive Demo</div>
80+
Please feel free to drag the reconstruction result on the left to change the viewing angles, use the bottom bar to control the time step, and hover on the scene components for interactive visualization.
81+
<div id="demo">
82+
<script type="module" src="./demo.js"></script>
83+
</div>
84+
</div>
85+
86+
<!-- References section -->
87+
88+
<div class="section">
89+
<div class="bibtex">BibTeX</div>
90+
<pre>
91+
@article{rerun,
92+
title={Rerun webpage example},
93+
author={Author 1, Author 2, Author 3},
94+
journal={Rerun Journal of Webpage Examples},
95+
year={2026}
96+
}
97+
</pre>
98+
</div>
99+
12100
</body>
13101
</html>

‎docs/logo.png‎

4.38 KB
Loading

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
"vite": "^5.4.11"
1313
},
1414
"dependencies": {
15-
"@rerun-io/web-viewer": "0.20.3"
15+
"@rerun-io/web-viewer": "0.22.0"
1616
}
1717
}

‎docs/style.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
/* Body */
2+
body {
3+
background: #e3e5e8;
4+
color: #ffffff;
5+
font-family: 'Lato', Verdana, Helvetica, sans-serif;
6+
font-weight: 300;
7+
font-size: 14pt;
8+
}
9+
10+
/* Hyperlinks */
11+
a {text-decoration: none;}
12+
a:link {color: #1772d0;}
13+
a:visited {color: #1772d0;}
14+
a:active {color: red;}
15+
a:hover {color: #f09228;}
16+
17+
/* Pre-formatted Text */
18+
pre {
19+
margin: 5pt 0;
20+
border: 0;
21+
font-size: 12pt;
22+
background: #fcfcfc;
23+
}
24+
25+
/* Project Page Style */
26+
27+
#demo canvas {
28+
width: 100% !important;
29+
height: 600px !important;
30+
}
31+
32+
33+
/* Section */
34+
.section {
35+
width: 768pt;
36+
min-height: 100pt;
37+
margin: 15pt auto;
38+
padding: 20pt 30pt;
39+
border: 1pt hidden #000;
40+
text-align: justify;
41+
color: #000000;
42+
background: #ffffff;
43+
}
44+
45+
/* Header (Title and Logo) */
46+
.section .header {
47+
min-height: 80pt;
48+
margin-top: 30pt;
49+
}
50+
.section .header .logo {
51+
width: 80pt;
52+
margin-left: 10pt;
53+
float: left;
54+
}
55+
.section .header .logo img {
56+
width: 80pt;
57+
object-fit: cover;
58+
}
59+
.section .header .title {
60+
margin: 0 120pt;
61+
text-align: center;
62+
font-size: 22pt;
63+
}
64+
65+
/* Author */
66+
.section .author {
67+
margin: 5pt 0;
68+
text-align: center;
69+
font-size: 16pt;
70+
}
71+
72+
/* Institution */
73+
.section .institution {
74+
margin: 5pt 0;
75+
text-align: center;
76+
font-size: 16pt;
77+
}
78+
79+
/* Hyperlink (such as Paper and Code) */
80+
.section .link {
81+
margin: 5pt 0;
82+
text-align: center;
83+
font-size: 16pt;
84+
}
85+
86+
/* Teaser */
87+
.section .teaser {
88+
margin: 20pt 0;
89+
text-align: center;
90+
}
91+
.section .teaser img {
92+
width: 95%;
93+
}
94+
95+
/* Section Title */
96+
.section .title {
97+
text-align: center;
98+
font-size: 22pt;
99+
margin: 5pt 0 15pt 0; /* top right bottom left */
100+
}
101+
102+
/* Section Body */
103+
.section .body {
104+
margin-bottom: 15pt;
105+
text-align: justify;
106+
font-size: 14pt;
107+
}
108+
109+
/* BibTeX */
110+
.section .bibtex {
111+
margin: 5pt 0;
112+
text-align: left;
113+
font-size: 22pt;
114+
}
115+
116+
/* Related Work */
117+
.section .ref {
118+
margin: 20pt 0 10pt 0; /* top right bottom left */
119+
text-align: left;
120+
font-size: 18pt;
121+
font-weight: bold;
122+
}
123+
124+
/* Citation */
125+
.section .citation {
126+
min-height: 60pt;
127+
margin: 10pt 0;
128+
}
129+
.section .citation .image {
130+
width: 120pt;
131+
float: left;
132+
}
133+
.section .citation .image img {
134+
max-height: 60pt;
135+
width: 120pt;
136+
object-fit: cover;
137+
}
138+
.section .citation .comment{
139+
margin-left: 130pt;
140+
text-align: left;
141+
font-size: 14pt;
142+
}
143+

0 commit comments

Comments
 (0)