TextRenderingExample.cpp

This example demonstrates how to easily make your text look better by using simple text effects. It also demostrates Unicode support with UTF-8 encoded texts in Cornerstone for different languages and the use of a CSS file for styling.

Screenshot of the TextRenderingExample

We begin by including the header files of classes we need and creating and initializing an instance of our application class:

  MultiWidgets::Application app;

  if(!app.init(argc, argv))
    return 1;   

All the text effects can be configured through attributes. While it is possible to set the attributes directly from C++ code, we opt to use an external CSS file for this. This allows us to easily change the attributes by simply modifying the text file. There is no need to recompile the application and modifying the CSS file will cause the attributes to update immediately, thus allowing rapid development and iteration.

  app.addStyleFilename("rendering.css");

Next we create some widgets. For displaying simple text, we use the MultiWidgets::TextWidget class. Our first instance is simple plain text without any effects. Widget attributes come from TextWidget section in the CSS-file.

  auto plainText = MultiWidgets::create<MultiWidgets::TextWidget>();
  app.mainLayer()->addChild(plainText);

Second widget uses the same basic attributes, but also adds a stroke effect, which makes to text stand out from the background more. The text in the widget is also read from the CSS file. In this case we can see some non-latin characters appearing to the screen.

Note! Make sure your development enviroment is saving the .cpp and .css files with UTF-8 encoding. Otherwise the characters might mess up when you save the files, and fonts are not necessarily rendered properly if the file encoding is, for example, ASCII.

  auto strokedText = MultiWidgets::create<MultiWidgets::TextWidget>();
  strokedText->addCSSClass("WithStrokes");//add stroke effect from css file
  app.mainLayer()->addChild(strokedText);

Last widget shows how we can also modify the attribute values in code instead of the CSS file. With this approach, the values are hard-coded in C++ and cannot be changed at runtime, unlike with CSS.

  auto strokedWithShadow = MultiWidgets::create<MultiWidgets::TextWidget>();
  strokedWithShadow->addCSSClass("WithStrokes");//add same stroke effect from css file

  strokedWithShadow->setText("สวัสดีประเทศไทย");//set unicode text
  // and drop a shadow
  strokedWithShadow->setDropShadowOffset(Nimble::Vector2f(7, 5));
  strokedWithShadow->setDropShadowBlur(0.25f);
  strokedWithShadow->setDropShadowColor(Radiant::Color(0.f, 0.f, 0.f, 0.5f));

Widgets are already added to the screen, but we have to modify the locations. Otherwise they will overlap and hide each others. This is easily done by iterating through the mainlayer's children.

  int x = 100;//start coordinates
  int y = 100;
  
  for(auto it = app.mainLayer()->childBegin(); it != app.mainLayer()->childEnd(); ++it) {
    MultiWidgets::WidgetPtr w = *it;
    w->setLocation(x, y);
    // add some space and indent between widgets
    y += w->height() + 50;
    x += 100;
  }

As last step we run the application:

  return app.run();

The full source code for the complete example is listed below:

/* Copyright (C) 2007-2013 Multi Touch Oy, Finland, http://www.multitaction.com
 *
 * This file is part of MultiTouch Cornerstone.
 *
 * All rights reserved. You may use this file only for purposes for which you
 * have a specific, written permission from Multi Touch Oy.
 *
 */

#include <MultiWidgets/Application.hpp>
#include <MultiWidgets/TextWidget.hpp>


int main(int argc, char** argv)
{
  MultiWidgets::Application app;

  if(!app.init(argc, argv))
    return 1;   

  app.addStyleFilename("rendering.css");

  auto plainText = MultiWidgets::create<MultiWidgets::TextWidget>();
  app.mainLayer()->addChild(plainText);

  auto strokedText = MultiWidgets::create<MultiWidgets::TextWidget>();
  strokedText->addCSSClass("WithStrokes");//add stroke effect from css file
  app.mainLayer()->addChild(strokedText);

  auto strokedWithShadow = MultiWidgets::create<MultiWidgets::TextWidget>();
  strokedWithShadow->addCSSClass("WithStrokes");//add same stroke effect from css file

  strokedWithShadow->setText("สวัสดีประเทศไทย");//set unicode text
  // and drop a shadow
  strokedWithShadow->setDropShadowOffset(Nimble::Vector2f(7, 5));
  strokedWithShadow->setDropShadowBlur(0.25f);
  strokedWithShadow->setDropShadowColor(Radiant::Color(0.f, 0.f, 0.f, 0.5f));

  app.mainLayer()->addChild(strokedWithShadow);

  int x = 100;//start coordinates
  int y = 100;
  
  for(auto it = app.mainLayer()->childBegin(); it != app.mainLayer()->childEnd(); ++it) {
    MultiWidgets::WidgetPtr w = *it;
    w->setLocation(x, y);
    // add some space and indent between widgets
    y += w->height() + 50;
    x += 100;
  }

  return app.run();

}