No texts in a simple nannou app

I'm trying to build an app with nannou. I started to experiment with DropDownList a little bit, and I cannot see any texts in it. Then I also added couple sliders from the examples of nannou - and I cannot see texts there too. Here's the repo https://gitlab.com/gentoid/oxyfy/tree/95b6fb28f7a859051615b3e628a875bf42cb5cc4

Cargo.lock:

[package]
name = "oxyfy"
version = "0.0.1"
authors = ["Viktor Lazarev <taurus101v@gmail.com>"]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
nannou = "0.10"

[patch.crates-io]
"vulkano" = { git = "https://github.com/vulkano-rs/vulkano.git", rev = "0a8944362a176885d13a84a1ea5a0e3d9b09b706" }
"vulkano-win" = { git = "https://github.com/vulkano-rs/vulkano.git", rev = "0a8944362a176885d13a84a1ea5a0e3d9b09b706" }
"vulkano-shaders" = { git = "https://github.com/vulkano-rs/vulkano.git", rev = "0a8944362a176885d13a84a1ea5a0e3d9b09b706" }
"vk-sys" = { git = "https://github.com/vulkano-rs/vulkano.git", rev = "0a8944362a176885d13a84a1ea5a0e3d9b09b706" }

main.rs (here I've removed not related code to reduce its size):

use nannou::{prelude::*, ui::prelude::*};

fn main() {
    nannou::app(model).update(update).simple_window(view).run();
}

struct Model {
    filenames: Vec<String>,
    selected: Option<usize>,
    ui: Ui,
    ids: Ids,
}

struct Ids {
    dd_list: widget::Id,
}

fn model(app: &App) -> Model {
    app.set_loop_mode(LoopMode::wait(3));

    let mut ui = app.new_ui().build().unwrap();

    let filenames = vec![
        "Option 1".to_string(),
        "Option 2".to_string(),
        "Option 3".to_string(),
    ];
    let selected = None;
    let ids = Ids {
        dd_list: ui.generate_widget_id(),
    };

    Model {
        filenames,
        selected,
        ui,
        ids,
    }
}

fn update(_app: &App, model: &mut Model, _update: Update) {
    let ui = &mut model.ui.set_widgets();

    for selected in widget::DropDownList::new(&model.filenames, model.selected)
        .down(10.0)
        .w_h(800.0, 30.0)
        .label("Colors")
        .label_color(ui::color::BLACK)
        .color(ui::color::BLUE)
        .label_font_size(16)
        .border(1.0)
        .set(model.ids.dd_list, ui)
    {
        println!("selected {:?}", selected);
        model.selected = Some(selected);
    }
}

fn view(app: &App, model: &Model, frame: &Frame) {
    frame.clear(PURPLE);
    model.ui.draw_to_frame(app, &frame).unwrap();
}

Nannou looks very promising, but this really blocks me to go further. Any ideas how to fix this?

I guess a screeshot will help:

Here you can see that there's no any text there. While every widget has a label

Nannou.cc site suggests a slack channel is available for help. The docs are pretty sparse and none of the examples showed a clear pattern for drop downs that I could see. Maybe try the slack channel if you don't get some help here.

1 Like

ah, good idea. Thanks! If I'm correct, the issue is not related to the DDL widget itself, but rather it looks like I have to set which font use for texts

Actually, there's an open issue for this particular case https://github.com/nannou-org/nannou/issues/380

Finally, I have texts in my app :slight_smile:

All I needed to do is just to create assets/ directory in my project and put any font there, and then load it in the model function:

let assets_path = app.assets_path().expect("There's no assets path!");
let font_path = assets_path.join("fonts/DroidSansMono.ttf");
ui.fonts_mut().insert_from_file(font_path).ok();

So, I'm happy since I can move on :slight_smile:

Edit: here's the main.rs after fixing this issue

2 Likes