HA and adding a PDF viewer

Third party integrations
1

I have a rental home with HA.

Quick question: is it easy to include a pdf file to be viewed on the dashboard by uploading an instructions.pdf file?

This will be for now the short cut for my renters. Later I will add a video. What would be the best? A mp4 locally stored or just a link to a YouTube video? Is it possible to include a YouTube on the dashboard in HA?

2

See if the Webpage card works for you. It’s basically just an iframe.

The Webpage card allows you to embed your favorite webpage right into Home Assistant. You can also embed files stored in your <config-directory>/www folder and reference them using /local/<file>.

So, try putting your instructions.pdf in <config-directory>/www/ and create a lovelace card like this:

type: iframe
url: /local/instructions.pdf
3

Thanks, this works for me! (I must have add an additional /, like /local/Instructions.pdf)

However, I’m wondering how to include for instance an external webpage like a YouTube video (with instructions) which I created myself? If I include https://youtube.com/playlist?list=x it shows a white panel.

4

found it already…
just add https ://www.youtube.com/embed/x where x is the unique YouTube identifier found in the URL of YouTube (remove space between https and ://
I added space otherwise its shown as a hyperlink)

5

How to make the pdf into full width? I have changed the aspect ratio, but nothing really works… at my iPad (instructions are for renters on the iPad at the wall).

IMG_0003
IMG_00032048Ă—1536 232 KB

As you can see it’s quite small to read…

6

You might be better off with a markdown card.

2 Likes
7

I understand, but then I need to maintain it twice as it’s also a printed version for on-site…

Also colouring of text, changing font size etc is probably difficult (?)

So, I rather prefer to make up a pdf… do I understand I cannot zoom the pdf in full width of the iPad?

8

hi all!!
I’m trying to do that, however I received an error saying “this page has been blocked by Chrome” and in the smartphone does not show up. Do you know why or a fix? thanks :smiley:

9

Yes I am having the same issue. I use the webpage card for a PDF in my local files or just using a URL and it says it has been blocked by Chrome.

My guess it has to do with the iframe component to webpage.

10

In the end I created an instruction manual for renters based on the Markdown card. Although it’s a pity to setup it twice, the Markdown card automatically adjust to the width of the screen and integrates seamlessly.

I also used a grid card, but this works only on some browsers, like iPad:

square: false
type: grid
cards:
  - type: iframe
    url: /local/RESTAURANTS.pdf
    title: RESTAURANTS WINTER
  - type: iframe
    url: /local/HĂśTTENĂ–FFNUNGSZEITEN WINTER 2023-24.pdf
    title: HUT OPENING HOURS
columns: 1
11

I found the following to work best for now:

Use a grid with a picture glance card. This way you can set a title and an action. Then have the pdf available and the image you want to use. Clicking the card will immediately open the corresponding pdf.

square: true
type: grid
cards:
  - type: picture-glance
    aspect_ratio: '1:1'
    entities: []
    title: Washing Machine
    image: /local/washerdryer.png
    tap_action:
      action: url
      url_path: /local/washerdryer.pdf
    hold_action:
      action: none
columns: 2
1 Like
12

I tried using nextcloud as it has a built in PDF viewer. It works as a separate tab but i wanted in home assistant. I tried using iframe but nextcloud as a security feature blocks embedding and there is no easy way to undo it, especially in newer versions.

13

Interested in this as well. I can get to work on my web browser on my PC but its simply just a white box on the android app.

Maybe it would be possible to turn the pdf into an image…not sure.