Skip to content

Add product picture to ozw node dashboard #7203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zsarnett merged 4 commits into from
Oct 15, 2020
Merged

Add product picture to ozw node dashboard #7203

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
686d74b
Add product picture to ozw node dashboard
cgarwood Oct 2, 2020
f7b360b
float -> flexbox
cgarwood Oct 13, 2020
d29877f
Simplify markup
cgarwood Oct 14, 2020
1af3b1b
Forgot to move the class to the img tag
cgarwood Oct 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 42 additions & 14 deletions src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,20 +87,31 @@ class OZWNodeDashboard extends LitElement {
${this._node
? html`
<ha-card class="content">
<div class="card-content">
<b
>${this._node.node_manufacturer_name}
${this._node.node_product_name}</b
><br />
Node ID: ${this._node.node_id}<br />
Query Stage: ${this._node.node_query_stage}
${this._metadata?.metadata.ProductManualURL
? html` <a
href="${this._metadata.metadata.ProductManualURL}"
>
<p>Product Manual</p>
</a>`
: ``}
<div class="card-content flex">
<div class="node-details">
<b>
${this._node.node_manufacturer_name}
${this._node.node_product_name}
</b>
<br />
Node ID: ${this._node.node_id}<br />
Query Stage: ${this._node.node_query_stage}
${this._metadata?.metadata.ProductManualURL
? html` <a
href="${this._metadata.metadata.ProductManualURL}"
>
<p>Product Manual</p>
</a>`
: ``}
</div>
<div class="product-image">
Comment thread
cgarwood marked this conversation as resolved.
Outdated
${this._metadata?.metadata.ProductPicBase64

@bramkragten bramkragten Oct 13, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we btw do this differently? Sending large files like images over the WebSocket is not recommended, would rather have just the URL or something.

@cgarwood cgarwood Oct 13, 2020

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OZW just has the base64 encoded image in the MQTT data for the node. Though I suppose we could register a regular HTTP endpoint on the backend to return the image instead of feeding it over the websocket. I've never done anything with custom endpoints like that in the backend though.

@bramkragten bramkragten Oct 14, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something for a future PR maybe

? html`<img
src="data:image/png;base64,${this._metadata
?.metadata.ProductPicBase64}"
/>`
: ``}
</div>
</div>
<div class="card-actions">
<mwc-button @click=${this._refreshNodeClicked}>
Expand Down Expand Up @@ -199,6 +210,11 @@ class OZWNodeDashboard extends LitElement {
max-width: 600px;
}

.flex {
display: flex;
justify-content: space-between;
}

.card-actions.warning ha-call-service-button {
color: var(--error-color);
}
Expand All @@ -219,6 +235,18 @@ class OZWNodeDashboard extends LitElement {
[hidden] {
display: none;
}

.product-image {
padding: 12px;
}

.product-image img {
max-height: 140px;
max-width: 140px;
}
.card-actions {
clear: right;
}
`,
];
}
Expand Down