sample_ui.json5

{
	main:
	{
		//:ui
		type: "LayoutGroup",
		autoSizeMode: "stage",
		layout: { type: "AnchorLayout" },
		item:
		[
			{
				type: "ScreenNavigator",
				id: "navi",
				layoutData: { left: 0, right: 0, top: 0, bottom: 0, bottomAnchor: "bottom_dock"},
			},
			{
				type: "TabBar",
				id: "bottom_dock",
				skin:
				{
					direction: "horizontal",
					distributeButtonSizes: false,
					gap: 48,
				},
				layoutData: { left: 0, right: 0, bottom: 0 },
				dataProvider: "bottom_dock",
			},
			{
				type: "Button",
				id: "button_console",
				text: "~",
				//styleName: "feathers-danger-button",
				visible: false,
				layoutData: { right: 0, bottom: 4 },
			}
		]
	},

	home:
	{
		type: "Screen",
		layout: { type: "AnchorLayout" },
		item:
		[
			{
				type: "Label",
				id: "label_cur_time",
				//text: "<p align='right'><h1>Timer</h1></p>",
				//html: 1,
				styleName: "large",
				skin: { backgroundSkin: 0x3F9C23 },
				layoutData: { right: 0, top: 0 }
			},
			{
				type: "Label",
				id: "label_debug",
				styleName: "feathers-detail-label",
				layoutData: { right: 0, bottom: 0 }
			},
			{
				type: "TextBlockTextRenderer",
				id: "hugo_timer",
				styleName: "hugo",
				textAlign: "center",
				truncateToFit: false,
				//text: "00:00:00",
				layoutData: { left: 0, top: 20, right: 0 }
			},

			{
				type: "LayoutGroup",
				id: "group_1",
				styleName: "inset-group",
				layout: { type: "HorizontalLayout", gap: 48, paddingLeft: 24, paddingRight: 24,
					paddingTop: 2, paddingBottom: 4, verticalAlign: "middle" },
				layoutData: { horizontalCenter: 0, top: 180, bottom: 190 },
				item:
				[
					{
						type: "SpinnerList",
						id: "spin_list_h",
						layoutData: { percentHeight: 100 },
					},
					{
						type: "SpinnerList",
						id: "spin_list_m",
						layoutData: { percentHeight: 100 },
					},
					{
						type: "SpinnerList",
						id: "spin_list_s",
						layoutData: { percentHeight: 100 },
					},
				]
			},
			{
				type: "Label",
				id: "label_start_stop_info",
				//html: 1,
				//text: "foo222",
				layoutData: { top: 10, topAnchor: "group_1", right: 40 }
			},
			{
				type: "LayoutGroup",
				id: "group_2",
				layoutData: {  left: 40, right: 40, bottom: 40 },
				layout: { type: "HorizontalLayout", gap: 50, distributeWidths: true },
				item:
				[
					{
						type: "Button",
						id: "button_start",
						//text: "Start",
						height: 100,
						styleName: "large",
					},
					{
						type: "Button",
						id: "button_stop",
						//text: "Stop",
						height: 100,
						styleName: "large",
					},
				]
			},
		]
	},

	opt:
	{
		type: "Screen",
		layout: { type: "AnchorLayout" },
		styleName: "screen_opt",
		item:
		[
			{
				type: "Label",
				id: "label_name",
				styleName: "large",
				skin: { backgroundSkin: 0x006633 },
				layoutData: { right: 0, top: 0 }
			},
			{
				type: "LayoutGroup",
				id: "group_1",
				layoutData: { left: 20, top: 60, bottom: 10, right: 10 },
				layout: { type: "VerticalLayout", gap: 50 },
				item:
				[
					{
						type: "LayoutGroup",
						id: "group_2",
						layout: { type: "HorizontalLayout", gap: 16, verticalAlign: "middle" },
						item:
						[
							{
								type: "Check",
								id: "check_sound",
								//text: "Sound:",
							},
							{
								type: "PickerList",
								id: "picker_sound",
							},
							{
								type: "Button",
								id: "button_test_sound"
							},
						]
					},
					{
						type: "Label",
						id: "label_volume",
						//text: "SysVolume:",
					},
					{
						type: "Slider",
						id: "slider_volume",
						//minimum: 0,
						//maximum: 1,
						//step: 0.1,
						liveDragging: 0,
						layoutData: { percentWidth: 100 },
					},
					{
						type: "LayoutGroup",
						id: "group_3",
						layout: { type: "HorizontalLayout", gap: 16, verticalAlign: "middle" },
						item:
						[
							{
								type: "Check",
								id: "check_vibration",
								//text: "Vibration:",
							},
							{
								type: "NumericStepper",
								id: "spin_vibration",
								//minimum: 1,
								//maximum: 40,
							},
							{
								type: "Label",
								id: "label_s",
								//text: "s"
							},
						]
					},
					{
						type: "LayoutGroup",
						id: "group_4",
						layout: { type: "HorizontalLayout", gap: 16, verticalAlign: "middle" },
						item:
						[
							{
								type: "Label",
								id: "label_lang",
							},
							{
								type: "PickerList",
								id: "picker_lang",
							},
						]
					},
				]
			},
			{
				type: "Label",
				id: "label_version",
				styleName: "feathers-detail-label",
				layoutData: { right: 0, bottom: 0 }
			},
		]
	},
}