Stub an SVG demo page

This commit is contained in:
Patrick Walton 2017-08-25 19:40:08 -07:00
parent defa2d63c3
commit 894226e023
4 changed files with 99 additions and 36 deletions

View File

@ -0,0 +1,26 @@
body {
background: lightslategray;
}
.pf-bottom-control {
position: fixed;
bottom: 1em;
}
#pf-load-font-button-label,
#pf-load-svg-button-label {
left: 1em;
margin: 0;
}
#pf-rendering-options-group {
right: 1em;
}
#pf-canvas {
display: block;
touch-action: none;
}
#pf-fps-label {
position: absolute;
right: 1em;
margin-top: 1em;
color: white;
background: rgba(0, 0, 0, 0.75);
}

45
demo/client/html/svg.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>SVG &mdash; Pathfinder Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="/css/pathfinder.css">
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="js/pathfinder.js"></script>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<a class="navbar-brand" href="#">Pathfinder</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" id="pf-demos-menu"
data-toggle="dropdown" ref="/" aria-haspopup="true"
aria-expanded="false">Demos</a>
<div class="dropdown-menu" aria-labelledby="pf-demos-menu">
<a class="dropdown-item" href="/">Text</a>
<a class="dropdown-item" href="/svg">SVG</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="rounded py-1 px-3" id="pf-fps-label">0 ms</div>
<canvas id="pf-canvas" width="400" height="300"></canvas>
<label class="btn btn-secondary btn-file pf-bottom-control" id="pf-load-svg-button-label">
Load SVG&hellip;
<input type="file" style="display: none" id="pf-load-svg-button">
</label>
<div class="pf-bottom-control" id="pf-rendering-options-group">
<select class="custom-select" id="pf-aa-level-select">
<option data-pf-type="none" data-pf-level="0" selected>No AA</option>
<option data-pf-type="ecaa" data-pf-level="0">ECAA</option>
<option data-pf-type="ssaa" data-pf-level="2">2&times;SSAA</option>
<option data-pf-type="ssaa" data-pf-level="4">4&times;SSAA</option>
</select>
</div>
</body>
</html>

View File

@ -1,48 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Pathfinder Demo</title>
<title>Text &mdash; Pathfinder Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="/css/pathfinder.css">
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="js/pathfinder.js"></script>
<style type="text/css">
body {
background: lightslategray;
}
.pf-bottom-control {
position: fixed;
bottom: 1em;
}
#pf-load-font-button-label {
left: 1em;
margin: 0;
}
#pf-rendering-options-group {
right: 1em;
}
#pf-canvas {
display: block;
touch-action: none;
}
#pf-fps-label {
position: absolute;
right: 1em;
margin-top: 1em;
color: white;
background: rgba(0, 0, 0, 0.75);
}
</style>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<a class="navbar-brand" href="#">Pathfinder Demo</a>
<a class="navbar-brand" href="#">Pathfinder</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Text</a>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" id="pf-demos-menu"
data-toggle="dropdown" ref="/" aria-haspopup="true"
aria-expanded="false">Demos</a>
<div class="dropdown-menu" aria-labelledby="pf-demos-menu">
<a class="dropdown-item" href="/">Text</a>
<a class="dropdown-item" href="/svg">SVG</a>
</div>
</li>
</ul>
</div>
@ -50,7 +30,7 @@
<div class="rounded py-1 px-3" id="pf-fps-label">0 ms</div>
<canvas id="pf-canvas" width="400" height="300"></canvas>
<label class="btn btn-secondary btn-file pf-bottom-control" id="pf-load-font-button-label">
Load Font
Load Font&hellip;
<input type="file" style="display: none" id="pf-load-font-button">
</label>
<div class="pf-bottom-control" id="pf-rendering-options-group">

View File

@ -36,8 +36,10 @@ use std::io;
use std::mem;
use std::path::{Path, PathBuf};
static STATIC_ROOT_PATH: &'static str = "../client/index.html";
static STATIC_TEXT_DEMO_PATH: &'static str = "../client/html/text.html";
static STATIC_SVG_DEMO_PATH: &'static str = "../client/html/svg.html";
static STATIC_CSS_BOOTSTRAP_PATH: &'static str = "../client/node_modules/bootstrap/dist/css";
static STATIC_CSS_PATHFINDER_PATH: &'static str = "../client/css/pathfinder.css";
static STATIC_JS_BOOTSTRAP_PATH: &'static str = "../client/node_modules/bootstrap/dist/js";
static STATIC_JS_JQUERY_PATH: &'static str = "../client/node_modules/jquery/dist";
static STATIC_JS_PATHFINDER_JS_PATH: &'static str = "../client/pathfinder.js";
@ -319,8 +321,12 @@ fn partition_font(request: Json<PartitionFontRequest>)
// Static files
#[get("/")]
fn static_index() -> io::Result<NamedFile> {
NamedFile::open(STATIC_ROOT_PATH)
fn static_text_demo() -> io::Result<NamedFile> {
NamedFile::open(STATIC_TEXT_DEMO_PATH)
}
#[get("/svg")]
fn static_svg_demo() -> io::Result<NamedFile> {
NamedFile::open(STATIC_SVG_DEMO_PATH)
}
#[get("/js/pathfinder.js")]
fn static_js_pathfinder_js() -> io::Result<NamedFile> {
@ -330,6 +336,10 @@ fn static_js_pathfinder_js() -> io::Result<NamedFile> {
fn static_css_bootstrap(file: PathBuf) -> Option<NamedFile> {
NamedFile::open(Path::new(STATIC_CSS_BOOTSTRAP_PATH).join(file)).ok()
}
#[get("/css/pathfinder.css")]
fn static_css_pathfinder_css() -> io::Result<NamedFile> {
NamedFile::open(STATIC_CSS_PATHFINDER_PATH)
}
#[get("/js/bootstrap/<file..>")]
fn static_js_bootstrap(file: PathBuf) -> Option<NamedFile> {
NamedFile::open(Path::new(STATIC_JS_BOOTSTRAP_PATH).join(file)).ok()
@ -364,9 +374,11 @@ impl<'a> Responder<'a> for Shader {
fn main() {
rocket::ignite().mount("/", routes![
partition_font,
static_index,
static_text_demo,
static_svg_demo,
static_js_pathfinder_js,
static_css_bootstrap,
static_css_pathfinder_css,
static_js_bootstrap,
static_js_jquery,
static_glsl,