World map not rendering correctly (example code inside) #12

kpcyrd · 2025-01-27T21:01:50Z

Hello!

Thank you for this amazing library! I tried to render a world map, but noticed it seems off - at the top is the browser and at the bottom the same widget on the terminal:

This is the code I'm using for the browser:

use ratatui::{prelude::*, style::Color, widgets, widgets::canvas};
use webatui::prelude::*;

fn main() {
    run_tui(HelloWorld)
}

#[derive(Clone, Default, PartialEq)]
struct HelloWorld;

impl TerminalApp for HelloWorld {
    // This is a static app, so there's no need for a message type
    type Message = ();

    // Yew is message-based (reactive), but this is a static example, so this method is not needed
    fn update(&mut self, _ctx: TermContext<'_, Self>, _msg: Self::Message) -> bool {
        false
    }

    // Put your existing rendering logic here.
    fn render(&self, area: Rect, frame: &mut Frame<'_>) {
        let canvas = canvas::Canvas::default()
            .block(widgets::Block::bordered().title("World"))
            .marker(Marker::Braille)
            .x_bounds([-180.0, 180.0])
            .y_bounds([-90.0, 90.0])
            .paint(|ctx| {
                ctx.draw(&canvas::Map {
                    resolution: canvas::MapResolution::High,
                    color: Color::Gray,
                });
            });
        // let para = Paragraph::new("Hello World!");
        frame.render_widget(canvas, area);
    }
}

This is the code I'm using for the terminal:

use color_eyre::Result;
use crossterm::{
    event::{DisableMouseCapture, EnableMouseCapture},
    ExecutableCommand,
};
use ratatui::{
    crossterm::event,
    style::Color,
    symbols::Marker,
    widgets::{self, canvas},
    DefaultTerminal, Frame,
};
use std::{
    io::stdout,
    time::{Duration, Instant},
};

fn main() -> Result<()> {
    color_eyre::install()?;
    stdout().execute(EnableMouseCapture)?;
    let terminal = ratatui::init();
    let app_result = App.run(terminal);
    ratatui::restore();
    stdout().execute(DisableMouseCapture)?;
    app_result
}

struct App;

impl App {
    pub fn run(self, mut terminal: DefaultTerminal) -> Result<()> {
        let tick_rate = Duration::from_millis(16);
        let mut last_tick = Instant::now();
        loop {
            terminal.draw(|frame| self.draw(frame))?;
            let timeout = tick_rate.saturating_sub(last_tick.elapsed());
            if event::poll(timeout)? {
                match event::read()? {
                    event::Event::Key(key) => {
                        if key.code == event::KeyCode::Char('q') {
                            break;
                        }
                    }
                    _ => (),
                }
            }
            last_tick = Instant::now();
        }
        Ok(())
    }

    fn draw(&self, frame: &mut Frame) {
        let canvas = canvas::Canvas::default()
            .block(widgets::Block::bordered().title("World"))
            .marker(Marker::Braille)
            .x_bounds([-180.0, 180.0])
            .y_bounds([-90.0, 90.0])
            .paint(|ctx| {
                ctx.draw(&canvas::Map {
                    resolution: canvas::MapResolution::High,
                    color: Color::Gray,
                });
            });
        frame.render_widget(canvas, frame.area());
    }
}

Despite monospace, it seems some lines are longer than others.

The html is taken from the examples folder:

<!doctype html>
<html lang="en">
                <head></head>
                <link href='https://adobe-fonts.github.io/source-code-pro/source-code-pro.css' rel='stylesheet'>
                <style>
                                body {
                                                font-size: 16px;
                                }
                </style>
                <body>
                </body>
</html>

I'm suspecting this is some kind of css issue, or maybe my browser not applying the font correctly?

Thank you!

kpcyrd mentioned this issue Jan 27, 2025

Add world map example orhun/ratzilla#40

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

World map not rendering correctly (example code inside) #12

World map not rendering correctly (example code inside) #12

kpcyrd commented Jan 27, 2025

World map not rendering correctly (example code inside) #12

World map not rendering correctly (example code inside) #12

Comments

kpcyrd commented Jan 27, 2025