Visualize my HA output (audio tts)

Configuration Frontend
1

I have been thinking about this a lot, and cannot think of a possible solution. My HA instance is becoming move and more personal, It is really turning into a Personal Home Assistant. Connected with almond, alexa or google home, it would be great if we can turn it into a more “person like” entity. is there any way I can visualize my (tts) outputs in e.g the lovelace dashboard via a card? like an audio spectrum visualizer? like a talking head? or even a “KITT” like visualization?

does anyone know?

2

No one has yet written a card to do that. That I know of.

The long, long term plan is for much more AI. But I hope we don’t every go down this particular uncanny valley:

3

would be so nice, maybe even outputting it to chromecast device f.e. Visual jarvis type like output. starting out with simple audio spectrum evolving it into a virtual human head :-). Curious if other people know something about this as well.

Thanks for “dropping” it in the proper groups Tom

1 Like
4

(Disclaimer: I know nothing about Lovelace development).

Isn’t there a way to display custom html/css in a Lovelace card ? I thought there was. If so, create a WebGL canvas and go wild. You can use three.js for things like animated 3D heads.

1 Like
5

this could be something. I need to explore. doesn’t have to be 3D even to start of with…could even be a simple 2d animation…

6

Card-mod, though I doubt it was designed with that in mind.

7

They have tons of examples.

It’s a great framework, I have worked quite a bit with it. You would need to somehow capture TTS wave output / FFT if you wanted to play around with sound based animation. About models, there’s a ton of free stuff you can find around the net (this is a good place to start), including skinning and vertex weigh data (which you need to animate the face).

8

Oh. I thought there was a stock way to do that, but seems I was wrong.

9

i just checked some examples three.js examples and it really looks fantastic. However, it also looks like it is quite resource intensive…besides that I really wouldn’t have the skills for it.

10

Not really that resource intensive if you keep it reasonable. It runs on WebGL, which runs on your devices GPU (graphics processing unit). A lot of these examples even run on small phones without any issues. All that is client side, so your Pi (or whatever you use to host HA) is not affected.

About skills, well, it’s fun to learn :slight_smile: And the framework abstracts lots of stuff away, so as long as you don’t have very specific needs, it’s not actually very difficult. You do need some basic programming knowledge though.

1 Like
11

I suggest you start getting to know more about HA ;-). it seems you are the one that can do this :muscle: Let’s see if some other ideas pop-up as well…I am curious…

12

I do 3D programming all day at my daytime job, so I try to stay away from it in my free time :wink:

1 Like
13

something like this to start of with …as an Iframe :rofl: https://ttsdemo.com (takes a while loading)