A short guide for setting up TV PiP notifications (with PiPup)

Hi there!
Below is a short guide for setting up PIP notifications on your Android TV / Google TV (and others, as long as base OS is android and you can install additional apps).

Sources I used:

Important information:

I will be using this fork of PiPup (as original is no longer maintained): https://github.com/desertblade/PiPup

So, the tutorial:

Installing PiPup

  1. Download ADB drivers (Platform-Tools) for the device you’re using from here. On windows you just unzip the file, open terminal there and everything should work. People using linux - you know what to do.
  2. Enable ADB and connect to the TV: follow this, it’s way better than what I can write.
  3. Download Pipup from here (app-debug.apk file). Put it in the directory with ADB drivers
  4. In the terminal you have open run: adb sideload app-debug.apk (you must already be connected to TV, so don’t forget adb connect <IP> from the last step)
  5. Grant needed permission with: adb shell appops set nl.rogro82.pipup SYSTEM_ALERT_WINDOW allow
  6. Open the app on your TV, you can close it pretty much immediately, it just needs to run in the background

Testing connection

  1. In the ADB directory create post.json with following contents:
{
	    "duration": 30,
	    "position": 0,
	    "title": "Your awesome title",
	    "titleColor": "#0066cc",
	    "titleSize": 20,
	    "message": "What ever you want to say... do it here...",
	    "messageColor": "#000000",
	    "messageSize": 14,
	    "backgroundColor": "#ffffff",
	    "media": { 
	        "image": {
	            "uri": "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/cfcc3137009463.5731d08bd66a1.png", 
	            "width": 480
	        }
	    }
	}
  1. run curl -d "@post.json" -H "Content-Type: application/json" -X POST http://<IP>:7979/notify. Don’t forget to change the IP! Correct one is shown in the PiPup app on the TV.

You should see a popup on the TV, great!

Configuring Home Assistant

  1. Add this to your configuration.yaml: rest_command: !include rest_commands.yaml
  2. In HA’s config directory create rest_commands.yaml with following contents:
pipup_text_on_tv:
  # Use Pipup to display image notifications on Android TV devices.
  url: http://{{ ip }}:{{ port | default(7979) }}/notify
  content_type: 'application/json'
  verify_ssl: false
  method: 'post'
  timeout: 20
  payload: >
    {
      "duration": {{ duration | default(20) }},
      "position": {{ position | default(0) }},
      "title": "{{ title | default('') }}",
      "titleColor": "{{ titleColor | default('#50BFF2') }}",
      "titleSize": {{ titleSize | default(12) }},
      "message": "{{ message }}",
      "messageColor": "{{ messageColor | default('#fbf5f5') }}",
      "messageSize": {{ messageSize | default(14) }},
      "backgroundColor": "{{ backgroundColor | default('#0f0e0e') }}"
    }

pipup_image_on_tv:
  # Use Pipup to display image notifications on Android TV devices.
  url: http://{{ ip }}:{{ port | default(7979) }}/notify
  content_type: 'application/json'
  verify_ssl: false
  method: 'post'
  timeout: 20
  payload: >
    {
      "duration": {{ duration | default(20) }},
      "position": {{ position | default(0) }},
      "title": "{{ title | default('') }}",
      "titleColor": "{{ titleColor | default('#50BFF2') }}",
      "titleSize": {{ titleSize | default(12) }},
      "message": "{{ message }}",
      "messageColor": "{{ messageColor | default('#fbf5f5') }}",
      "messageSize": {{ messageSize | default(14) }},
      "backgroundColor": "{{ backgroundColor | default('#0f0e0e') }}",
      "media": { 
        "image": {
          "uri": "{{ url }}",
          "width": {{ width | default(640) }}
        }
      }
    }

pipup_url_on_tv:
  # Use with Webrtc camera as described here:
  # https://github.com/AlexxIT/WebRTC/wiki/Cast-or-share-camera-stream#html-page
  url: http://{{ ip }}:{{ port | default(7979) }}/notify
  content_type: 'application/json'
  verify_ssl: false
  method: 'post'
  timeout: 20
  payload: >
    {
      "duration": {{ duration | default(20) }},
      "position": {{ position | default(0) }},
      "title": "{{ title | default('') }}",
      "titleColor": "{{ titleColor | default('#50BFF2') }}",
      "titleSize": {{ titleSize | default(12) }},
      "message": "{{ message }}",
      "messageColor": "{{ messageColor | default('#fbf5f5') }}",
      "messageSize": {{ messageSize | default(14) }},
      "backgroundColor": "{{ backgroundColor | default('#0f0e0e') }}",
      "media": { 
        "web": {
          "uri": "{{ url }}", 
          "width": {{ width | default(640) }},
          "height": {{ height | default(480) }}
        }
      }
    }
  1. Save everything and restart Home Assistant

Testing

You should now be able to navigate to Developer Tools, Services. Chose rest_command.pipup_text_on_tv, enable YAML mode and paste the following:

service: rest_command.pipup_text_on_tv
data:
  ip: <IP>
  title: PiPup
  message: Notifications are working!

You should see a popup appear on the TV

Customization

Below are the things you can change quite in the service data:

  • ip
  • port
  • duration
  • position
  • title
  • titleColor
  • titleSize
  • message
  • messageColor
  • backgroundColor
  • url
  • width
  • height

an explanation of most of them can be found here

4 Likes

Thank you,. works great!!