Skip to content

Commit

Permalink
more examples time
Browse files Browse the repository at this point in the history
  • Loading branch information
zombkit committed Apr 20, 2024
1 parent 30451d8 commit 4292652
Show file tree
Hide file tree
Showing 4 changed files with 274 additions and 45 deletions.
50 changes: 50 additions & 0 deletions examples/barchart_web/Cargo.toml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
[package]
name = "colors"
version = "1.0.2"
authors = ["gold-silver-copper"]
edition = "2021"
include = ["LICENSE-APACHE", "LICENSE-MIT", "**/*.rs", "Cargo.toml"]
rust-version = "1.76"

[package.metadata.docs.rs]
all-features = true
targets = ["x86_64-unknown-linux-gnu", "wasm32-unknown-unknown"]


[dependencies]
ratatui = { version = "0.26.1", default-features = false }
egui = "0.27.0"
eframe = { version = "0.27.0", default-features = false, features = [
"accesskit", # Make egui comptaible with screen readers. NOTE: adds a lot of dependencies.
"default_fonts", # Embed the default egui fonts.
"glow", # Use the glow rendering backend. Alternative: "wgpu".
"persistence", # Enable restoring app state when restarting the app.
] }
ratframe = { path = "../../" }

# native:
[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
env_logger = "0.10"

# web:
[target.'cfg(target_arch = "wasm32")'.dependencies]
wasm-bindgen-futures = "0.4"
log = "0.4"

[profile.release]
opt-level = 2 # fast and small wasm

# Optimize all dependencies even in debug builds:
[profile.dev.package."*"]
opt-level = 2


[patch.crates-io]

# If you want to use the bleeding edge version of egui and eframe:
# egui = { git = "https://github.com/emilk/egui", branch = "master" }
# eframe = { git = "https://github.com/emilk/egui", branch = "master" }

# If you fork https://github.com/emilk/egui you can test with:
# egui = { path = "../egui/crates/egui" }
# eframe = { path = "../egui/crates/eframe" }
95 changes: 95 additions & 0 deletions examples/barchart_web/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Disable zooming: -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no"
/>

<head>
<!-- change this to your project name -->
<title>hello world</title>

<!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
<link data-trunk rel="rust" data-wasm-opt="2" />
<!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
<base data-trunk-public-url />

<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="white"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="#404040"
/>

<style>
html {
/* Remove touch delay: */
touch-action: manipulation;
}

body {
/* Light mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #909090;
}

@media (prefers-color-scheme: dark) {
body {
/* Dark mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
}
}

/* Allow canvas to fill entire web page: */
html,
body {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
height: 100%;
width: 100%;
}

/* Position canvas in center-top: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
}

.centered {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f0f0f0;
font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif;
text-align: center;
}
</style>
</head>

<body>
<!-- The WASM code will resize the canvas dynamically -->
<!-- the id is hardcoded in main.rs . so, make sure both match. -->
<canvas id="the_canvas_id"></canvas>
</body>
</html>

<!-- Powered by egui: https://github.com/emilk/egui/ -->
128 changes: 128 additions & 0 deletions examples/barchart_web/src/main.rs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
use ratatui::{
prelude::{Stylize, Terminal},
widgets::Paragraph,
};
use ratframe::RataguiBackend;

use ratframe::NewCC;

#[cfg(not(target_arch = "wasm32"))]
use ratframe::native_setup;

#[cfg(target_arch = "wasm32")]
use ratframe::wasm_setup;

// When compiling to web using trunk:
#[cfg(target_arch = "wasm32")]
fn main() {
wasm_setup(HelloApp::default());
}
// When compiling natively:
#[cfg(not(target_arch = "wasm32"))]
fn main() -> eframe::Result<()> {
native_setup(HelloApp::default())
}
pub struct HelloApp {
terminal: Terminal<RataguiBackend>,
}

//l
impl Default for HelloApp {
fn default() -> Self {
//Creating the Ratatui backend/ Egui widget here
let backend = RataguiBackend::new(100, 100);
let mut terminal = Terminal::new(backend).unwrap();
Self { terminal: terminal }
}
}

impl NewCC for HelloApp {
/// Called once before the first frame.
fn new(cc: &eframe::CreationContext<'_>) -> Self {
setup_custom_fonts(&cc.egui_ctx);
//Creating the Ratatui backend/ Egui widget here
let backend = RataguiBackend::new_with_fonts(
100,
100,
"Regular".into(),
"Bold".into(),
"Oblique".into(),
"BoldOblique".into(),
);
let mut terminal = Terminal::new(backend).unwrap();
Self { terminal: terminal }
}
}

impl eframe::App for HelloApp {
/// Called each time the UI needs repainting, which may be many times per second.
fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
//call repaint here so that app runs continuously, remove if you dont need that
ctx.request_repaint();
self.terminal
.draw(|frame| {
let area = frame.size();
frame.render_widget(Paragraph::new("Hello Rataguiii").white().on_blue(), area);
})
.expect("epic fail");

egui::CentralPanel::default().show(ctx, |ui| {
ui.add(self.terminal.backend_mut());

if ui.input(|i| i.key_released(egui::Key::Q)) {
panic!("HAVE A NICE WEEK");
}
if ui.input(|i| i.key_released(egui::Key::T)) {
()
}
//KeyCode::Char(c) => app.on_key(c),
});
}
}

fn setup_custom_fonts(ctx: &egui::Context) {
// Start with the default fonts (we will be adding to them rather than replacing them).
let mut fonts = egui::FontDefinitions::default();

// Install my own font (maybe supporting non-latin characters).
// .ttf and .otf files supported.
fonts.font_data.insert(
"Regular".to_owned(),
egui::FontData::from_static(include_bytes!("../../../assets/fonts/Iosevka-Regular.ttf")),
);
fonts.families.insert(
egui::FontFamily::Name("Regular".into()),
vec!["Regular".to_owned()],
);
fonts.font_data.insert(
"Bold".to_owned(),
egui::FontData::from_static(include_bytes!("../../../assets/fonts/Iosevka-Bold.ttf")),
);
fonts.families.insert(
egui::FontFamily::Name("Bold".into()),
vec!["Bold".to_owned()],
);

fonts.font_data.insert(
"Oblique".to_owned(),
egui::FontData::from_static(include_bytes!("../../../assets/fonts/Iosevka-Oblique.ttf")),
);
fonts.families.insert(
egui::FontFamily::Name("Oblique".into()),
vec!["Oblique".to_owned()],
);

fonts.font_data.insert(
"BoldOblique".to_owned(),
egui::FontData::from_static(include_bytes!(
"../../../assets/fonts/Iosevka-BoldOblique.ttf"
)),
);
fonts.families.insert(
egui::FontFamily::Name("BoldOblique".into()),
vec!["BoldOblique".to_owned()],
);

// Tell egui to use these fonts:
ctx.set_fonts(fonts);
}
46 changes: 1 addition & 45 deletions examples/hello_world_web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<head>
<!-- change this to your project name -->
<title>gold silver copper</title>
<title>hello world</title>

<!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
<link data-trunk rel="rust" data-wasm-opt="2" />
Expand Down Expand Up @@ -82,57 +82,13 @@
font-family: Ubuntu-Light, Helvetica, sans-serif;
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);
}
}
</style>
</head>

<body>
<!-- The WASM code will resize the canvas dynamically -->
<!-- the id is hardcoded in main.rs . so, make sure both match. -->
<canvas id="the_canvas_id"></canvas>

<!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
<!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files -->
<script>
// We disable caching during development so that we always view the latest version.
if (
"serviceWorker" in navigator &&
window.location.hash !== "#dev"
) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("sw.js");
});
}
</script>
</body>
</html>

Expand Down

0 comments on commit 4292652

Please sign in to comment.