Okudagram style dashboard

lairdknox · November 23, 2023, 9:00pm

What to do on a four day weekend? Take on a project that pushes my limits. I wanted to learn iOS and Swift programming. I also want to learn the Maker API. So why not do both at the same time?

I've always wanted to make a dashboard inspired by Okuda's ST:TNG displays. I used a couple of samples as a guide.

So far I have mocked up a framework.

The column buttons are clickable and I'm able to change the background color. The buttons on the top are for each room in the house. There are four colors that represent the motion: active (yellow), inactive (orange), cooldown (lavender), and override (maroon). The last two are special states I use.

All the other buttons are just placeholders while I figure out what I want to display. This view is based on an 11" iPad screen.

Now I have to figure out how to implement the Maker API so that I can follow states and set devices.

Wish me luck.

lairdknox · November 23, 2023, 9:21pm

Oh hey, it doesn't scale too bad on an iPhone. I haven't designed it to be too fluid but I am using the device width to set my sizes. Right now I am just targeting the iPad. I'm pretty happy with how it scales so far.

These screenshots are from the dev environment. I haven't actually loaded it to a device yet.

lairdknox · November 26, 2023, 1:32am

I decided to use HomeKit instead of MakerAPI for the sensors. I’ll let HomeKit deal with managing the events. I’ll probably use Maker API to query additional information. Right now my focus is on getting motion status.

I ran through a tutorial and have the app talking to HomeKit. Now I need to find the states in the objects. I was able to grab the room name for each device so motion shouldn't be too bad.

This is a screenshot right off the iPad so it is encouraging.

One thing I noticed is that the Home app doesn’t handle my custom cooldown state. Not surprised about that. It does show the sensor as both contact and motion devices.

This is good because the override condition is expressed as a contact switch. So now I’m thinking that I might be able to add a simple switch capability to the device driver. Then I can use that to indicate the cooldown period. That’s a fight for another day. Cooldown isn’t a requirement but I would like to show the state.

I’m in way over my head but it is fun. I really need to do a basic Swift and Xcode class.

a.mcdear · November 26, 2023, 4:23am

Nice, I love the LCARS look. Now I want to do one too.

rlithgow1 · November 26, 2023, 2:51pm

Take a look at this too

lairdknox · November 26, 2023, 3:33pm

I’ve been wanting to make one for a while. I’ve been without a personal computer for about a year and just replaced them with a MacBook Air. I have some iOS projects I want to do so this is a good into into Swift.

Awesome. I know my idea isn’t original but that’s ok. The original graphics look great on screen but on a closer look I don’t like the sweeping curves. Up close they look amateurish to me. The uneven hand cuts in the early graphics turned me off. Nothing that you would see on screen. So I decided to be inspired rather than faithful.

The one you linked looks great. Just the curves being clean makes it look much better. They did a great job of pulling in several components to make it work. I hadn’t even thought about sound. I wouldn’t want it on all the time but it would be easy to hide an on/off button in the UI.

The nice thing about Swift is that I can creat a new view really easily. This layout only has two graphics for the rounded corners. Right now it is a basic design. I already know that there is going to be a lot of empty space. Once I know all the data I want to show I’ll be able to adjust accordingly.

rlithgow1 · November 26, 2023, 3:35pm

I just linked it to give you ideas not to compare I certainly couldn't do this

lairdknox · November 26, 2023, 3:42pm

I didn’t take it that way.

I appreciate the link. Like I said, I hadn’t even considered sound. I was thinking more like a traditional dashboard. The sound really adds some polish.

I don’t really use dashboards so this is more for show. Later I can see doing a similar one for an always on display for my security cameras.

lairdknox · November 26, 2023, 4:10pm

LOL, two lines of code to add sound to a button.

That just plays a system sound. It shouldn't be that difficult to add custom sounds. Thanks for the new rabbit hole.

lairdknox · November 26, 2023, 7:40pm

OK that rabbit hole led to another and then another...

I downloaded 50 various Trek sounds and created a simple function to play a sound. Now all of the side column buttons make a Star Trek chirp when pressed. The "Water Closet" button is a bit different. It plays an access denied sound and toggles the sound on and off. It is only for testing as only the buttons with actual room names are wired up. I'll incorporate the mute button into the interface as it develops.

That led me to text to speech. A quick search showed that it is already included in the AVFoundation import. So now I added a simple function for that too. Here's what the "Warp Core" button looks like:

   Button(
      action: {
         //playSound(soundName: "computerbeep_12")
         playTTS(msg: "I'm sorry Dave, I cannot do that.")
      },
      label: {
   })
   .buttonStyle(ColumnButtonStyle(
      title: " Warp Core",
      bgColor: buttonColorEXT)
   )
   .background(buttonColorEXT)

That's it if I want to add a button to the side column. In this case I'm using playTTS but left in playSound as an example. Then there are just two more items: The button style that controls the look and background that holds a state variable for color. This lets me set the variable to a color and change the background color. This is what I will use as soon as I figure out how to read miotion states (active: yellow, inactive: orange, override: mauve).

SwiftUI is pretty nifty. It will be quick to prototype apps once I learn the basics.

PS: I realize I'm mixing tropes here. It's my UI and I'll stray if I want to.

lairdknox · January 15, 2024, 5:48pm

I have finally had some time to get back to this project. Instead of using HomeKit I am now using the Habitat EventSocket. I'm starting to get things wired up.

Unfortunately the forums don't allow for video so I'm just showing a static image.

The buttons in the column represent various areas around the house. I don't know if these will be the final configuration but it gives me a starting place. When click the buttons flash, play a sound and call up the appropriate main display. The button color is based on my zone controller and has four states (inactive: orange, active: yellow, cooldown: lavender, and override: maroon). The column's colors give you an idea of occupancy at a glance.

Clicking the button calls up the display screen for that zone. In this example I have clicked on "Living Room" to start. The numbers are the current light levels, The gray box will be the current color but I haven't wired these up yet. Then the light name and the on/off state. These are both buttons. The active/energize button will turn the light on and off and the name field is also a button that will open up further controls. At the moment I don't have messages going back to the hub so they don't do anything accept click and beep. They do follow the event states.

The three little squares are there for debugging. They are pointing to motion sensors and a zone controller in the living room. The motions sensors show maroon/gray and the zone does maroon/lavender/gray based on state.

Finally the box below those is currently used to show the mode. The default value is "Twilight" which isn't an actual mode on my hub. I just use this as an initial value. When the mode changes on the hub the value gets updated as expected. At present I haven't done anything to pull initial values. That's on the list for when I implement the Maker API.

There is still a lot of work to do but it is fun to watch the lights blink and flash as things happen.