fltk-rs/fltk-webview

webview functionality for embedded fltk windows

fltk-rs

Rust bindings for the FLTK Graphical User Interface library.

The fltk crate is a cross-platform lightweight gui library which can be statically linked to produce small, self-contained and fast gui applications.

Resources:

• Book
• 本書的中文翻譯
• Documentation
• Videos
• Discussions
• Examples
• Demos
• 7guis-fltk-rs
• FLTK-RS-Examples
• Erco's FLTK cheat page, which is an excellent FLTK C++ reference.

Why choose FLTK?

• Lightweight. Small binary, around 1mb after stripping. Small memory footprint.
• Speed. Fast to install, fast to build, fast at startup and fast at runtime.
• Single executable. No DLLs to deploy.
• Supports old architectures.
• FLTK's permissive license which allows static linking for closed-source applications.
• Themeability (5 supported schemes: Base, GTK, Plastic, Gleam and Oxy), and additional theming using fltk-theme.
• Provides around 80 customizable widgets.
• Has inbuilt image support.

Here is a list of software using FLTK. For software using fltk-rs, check here.

• Link to the official FLTK repository.
• Link to the official documentation.

Usage

Just add the following to your project's Cargo.toml file:

[dependencies]
fltk = "^1.4"

To use the latest changes in the repo:

[dependencies]
fltk = { version = "^1.4", git = "https://github.com/fltk-rs/fltk-rs" }

Or if you have other depenendencies which depend on fltk-rs:

[dependencies]
fltk = "^1.4"

[patch.crates-io]
fltk = { git = "https://github.com/fltk-rs/fltk-rs" }

To use the bundled libs (available for x64 windows (msvc & gnu (msys2-mingw)), x64 & aarch64 linux & macos):

[dependencies]
fltk = { version = "^1.4", features = ["fltk-bundled"] }

The library is automatically built and statically linked to your binary.

An example hello world application:

use fltk::{app, prelude::*, window::Window};

fn main() {
    let app = app::App::default();
    let mut wind = Window::new(100, 100, 400, 300, "Hello from rust");
    wind.end();
    wind.show();
    app.run().unwrap();
}

Another example showing the basic callback functionality:

use fltk::{app, button::Button, frame::Frame, prelude::*, window::Window};

fn main() {
    let app = app::App::default();
    let mut wind = Window::new(100, 100, 400, 300, "Hello from rust");
    let mut frame = Frame::new(0, 0, 400, 200, "");
    let mut but = Button::new(160, 210, 80, 40, "Click me!");
    wind.end();
    wind.show();
    but.set_callback(move |_| frame.set_label("Hello World!")); // the closure capture is mutable borrow to our button
    app.run().unwrap();
}

Please check the examples directory for more examples. You will notice that all widgets are instantiated with a new() method, taking the x and y coordinates, the width and height of the widget, as well as a label which can be left blank if needed. Another way to initialize a widget is using the builder pattern: (The following buttons are equivalent)

use fltk::{button::Button, prelude::*};
let but1 = Button::new(10, 10, 80, 40, "Button 1");

let but2 = Button::default()
    .with_pos(10, 10)
    .with_size(80, 40)
    .with_label("Button 2");

An example of a counter showing use of the builder pattern:

use fltk::{app, button::Button, frame::Frame, prelude::*, window::Window};
fn main() {
    let app = app::App::default();
    let mut wind = Window::default()
        .with_size(160, 200)
        .center_screen()
        .with_label("Counter");
    let mut frame = Frame::default()
        .with_size(100, 40)
        .center_of(&wind)
        .with_label("0");
    let mut but_inc = Button::default()
        .size_of(&frame)
        .above_of(&frame, 0)
        .with_label("+");
    let mut but_dec = Button::default()
        .size_of(&frame)
        .below_of(&frame, 0)
        .with_label("-");
    wind.make_resizable(true);
    wind.end();
    wind.show();
    /* Event handling */
    app.run().unwrap();
}

Alternatively, you can use Flex (for flexbox layouts), Pack or Grid:

use fltk::{app, button::Button, frame::Frame, group::Flex, prelude::*, window::Window};
fn main() {
    let app = app::App::default();
    let mut wind = Window::default().with_size(160, 200).with_label("Counter");
    let mut flex = Flex::default().with_size(120, 140).center_of_parent().column();
    let mut but_inc = Button::default().with_label("+");
    let mut frame = Frame::default().with_label("0");
    let mut but_dec = Button::default().with_label("-");
    flex.end();
    wind.end();
    wind.show();
    app.run().unwrap();
}

Another example:

use fltk::{app, button::Button, frame::Frame, group::Flex, prelude::*, window::Window};

fn main() {
    let app = app::App::default();
    let mut wind = Window::default().with_size(400, 300);
    let mut col = Flex::default_fill().column();
    col.set_margins(120, 80, 120, 80);
    let mut frame = Frame::default();
    let mut but = Button::default().with_label("Click me!");
    col.fixed(&but, 40);
    col.end();
    wind.end();
    wind.show();

    but.set_callback(move |_| frame.set_label("Hello world"));

    app.run().unwrap();
}

Events

Events can be handled using the set_callback method (as above) or the available fltk::app::set_callback() free function, which will handle the default trigger of each widget(like clicks for buttons):

    /* previous hello world code */
    but.set_callback(move |_| frame.set_label("Hello World!"));
    another_but.set_callback(|this_button| this_button.set_label("Works"));
    app.run().unwrap();

Another way is to use message passing:

    /* previous counter code */
    let (s, r) = app::channel::<Message>();

    but_inc.emit(s, Message::Increment);
    but_dec.emit(s, Message::Decrement);
    
    while app.wait() {
        let label: i32 = frame.label().parse().unwrap();
        if let Some(msg) = r.recv() {
            match msg {
                Message::Increment => frame.set_label(&(label + 1).to_string()),
                Message::Decrement => frame.set_label(&(label - 1).to_string()),
            }
        }
    }

For the remainder of the code, check the full example here.

For custom event handling, the handle() method can be used:

    some_widget.handle(move |widget, ev: Event| {
        match ev {
            Event::Push => {
                println!("Pushed!");
                true
            },
            /* other events to be handled */
            _ => false,
        }
    });

Handled or ignored events using the handle method should return true, unhandled events should return false. More examples are available in the fltk/examples directory.

For an alternative event handling mechanism using an immediate-mode approach, check the fltk-evented crate.

Theming

FLTK offers 5 application schemes:

• Base
• Gtk
• Gleam
• Plastic
• Oxy

(Additional theming can be found in the fltk-theme crate)

These can be set using the App::with_scheme() method.

let app = app::App::default().with_scheme(app::Scheme::Gleam);

Themes of individual widgets can be optionally modified using the provided methods in the WidgetExt trait, such as set_color(), set_label_font(), set_frame() etc:

    some_button.set_color(Color::Light1); // You can use one of the provided colors in the fltk enums
    some_button.set_color(Color::from_rgb(255, 0, 0)); // Or you can specify a color by rgb or hex/u32 value
    some_button.set_color(Color::from_u32(0xffebee));
    some_button.set_frame(FrameType::RoundUpBox);
    some_button.set_font(Font::TimesItalic);

For default application colors, fltk-rs provides app::background(), app::background2() and app::foreground(). You can also specify the default application selection/inactive colors, font, label size, frame type, scrollbar size, menu line-spacing. Additionally the fltk-theme crate offers some other predefined color maps (dark theme, tan etc) and widget themes which can be loaded into your application.

Build Dependencies

Rust (version > 1.63), CMake (version > 3.15), Git and a C++17 compiler need to be installed and in your PATH for a cross-platform build from source. Ninja is recommended, but not required. This crate also offers a bundled form of fltk on selected x86_64 and aarch64 platforms (Windows (msvc and gnu), MacOS, Linux), this can be enabled using the fltk-bundled feature flag as mentioned in the usage section (this requires curl and tar to download and unpack the bundled libraries).

• Windows:
  • MSVC: Windows SDK
  • Gnu: No dependencies
• MacOS: No dependencies.
• Linux/BSD: X11 and OpenGL development headers need to be installed for development. The libraries themselves are normally available on linux/bsd distros with a graphical user interface.

For Debian-based GUI distributions, that means running:

sudo apt-get install libx11-dev libxext-dev libxft-dev libxinerama-dev libxcursor-dev libxrender-dev libxfixes-dev libpango1.0-dev libgl1-mesa-dev libglu1-mesa-dev

For RHEL-based GUI distributions, that means running:

sudo yum groupinstall "X Software Development" && yum install pango-devel libXinerama-devel libstdc++-static

For Arch-based GUI distributions, that means running:

sudo pacman -S libx11 libxext libxft libxinerama libxcursor libxrender libxfixes pango cairo libgl mesa --needed

For Alpine linux:

apk add pango-dev fontconfig-dev libxinerama-dev libxfixes-dev libxcursor-dev mesa-gl

For NixOS (Linux distribution) this nix-shell environment can be used:

nix-shell --packages rustc cmake git gcc xorg.libXext xorg.libXft xorg.libXinerama xorg.libXcursor xorg.libXrender xorg.libXfixes libcerf pango cairo libGL mesa pkg-config

Runtime Dependencies

• Windows: None
• MacOS: None
• Linux: You need X11 libraries, as well as pango and cairo for drawing (and OpenGL if you want to enable the enable-glwindow feature):

apt-get install -qq --no-install-recommends libx11-6 libxinerama1 libxft2 libxext6 libxcursor1 libxrender1 libxfixes3 libcairo2 libpango-1.0-0 libpangocairo-1.0-0 libpangoxft-1.0-0 libglib2.0-0 libfontconfig1 libglu1-mesa libgl1

Note that if you installed the build dependencies, it will also install the runtime dependencies automatically as well.

Also note that most graphical desktop environments already have these libs already installed. This list can be useful if you want to test your already built package in CI/docker (where there is no graphical user interface).

Features

The following are the features offered by the crate:

• use-ninja: Uses the ninja build system if available for a faster build, especially on Windows.
• no-pango: Build without pango support on Linux/BSD, if rtl/cjk font support is not needed.
• fltk-bundled: Support for bundled versions of cfltk and fltk on selected platforms (requires curl and tar)
• enable-glwindow: Support for drawing using OpenGL functions.
• system-libpng: Uses the system libpng
• system-libjpeg: Uses the system libjpeg
• system-zlib: Uses the system zlib
• use-wayland: Uses FLTK's wayland hybrid backend (runs on wayland when present, and on X11 when not present). Requires libwayland-dev, wayland-protocols, libdbus-1-dev, libxkbcommon-dev, libgtk-3-dev (optional, for the GTK-style titlebar), in addition to the X11 development packages. Sample CI.
• fltk-config: Uses an already installed FLTK's fltk-config to build this crate against. This still requires FLTK 1.4. Useful for reducing build times, testing against a locally built FLTK and doesn't need to invoke neither git nor cmake.

FAQ

please check the FAQ page for frequently asked questions, encountered issues, guides on deployment, and contribution.

Building

To build, just run:

git clone https://github.com/fltk-rs/fltk-rs --recurse-submodules
cd fltk-rs
cargo build

Currently implemented types:

Image types:

• SharedImage
• BmpImage
• JpegImage
• GifImage
• AnimGifImage
• PngImage
• SvgImage
• Pixmap
• RgbImage
• XpmImage
• XbmImage
• PnmImage
• TiledImage

Widgets:

• Buttons
  • Button
  • RadioButton
  • ToggleButton
  • RoundButton
  • CheckButton
  • LightButton
  • RepeatButton
  • RadioLightButton
  • RadioRoundButton
  • ReturnButton
  • ShortcutButton
• Dialogs
  • Native FileDialog
  • FileChooser
  • HelpDialog
  • Message dialog
  • Alert dialog
  • Password dialog
  • Choice dialog
  • Input dialog
  • ColorChooser dialog
• Frame (Fl_Box)
• Windows
  • Window
  • SingleWindow (single buffered)
  • DoubleWindow (double buffered)
  • MenuWindow
  • OverlayWindow
  • GlWindow (requires the "enable-glwindow" flag)
  • Experimental GlWidgetWindow (requires the "enable-glwindow" flag)
• Groups
  • Group
  • Pack (Horizontal and Vertical)
  • Tabs
  • Scroll
  • Tile
  • Wizard
  • ColorChooser
  • Flex (Column and Row)
  • Grid (https://github.com/fltk-rs/fltk-grid)
• Text display widgets
  • TextDisplay
  • TextEditor
  • SimpleTerminal
• Input widgets
  • Input
  • IntInput
  • FloatInput
  • MultilineInput
  • SecretInput
  • FileInput
• Output widgets
  • Output
  • MultilineOutput
• Menu widgets
  • MenuBar
  • MenuItem
  • Choice (dropdown list)
  • SysMenuBar (MacOS menu bar which appears at the top of the screen)
• Valuator widgets
  • Slider
  • NiceSlider
  • ValueSlider
  • Dial
  • LineDial
  • Counter
  • Scrollbar
  • Roller
  • Adjuster
  • ValueInput
  • ValueOutput
  • FillSlider
  • FillDial
  • HorSlider (Horizontal slider)
  • HorFillSlider
  • HorNiceSlider
  • HorValueSlider
• Browsing widgets
  • Browser
  • SelectBrowser
  • HoldBrowser
  • MultiBrowser
  • FileBrowser
  • CheckBrowser
• Miscelaneous widgets
  • Spinner
  • Clock (Round and Square)
  • Chart (several chart types are available)
  • Progress (progress bar)
  • Tooltip
  • InputChoice
  • HelpView
• Table widgets
  • Table
  • TableRow
  • SmartTable (via the fltk-table crate)
• Trees
  • Tree
  • TreeItem

Drawing primitives

(In the draw module)

Surface types:

• Printer.
• ImageSurface.
• SvgFileSurface.

GUI designer

fltk-rs supports FLUID, the RAD wysiwyg designer for FLTK. Checkout the fl2rust crate and fl2rust template.

• FLTK Rust: Latest FLUID, fl2rust and fltk-rs

Examples

To run the examples:

cargo run --example editor
cargo run --example calculator
cargo run --example calculator2
cargo run --example counter
cargo run --example hello_svg
cargo run --example hello_button
cargo run --example fb
cargo run --example pong
cargo run --example custom_widgets
cargo run --example custom_dial
...

Using custom theming and also FLTK provided default schemes like Gtk:

• hello_svg

• 

• calculator2

• 

• counter3

• 

• custom_dial

• 

• calculator

• 

• tabs

• 

• counter

• 

• editor

• 

• table

• 

• charts

• 

• pong

• 

• frames

• 

Different frame types which can be used with many different widgets such as Frame, Button widgets, In/Output widgets...etc.

More interesting examples can be found in the fltk-rs-demos repo. Also a nice implementation of the 7guis tasks can be found here. Various advanced examples can also be found here.

Themes

Additional themes can be found in the fltk-theme crate.

• 

• 

And more...

Extra widgets

This crate exposes FLTK's set of widgets, which are all customizable. Additional custom widgets can be found in the fltk-extras crate.

Tutorials

• Basics
• New basics (Uses fltk post 1.0)
• User input
• Client-side web todo app
• Create a media player using the vlc crate
• Custom dialogs
• Add drag and drop to the editor example
• Drawing things with fltk
• Working with images
• Audio player with custom widgets
• Use FLUID (RAD tool) with Rust
• multiple windows and embedding windows
• FLTK Rust tutorial: Improve FLTK's toggle button appearance!
• FLTK Rust: Customizing your app and widgets
• FLTK Rust: fltk-table, a boilerplate-less table creating crate
• FLTK Rust: intro into the fltk-evented crate
• FLTK Rust: Latest FLUID, fl2rust and fltk-rs

More videos in the playlist here. Some of the demo projects can be found here.

fltk-webview's Issues

How to resize the webview

I am putting a (or multiple but it does not matter) webview(s) inside a window that is resizable. If i am coloring the windows that are used for embedding it looks like they resize accordingly.

2021-07-15_20-03-04.mp4

if i am simply using this embedded windows as the "target" of a webview, the webview does not really notice the change of its "parent" window. To let the webview know about the size change i tried to "attach" an event handler on the windows that are embedding the webview and listening for resize events and resize the webviews accordingly. Unfortunately two issues are visible, first the webview shrinks to half the size if the application window is moved and and a boarder appears around the embedded window that is dragable. Secondly i only get the resize events for the win_a and not win_b thus the second/right webview does not get the new size information.

2021-07-15_19-59-21.mp4

I think i am just doing the wrong thing here to pass the new dimensions down to the webviews. here is the code i am using

use fltk::{app, prelude::*, window::Window};
use fltk::frame::Frame;
use fltk::enums::Color;
use fltk::enums::Event;
use fltk_webview::SizeHint;

fn main() {
    let app = app::App::default();
    let mut win_main = Window::new(100, 100, 830, 620, "Hello from rust");

    let mut win_a = Window::new(10, 10, 400, 600, "frame a");
    win_a.set_color(Color::Green);
    win_a.end();

    let mut win_b = Window::new(420, 10, 400, 600, "frame b");
    win_b.set_color(Color::Blue);
    win_b.end();

    win_main.set_color(Color::White);
    win_main.make_resizable(true);
    win_main.end();
    win_main.show();

    let mut wv_a = fltk_webview::Webview::create(false, &mut win_a);
    wv_a.navigate("https://github.com/fltk-rs/fltk-rs");
    
    let mut wv_b = fltk_webview::Webview::create(false, &mut win_b);
    wv_b.navigate("https://github.com/fltk-rs/webview");
    
    win_a.handle(move |f, ev| match ev {
       Event::Resize => {
           println!("A resize happening: x:{}, y:{}, w:{}, h:{}", f.x(), f.y(), f.width(), f.height());
           wv_a.set_size(f.width(), f.height(), SizeHint::None);
           true
       },
        _ => {
            false
        }
    });
    
    win_b.handle(move |f, ev| match ev {
        Event::Resize => {
            println!("B resize happening: x:{}, y:{}, w:{}, h:{}", f.x(), f.y(), f.width(), f.height());
            wv_b.set_size(f.width(), f.height(), SizeHint::None);
            true
        },
        _ => {
            false
        }
    });

    app.run().unwrap();
}

Javascript bind->return example

Hello,

It would be very helpful to have a 'hello world' style example of binding a native function into the JavaScript environment and returning a value. I've been able to do the former, but haven't succeeded in actually resolving the returned promise on the JavaScript side.

On the Rust side I have:

    let wvc = wv.clone();
    wv.bind("RustMethod", move |seq, content| {
        println!("{}, {}", seq, content);
        wvc.r#return(seq, 0, "{}");
    });

On the JavaScript side I have tried a few variations on

document.addEventListener("DOMContentLoaded", function() {
    RustMethod("foo").then(
        (response) => {
            console.log("Callback " + response);
        },
        (reject) => {
            console.log("Rejection " + reject);
        }
    );
});

On the Rust side, the method is clearly invoked as evidenced by the println!() macro generating output. However, the promise returned by RustMethod seems to never resolve, suggesting that something is awry with the parameters passed to the return method.

Any pointer towards getting this to work would be much appreciated :-)

Linux|Wayland webview does not attach to parent

On Wayland the webview is opening as a separate window

C-ABI compatibility

There are 2 ways to use rust crates from C. My interest would be using web view from fltk in C.

1. cbindgen
2. cargo-c

Are any of these recommended ?
The cargo-c method requires

The TL;DR:

Create a capi.rs with the C-API you want to expose and use #[cfg(cargo_c)]#[cfg(feature="capi")] to hide it when you build a normal rust library.
Make sure you have a lib target and if you are using a workspace the first member is the crate you want to export, that means that you might have to add a "." member at the start of the list.
Since Rust 1.38, also add "staticlib" to the "lib" crate-type. Do not specify the crate-type, cargo-c will add the correct library target by itself.
You may use the feature capi to add C-API-specific optional dependencies.
NOTE: It must be always present in Cargo.toml

Remember to add a cbindgen.toml and fill it with at least the include guard and probably you want to set the language to C (it defaults to C++)
Once you are happy with the result update your documentation to tell the user to install cargo-c and do cargo cinstall --prefix=/usr --destdir=/tmp/some-place or something along those lines.

I want to get the page source code

I want to get the html source code of the current page

set_html not working

windows 10

fltk = "1.2.14" // also tried 1.1
fltk-webview = "0.2.9"

wv.navigate("http://google.com"); works fine , but set_html is no response

Webview eval

Hello Mohammed,
I tried the webview examples and it seems to me the "eval" function doesn't work on other threads.

 // wv.dispatch(|wv| {
    std::thread::spawn(move || {
        let mut count = 0;
        loop {
            std::thread::sleep(time::Duration::from_millis(400));
            wv.eval(&format!("counter({})", count));
            count += 1;
        }
    });
    // });

The counter is not updated.
I tried with spawn and dispatch.

crashed on win7

I tried two versions of fltk-webview on Windows 7

[dependencies]
fltk-webview = "0.2"
crashed at
src/lib.rs:189:9
assert!(!inner.is_null());

[dependencies]
fltk-webview = { git = "https://github.com/fltk-rs/fltk-webview.git" }
The program cannot open because some dll are missing like
api-ms-win-ntuser-sysparams-l1-1-0.dll

resize window , the webview gets bigger

Hi!

when I try laouts other window works fine , but the webview gets bigger and resizeble. like below

resize webview window

here is my code

fn main() {
    let a = app::App::default().with_scheme(app::Scheme::Gtk);
    let mut win = window::Window::default().with_size(640, 480);

    let mut col = Flex::new(0, 0, 400, 300, None);
    col.set_color(Color::Blue);
    col.set_type(group::FlexType::Column);
    //main_panel(&mut col);

    let mut test_win = window::Window::default();
    test_win.set_color(Color::Red);
    test_win.end();

    let mut wv_win = window::Window::default();
    wv_win.make_resizable(true);
    wv_win.set_border(false);
    wv_win.end();
    //col.set_size(&test_win2, 100);
    col.end();
    win.resizable(&col);
    win.set_color(enums::Color::from_rgb(250, 250, 250));

    win.end();
    win.show();
    win.size_range(600, 400, 0, 0);
    let mut wv = fltk_webview::Webview::create(false, &mut wv_win);
    wv.navigate("https://google.com");
    a.run().unwrap();
}

any help ?

Linux|X11 example glitches and high CPU load

I am running the webview example and have noticed quite some problems.

I am running:

[naikon@archdesk webview]$ screenfetch 
                   -`                 
                  .o+`                 naikon@archdesk
                 `ooo/                 OS: Arch Linux 
                `+oooo:                Kernel: x86_64 Linux 5.12.15-arch1-1
               `+oooooo:               Uptime: 28m
               -+oooooo+:              Packages: 1621
             `/:-:++oooo+:             Shell: bash 5.1.8
            `/++++/+++++++:            Resolution: 7680x2160
           `/++++++++++++++:           DE: GNOME 40.0
          `/+++ooooooooooooo/`         WM: Mutter
         ./ooosssso++osssssso+`        WM Theme: 
        .oossssso-````/ossssss+`       GTK Theme: Mcata-dark [GTK2/3]
       -osssssso.      :ssssssso.      Icon Theme: Flat-Remix-Blue-Dark
      :osssssss/        osssso+++.     Font: Noto Sans 11
     /ossssssss/        +ssssooo/-     Disk: 672G / 901G (79%)
   `/ossssso+/:-        -:/+osssso+-   CPU: AMD Ryzen 7 3700X 8-Core @ 16x 3.6GHz
  `+sso+:-`                 `.-/+oso:  GPU: Radeon RX 580 Series (POLARIS10, DRM 3.40.0, 5.12.15-arch1-1, LLVM 12.0.0)
 `++:.                           `-/+/ RAM: 4394MiB / 32118MiB
 .`                                 `/

on X11 right now (i'll check wayland later) i have some glitches while running it. First there is a very high CPU load that seems to be a symptom of what looks like that the webview is recreated multiple times. In the attached video you can see that in the application window itself the rendered website "jumps" around. I have tested this with multiple websites and i don't think it has anything to do with rendering glitches of the website with the rendering engine. I made a dual monitor capture because one thing i notices was that my "Dock" on left monitor was hiding and showing rapidly while the example was running. To give a little context here – i have a System-Monitor running in "Fullscreen" on the left monitor and in that case the "Dock" is hiding (it does while every time the focused widow would overlap it). While running the example i noticed "flashing" "mirrors" of the website that gets rendered for brief millisecons (unfortunatly it does not show on the screen capture) but the "Dock" hiding and showing indicates that for a brief moment another window is obscuring the System-Monitor and had focus. After running the example i have occasionally a "dead" window open on the exact place the "flashing" was happening after the example gets closed and i can't close that.

For me it looks like as if the webview is created rapidly multiple times and gets attached to the "main" view (resulting in the jumping of website content) and sometimes that does not work and the webview gets its "own" window poping up on the left monitor and gets closed immediately and sometimes the example application gets closed in between resulting in the "dead" window.

smaller_webview.mp4

better version of the video github only allows mp4 and i don't want the files to get overly large.

The "jumping" and "Dock" hiding etc is much more quickly without the video capturing.

screenshot of the leftover "dead" window on the left screen on the position the short lived copy of the second window

not working for some website and script

Hi! Sorry to bother you again

i try wv.navigate("http://blog.csdn.net"); The page will appear for a second and then go blank. (wv.navigate("http://google.com"); works fine)

Js alert() is also unresponsive

and i have a <iframe> need to call

        var frame_win = getIframeWindow(el);

        frame_win.onload = () => {
            frame_win.MapComponent.mapType = 'Google'
        }

also it's not working.

I tested all the above on the browser without any problems

any help ?

Html content not displaying, but can be selected.

I have a simple project with the following code, based on the example in the docs:

use fltk::{app, prelude::*, window::Window};

fn main() {
    let app = app::App::default();
    let mut win = Window::default()
        .with_size(800, 600)
        .with_label("Hi there!");
    
    let mut webview_win = Window::default()
        .with_size(790, 590)
        .center_of_parent();
    
    win.end();
    win.make_resizable(true);
    win.show();
    
    let webview = fltk_webview::Webview::create(true, &mut webview_win);
    webview.set_html(r#"
<!doctype html>
<html>
    <head>
        <title>A title.</title>
    </head>
    <body style="color: rgb(0, 0, 0);">
        <h1>Hi there!</h1>
        <p>This is a test.</p>
    </body>
</html>
    "#);
    
    app.run().unwrap();
}

It compiles and runs just fine, but the view is blank:

Interestingly, if I right-click and bring up the inspector, the content does seem to be there:

Furthermore, the cursor changes to the text cursor when I hover over the areas where the text ought to be displayed, and I can drag-select (without any visible highlighting) and copy it, and paste the content into a text editor, and that works correctly with the expected content of the page being pasted.

At first I thought it might be a styling thing (e.g. the text is rendered white), but that doesn't seem to be the case, and is the reason for the style attribute on the body.

If I try to open a website with the navigate() method the same thing happens: the expected content seems to be there (shows up in the inspector, can be (invisibly) selected and copy/pasted into other applications), but just not rendered.

This feels particularly bizarre since the inspector obviously draws just fine—no idea why it would be able to draw that but not the actual web content.

I realize this may be a tricky bug to track down, and seems like the kind of thing that might be system-specific. So I'm ready to provide any help I reasonably can. Please let me know if there's anything you want me to check/test, etc.

System Info

I'm running NixOS 22.05 with X11 and AwesomeWM. Hardware-wise, I'm on an AMD x86/64 system with nVidia graphics (with the proprietary drivers). I can provide more details if that would be helpful.

Windows 10, with display scale set 125%, resize of webview is strange

My OS is Windows10, and have a display scale set to 125%.

When I ran the code below, the initial webview window fit the main windows, then I resized the main window, the webview resized follow the main window, but cannot full fill it, looks like 4/5 of the main windows, yes, it's (1/(125%)).

After I set display scale to 100%, it resizes as I expect.

use fltk::{app, prelude::*, window};

fn main() {
    let app = app::App::default();

    let mut win = window::Window::default()
        .with_size(800, 600)
        .with_label("Webview");
    
    let mut wv_win = window::Window::default_fill();
    wv_win.end();
    wv_win.make_resizable(true);

    win.end();
    win.make_resizable(true);
    win.show();

    let mut wv = fltk_webview::Webview::create(false, &mut wv_win);
    wv.navigate("https://bing.com");
    
    app.run().unwrap();
}

How to clean cache

I set up a file server locally. When I change the HTML content, the WebView does not change. (It works fine on the browser). Even if I delete the file, the WebView still works fine. I tried to restart the computer and delete target cargo run again ,but the cache was still there.I need to modify the file name, and then modify the url. Webview to appear the new content . any help?

Version 0.4 cannot be compiled, and version 0.3 has input focus issues

When using version 0.4 in cargo. toml, RustRover will prompt "Use of an undeclared type Webview [E0433]".

When using version 0.3, if a webview window is nested in the main window, the input box in the main window will lose focus when the webview page is opened, and no matter how you click on the input box in the main window with the mouse, you cannot input any characters. At the same time, the input characters will always appear on the webview page. Is there a way to regain input focus?

cargo.toml:

[dependencies]
fltk = { version = "1.4", features = ["use-ninja"]}
fltk-webview = "0.4"