Widgets in C++ with xeus and cling

Button widget


In [ ]:
#include <iostream>
#include "xwidgets/xbutton.hpp"

In [ ]:
xw::button button;

In [ ]:
void foo()
{
    button.description = "button";
}

In [ ]:
button.on_click(foo);
    
button.display()

Numerical input


In [ ]:
#include "xwidgets/xnumeral.hpp"

In [ ]:
xw::numeral<double> numeral;
numeral.display()

In [ ]:
numeral.value = 4;

In [ ]:
numeral.value()

Image


In [ ]:
#include "xwidgets/ximage.hpp"
#include "xwidgets/xprogress.hpp"

In [ ]:
auto input = xw::image_from_file("my_awesome_cat.jpg").finalize();
input

C++ backend for the jupyter-leaflet map visualization library

In [ ]:
#include <random>
#include <array>
#include <vector>
#include <chrono>
#include <thread>

#include "xwidgets/xlink.hpp"
#include "xwidgets/xslider.hpp"

#include "xleaflet/xmap.hpp"
#include "xleaflet/xbasemaps.hpp"
#include "xleaflet/xmarker.hpp"
#include "xleaflet/xheatmap.hpp"

Base example with xwidgets


In [ ]:
std::array<double, 2> center = {52.204793, 360.121558};

auto map1 = xlf::map_generator()
    .center(center)
    .zoom(9)
    .finalize();
map1.display();

In [ ]:
auto slider = xw::slider_generator<int>()
    .max(map1.max_zoom)
    .min(map1.min_zoom)
    .description("zoom:")
    .value(map1.zoom)
    .finalize();

auto link = xw::link(slider, "value", map1, "zoom");

slider

 Add a Strava layer


In [ ]:
auto strava = xlf::basemap({"Strava", "All"});

map1.add_layer(strava);

Add a marker


In [ ]:
auto marker = xlf::marker_generator()
    .location({52.1, 359.9})
    .finalize();

map1.add_layer(marker);

Heatmap layer


In [ ]:
auto map2 = xlf::map_generator()
    .center({37.58, 261.65})
    .zoom(5)
    .finalize();
map2

In [ ]:
std::random_device rd;
std::mt19937 mt(rd());
std::uniform_real_distribution<double> rd_latitude(34.0, 40.0);
std::uniform_real_distribution<double> rd_longitude(255.0, 265.0);
std::uniform_real_distribution<double> rd_intensity(0.0, 1000.0);

std::vector<std::array<double, 3>> heatmap_points;

for (std::size_t i = 0; i < 100; ++i)
{
    heatmap_points.push_back({rd_latitude(mt), rd_longitude(mt), rd_intensity(mt)});
}

In [ ]:
auto heatmap = xlf::heatmap_generator()
    .locations(heatmap_points)
    .finalize();
map2.add_layer(heatmap);

In [ ]:
for (std::size_t i = 0; i < 10; ++i)
{
    std::this_thread::sleep_for(std::chrono::seconds(1));
    heatmap.radius = heatmap.radius() + 1;
}

 Velocity layer


In [ ]:
#include <fstream>
#include "nlohmann/json.hpp"
#include "xleaflet/xvelocity.hpp"

In [ ]:
auto map3 = xlf::map_generator()
    .center({37.58, 261.65})
    .zoom(5)
    .finalize();

auto base_layer = xlf::basemap({"CartoDB", "DarkMatter"});
map3.add_layer(base_layer);

map3

In [ ]:
std::ifstream file("velocity_data.json");
nlohmann::json data;
file >> data;

auto velocity = xlf::velocity_generator()
    .data(data)
    .velocity_scale(0.01)
    .max_velocity(20)
    .display_options(R"({
        "velocityType": "Global Wind",
        "displayPosition": "bottomleft",
        "displayEmptyString": "No wind data"
    })")
    .finalize();

map3.add_layer(velocity);

C++ backend for the bqplot

In [ ]:
#include "random.hpp"
#include "xplot/xfigure.hpp"
#include "xplot/xmarks.hpp"
#include "xplot/xaxes.hpp"
#include "xplot/xtoolbar.hpp"

In [ ]:
std::size_t size = 100;
std::vector<double> x_data(size);
std::iota(x_data.begin(), x_data.end(), 0);
std::vector<double> y_data = randn(size);

In [ ]:
xpl::linear_scale xs, ys;
xpl::scatter scatter(xs, ys);

In [ ]:
scatter.x = x_data;
scatter.y = y_data;

In [ ]:
xpl::axis ax_x(xs), ax_y(ys);
ax_y.orientation = "vertical";

In [ ]:
xpl::figure fig;
fig.padding_x = 0.025;
fig.add_mark(scatter);
fig.add_axis(ax_x);
fig.add_axis(ax_y);
fig.padding_y = 0.025;

In [ ]:
xpl::toolbar toolbar(fig);

In [ ]:
#include "xwidgets/xbox.hpp"

In [ ]:
xw::vbox b;

In [ ]:
b.add(fig);

In [ ]:
b.add(toolbar);

In [ ]:
b

In [ ]:
fig.animation_duration = 0;

In [ ]:
scatter.x = randn(size);
scatter.y = randn(size);

In [ ]: