cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X

Define Your UI Style Part 1

0% helpful (0/1)

 

Convey information about IoT data effectively by customizing style definitions and implementing event-based logic

 

Guide Concept

 

This project will help you identify how you would like to create an experience for Users.

 

Following the steps in this guide, you will use color schemes to convey information quickly and effectively, for example to alert users of critical events. With ThingWorx Composer, you can implement Styles and States in your Mashups to enhance your user experience.

 

We will teach you how to create an affective IoT application experience that looks great and easy to navigate. How the UI is presented can influence users and their enjoyment of the application.

 

You'll learn how to

 

  • Create a Style Definition
  • Customize Style Definitions
  • Create and implement State Definitions
  • Implement event-based state changes

 

NOTE: This guide's content aligns with ThingWorx 9.3. The estimated time to complete this guide is 60 minutes

 

 

 

Step 1: Completed Example

 

Download the StylesAndStates.xml attached to this guide.  Within this file, you will find Entities referenced in this lesson, including a finished application.  Import and utilize this file to see a finished example and return to it as a reference if you become stuck during this guide and need some extra help or clarification.

 

Keep in mind, this download uses the exact names for entities used in this tutorial. If you would like to import this example and also create entities on your own, change the names of the entities you create.

 

 

Step 2: Create Style Definition

 

Style Definition is a collection of HTML styling elements that can be applied to a Widget just as you would apply a CSS definition to an HTML tag. With Style Definitions, you can control the look and feel, such as colors, fonts, and color context of individual Widgets in your Mashup.

 

  1. In the ThingWorx Composer, click the + New at the top of the screen.

     

    select_new.png

  2. Select Style Definition in the dropdown.

     

    create_new_styledefinition.png

  3. Enter a name for the Style Definition, such as StyleDefinition.

  4. Set the Project to an existing Project (ie, PTCDefaultProject).

    newest_style.png

     

  5. Click Style Information.
     

    up_newest_style.png

The Style Information page shows the options for images, colors, lines, and display text. See the table below for information on what each field controls.

 

6. Type PlaygroundBackground in the Display String field.

 

NOTE: If you go back to the HelloWorldPlayground, clear the Mashup Style property, then search for StyleDefinition again, you will see the PlaygroundBackground descriptive text.

 

7. Select Background Color. A color pallet will appear. Select White and click Select.

set_background.png

 

8. Select Text Color. A color pallet will appear. Select Black and click Select.


set_text.png

 

9. Click Save.

 

 

You have now created your first Style Definition. To ensure a consistent user experience, we recommend creating a Style Definition that you can use throughout your application.

 

 Option                                    Description
Display StringDescriptive string that can be displayed to indicate the current applied style definition
Background ColorBackground for charts, buttons, panels, etc
Secondary Background ColorMeant for widgets that support gradients
Foreground ColorUsed for foreground characteristics such as button text and label text
Font BoldFor text, whether the text should be bold or not
Font ItalicFor text, whether the text should be italicized or not
Font UnderlineFor text, whether the text should be underlined or not
ImageAdd images
Line ColorPen styling in charts
Line ThicknessPen styling in charts
Line StyleGenerally refers to borders. ThingWorx provides the following options: Solid, Dashed, Dotted, None
Text SizeChoose a font size from 9-72px

 

In the next part of this exercise, you’ll learn how to use Style Definitions to create an engaging experience for your application users.

 

 

 

Step 3: Customize Style Definitions

 

Open the HelloWorldPlayground Mashup in Composer, and click View Mashup.

 

It shows a Button that sends an Event to a Gauge Widget, which then updates a Line Chart.

style_5.png

 

 

Modify Style Definition

 

In this part of the lesson, we'll make some changes to this Mashup. We will use Style Definitions to change the background of the Mashup, change the colors used in the Line Chart in order information stand out, and add color to the Gauge Widget.

 

  1. In the Explorer tab, select the Mashup.
  2. Select the Style Properties tab, then click the X button to clear the Style Mashup Properties.
     

    remove_mashup_style.png

When editing a Mashup, you can either use a Style Definition Thing that you created earlier OR you can click the wand in a style property for a Mashup or Widget followed by clicking the + Custom button to create a one-time-use style.

3. With the Style Property clear, enter the Style Definition you created in the last section. Update the Background Color to #FF9082 to have the color pop in the Mashup.

set_custom_definition.png

 

4. Click Save and View Mashup to see the changes.

You have now updated the background for the HelloWorldPlayground. The style properties you define in the Style Definition will be consitent for any Mashup that references this Style Definition. Change the style around or create a custom style and see the changes in the Mashup. Below is what we'll be working to create. Get ideas of things you might want to see differently in your styling.

style_12.png

 

 

Customize Widget Style

 

ThingWorx provides a default Style Definition for many of its Widgets. Before editing the Style Definitions of a Widget, click the Style Definition property then click View. This enables you to see what the current values are and what you might want to change. If the changes are slight, create a copy of the original Style Definition and update the new version.

 

Until you are sure of the color schemes you would like to implement, use the default Style Definitions as a guide when creating your own versions.

 

Default Style Definitions

 

Next, we will update the colors and style of the Line Chart.

 

  1. Open the HelloWorldPlayground and select the Line Chart in the Workspace pane.
  2. Click the Style Properties tab to see the chart styles section.

    find_chart_styles.png

     

  3. Update the Legend->Color property to Blue.
     

    select_default_title.png

 

Customize Chart Style Theme

 

In this part of the lesson, we will update the Series1 and StyleTheme properties of the Line Chart. This is how you'll also set the colors for the chart titles.

 

The Series1 property will update the look and feel of the line for the count value being used. The Line Chart is a line graph, thus the only property you need to change is the Line Color property.

 

The StyleTheme property will update the background look of the Line Chart grid.

 

create_style_theme.png

  1. Clear the StyleTheme and click the + button to create a new theme.

  2. Create a theme with the name CustomTheme.
     

    create_custom_theme.png

  3. Click the Style tab and edit the feel of the items as you see fit.

    create_custom_theme2.png

     

  4. After open the Style Theme to be editable, click on colors. Here you'll see all the options and fields that you can make up your own color options and be as conservative as you like or as free as you like.

     

    custom_theme_colors.png

     

  5. Click Text Colors, then click on the Grids and Lists tab on the right. This is where we will be shaping our colors for the chart. When you're done with this, update the Core Colors section to make your mashup pop even more.

     

    custom_theme_grids.png

     

  6. You may also notice a more focused method of updating grids and lists. In the below Elements section, you'll have a more focused experience for updated.
     

    custom_theme_grids.png

     

NOTE: As an extension, after completing the previous steps, try to use Style Definitions to customize the sections of the UI on your own.

 

 

Click here to view Part 2 of this guide.

Version history
Last update:
‎Mar 07, 2023 01:52 PM
Updated by:
Labels (1)
Attachments
Contributors