Help wanted: UI/UX skills for NodeJS Smart Alarm Clock Application

---

Hi @developer,
Slightly off-topic for Pimatic, but as my project integrates with Pimatic I am taking my chances
Last week I developed a Smart Alarm clock based on NodeJS. The app currently runs as a webservice on a RasPi with 7" Touchscreen and USB speaker. Project available at: https://github.com/SenTzu01/alarm-clock .

The backend is mostly done:

• Runs a webservice
• Exposes a REST API allowing to
  • Retrieve and Update a weekly alarm clock schedule
  • Activate and Stop the alarm (e.g. start/stop playback)
  • Retrieve general config on the application
• Activates the alarm on the device at scheduled time (no need to trigger from front-end)
• Plays MP3 / internet radio streams at scheduled (wake-up) time via MPlayer, increasing volume based on config over set time
• Can trigger Pimatic via Pimatic’s REST API
• Is configurable through JSON config file

Now here is my challenge: I can somewhat develop back ends, but I am an epic n00b when it comes to web front-end / UI /UX dev.

Is there anyone with skills in this area who would contribute by developing a web front-end which interfaces with the REST API, so the alarm can be Stopped in the morning, and configured through any browser on the local network?

I am thinking of an interface:

• Accesses back end via REST API
• Main page with current time and button to config page
  • Including a big STOP button when the alarm goes off, so sleepy me can easily hit it in the morning
• Has a config button/tab for the weekdays to set alarms (time, enabled, resource to play back)
• Visual appeal (e.g. @koffienl 's web front-end to Pimatic)
  • UPDATE: https://community.home-assistant.io/t/lovelace-alarm-clock/67354 is a nice visual too!

If the project is successful, I would plan to release it to the Pimatic community so they can have a smart alarm integrating with a Smart Home!
Thanks in advance if anyone could contribute!

Hi Dan, nice project!
Just to understand, are you planning to use the 7" lcd screen only for message logging or is it also going to show the time, etc with a nice UI on it?

@bertreb
You are correct. The intention is to use the Pi with display as a physical alarm clock, and indeed display time, control alarm (e.g. switch off etc) via a web page. The audio will played on this device, and it will trigger the Pimatic server for lights, heating, TV etc.
Setting alarms and config could also be done from any browser on the network (Or from Pimatic for that matter )

Anyone??

I’m not an UI/UX developer, so i can’t help with that.
Your project made me start upgrading my own arduino based alarm-clock.
It has a more fysical UI with a big button and 1.2 " display. I ported the display driver to coffee/javascript and I’m wondering where you had the clock function planned in your application?

@bertreb Clock function would run client-side (web-page). Logic and interfacing with scheduler and audio server-side (alarm clock).
In my architecture the alarm clock would be manageable from anywhere, and you could even switch it off while using a mobile already sitting in the living room for instance. Or from the physical alarm clock obviously.

Ok, I’ll let know what my nextgen alarm-clock will look like. Good luck with the skills search…

A picture says more than words The browser part is where I need help. The clock (current time) lives on the STOP page.

One of the benefits: The alarm clock will be a fully fledged linux powered tablet. One can also operate Pimatic from it.

Roadmap items would be a sleep-timer, music control, bedroom tv control, spotify, netflix etc.
When I grow up I would envision connecting a pressure sensor to the bed so it can work based on a persons sleep cycle.

Nice concept, a web controllable autonomous alarm box

Meanwhile managed to create a “Big STOP” button page, along with a tiny snooze button. Still a long way from making it graphically appealing and adding management functions. The back end-logic works like a charm though!