Create your first project with HSYCO

1. Navigate to HSYCO Manager

To access HSYCO Manager open a browser and type the URL:

https://192.168.1.50/hsycoserver/manager

note

The IP address and the URLKey written above are the default ones

2. Go into "Settings"

3. Select "I/O Servers"

4. Click "+" to add a new one

5. Select "Dummy" from the "Type" list, give it an "ID" ("dummyserver" for example) and click "Confirm"

6. Click on "Options" to add attributes to the newly created server

7. Select the "automation" option, give it a value (5 for example) and click "OK"

8. Click "Confirm"

9. Select the "dimmer" option, give it a value and click "OK"

10. Click "Confirm"

11. Select the "lights" option, insert a value and confirm

12. Close the popup with the "X" button on the top right

13. Click "Save" the "Save" again and wait for HSYCO to restart

Project with Landscape and Portrait views

14. Go into "Project Editor"

15. Click "New Project"

16. Give it a name ("test" for example) and click "Create"

17. Modify the "Theme" attribute and select one of your choice

18. Modify the "Width" value to "800"

19. Modify the "Height" value to "600"

20. Modify the "Portrait Width" value to "320"

21. Modify the "Portrait Height" value to "500"

22. Make sure that the "Orientation Mode" flag is flagged

23. Change the "Scale" attribute to "fit". By doing this, the UI frame is scaled to fill the available browser area, both vertically and horizontally

24. Change the "Min Scale" attribute to "1". This is the minimum scale value, by defaut is "0.5"

25. Click "Add Page"

Portrait

26. Add the "Homepage (portrait)"

Lights and Automation Pages

27. Click "Add Page"

28. Add a "Page (portrait)"

29. Modify the "ID" of the page to "lights"

30. Change the "Title" to "Lights"

31. Click "Add Page"

32. Add another "Page (portrait)"

33. Change the "ID" of the page to "automation"

34. Change the "Title" to "Automation"

35. Select the portrait "Home" page

36. Click "add"

37. Add a "Button"

38. Enlarge it to make it fit the entire horizontal space. You can do it by dragging one of the four corners of the button

39. Change the "Label" to "Lights Page"

40. Change the "Action" to "link"

41. Change the "Link" attribute to the "lights" page

42. Click "add"

43. Add a second "Button"

44. Change the "Label" to "Automation Page"

45. Change the "Action" to "link"

46. Change the "Link" to "automation"

47. Select the "lights" page

48. Click "add"

49. Add a "Button"

50. Enlarge it to make it fit the horizontal space

51. Change the "Label" to "Home Page"

52. Change the "Action" to "link"

53. Change the "Link" attribute to "home"

54. Click "add"

55. Add another "Button"

56. Move it below the other button and make them the same size

57. Change the "Label" to "Dummy Light 1"

58. Change the "Action" to "datapoint"

59. Select the "dummyserver.light.1" datapoint from the "Datapoint" list

60. Right-click the button and click "Duplicate"

61. Change the "Label" to "Dummy Light 2"

62. Change also the "Datapoint" to "dummyserver.light.2"

63. Right-click and duplicate again

64. Repeat the steps until the fifth dummy light button

65. Right-click the button and click "Duplicate"

66. Change the "Label" to "Dummy Dimmer 1"

67. Change the "Datapoint" to "dummyserver.dimmer.1"

68. Right-click and duplicate again until the fifth dimmer light

Container

69. As you can see, the buttons cannot fit in the vertical space of the page, so we need to group them

70. Select all the buttons, right-click and select "Group". By doing this, the buttons will be included in a container

71. Change the "Scrollable" attribute to "vertical". To be able to see all the buttons, we need to scroll the container

72. The page should look like this:

73. Select the "automation" page

74. Click "add"

75. Add a "Button"

76. Stretch the button to make it fit the horizontal space

77. Change the "Label" to "Home Page"

78. Change the "Action" to "link"

79. Change the "Link" to "home"

80. Click "add"

81. Add a "Tributton"

82. Change the "Label" to "Dummy Autom 1"

83. Change the "Datapoint" to "dummyserver.autom.1"

84. Right-click the tributton and click "Duplicate"

85. Change the "Label" to "Dummy Autom 2"

86. Change the "Datapoint" attribute to "dummyserver.autom.2"

87. Repeat the steps above until the fifth automation tributton

88. The page should look like this:

89. Click "Save"

90. Click here.

Weather Object

91. Go into "Setting"

92. Select "I/O Servers"

93. Click "+"

94. Select the "WXONLINE" server type from the "Type" list, give it a name ("weather" for example) and click "OK"

95. Click "+"

96. Select the "location" option, insert a valid location ID in the "Value" attribute and click "OK". The Location ID is a unique identifier for every city. It is obtainable from https://openweathermap.org/

97. Click "Save"

98. Click "Save" again and wait for HSYCO to restart

99. Go back to "Project Editor"

100. Select the portrait "Home" page

101. Click "add"

102. Add a "Weather" object

103. Select "weather" from the "Server ID"

104. Click "Save"

105. The page should look like this:

Landscape

106. Select the landscape "Home" page

Floor Plan Image

107. Click "add"

108. Add an "Image" object

109. Click this icon to select the image to show

110. Click "image"

111. Select the image and click "ok"

112. The image will be resized to match the object's dimensions

Buttons with icon

113. Click "add"

114. Add a "Button"

115. Move the button

116. Change the "Action" to "datapoint"

117. Change the "Datapoint" to "dummyserver.light.1"

118. Leave the "Label" empty so that the icon occupies all the button size

119. It looks like this:

120. Click "add"

121. Add another "Button"

122. Change the "Label"

123. You can change the color of the button by selecting one from the "Color" dropdown box. There is a list of standard colors and some unique colors to represent a warning color, a error color and so on

124. The "Look" attribute specifies the button look

125. You can also change the shape of the button by modifying the "Shape" attribute

126. Click this icon to modify the icon

127. Select a light icon and click "ok"

128. You can change the "Icon Color" to modify its appearance

129. The "Icon Size" is another option to modify the appearance of the icon

130. This button looks like this:

131. Click "add"

132. Add a third "Button"

133. Leave the "Label" empty

134. Select a light icon like before

135. Change the "Icon Color"

136. The page should look like this:

NAV Object

137. Click "Add Page"

138. Add a "Page (landscape)"

139. Change the "ID" of the page to "office1" for example

140. Change also the "Title" of the page

141. Click "Add Page"

142. Add another "Page (landscape)"

143. Change the "ID" of the page to "office2"

144. Change the "Title" to "Office 2"

145. Click "Add Page"

146. Add an "Overlay (landscape)"

147. Click "add"

148. Add a "Nav" object

149. Change the "Mode" to "drawer". In this way, the nav has open/closed states and can be controlled by an hamburger button, that we'll add later

150. Change the "Width" to "50" and the "Size Open" to "110". These are the optimal sizes for our nav

151. Change also the "Icon Size" to "50"

152. Click "Not Set..." to add items to the nav

153. Click "Add"

154. Add an "Hamburger Button"

155. Click "Add"

156. Add a simple "Button"

157. Click this icon to change the icon of the button

158. Select one icon and click "ok"

159. Change the "Action" to "link"

160. Change the "Link" to the "home" page

161. Click "Add"

162. Add another button

163. Change the "Label" to "Office 1"

164. Change the icon like before and click "ok"

165. Change the "Action" to "link"

166. Change the "Link" to "office1"

167. Add another button

168. Change the "Label" to "Office 2"

169. Change the icon of the button

170. Change the "Action" to "link" and the "Link" to "office2"

171. Click "ok" to confirm

172. Click "Save"

Working with NAV

173. Now we can navigate between the pages

174. Here we are in the "office1" page as you can see from the Title of the page

175. Here in the "office2"

176. We can always go back to "home" page

177. Pressing the hamburger button will open the nav

178. By default, the "Push" attribute is true so the page's content is pushed when the nav is opened. You can set it to "false" to tweak that

Connection between landscape and portrait pages

179. Select the landscape "home" page

180. Change the "Portrait Page" attribute to "home". This list will only show portrait pages so we know that this "home" page refers to the portrait one

181. Now select the portrait "home" page

182. Change the "Landscape Page" to "home". Like before, in this list there will only be landscape pages so this is the landscape "home" page

183. Click "Save"

184. Now the two "home" pages (landscape and portrait view) are linked together. When the device changes orientation, if we are in one of the "home" pages, the project will switch automatically to match the new orientation. The same process can be applied to any page

Breadcrumbs Object

185. Select the "automation" page

186. Change the "Parent Page" to "home". This is used to create a hierarchy between the pages so the breadcrumb shows the full path to that page

187. Click "add"

188. Add the "breadcrumbs" object

189. It is automatically placed in the top-left corner of the portrait page

190. Now select the other portrait page "lights"

191. Change the "Parent Page" to "home"

192. Click "add"

193. Add the "Breadcrumbs"

194. Click "Save"

195. The breadcrumbs shows the hierarchy of the pages

196. We can also navigate the pages by clicking their name in the breadcrumb