Vuforia Studio BETA PROGRAM Experience Styles

1. Vuforia Studio BETA PROGRAMExperience Styles

2. Document Change History • Ionic • Custom CSS Agenda

3. Change History

4. 1 Ionic

5. What is Ionic • Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript. • The ThingBuilder UI is based on Ionic, here are a couple of links you can look at if you’re interested and want to  explore.  A lot of this will be the basis for the theming framework that is being built. • Ionic includes some pre-built style classes that users can take an advantage of, so you can just use those class names in your application without defining styles under the application option.

6. Changing Colors • Color Usage in the Xperience. • Ionic makes use of different classes for each element. For example a header element will have bar class and a button will have button class. To simplify the usage, we use different colors by prefixing element class in a color name. • In Xperience, you can change your header color by defining a new background color of “bar-header” in application styles, but cannot apply style classes in your views for a header element. • Predefined Color Classes

7. Changing the Text colors of Sliders • “-” and “+” Colors • Without defining a new style in the application styles, you can change colors of “-” and “+”

8. Changing buttons • More Predefined Button Style Classes • button-block • Adding button-block to a button applies display: block display. A block button will however go 100% of its parent's width. • button-full • Adding button-full to a button not only applies display: block, but also removes borders on the left and right, and any border-radius which may be applied. • button-large and button-small • Adding button-large to a button makes it larger, adding button-small makes it smaller. • button-outline • Use button-outline to apply an outline button style, which also has a transparent background. • button-clear • Add button-clear to remove the border and make the text stand out. • Predefined Button Color Style Classes

9. Changing Checkboxes • Predefined Checkbox Style Classes • You can set checkbox colors as well as text colors.

10. Changing Selects • Predefined Select Style Classes • You can set the Select colors as well as text colors.

11. Changing Grid Column Sizes • Column Percentage Class Names

12. Cheat sheet • If you want to change the + and – that are the labels for the sliders, here is a cheat sheet example left top with the ionic codes that you can enter “Icon Left/Right of Slider” into the properties panel. • Likewise, you can set other widgets’ icons by setting class into the properties panel as you can see the left bottom example. • More cheat sheets can be found from http://ionicons.com/cheatsheet.html

13. References • Ionic Site • The ThingBuilder UI is based on Ionic, here are a couple of links you can look at if you’re interested and want to  explore.  A lot of this will be the basis for the theming framework that is being built. • http://ionicframework.com/docs/components/ • Ionic Cheat Sheet • If you want to change the + and – that are the labels for the sliders or add pre-built icons for other widgets, here is the cheat sheet with the ionic codes that you can enter class names into the properties panel. • http://ionicons.com/cheatsheet.html

14. 2 Custom CSS

15. References • CSS – coding sources • http://www.w3schools.com/css/default.asp - Tutorial - Very good learning material with examples and tests • https://www.smashingmagazine.com/tag/css/- tips and CSS Properties Cheat sheet • https://www.smashingmagazine.com/2009/07/css-3-cheat-sheet-pdf/ • CSS – Responsive Design with Media Queries • http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries - Tutorial - Responsive design with CSS3 Media Queries • https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ - Media queries for devices

16. Entering CSS in ThingBuilder To enter CSS code in your Xperience, on the Project pain, expand the Styles option and select Application. This will open up an editor view where you can enter the CSS code for your Xperience. CSS changes can be seen/tested in the ThingBuilder Preview.

17. class names and Element Types for Ionic elements • How to use class names and element types in your application styles • Class names • Class is an identifier that can annotate multiple elements in your application. • When you specify class names and set styles for those classes, the defined styles will apply for your widgets which are using a same class in your application. For example, a button widget uses a “button” as a class name, so once you define styles for a class name “button”, the styles will be applied for all buttons in your application by default. • When you set styles in ThingBuilder, use “.” in front of its class name. For example, a “button” class must be used like “.button” in your application styles. • Element Types • All elements in ThingBuilder are defined by html element types and you can also set styles for them. • When you set styles for sub element types of style classes in ThingBuilder, use the sub-element type after a class name with a space. For example, to set styles for a sub-element “input” of a “range” class for a slider can be defined like “.range input” in your application styles. • Of course, you can also use sub-element type’s class name to do the same thing if it has. In this case, you can use two class names by adding spaces between them like “.toggle .track”.

18. Changing the background color • The following values, to specify red all produce the same result: • red • rgb(255,0,0) • rgb(100%,0%,0%) • #ff0000 • #f00 • Predefined color names include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. transparent is also a valid value. • The three values in the RGB value are from 0 to 255, 0 being the lowest level (no red, for example), 255 being the highest level (full red, for example). These values can also be a percentage. • The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#ff0000 becomes #f00, #cc9966 becomes #c96, etc.). • The background displayed in ThingBrowser will be transparent for 3D views and white for 2D views. For 2D apps, you may want to change the background. • Black background /* this will change the background color in the preview and the app to black, it does not change the color of the background in ThingBuilder*/ ion-view { background-color: #e7e7e7 !important; }

19. Changing the background AND Text color of the header • Header • Headers are fixed regions at the top of a screen that can contain a title label, and left/right buttons for navigation or to carry out various actions • Class names • bar : this is a default class for a header • bar-header : this is a sub class of a bar class • When you set both in your application styles, the bar-header styles will be applied for your header since the bar-header will not inherit bar’s styles. • Yellow background, red text for a header and a footer /* Change the background color and text color of a header*/ .bar { background-color: yellow; color: red; } • Blue background, white text for a header only /* Change the background color and text color of a header */ .bar-header { background-color: blue; color: white; }

20. Changing the background AND Text color of the Footer • Footer • Footers are regions at the bottom of a screen that can contain various types of content • Element names • ion-footer-bar : this is a default element name for a footer • Class names • bar : this is a default class for a footer element • bar-footer: this is a sub class of a bar class • When you set both in your application styles, the bar-footer styles will be applied for your footer. • Blue background, white text for a footer only /* Change the background color and text color of the header */ ion-footer-bar.bar{ background-color: blue; color: white; } ion-footer-bar.bar-footer { background-color: blue; color: white; }

21. Changing Styles of buttons • Button • A button is an essential part of any mobile experience. Like the Header, they come in the full spectrum of Ionic's default colors. By default a button has display: inline-block applied. Other options include block buttons for a full width. • Class names • button : this is a default class for buttons • Green text – This will change all buttons in the Xperience. .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }

22. Changing Styles of Cards • Card • Cards have become widely used in recent years. They are a great way to contain and organize information, while also setting up predictable expectations for the user. • Class names • card : this is a default class for cards • item-divider : this is a default class for headers and footers • When you set styles for item-divider in your application styles, all item-divider classes in your application will be applied. To apply styles only for cards, you have to use “.card .item-divider”. Note that there must be a space between “.card” and “.item-divider”. • Blue background and white text – This will change all cards in the Xperience. .card { background-color: blue; /* Blue*/ color: white; font-size: 16px; text-align: center; } .card .item-divider { background-color: green; /* Green */ color: red; font-size: 20px; }

23. Changing Styles of Lists • List • The List is a common and simple way of displaying... that's right, a list. This is a widely used interface across most current mobile OS's, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails. • Class names • list :this is a default class for lists • ng-binding : this is a default class for all labels in Xperiences • When you set styles for ng-biding in your application styles, all labels’ styles will be applied. To apply styles only for lists, you have to use “.list .ng-binding”. Note that there must be a space between “.list” and “.ng-binding”. • Green text – This will change all buttons in the Xperience. .list .ng-binding { background-color: green; /* Green */ color: white; }

24. Changing Styles of toggles • Toggle • A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the <label> in order to make the entire toggle easy to tap or drag • Class names • item-toggle : this is a default class for toggles’ labels • toggle : this is a default class for toggles’ checkbox inputs • track : this is a default class for a track of a checkbox input • handle : this is a default class for a handle of a checkbox input • Blue track – This will change all toggles in the Xperience. /* Change the color of toggles’ track*/ .toggle .track { background-color: blue; } • Blue track – This will change all toggles in the Xperience. /* Change the color of toggles’ handle */ .toggle .handle { background-color: yellow; } • Black background, blue text – This will change all toggles in the Xperience. /* Change the background color and text color of toggles */ .item-toggle { background-color: #e7e7e7; color: blue; }

25. Changing Styles of Sliders • Slider • Class names • range : this is a default class for sliders • Sub-element types • input : this is a “range” input for sliders • Black background, blue text – This will change all sliders in the Xperience. /* Change the background color of sliders */ .range { background-color: #e7e7e7; color: blue; } • Black background, blue text – This will change all sliders in the Xperience. /* Change the background image of sliders input*/ .range input { background-image: url("https://image.freepik.com/free-vector/cloudy-sky-simplified-icon-vector_21-20049994.jpg"); background-size: 99% 15px; }

26. Changing Styles of Checkboxes • Checkbox • Checkboxes allow the user to select a number of items in a set of choices. A good use for a checkbox list would be a filter list to apply multiple filters to a search. • Class names • item-checkbox : this is a default class for checkboxes • Black background, blue text – This will change all checkboxes in the Xperience. /* Change the background color and text color of checkboxes */ .item-checkbox { background-color: #e7e7e7; color: blue; }

27. Changing Styles of Selects • Select • A select is styled so its appearance is prettied up relative to the browser's default style. However, when the select elements is opened, the default behavior on how to select one of the options is still managed by the browser. • Class names • input-label : this is a default class for a label of selects • item-select : this is a default class for a dropdown list of selects • Black background, blue text – This will change all checkboxes in the Xperience. /* Change the background color and text color of selects*/ .input-label { background-color: #e7e7e7; color: blue; } .item-select { background-color: #e7e7e7; color: blue; }

28. Custom styles • Enter the custom style names in the Class entry on the Properties Pane. • You can use multiple styles on a widget. • Remove the border. .noborder { border-style: none; } • Set opacity .translucent { background: rgba(255,255,255,0.5); & .item { background: rgba(255,255,255,0.5); } }

29. Change a specific widget • Set opacity. twx-widget[widget-id="urlImage-1"] {  opacity: 0.3;}Where "urlImage-1” is whatever is in the "Id" property for the widget.  You may want to make a custom widget-id here since it's application-wide CSS and any other widget with the same ID will suddenly be translucent as well.

30. How to get element Types and Class Names • To do CSS coding, could be difficult to find class names and element types we would like to change. For this, we can get help from browser directly. • Once your Xperience is saved, click on preview to see you design in new tab. • Then in preview do right click on requested element and click on Inspect. • On right side you will be able to inspect and experiment directly with CSS code of the created Xperience – see next pages for example

31. Browser Inspect elements view

32. Changing Styles of Gauges Example • Gauge • A gauge is a widget to display values in a graphical range format. • Black background, blue text – This will change all checkboxes in the Xperience. /* Change the background color and text color of gauges*/ twx-widget[original-widget='twx-gauge'] twx-widget-content just-gage div svg path[filter^='url(#inner-shadow-gauge'][fill='#1f6295'] { fill: #FE6902; // gauge arc color (from blue to orange) } twx-widget[original-widget='twx-gauge'] twx-widget-content just-gage div text { fill: #000000; // gauge text (from gray to black) }

33. CSS EXPERIMENTATION with LIVE preview • The list of commands is not full (only used are listed), then by starting to type a command – list of available commands is shown • By typing background-image: url(“….”) • – the background of slider will change to picture • Then code in ThingBuilder will be following: • /*Change background and size of the slider*/ • .range input { • background-image: url("https://image.freepik.com/free-vector/cloudy-sky-simplified-icon-vector_21-20049994.jpg"); • background-size: 99% 30px; • }

34. CSS BACKGROUND Properties and attributes The CSS background properties are used to define the background effects for elements. • CSS backgroundproperties: • background-color – more information about all available attributes on http://www.w3schools.com/cssref/css_colors_legal.asp Valid attributes can be set as: • a valid color name - like "red" • a HEX value - like "#ff0000" • an RGB value - like "rgb(255,0,0)" • background-image– The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. Attribute is the image in syntax background-image: url("paper.gif"); • background-repeat – The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. Attributes are background-repeat: no-repeat|repeat|repeat-x|repeat-y • background-attachment– To specify that the background image should be fixed (will not scroll with the rest of the page) background-attachment: fixed; • background-position – positioning image on element. There are three horizontal keywords: left, center, and right. There are three vertical keywords: top, center, and bottom e.g. background-position: top right; You can also give a length in pixels. Horizontal first, then vertical. Or finally in percentage, again horizontal first, then vertical. background-position: 100% 0%; • background-size – property specifies the size of the background images. Attributes are background-size: auto|length|cover|contain|initial|inherit; • background-clip– property specifies the painting area of the background. background-clip:border-box|padding-box|content-box|initial|inherit; • background-blend-mode – property defines the blending mode of each background layer (color and/or image). Syntax background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity; • background – To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property. When using the shorthand property the order of the property values is: background-color/ background-image/ background-repeat/ background-attachment/ background-position. Syntax: background: #ffffffurl("img_tree.png") no-repeat right top;

35. CSS BORDER Properties and attributes The CSS border properties allow you to specify the style, width, and color of an element's border. • CSS borderproperties: • border-style – property specifies what kind of border to display. Property can have from one to four values (for the top border, right border, bottom border, and the left border). Syntax: border-style: dotted|dashed|solid|double|groove|ridge|inset|outset|none|hidden; or mixed border-style: dotted dashed solid double; • border-width – property specifies the width of the four borders. The width can be set as a specific size (in px, pt, cm, em, etc) Syntax: border-width: 5px; or by using one of the three pre-defined values: thin, medium, or thick - Syntax: border-width: medium;. The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border). Syntax: border-width: 2px 10px 4px 20px; • border-color– property is used to set the color of the four borders. The border-colorproperty can have from one to four values (for the top border, right border, bottom border, and the left border). Syntax: border-color: green; or border-color: red green blue yellow; Valid attributes can be set as: • a valid color name - like "red" • a HEX value - like "#ff0000" • an RGB value - like "rgb(255,0,0)“ • transparent • border-radius– property allows you to add rounded borders to elements. Syntax: border-radius: 25px; Individual borders can be targeted directly with entering position in to property (top, right, bottom, left). Example Syntax: border-top-style: dotted; • border– property is a shorthand property for the following individual border properties: width – style (required) – color. Syntax: border: 5px solid red;

36. CSS MARGIN & PADDING Properties and attributes The CSS marginproperties are used to generate space around elements - set the size of the white space OUTSIDE the border. • CSS marginproperties: • margin-top; margin-right; margin-bottom; margin-left; or shorthand property for the following individual margin properties - margin Attributes: • auto - the browser calculates the margin • length - specifies a margin in px, pt, cm, etc. • % - specifies a margin in % of the width of the containing element • inherit - specifies that the margin should be inherited from the parent element Syntax: margin-left: 100px; or margin: 100px 150px 100px 80px; The CSS paddingproperties are used to generate space around content – set the size of the white space between the element content and the element border. • CSS padding properties: • padding-top; padding-right; padding-bottom; padding-left; or shorthand property for the following individual padding properties - padding Attributes: • length - specifies a margin in px, pt, cm, etc. • % - specifies a padding in % of the width of the containing element • inherit - specifies that the padding should be inherited from the parent element Syntax: padding-left: 100px; or padding: 100px 150px 100px 80px;

37. CSS Height and Width Dimensions The CSS dimension properties allow you to control the height and width of an element. CSS height andwidth properties: The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block. Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element! Syntax: width: 500px; height: 100px; The problem can occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page. Using max-width: 500px;instead, in this situation, will improve the browser's handling of small windows. Same apply for the height of element: max-height: 100px;

38. CSS text formatting The CSS text formatting properties allow you to format and take control over the written text.

39. CSS text formatting –font styles The CSS text formatting properties allow you to format and take control over the written text. • Notes: • The font-family property specifies the font for an element. The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. There are two types of font family names: • family-name- The name of a font-family, like "times", "courier", "arial", etc. • generic-family- The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace". • Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Separate each value with a comma.If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

40. CSS links The CSS link- can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links can be styled differently depending on what state they are in. The four links states are: • a:link - a normal, unvisited link • a:visited - a link the user has visited • a:hover - a link when the user mouses over it • a:active - a link the moment it is clicked {more will come – but I would like to test Syntax in ThingBuilder and Preview in Beta 3 unfortunately not working at this moment. I wasn’t able to properly test this property yet}

41. Change Styles By JS • The JS code can be added by selecting the </> icon to the right of the view name in the navigation pane. • Also you can call functions that you defined for views from your widgets.

42. Change Styles By JS Example • To add functions for your Xperience, click the </> icon to the right of the view name in the navigation pane. • In this example, I added a function called changeStyle. • To use functions from your widgets, for example of buttons, you can set functions by clicking the </> icon to the right of “Click” event. • In this example, I added a “changeStyle()” $scope.changeStyle = function() { if(angular.element(document.querySelector("[widget-id=button-1] button")).hasClass("explode-button")) { angular.element(document.querySelector("[widget-id=button-1] button")).removeClass("explode-button").addClass("unexplode-button"); } else { angular.element(document.querySelector("[widget-id=button-1] button")).removeClass("unexplode-button").addClass("explode-button"); } } Toggled

43. Responsive Design with Media Queries • To apply styles when an orientation of a device is changed, use “@media screen and (orientation: landscape|portrait)”. • In this example, I defined a class called “button-orientation”. • To apply style based on the size of device, use “@media screen and (max-device-width: px)”. • It is vary depends on devices. • More references can be found from here @media screen and (orientation: portrait) { .button-orientation { background: rgba(255,255,255,0.5); color: blue; display:block; } } @media screen and (orientation: landscape) { .button-orientation { display:none; } }

44. Questions & ANSWERS