Creating a Visual Timer Countdown for Habpanel

General
1

Hey everyone! I’ve been working on a project to create a visual timer countdown for my Habpanel dashboard using the Amazon Echo binding. It’s been a bit of a learning curve, but I’m excited to share my progress and maybe get some feedback from the community.

So, the goal was to have a countdown timer that updates in real-time when I set a timer on my Amazon Echo device. After some research and trial and error, I managed to create a rule that calculates the time difference between the timer set on the Echo and the current time. Here’s a quick breakdown of how it works:

  1. Setting the Timer: I set a timer on my kitchen Echo device.
  2. Dashboard Update: My Habpanel dashboard automatically switches to a countdown view, showing the remaining time in minutes.
  3. Countdown Functionality: The timer counts down the minutes until it reaches zero. If I click the timer, it switches back to my home dashboard.
  4. Completion Notification: When the timer reaches zero, it switches back to my home dashboard, and the Echo beeps to alert me.

Here’s a snippet of the rule I created:

java
var Timer timer = null

rule “timer”
when
Item KitchenEchoNextTimer changed
then
timer = null
timer = createTimer(now, [|
// Timer Date and time
val timerString = KitchenEchoNextTimer.state.format(“%1$tY-%1$tm-%1$tdT%1$tH:%1$tM:%1$tS”)
// parse String to Date Time
var DateTime timestring = parse(timerString)
// find out time left in minutes
val timeleft = (((timestring.millis + 60000) - now.millis) /60000)
// null the timer if time left is 0
if(timeleft <= 0)
timer = null
else {
// update the timer Item with time remaining
CurrentTimer.sendCommand(timeleft)
// Switch the Dashboard to the Timer Dashboard
Pin_String.postUpdate(“Timer”)
// reschedule the timer for 1 minute
timer.reschedule(now.plusMillis(60000))
}
|])
end

I also created a template widget for the countdown display:

html
{{itemValue(‘CurrentTimer’)}}

button.timertime.ng-binding { background: transparent; border: none; color: #fff; padding: 200px; } .timertime { font-size: 400px; line-height: 250px; }

The result is pretty cool! I can now use my Echo device to set timers and have a sleek countdown display on my dashboard without needing an Echo Show. It’s been a great way to streamline my smart home setup.

If anyone has suggestions on how to improve the rule or the widget, I’d love to hear them! Happy coding everyone! :rocket: