UI improvements
This commit is contained in:
parent
2cdf5ccd31
commit
5c38fe514f
@ -24,6 +24,7 @@ meval = { git = "https://github.com/Titaniumtown/meval-rs.git" }
|
|||||||
eframe = { git = "https://github.com/Titaniumtown/egui", default-features = false, features = ["egui_glow"] }
|
eframe = { git = "https://github.com/Titaniumtown/egui", default-features = false, features = ["egui_glow"] }
|
||||||
git-version = "0.3.5"
|
git-version = "0.3.5"
|
||||||
include-flate = { git = "https://github.com/Titaniumtown/include-flate.git" }
|
include-flate = { git = "https://github.com/Titaniumtown/include-flate.git" }
|
||||||
|
web-sys = "0.3.56"
|
||||||
|
|
||||||
[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
|
[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
|
||||||
instant = { version = "0.1.12" }
|
instant = { version = "0.1.12" }
|
||||||
|
|||||||
@ -241,8 +241,8 @@ impl epi::App for MathApp {
|
|||||||
|
|
||||||
Plot::new("plot")
|
Plot::new("plot")
|
||||||
.set_margin_fraction(Vec2::ZERO)
|
.set_margin_fraction(Vec2::ZERO)
|
||||||
.view_aspect(1.0)
|
// .view_aspect(1.0)
|
||||||
.data_aspect(1.0)
|
// .data_aspect(1.0)
|
||||||
.include_y(0)
|
.include_y(0)
|
||||||
.show(ui, |plot_ui| {
|
.show(ui, |plot_ui| {
|
||||||
let bounds = plot_ui.plot_bounds();
|
let bounds = plot_ui.plot_bounds();
|
||||||
|
|||||||
@ -23,26 +23,6 @@ pub struct Function {
|
|||||||
integral_num: usize,
|
integral_num: usize,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl Clone for Function {
|
|
||||||
fn clone(&self) -> Self {
|
|
||||||
let expr: Expr = self.func_str.parse().unwrap();
|
|
||||||
let func = expr.bind("x").unwrap();
|
|
||||||
Self {
|
|
||||||
function: Box::new(func),
|
|
||||||
func_str: self.func_str.clone(),
|
|
||||||
min_x: self.min_x,
|
|
||||||
max_x: self.max_x,
|
|
||||||
pixel_width: self.pixel_width,
|
|
||||||
back_cache: self.back_cache.clone(),
|
|
||||||
front_cache: self.front_cache.clone(),
|
|
||||||
integral: self.integral,
|
|
||||||
integral_min_x: self.integral_min_x,
|
|
||||||
integral_max_x: self.integral_max_x,
|
|
||||||
integral_num: self.integral_num,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl Function {
|
impl Function {
|
||||||
pub fn new(
|
pub fn new(
|
||||||
func_str: String, min_x: f64, max_x: f64, pixel_width: usize, integral: bool,
|
func_str: String, min_x: f64, max_x: f64, pixel_width: usize, integral: bool,
|
||||||
|
|||||||
13
src/lib.rs
13
src/lib.rs
@ -35,9 +35,16 @@ pub fn start(canvas_id: &str) -> Result<(), wasm_bindgen::JsValue> {
|
|||||||
init_tracing_wasm();
|
init_tracing_wasm();
|
||||||
|
|
||||||
// Used in order to hook into `panic!()` to log in the browser's console
|
// Used in order to hook into `panic!()` to log in the browser's console
|
||||||
log_helper("Initializing console_error_panic_hook...");
|
log_helper("Initializing panic hooks...");
|
||||||
std::panic::set_hook(Box::new(console_error_panic_hook::hook));
|
std::panic::set_hook(Box::new(|panic_info| {
|
||||||
log_helper("Initialized console_error_panic_hook!");
|
web_sys::window()
|
||||||
|
.and_then(|window| window.document())
|
||||||
|
.and_then(|document| document.body())
|
||||||
|
.and_then(|element| element.set_attribute("data-panicked", "true").ok());
|
||||||
|
|
||||||
|
console_error_panic_hook::hook(panic_info);
|
||||||
|
}));
|
||||||
|
log_helper("Initialized panic hooks!");
|
||||||
|
|
||||||
log_helper("Finished initializing!");
|
log_helper("Finished initializing!");
|
||||||
|
|
||||||
|
|||||||
@ -7,17 +7,29 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Integral Demonstration</title>
|
<title>Integral Demonstration</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>Please enable Javascript, this page uses both WebAssembly and Javascript to run.</noscript>
|
<noscript>Please enable Javascript, this page uses both WebAssembly and Javascript to run.</noscript>
|
||||||
|
|
||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
|
<div id="panic">
|
||||||
|
<h1>application encountered a panic!</h1>
|
||||||
|
<div>the application will no longer respond to user inputs</div>
|
||||||
|
<div>check the console for more information</div>
|
||||||
|
</div>
|
||||||
|
<div class="centered" id="loading">
|
||||||
|
<p style="font-size:16px">
|
||||||
|
Loading…
|
||||||
|
</p>
|
||||||
|
<div class="lds-dual-ring"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import init, { start } from '../pkg/integral_site.js';
|
import init, { start } from '../pkg/integral_site.js';
|
||||||
|
|
||||||
async function run() {
|
async function run() {
|
||||||
await init();
|
await init();
|
||||||
|
document.getElementById("loading").remove();
|
||||||
start("canvas");
|
start("canvas");
|
||||||
}
|
}
|
||||||
run();
|
run();
|
||||||
|
|||||||
@ -48,4 +48,67 @@ canvas {
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-family: Ubuntu-Light, Helvetica, sans-serif;
|
font-family: Ubuntu-Light, Helvetica, sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------- */
|
||||||
|
/* Loading animation from https://loading.io/css/ */
|
||||||
|
.lds-dual-ring {
|
||||||
|
display: inline-block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-dual-ring:after {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 0px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid #fff;
|
||||||
|
border-color: #fff transparent #fff transparent;
|
||||||
|
animation: lds-dual-ring 1.2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes lds-dual-ring {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-panicked = true] {
|
||||||
|
background-color: #ce2828;
|
||||||
|
|
||||||
|
#panic {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#panic {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
background-color: #ce2828;
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
padding: 1em 2em;
|
||||||
|
border-radius: 2em;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
z-index: 1000000;
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user