Wt Widget Gallery

Images

A WImage is a widget that displays an image. The image may be specified either as a URL, or may be dynamically generated by a WResource.

You can set an alternate text using the method setAlternateText(). The alternate text should provide a fallback for browsers that do not display an image, and are also important for accessibility. If no sensible fallback text can be provided, an empty text is preferred over nonsense.

You may listen to events by attaching event listeners to signals such as clicked(). Since mouse events pass the coordinates through a WMouseEvent object, it is possible to react to clicks in specific parts of the image.

Example

source

#include <Wt/WContainerWidget.h>
#include <Wt/WImage.h>
#include <Wt/WLink.h>
#include <Wt/WText.h>

auto container = std::make_unique<Wt::WContainerWidget>();

Wt::WImage *image = container->addNew<Wt::WImage>(Wt::WLink("icons/wt.png"));
image->setAlternateText("Wt logo");

Wt::WText *out = container->addNew<Wt::WText>();
out->setMargin(10, Wt::Side::Left);

image->clicked().connect([=] (const Wt::WMouseEvent& e) {
    out->setText("You clicked the Wt logo at "
                 "(" + std::to_string(e.widget().x) +
                 "," + std::to_string(e.widget().y) +
                 ").");
});

Image also supports a more structural approach to listening for events depending on the image location. One can define interactive areas on the image using addArea(), which also allows to define a custom tool tip (using WAbstractArea::setToolTip()) or a different cursor image (using WAbstractArea::setCursor) for a certain image area.

Example

source

#include <Wt/WBreak.h>
#include <Wt/WCircleArea.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WImage.h>
#include <Wt/WPolygonArea.h>
#include <Wt/WRectArea.h>
#include <Wt/WText.h>
#include <Wt/WAny.h>

auto container = std::make_unique<Wt::WContainerWidget>();

Wt::WImage *image = container->addNew<Wt::WImage>(Wt::WLink("pics/sintel_trailer.jpg"));
image->setAlternateText("Sintel trailer");

container->addNew<Wt::WBreak>();
Wt::WText *out = container->addNew<Wt::WText>();

auto circlePtr = std::make_unique<Wt::WCircleArea>(427, 149, 58);
auto circle = circlePtr.get();
circle->setToolTip("tree");
circle->setCursor(Wt::Cursor::Cross);
image->addArea(std::move(circlePtr));

auto rectPtr = std::make_unique<Wt::WRectArea>(294, 226, 265, 41);
auto rect = rectPtr.get();
rect->setToolTip("title");
rect->setCursor(Wt::Cursor::Cross);
image->addArea(std::move(rectPtr));

auto polygonPtr = std::make_unique<Wt::WPolygonArea>();
auto polygon = polygonPtr.get();
std::vector<Wt::WPoint> points = { Wt::WPoint(92,330), Wt::WPoint(66,261), Wt::WPoint(122,176),
                               Wt::WPoint(143,33), Wt::WPoint(164,33), Wt::WPoint(157,88),
                               Wt::WPoint(210,90), Wt::WPoint(263,264), Wt::WPoint(228,330),
                               Wt::WPoint(92,330) };
polygon->setPoints(points);
polygon->setToolTip("person");
polygon->setCursor(Wt::Cursor::Cross);
image->addArea(std::move(polygonPtr));

circle->clicked().connect([=] {
    out->setText("You clicked the tree.");
});

rect->clicked().connect([=] {
    out->setText("You clicked the title.");
});

polygon->clicked().connect([=] {
    out->setText("You clicked the person.");
});

image->mouseMoved().connect([=] (const Wt::WMouseEvent& e) {
    out->setText("You're pointing the background at "
                 "(" + std::to_string(e.widget().x) +
                 "," + std::to_string(e.widget().y) +
                 ").");
});

In contrast to the image, which displays typically a static image resource, Wt are also includes several options for dynamically painted graphics.

WImage is an inline widget. The widget corresponds to the HTML <img> tag and doesn't provide styling. It can be styled using inline or external CSS as appropriate.

Top