Material Design Buttons

alt

Material Design Buttons

29.00

Updated price and taxes/VAT calculated at checkout

Version Compatibility

TIA Unified PC

unified pc icon

Compatible

TIA Unified Panel

unified hmi icon

Compatible

WinCC V7.5

wincc v7 icon

Not compatible

WinCC V8.0

wincc v8 icon

Not compatible

Overview :

Google Material Design style buttons will make your WinCC Unified interface more modern and will not draw attention to itself. They remain visible and functional. More than 2k icons built right into the button will help to make the interface more variable.

  • Over 2k built in icons
  • Web-familiar appearance
  • Extensive customisation possibilities
Introduction

Fully customisable Material Design style buttons. This style is used by Google for its products.

They are designed with the simple goal of adding the ability for engineers to easily add some newness and functionality to their designs. A very important difference from other buttons, is the adequate behaviour of the button when it is resized. If you scale it - the rounding radius, text font size and icon size will remain exactly as you set them in pixels.

This pack contains 6 dynamic widgets for use with WinCC Unified.

  • ButtonIconElevated.svghmi
  • ButtonFilled.svghmi
  • ButtonElevated.svghmi
  • ButtonIconFilled.svghmi
  • ButtonOutline.svghmi
  • ButtonIconOutline.svghmi

With just 6 widgets you can get countless variations of how the button will look. You will have access to change the button colour, text colour, rounding radius and much more.

Here is how they look like:

Interface Properties:

All buttons have a very similar set of Iterface Properties

InterfaceDescription
BasicColorBackground button's color
FontBoldBold text or not
FontItalicItalic text or not
FontNameFont name for example TimesNewRoman
FontSizeFont size like in TIA Portal
IconIcon name full list you can get here
IconHorizPaddingPadding from the left side
IconSizeIcon size in pixels
RoundCornersCorners radius in pixels
TextButton text
TextColorText color in RGB format
TextHorizAlligmentText aligment left|center|right
TextHorizPaddingPadding from the left side
TexpPressedText for pressed state
TextVertAlligmentText aligment top|center|bottom
TextVertPaddingPadding from the top side
Version 1.0 (Release) [22 Nov 2023]
  • Added material design icons
  • Added "disabled" property
  • Changed default states