Time Formatting Question

[snbe82]

Hello! First of all, I want to take the time to thank all of the developers of ha-floorplan. I've had so much fun setting this up, learning and experimenting along the way. You guys are awesome and I envy your coding knowledge!

I have a feeling I will have several questions, but the one I'm currently stuck on is formatting my time from military to standard.

I saw in the documentation examples the ability to use util.date.strftime but I'm having trouble figuring out how/where to use that code.

- element: textbox.clock
  entity: sensor.time
  state_action:
    action: call-service
    service: floorplan.text_set
    service_data: ${functions.util.date.strftime('%I:%M %p', sensor.time)}

This returns :

I'm sure it's something simple, but I can't seem to figure it out :/

[exetico]

Hi

Thank you.

Is it just sensor.time, or something else?

The strftime is part of util not functions, so the utilities call should be to: util.date.strftime

utils.date.strftime expects a date object, but sensor.time only contains the time in the state key:

You'll have to create a valid date-string instead as pr. my knowledge. strftime is very light-weight, so you'll have to do just a bit with your own hands 😸 (and not as friendly as a solution like moment.js. We've used strftime to keep the package-size as low as possible.

You only have the timestamp in the sensor.time, so you'll need to help the library a bit for things to go as planned.

There's plenty of ways to do so, but here's a simple take on that part, now what you've provided the sensor.time to work with.

Here's a full example where you're able to learn a few tricks... Maybe?

type: vertical-stack
cards:
  - type: markdown
    content: >-
      **Question**: How can I format sensor.time from military to standard (AM-PM).

      [Reference](https://github.com/ExperienceLovelace/ha-floorplan/discussions/302)
    title: Case 3
  - type: custom:floorplan-card
    full_height: false
    config:
      stylesheet: /local/floorplan/discussions/case3/case3.css
      image: /local/floorplan/discussions/case3/case3.svg
      console_log_level: debug
      defaults:
        hover_action: hover-info
        tap_action: more-info
      rules:
        # Reload button
        - element: button.reload
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.javascript
              data:
                code: lovelace_reload();
        # Case
        - name: ConvertClockToAmPm
          element: customprefix.hue2_light
          entities:
            - sensor.time
          state_action:
            - service: floorplan.text_set
              service_data:
                element: customprefix.hue2_light
                text: |
                  > 
                  console.log(entity.state); // Entity value is "18:02"
                  const dateTimeString = "1900-01-01 " + entity.state; // You'll need to provide a full date-string to new Date() - so both date and time (See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
                  const dateTimeParsed = new Date(dateTimeString); // strftime expects a date object (See: https://www.npmjs.com/package/strftime)
                  return util.date.strftime('%I:%M %p',dateTimeParsed);

A bit stripped down version looks like:

          state_action:
            - service: floorplan.text_set
              service_data:
                element: customprefix.hue2_light
                text: |
                  > 
                  return util.date.strftime('%I:%M %p',new Date("1900-01-01 " + entity.state));

And therefore also:

          state_action:
            - service: floorplan.text_set
              service_data: ${util.date.strftime('%I:%M %p',new Date("1900-01-01 " + entity.state))}

[exetico]

Let me know if you need more guidance or attachments 😄 . Happy coding!

[exetico]

If this is the only need, you could also create a custom template sensor in ha instead? But that's for another discussion if that's a need, too.

[snbe82]

That worked perfectly, thank you so much for explaining how that works! Next I need to find time to watch your videos so I can learn how you use the dev tool console to diagnose and edit your code live, I still use notepad+ to edit the ui yaml, reupload, clear cache, restart home assitant, and relogin every time I make a change lol. So much to learn!

[exetico]

Np ☺️👌.

[snbe82]

While I have you exetico, I was also curious if it's possible to have a custom card displayed as a pop-up (or even better within a shape on the svg but I'm assuming thats not possible)? For example, if I hit the charging icon in my garage, I'd love to be able to display a custom card that shows all the entities of my tesla integration; a calendar card for the calendar icon; a weather card for the weather icon; a list of all the light entities in a room when I hold down an svg area. I've looked through the examples and am having trouble finding how to do this or if its even possible. Thanks again for all of your help, sir!

[exetico]

There's already a few examples in this area. I don't have one in hand right here, but It's possible to call browser mod in our solution, and therefore, create a popup in HA with whatever you like.

Here's one (extreme) example where I use other frontend addons within my browser mod call.

But you can add normal entities within cards:, like you'd have done in lovelace.

I'm from the phone right now 👍.

[exetico]

I've created a video on basis of this request :)

Happy watching:

https://www.youtube.com/watch?v=GHcgwW-OOo8

[snbe82]

Thank you!!!Respectfully,Sean T. Byrne, BHSc, MSA, CAAOn Mar 12, 2023, at 9:47 AM, Tobias Nordahl Kristensen ***@***.***> wrote: I've created a video on basis of this request :) Happy watching: https://www.youtube.com/watch?v=GHcgwW-OOo8 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>