Adding Option to Choose Room for SUSI Smart Speaker in iOS App
SUSI Smart Speaker is an open source smart speaker that supports many features. The user can use Android or iOS to connect their device with SUSI Smart Speaker. During initial installation, it is asking from use to enter the Room name. Room name is basically the location of your SUSI Smart Speaker in the home. You may have multiple SUSI Smart Speaker in different rooms, so the purpose of adding the room is to differentiate between them. You can find useful instructions for the initial connection between the iOS device and SUSI Smart Speaker here. It this post, we will see how the adding rooms feature implemented for SUSI iOS.
When the user enters into the Device Activity screen, we check if the iOS device is connected to SUSI.AI Wi-Fi hotspot or not. If the device is connected to SUSI Smart Speaker, it shows the Wi-Fi displayed SSID in Device Activity Screen. On clicking the displayed Wi-Fi cell, a popup is open with a Room Location Text field. The user can enter Room location and by clicking the Next button, proceed further with the setup.
In the popup, there is also an option for choosing rooms, where the list of most common room names is displayed and the user can choose room name from the list.
Presenting Room Picker View Controller –
func presentRoomsPicker() { let storyboard = UIStoryboard(name: "Main", bundle: nil) if let roomVC = storyboard.instantiateViewController(withIdentifier: "RoomPickerVC") as? RoomPickerController { roomVC.deviceActivityVC = self let roomNVC = AppNavigationController(rootViewController: roomVC) self.present(roomNVC, animated: true) } }
Room Picker View Controller is UITableViewController that display the rooms names in table cells. Some of the most common rooms names displayed are:
let rooms: [String] = ["Bedroom", "Kitchen", "Family Room", "Entryway", "Living Room", "Front Yard", "Guest Room", "Dining Room", "Computer Room", "Downstairs", "Front Porch", "Garage", "Hallway", "Driveway"]
Presenting Room Cell –
We are using cellForRowAt
method to present the cell.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "roomsCell", for: indexPath) cell.textLabel?.text = rooms[indexPath.row] cell.imageView?.image = ControllerConstants.Images.roomsIcon return cell }
Selecting the room from cell –
When the user clicks on the cell, first willSelectRowAt
method use to display the right icon in the accessory view that shows which cell is selected.
if let oldIndex = tableView.indexPathForSelectedRow { tableView.cellForRow(at: oldIndex)?.accessoryType = .none } tableView.cellForRow(at: indexPath)?.accessoryType = .checkmark
We are storing the selected room in the following variable and selecting it by using didSelectRowAt
method of UITableView.
var selectedRoom: String?
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { selectedRoom = rooms[indexPath.row] }
In Room Picker Screen, the user has two option, Cancel and Done. If the user clicks the Cancel, we dismiss the Room Picker screen and display the popup with the empty room location text field and with Choose Room option. If the user clicks the Done button, we store the picked room in UserDefaults shared instance and dismiss Room Picker screen with a different popup which has already filled room location in the text field and without choose room option in the popup as in the image below. By clicking the next, the user proceeds with the further setup.
Resources –
You must be logged in to post a comment.