Calling Javascript from a Custom Card

Amelia · June 5, 2023, 1:41am

Calling Javascript from a Custom Card.

I am trying to make a custom card using this template:

I would like to make a card that draws a vis.js diagram. Eventually I want to use the card with JSON and then draw a live network diagram. For now I would be very, very happy if I can get the card to draw any static diagram.

This is way outside my skill set, so I would appreciate it if someone could help with ideas or examples where someone else managed to do this.

msp1974 · June 5, 2023, 2:42pm

I created a custom card to support our Drayton Wiser integration to show the zigbee network as a diagram (sounds similar to what you are looking for).

Below is the repo code for the card which uses vis-network. It gets its data from a webservice call to our integration, which itself has some custom code to add this webservice to HA and provide the data. Looks like this in HA.

There is some complexity now in this as I wanted to allow the user to manually move the layout and save it through the HA card editor, but if strip this out, you will see it is quite straight forward.

Custom Card

HA code to show how to add custom webservice to support card with data

github.com

asantaga/wiserHomeAssistantPlatform/blob/dd367ef94c39ba873214d0c79f027fcd5cde5f0b/custom_components/wiser/websockets.py#L469

    
      
                      connection.send_result(msg["id"], "success")
                  else:
                      connection.send_error(
                          msg["id"],
                          "wiser error",
                          f"Unable to copy schedule.  Schedule with id {schedule_id} of type {schedule_type} not found",
                      )
              else:
                  connection.send_error(msg["id"], "wiser error", "hub not recognised")
          
          
# Get zigbee data
          @websocket_api.websocket_command(
              {
                  vol.Required("type"): "{}/zigbee".format(DOMAIN),
                  vol.Optional("hub"): str,
              }
          )
          @websocket_api.async_response
          async def websocket_get_zigbee_data(
              hass, connection: ActiveConnection, msg: dict
          ) -> None:

Hope this helps, reach out if you have more questions.

Amelia · June 6, 2023, 12:08am

Thanks - it looks great!