Nav Overview

1. Navigate to HSYCO Manager

2. Click on "Project Editor"

3. Click "New Project"

4. Give it a name ("house" for example) and click "Create"

Tip: Now that we have a blank project, we will add some pages that represents the rooms of the house and the nav object in the overlay to go though them.

5. Click "Add Page"

6. Add a standard page in landscape mode

7. Change the ID to "kitchen"

8. Change also the title showed in "Kitchen"

9. Go to the "add" panel

10. Add a "Text" object

11. Go back to "edit" mode

12. Change the "text" attribute to "Kitchen"

13. Change the font size to 40

14. Now that we added the "text" object, we need to put it in the middle of the page so that it is clearly visible. To do this, click on the "Align" button on the upper side of the Project Editor

15. Center the element vertically

16. Center also horizontally

17. Now the element is centered! Notice also that the title of the page changed as we changed the "Title" attribute

Tip: Now repeat for the rest of the rooms!

18. Click "Add Page"

19. Add a "Page (landscape)"

20. Change the ID to "bathroom"

21. Change the title to "Bathroom"

22. Click "add"

23. Add a "text" object

24. Click "edit"

25. Change the text displayed to "Bathroom"

26. Change the font size to 40

27. Center the item horizontally and vertically like we did before by clicking on "Align" and then "Center horizontally" and "Center vertically"

28. Now it's centered!

29. Click "Add Page"

30. Add a simple "Page (landscape)"

31. Change the ID to "bedroom"

32. Change also the title to "Bedroom"

33. Click "add"

34. Add a "Text" area

35. Go back to "edit" mode

36. Change the text to "Bedroom"

37. Lastly, change the font size to 40

38. Align horizontally and vertically the element

39. Now the text is centered

40. Click "Add Page"

41. Add a "Page (landscape)"

42. Change the ID to "parking"

43. Change also the title to "Parking"

44. Go to "add" panel

45. Click "Text"

46. Click "edit"

47. Change the "text" attribute to "Parking"

48. Change the "Font Size" to 40

49. Align like before

50. Click "Add Page"

51. Add a "Page (landscape)"

52. Change the ID to "entrance"

53. Change the title to "Entrance"

54. Click "add"

55. Add a "text" item

56. Go to "edit" mode

57. Change the "text" showed in "Entrance"

58. Change the "Font Size" to 40

59. Align horizontally and vertically

Tip: Insert the overlay

60. Click "Add Page"

61. Add an "Overlay" in landscape mode

62. Click "add"

63. Add the "Nav" object

64. Go back to "edit" mode

65. Change the mode to "drawer". In drawer mode, nav has closed/opened states, which can be controlled with a hamburger button, defined in the items attribute. When closed the nav is narrower and button appear without label, while when it's open it expands

66. Change the icon size to 40 so that the logos will have a better visibility

67. Untick "Push" so that the content of the page is not pushed aside when opening the nav

68. Change the "Popup Font Size" to 20 so that popup buttons will be more visible

69. Click on "Not Set..." to add some buttons

70. Click "Add"

71. Click "Hamburger Button". This will be used to open the nav to show the labels of the buttons

72. Click "Add"

73. Add a "link button"

74. Change the "link" to our first page, "kitchen"

75. Click here.

76. Click on the "kitchen" page and press "Ok"

77. Change the "label" of the button to "Kitchen"

78. Click here to give the button an icon

79. Click the "Filter" field and search for "kitchen"

80. Click on the logo ok press "Ok"

81. Click "Add"

82. Add a "Divider". This will be used to show a line or, as the name suggests, a divider, between the buttons

83. Click "Add"

84. Click "Link Button"

85. Link the "bathroom" page

87. Change the "Label" to "Bathroom"

88. Change the "Icon"

89. Click the "Filter" field and search for "bath"

90. Add this logo and click on "Ok"

91. Click "Add"

92. Add a "Divider"

93. Click "Add"

94. Add a "Link button"

95. Link the "bedroom" page

97. Change the "Label" to Bedroom

98. Lastly, change the "Icon" of this button

99. Click the "Filter" field and search for "bed"

100. Click on the "bed" icon and confirm by pressing "Ok"

101. Click "Add"

102. Add a "Divider"

103. Click "Add"

104. Add a "Group". This is a special button that, when pressed, opens a popup-menu (default value), scroller or accordion. In our case, the default value is the best

105. Change the "Label" to "Doors"

106. Change the icon

107. Click the "Filter" field and search "key"

108. Select an icon and press "Ok"

109. Click here to expand the group and see all the button under it

110. Now add a button under the group

111. Click "Button"

112. Change the "Label" to "Entrance"

113. Change the icon

114. Click the "Filter" field and search for "door"

115. Select an icon and press "Ok"

116. Change the "Action" to "link"

117. Change the page linked

118. Select "entrance" and press "Ok"

119. Add another button

120. Click "Button"

121. Change the "Label" to "Parking"

122. Change the icon

123. Click the "Filter" field and search for "car"

124. Select an icon and click on "Ok"

125. Change the "Action" to "link"

126. Click this icon to change the page linked

127. Select the "parking" page and press "Ok"

128. Now deselect the group to add the last button that is not included in it. To do this, just click on another item like the "divider" above

129. Click "Add"

130. Add a "Divider"

131. Click "Add"

132. Add a simple "Button"

133. Change the "Label" to "Security"

134. Change the icon

135. Click the "Filter" field and search for "lock"

136. Select an icon and confirm the choice

137. Click "Ok"

138. Change the "Action" to "datapoint"

139. Change also the "Datapoint" which is linked to this button to "dummysecurity.light.1" which is the name of the light included in the dummy server that we defined in Step 7 of the last guide (https://scribehow.com/shared/Create_a_Dummy_Server_with_1_light__bwLbmPeuRzCt_XKFUkYinw#e4fb6109)

140. Click "Ok" to confirm the changes to the nav

141. The homepage should look like this

142. Save the project