Widgets – A Replacement for the macOS Dashboard 🎛

Widgets is now available

(macOS USA)


It looks like Apple is killing the Dashboard with the “Catalina” macOS 10.15 update. If you’re like me, this is bad news. I probably press F12 over a dozen times a day. I like checking on the Weather, Stocks and other useful gadgets.

It looks like I’m not alone in this disappointment…

I’ve decided to modify my 10-Year plan to address this issue. Instead of doing the “Photics: Tools” app in a future year, I’m moving it up to this year.

It’s called “Widgets”

I’ve already made significant gains on this project. Stuff I thought was beyond my ability is now possible.

If you’re interested in being notified when this app is available, just heart this post. :smiley::heart:

There are some downsides though…

  • I only have weather data for the US right now, and among other reasons, this will be a US app only. (At least, that’s the plan for launch.)
  • The target price for the app is $5. (The eventual goal is to have 50 widgets at 10¢ each.)
  • This will delay the Hype 4 book project. (I simply don’t have the time to work on two major apps at the same time.)

That last bullet point might be a blessing, as I can use the widgets as learning examples for the book.

If there’s a particular widget that you’re looking for, even if it’s not listed right now, you can request them on this thread. No guarantees, but if a request is popular enough – and not too difficult – maybe I can add it.

Here’s the current list of widgets (subject to change)

  • Slide Puzzle :white_check_mark:
  • Unit Converter :white_check_mark:
  • Clock :white_check_mark:
  • Calendar :white_check_mark:
  • RSS Feed App
  • Note
  • Calculator :white_check_mark:
  • Pythagorean / Pi / Math Calculator
  • Text-To-Speech :white_check_mark:
  • Web – Color Picker
  • Weather :white_check_mark:
  • Dictionary
  • Thesaurus

(Bold denotes a possibly difficult app.)

Note – Look into Hype’s Export-to-Widget functionality, perhaps that can work with this.

12 Likes

If you want to be a beta tester, heart this post. :heart_eyes:

UPDATE: There won’t be a public beta test for Widgets. It’s already available.

4 Likes

No Hype 4 book :sob::sob::sob:

1 Like

Not yet at least. In addition to the timeline problem, as I pretty much only have one shot to make Dartboard work, there’s still one technical blocker that I haven’t been able to solve. There’s been a lot of back-and-forth with Apple tech support. It’s a major feature of the book app. But with Dartboard, it looks like I can launch a solid version 1.0.

If all goes well, hopefully I can get both done this year.

1 Like

Are you planning to be compatible with existing dashboard widgets?

You could do your own Export Script if it is a different format. In that regard, Hype could be your “Dashcode”… “Dartcode” (though this may conflict with dart).

Maybe, as this is the holy grail of features for this app. (Well, “Weather” was the holy grail. Now that I got that figured out, there’s a new lofty goal.)

Originally, I was imagining just the cut-and-paste of HTML code or using an iFrame. Being able to drag-and-drop or selecting a .wdgt file sounds better.

Ah, that’s right. I totally could do that.

This app is for a general audience though. Unfortunately, not everyone has Hype. I’m not exactly sure how I’m going to solve the import-widget problem, but it should be easy for people that don’t do web development.

It’s probably not a difficult problem, as aren’t Dashboard widgets essentially HTML? Yet, I feel like there’s a trap in here somewhere. It can’t be that easy. Heh, I suppose I’ll know for sure once I move this stuff into Xcode.

Ha ha… cute name. I certainly don’t want to infringe on anyone else’s intellectual property – especially one with such a pretty website. See… that’s what I was talking about in the Hype review… that flat drawn-in style… that’s this generation’s “look”. That banner could have been created in Hype. I was surprised to see it was a video.

So, it looks like I have two major “nice-to-have” features to work on…

  • Hide/Show the app with a button. (For me, ideally, that key is F12)
  • Import .wdgt files (ideal) and/or new widget format

I also think that Dartboard should have a Dartboard game :smile:

Yeah, I think it would be pretty easy to just use the dashboard format if you don’t need other features. You could probably even read the /Library/Widgets/ folder. I guess it really depends what you’re after and what kind of compatibility you want.

HUGE DEVELOPMENT! :smiley:

@MarkHunte would probably scoff at this, but I finally got two-way communication working. That means Swift and the WKWebView can now pass data between each other.

It’s really simple too… https://www.hackingwithswift.com/example-code/wkwebview/how-to-run-javascript-on-a-wkwebview-with-evaluatejavascript

Why is this important? It means that I now can create widgets that are more powerful than just HTML alone. I can leverage data from the macOS side. Theoretically, the Dictionary widget should now be possible. WOOOOOO! Also, I thought about adding a CPU Monitor widget (Usage Percentage / Temperature). This is amazing because that’s a new widget that I would want.

Here’s a really rudimentary demo…

That time information is from Swift adding the JavaScript Date() and I’m able to read back in the changes to the element in the widget. HHHUUUUUGGGGGGEEEEE!

Dragging around widgets is almost working too. It’s very easy with Hype’s “On Drag” “Control Element Position” option… but when doing that on a group, it seems to block the Input. Heh, it’s always something. I probably can figure a solution to that. I’m going to need to, otherwise there won’t be HTML/JavaScript data to send to Swift.

HUUUUUUUGGGGGEEEEE!

OK, I think I can take a break now. It was a rough day.

1 Like

hahaha… only kidding…

I will be posting ( when I get some time ) a write up on some Xcode templates I wrote over a year and some ago and revised a few weeks ago.

They have a good example hype project that demos this…

1 Like

Dartboard is starting to look like a real app. Here’s another video…

This shows that Hype 4 (and Wrapping) is a powerful development environment. In the video, the macOS “Dictionary Services” are leveraged to make the Dictionary app. I didn’t use the Dictionary widget as much because of how it expanded and collapsed. I suppose it was because Apple didn’t want a blank space on startup. To fix that problem, I’m thinking about adding a “Word of the Day” feature.

But of course, it’s rarely easy to do anything in this hybrid Xcode/Web development land. The definitions seems to lack the HTML formatting and I don’t want it to display “nil” when there is nothing to define. The latter should be an easy fix. The former, I don’t know.

…the article has a lot of useful information, but I don’t know how he got the styling. It seems I have to learn about… unwrapping Optional values. :thinking:

…and Photics is a word. It means “The science of light”. Too bad it wasn’t included in the dictionary.

That WWDC intro video really summed up the frustration of being an app developer. HA HA, there are still a lot of problems to work out. The app also has to look really pretty too, so that’s another set of challenges. But in general, very productive weekend!

1 Like

There’s not too much progress on Dartboard to report this week. That’s because Apple wrote back. The Eskimo got it done! The issue blocking “A Book About Hype 4” is now solved. But, that information is going to wait while I scramble to get Dartboard launched. I figure that I have 90 days left, as I estimate that macOS 10.15 “Catalina” will likely launch on September 23, 2019.

So, I started working on the weather widget. I knew it would be challenging. So far, it’s a challenge because of the size of the data. While I could use Swift or JavaScript to get the user’s location, it’s surprisingly unreliable. The first problem is the privacy issue. It’s more common for users to block access to their location. Additionally, sometimes the location is just not available…

That screenshot was taken with a Mac Mini 2018 – the latest Mac Mini available. And yet, Siri has no idea where I am. Imagine the disappointment. I spent over $1000 on this Mac… but it doesn’t come with a microphone. Not having a microphone makes it a problem to ask Siri for weather forecasts. But actually, that’s one of the reasons why I bought a Mac Mini. I don’t mind that the Mac Mini lacks a microphone, because it’s easy to add your own. I have some semi-pro gear now… a condenser mic and a scissor-arm stand. That way, Siri can hear me clearly… and then respond with… turn on Location Services or turn on Wi-Fi.

Even after turning on Location Services, Siri didn’t know where I was. I needed to turn on Wi-Fi, which I don’t use because the Mac Mini uses Ethernet. If users of Dartboard incur that level of frustration, app ratings will suffer.

That’s why I’ve been looking at adding a zip code–to–latitude/longitude database. The idea is that the user could simply enter their zip code, which would give an approximate location – good enough for fetching weather forecasts. Even just finding the data was tricky. But now that I have it, using it is the next challenge. I haven’t quite figured out which method I’m going to use. But just to see what would happen, I decided to paste 30,000+ lines of information into a Hype JavaScript file.

It didn’t like it :stuck_out_tongue:

Legend has it, that beach ball is still spinning to this day. (Heh, just kidding, but the Hype app does become unresponsive for a few minutes.) I suppose this is feedback for @jonathan – as maybe Hype should warn users before they paste a lot of text into Hype.

This is another reason why Hype 4 is a great update. While I can’t edit that data in Hype, it’s not really a problem. I can just edit it in Visual Studio Code. EASY!

23%20AM

There’s probably a better way to work with Zip Codes, so there’s more testing to do.

But there was some progress with Dartboard…

…I added a slide puzzle. I think it’s better than the one in Dashboard, because this one doesn’t move as much. I put in extra code, to help prevent the widget from moving when you don’t want it to. Basically, you can drag the widget from the edges or the empty space. This was also surprisingly challenging. When the dragged element in Hype is also the group, widget drifting can occur. I needed to move elements around and add some JavaScript to fix that problem.

(I probably should have shown that in the video. Heh, do you want a second video showing the widget being dragged around?)

I’m really REALLY working hard to make this app something people will want to use every day. That’s why I’m planning to add other images to the widget. (Right now, it’s just the classic numbers.) I do need to leave my desk periodically, in order to stay healthy. That’s why I’m planning to head out to the park to take pictures for the slide puzzle widget. So… it’s like I’m taking a break… but I’m also still working.

1 Like

Try to post the big array outside of Hype and put it into the document scope. Putting it into Hype creates a huge JSON string that in turn gets „reactivated“ using eval while parsing it in the initialization phase. Not ideal!

Hmmm…

Apple has a patent on Dashboard… https://patents.google.com/patent/US7761800B2/en …I’m not patent attorney, but it looks like I might have to delay this project until 2026. :smile:

I really had trouble letting this one go. The notification center just doesn’t cut it for me. So, I thought about a redesign. I think I have a good idea. Perhaps this is better than before, because I’m not a fan of floaty windows. I like things to line up. It also makes it much easier to support light and dark modes.

It’s going to be tough though. Too bad Hype doesn’t support Flexbox. (I might be able to hack a creative solution to that problem though.) The plan is to work on this project this weekend.


UPDATE – AH HA! I knew it!

Scenes are just elements that are not displayed.

I ended up using just vanilla HTML, CSS and JavaScript, because turning scenes into flexbox items wasn’t working for me. Unlisted because this isn’t a Hype anymore :slightly_frowning_face:

I don’t know exactly how, but someone found this thread and liked it. Heh, I suppose I can bring this thread back from being unlisted, as I think “Widgets” (that’s the new name) can be a Hype related project. Theoretically, Hype widgets could work with the new Widget app.

Not much to report for now, still busy working on the app.

Hi everybody! I’m still around. I’ve just been really busy with Widgets. It’s almost ready for an announcement. For now, here’s a quick tease.

What do you think of the icon?

  • I like it! :heart_eyes:
  • I don’t like it. :man_shrugging:t2:

0 voters

The plan is to send the app to Apple soon, so it can go into preorder. There’s enough work in the app to give a general sense of how it looks and works. Hopefully Apple doesn’t reject it. I think “Widgets” is unique enough to pass. It’s different than Dashboard, and better in some ways too. Heh, like memory usage…

…Widgets even uses less memory. :smile:

(I’m not sure if my memory comparison is up to scientific methods, but the two apps are certainly in the same ballpark – nice and lightweight.)

I just laughed when I loaded it up in Xcode and saw 0% CPU usage. Ha ha! When in active use, it’s around 2-3%. It’s such a polite app. It respects your CPU usage and your storage space… taking up so little resources. Only one Widget (so far) uses the Internet. Even then, that’s just to fetch weather data. I tried to do it in a way that helps protect your privacy. You don’t need always on geolocation data to set your weather preferences. (Location services wouldn’t work on my Mac Mini anyway, because it doesn’t use WiFi.)

Anyway, hopefully the review goes well, because I haven’t felt this good in years. I’m so happy with this app, and I think many of you will like it too. If the review is successful, then I can look into the next Widget, which is a way to import Hype widgets into the Widget app… exciting!

4 Likes

I hit a wall with the custom widget. It’s a multilayered problem.

The first part is kinda easy.

It was looking for “AppleWidget.js” but that doesn’t appear to be included with Hype. Heh, no problem. I’ll just delete that.

Oh wait, it’s trying to load the “Default” screenshots too… I’ll just delete that code… basically I modified the index.html to exclude the widget stuff. Heh, then it runs like a normal page. It’s just an iFrame at that point.

That’s where the second problem occurs. I don’t want to just allow random content thrown into an iFrame. It’s a massive security risk. The user could unknowingly add a malicious widget and then… I don’t know exactly what… but it seems like there are lots of bad possibilities. So, OK, no problem. That’s what sandboxing iFrames is all about. I’ll just… what the…

Sandboxing doesn’t seem to be designed to work with local files. Here’s the code…

<iframe class="widget" frameborder="0" sandbox="allow-scripts" src="widgets/widget.wdgt/index.html"></iframe>

I need “allow-scripts” to let a Hype widget work. But to load the local content, I need “allow-same-origin”. Putting those two together basically nullifies the security. There’s a nice big warning about it on the Mozilla Developer Network…

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox

At this point, I’m leaning more towards protecting the security of the users rather than adding this level of customization. However, I think I might have some explosives to blast through the wall. I know how to write export scripts. Theoretically, the Hype JavaScript could be converted into a single file. Perhaps that would solve the problem. There’s more testing to do. Heh, I’m taking a bit of a break for the next few days. The Weather widget and Calculator widget were more difficult than I imagined. I really didn’t need to add 12 scientific calculator buttons either, but I’ve been working towards making this app really nice – something people would want to use every day.


Woo hoo!
It passed review!
Looks like I have a lot of work to do!

https://apps.apple.com/us/app/widgets/id1470656333?ls=1&mt=12

5 Likes