Custom component for easy use of a Pixoo64 within Home Assistant. With this integration you have the possibility to display different designs and personalize them with information from the Home Assistant. For example, you can use this integration to display several texts {{ templates }} and images on one page. You can also use this integration to determine how long you want to see a page, e.g. you can set the page to change every 15 seconds. In addition, you also have a light entity for switching the display on and off or changing the brightness. Last but not least, you can create automations with which you can use certain triggers to display the pages that are available to you as a push.
-
Install this integration with HACS (adding repository required), or copy the contents of this repository's
custom_components/divoom_pixoodirectory into yourcustom_components/divoom_pixoodirectory. -
Restart Home Assistant.
-
Go to Settings / Integrations and add integration "Divoom Pixoo 64".
-
Please select a discovered Pixoo 64 device from the list or select 'Manual IP' to manually enter the device's IP yourself.
Settings > Devices > Divoom Pixoo > Configure
IP address of the device: discovered or manually entered IP
Scan interval (in seconds): The amount of time a page is displayed
List of pages in YAML: See below (Optional)
Each page type will have configuration options unique to it. All configs should be written using YAML If you're new to this integration, we recommend starting with the components page type.
In the YAML config, all pages are nested under - page_type: XXX
When setting the default configuration. Multiple pages can be set. These will be rotated through using the "duration" tag, or by default the time set in "scan interval".
YAML Layout example
- page_type: channel
id: 0
- page_type: clock
id: 182In addition, all page types can be dynamically set to Enable/Disable based on HA entities.
| Config Options | required | Default | Values |
|---|---|---|---|
| enabled | No | true | bool or {{ template }} #expects state = 'true', 'yes', 'on' or '1' |
- page_type: PAGE_TYPE
enabled: "{{ states.input_boolean.YOURS.state }}"You can also set the duration of a page in seconds. This will override the scan interval set in the device settings.
| Config Options | required | Default | Values |
|---|---|---|---|
| duration | No | (The Scan Interval) | integer/float in seconds |
- page_type: PAGE_TYPE
duration: 10Note
The enabled tag and duration tag only apply when used in the configuration. Therefore, they won't word in the service.
A components page turns your Pixoo into your canvas! You can tie multiple text/image configs to a single page.
- page_type: components
components:
- type: text
#[text config]
- type: text
#[text config]
- type: image
#[image config]
- type: rectangle
#[rectangle config]
- type: templatable
#[templatable config]Note
Position X,Y coordinates will need to be manually configured for each component type
-type: [ text | image | rectangle ]
| Config Options | required | Default | Values |
|---|---|---|---|
| position | Yes | The text position on a XY axis at 64x64 pixel | |
| content | Yes | Your message! {{ templates }} and Newline Support in text | |
| font | No | pico_8 | Fonts |
| color | No | white | [R, G, B] or Colors |
Example
- type: text
position: [0,0]
content: Welcome Home!| Config Options | required | Default | Values |
|---|---|---|---|
| position | Yes | The text position on a XY axis at 64x64 pixel | |
| image_path | Yes(pick one) | image path like /config/img/haus.png | |
| image_url | Yes(pick one) | image url like template {{ entity image }} or https://raw.githubusercontent.com/gickowtf/pixoo-homeassistant/main/images/fuel.png | |
| image_data | Yes(pick one) | image data in base64. Convert images here. | |
| height | No | If none is selected, the image will be at it's original size. If one is selected, it will become the longest side. Proportional | |
| width | No | If none is selected, the image will be at it's original size. If one is selected, it will become the longest side. Proportional | |
| resample_mode | No | box |
box, nearest, bilinear, hamming, bicubic, lanczos |
Example
- type: image
position: [5,5]
image_path: /config/image/haus.png
resample_mode: box
height: 64| Config Options | required | Default | Values |
|---|---|---|---|
| position | Yes | The text position on a XY axis at 64x64 pixel | |
| size | Yes | final size of the rectangle. looks like [width, height] | |
| color | No | [R, G, B] or Colors | |
| filled | No | boolean |
Example
- type: rectangle
position: [20, 20]
size: [10, 10]
color: yellow
filled: "{{ states.input_boolean.YOURS.state }}" #optional| Config Options | required | Default | Values |
|---|---|---|---|
| template | Yes | jinja2 template |
Example
- type: templatable
template: >-
{% set entities = [["input_boolean.sw1", "input_boolean.sw2"],
["input_boolean.sw2"]] %} {% set origin = [1, 62] %}
{% set output = namespace(list=[], position_x = origin[0], position_y =
origin[1]) %} {% for entity_group in entities -%} {# {%- if loop.first
%}The {% elif loop.last %} and the {% else %}, the {% endif -%} #}
{% for entity in entity_group -%} {# {%- if loop.first %}The {% elif
loop.last %} and the {% else %}, the {% endif -%} #} {% set entity_state
= states(entity) %}
{## Select the color ##} {% if entity_state=="off" or
entity_state=="not_home" or entity_state == "standby" %} {% set
color="red" %} {% elif entity_state=="on" or entity_state=="home" %} {%
set color="green" %} {% elif entity_state=="playing" or
entity_state=="idle" or entity_state=="paused" %} {% set color="blue" %}
{% else %} {% set color="white" %} {% endif %}
{% set component = {"type": "rectangle", "size": [1,1], "color": color,
"position": [output.position_x, output.position_y]}%}
{## Make next pixel 2px higher ##} {% set output.position_y =
output.position_y - 2 %} {## Add to the output list##} {% set
output.list = output.list + [component] %}
{%- endfor %} {## Make next pixel 2px to the right ##} {% set
output.position_x = output.position_x + 2 %} {## reset y ##} {% set
output.position_y = origin[1] %} {%- endfor %} {{output.list}}If you wish for easier sharing of your custom component pages, you can define variables in the variables tag. These can then be used in any template.
Note
The variables tag is not supported in the service call. For those, you have to use Home Assistant's variables feature (with automations/scripts)
Example usage:
- page_type: components
variables:
power: "{{ states('input_number.power') }}"
storage: "{{ states('input_number.storage') }}"
components:
- type: image
image_path: /config/custom_components/divoom_pixoo/img/sunpower.png
position: [2,1]
- type: text
content: "{{ power }}"
color: "{{ [255,175,0] if power|int >= 1 else [131,131,131] }}"
font: gicko
position: [17,8]
- type: image
image_path: "{{ '/config/custom_components/divoom_pixoo/img/akku80-100.png' if storage|int >= 80 else '/config/custom_components/divoom_pixoo/img/akku60-80.png' if storage|int >= 60 else '/config/custom_components/divoom_pixoo/img/akku40-60.png' if storage|int >= 40 else '/config/custom_components/divoom_pixoo/img/akku20-40.png' if storage|int >= 20 else '/config/custom_components/divoom_pixoo/img/akku00-20.png'}}"
position: [2, 17]
- type: text
content: "{{ storage }}"
color: "{{ [255,0,68] if storage|int <= 0 else [4,204,2] }}"
font: gicko
position: [17, 18]Animated GIFs
- Download the gif on your computer.
- Resize your gif to 16x16, 32x32 or 64x64. I know some websites say it's 64x64, but it has to actually be 64x64. You can resize gifs on multiple websites. Here's an example. (You only have to select manually the width and height of the size down the page).
- Re-download the gif.
- Re-upload the gif. You can use many image services like this one. (Make sure you use the gif file's link, and not the "gif viewing page". You can get that by right-clicking the gif on the website, and then clicking "Copy Image Link". The link in your clipboard probably now ends in .gif, like your file. (Although this might not be 100% the case.))
| Config Options | required | Default | Values |
|---|---|---|---|
| gif_url | Yes | URL |
Example:
- page_type: gif
gif_url: https://i.ibb.co/tKnvLs2/ezgif-5-30ff95e9ca.gifIn Divoom app you can set three different custom channels which you can select here.
Note
The Divoom custom channel pic cycle rate must be set in the app itself.
- Channel 1 =
id: 0 - Channel 2 =
id: 1 - Channel 3 =
id: 2
| Config Options | required | Default | Values |
|---|---|---|---|
| id | Yes | Integer |
Example:
- page_type: channel
id: 0In Divoom app, there's a big list of clocks that you can set to your device.
- page_type: clock
| Config Options | required | Default | Values |
|---|---|---|---|
| id | Yes | Clock ID list of clock ID's |
Example:
- page_type: clock
id: 182- Navigate to settings > integrations > Divoom Pixoo 64
- Activate debug logging
- Open the Divoom app on your smartphone and select your preferred ClockFace.
- As soon as this is displayed on your Pixoo64, you will find "Device Data" in the log and then "CurClockId".
- The CurClockId is the number you were looking for.
This adds the visualizer page to the integration.
| Config Options | required | Default | Values |
|---|---|---|---|
| id | Yes | Clock (visualizer) ID |
The id starts at zero and it represents the clocks from top left to bottom right as can be seen in the app.
Example:
- page_type: visualizer
id: 2
Photovoltaic - PV is a pre-designed page. The icon changes depending on the battery capacity and the font color changes from red to green Helper entities may have to be used here
- page_type: PV
enabled: "{{ states.input_boolean.YOURS.state }}" #is only displayed if the state = 'true', 'yes', 'on' or '1'
power: "{{ states.sensor.YOUR_SENSOR.state }}"
storage: "{{ states.sensor.YOUR_SENSOR.state }}"
discharge: "{{ states.sensor.YOUR_SENSOR.state }}"
powerhousetotal: "{{ states.sensor.YOUR_SENSOR.state }}"
vomNetz: "{{ states.sensor.YOUR_SENSOR.state }}"
time: "{{ now().strftime('%H:%M') }}"Pre-designed page with a progress bar, for example, for the status of the dishwasher or for the charging status of the car
- page_type: progress_bar
| Config Options | required | Default | Values |
|---|---|---|---|
| header | Yes | string or use {{ template }} e.g. Dishwasher | |
| progress | Yes | integer or use {{ template }} | |
| footer | Yes | string or use {{ template }} e.g. Date | |
| bg_color | No | blue | use "[R, G, B]" or Colors |
| header_offset | No | 2 | integer |
| header_font_color | No | white | use "[R, G, B]" or Colors |
| progress_bar_color | No | red | use "[R, G, B]" or Colors |
| progress_text_color | No | white | use "[R, G, B]" or Colors |
| time_color | No | grey | use "[R, G, B]" or Colors |
| footer_offset | No | 2 | integer |
| footer_font_color | No | white | use "[R, G, B]" or Colors |
Example:
- page_type: progress_bar
enabled: >-
{% if is_state('sensor.DISHWASCHER_STATE', 'Run') %} true {% else %} false {% endif %}
header: DISHWASHER
progress: "{{ states.sensor.DISHWASHER_PROGRESS.state }}"
footer: ANY FOOTER
header_font_color: "[255, 255, 255]"Special Page for Gas Station Pricing. Helper entities may have to be used here
- page_type: fuel
| Config Options | required | Default | Values |
|---|---|---|---|
| title | Yes | string - can use {{ template }} e.g. Gas Station Name | |
| name1 | Yes | string - can use {{ template }} e.g. fuel type | |
| price1 | Yes | use {{ template }} e.g. fuel price | |
| name2 | Yes | string - can use {{ template }} | |
| price2 | Yes | use {{ template }} | |
| name3 | Yes | string - can use {{ template }} | |
| price3 | Yes | use {{ template }} eg. fuel price | |
| status | Yes | string - can use {{ template }} Any extra field in my case an opening status | |
| font_color | No | white | "[R, G, B]" or Colors |
| bg_color | No | yellow (255, 230, 0) | "[R, G, B]" or Colors |
| price_color | No | white | "[R, G, B]" or Colors |
| title_color | No | black | "[R, G, B]" or Colors |
| stripe_color | No | font_color | "[R, G, B]" or Colors |
| title_offset | No | 2 | integer used to center the text |
Example of the image:
- page_type: Fuel
enabled: "{{ states.input_boolean.YOURS.state }}"
title: Classic
name1: Diesel
price1: "{{ states.sensor.diesel.state }}"
name2: Super
price2: "{{ states.sensor.super.state }}"
name3: E10
price3: "{{ states.sensor.e10.state }}"
status: >-
{% if is_state('binary_sensor.status', 'on') %} Offen {%
else %} Geschlossen {% endif %}
title_offset: "10"
font_color: "[255, 255, 255]"Newline Support in content: example:
content: |-
text 1
{{ states.*.state }}There is no limit to the maximum newlines except for 64 pixels ;)
You can use it for Push Notifications. Trigger with anything! Call it with the Service "Divoom Pixoo 64: Send a page to Divoom Pixoo".
You can input in the Page Data field the data of one page in the normal YAML format. It can be anything!
Note
This is intended to be a temporary override of your default configuration. Any Enable/disable lines will not be respected here.
Some examples of Page Data:
page_type: clock
id: 182or
page_type: components
components:
- type: text
position: [10, 0]
content: 2 github/gickowtf
font: gicko
color: [255, 0, 0]
- type: image
image_path: /config/img/haus.png
position: [30, 30]Play the buzzer on the Divoom Pixoo. Beware that this maybe could damage the device. Use at your own risk.
Buzzing Time per cycle. in milliseconds default: 500 milliseconds
The working time of the buzzer per cycle. The buzzer will not buzz continuously; it will go on and off in cycles (duration in-between not controllable).
Idle Time per cycle in milliseconds default: 500 milliseconds
Idle time of the buzzer per cycle.
Total Time in milliseconds default: 3000 milliseconds
The total time the buzzer will be working.
Restart the Divoom Pixoo device. (It has a little bit of delay. Be patient.)
As mentioned above, templates allow you to bring Entity states and attributes directly to your Pixoo! (eg. Temperature, brightness, presence, entity on/off). They can be used in most settings in the integration. For a deep dive see https://www.home-assistant.io/docs/configuration/templating/ or even https://jinja.palletsprojects.com/en/latest/templates/ (The language behind templates)
You can find the entity ID in HA under Developer > States (Although you shouldn't need this.)
Binary sensors are the easiest to start with, as they simply live in one of two states, On or Off.
- page_type: components
components:
- type: text
position: [0,0]
color: white
content: "Motion-FL1: {{ states('binary_sensor.MotionDetector') }}"In the above example, the Pixoo would display
Motion-FL1: [on/off]
What if you want to change on -> detected and off -> clear?
One way is to use a combination of If/then/else (short form below) and a state comparator (is_state)
content: >-
Motion-FL1: {{ 'Detected' if
is_state('binary_sensor.MotionDetector', ['on']) else
'clear' }}You might say "well that's pretty nifty, but I also want to dynamically change the color because a e s t h e t i c s.
Well I've got great news for you!
We can take the exact same concept used for the text, and apply it to color. All we need to do is swap text for color codes.
If Motion Detected, color = red (255,0,0); else color = green (0,255,0)
color: >-
{{ [255,0,0] if is_state('binary_sensor.motionDetector',
['on']) else [0,255,0] }}Note
In this example we're using a count helper to act as a countdown. This also uses an automation and not the config.
alias: pixoo64 - auto-ani
description: ""
trigger: []
condition: []
action:
- service: counter.reset
metadata: {}
data: {}
target:
entity_id: counter.pixoo_5s_count_down
- repeat:
count: 20
sequence:
- service: divoom_pixoo.show_message
target:
entity_id: sensor.divoom_pixoo_64_current_page
data:
page_data:
page_type: components
components:
- type: text
position:
- 0
- 30
content: "Auth Check in: {{ states('counter.pixoo_5s_count_down') }}"
font: pico_8
color: white
- type: image
image_url: https://pub.inflowbogie.dev/lock_closed.png
position:
- 0
- 40
resample_mode: box
height: 20
- type: image
image_url: https://pub.inflowbogie.dev/key.png
position:
- "{{ 2 * states('counter.pixoo_5s_count_down') }}"
- 50
resample_mode: box
height: 7
- service: counter.decrement
metadata: {}
data: {}
target:
entity_id: counter.pixoo_5s_count_down
- delay:
hours: 0
minutes: 0
seconds: 1
milliseconds: 0
- if:
- condition: state
entity_id: counter.pixoo_5s_count_down
state: "0"
then:
- service: counter.reset
metadata: {}
data: {}
target:
entity_id: counter.pixoo_5s_count_down
mode: single
| Font | Image |
|---|---|
| gicko |  |
| five_pix |  |
| pico_8 |  |
| eleven_pix |  |
| clock |  |
The colors in this chart can be used as presets to replace the [R,G,B] color coding.
Sometimes the display crashes, especially with animated images. I have often read on the Internet that this is due to the power supply being too weak or the brightness being too high. I now have the display permanently set to 90% and it no longer crashes.
I would be happy if you present your own configuration/usages of the integration or ask questions in the discussions!
https://github.com/gickowtf/pixoo-homeassistant/discussions
This is not official software from Divoom.
It is a custom integration created by me (gickowtf) and therefore Divoom is not responsible for any damages/problems caused by this integration, nor does Divoom provide any end-user support for the integration.
Use this integration at your own risk.
@Mrredstone5230 - Thanks for the conversion to config flow and many many more
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
