pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] point_of_sale: improve loading of customer display image

Browse Source 
The customer display loads very slowly in the RemoteDisplay mode.
This is in big part because of the large size of the bg image.
This image is loaded on every single update of the customer display.

This PR makes it so the bg image is loaded directly from the server,
in order for it to be cached on the customer display, thus improving
considerately the response time.

closes odoo/odoo#124998

Signed-off-by: Robin Heinz (rhe) <rhe@odoo.com>
This commit is contained in:
vlst
2023-09-14 15:50:14 +00:00
parent a387e9591e
commit 3a2371333a
2 changed files with 6 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/point_of_sale/static/src/app/customer_display/customer_display_template.xml
+6 -4
View File
@@ -29,25 +29,27 @@
</t>
<t t-name="point_of_sale.CustomerFacingDisplayNoOrder">
<t t-set="backgroundImageURL" t-value="pos.config.iface_customer_facing_display_background_image_1920 ? 'url(/web/image/pos.config/' + pos.config.id + '/iface_customer_facing_display_background_image_1920)' : 'none'" />
<t t-call="point_of_sale.CustomerFacingDisplayHead" />
<div class="pos-customer_facing_display pos-no-order pos-palette_01" t-attf-style="background-image: #{backgroundImageCSSValue};">
<div class="pos-customer_facing_display pos-no-order pos-palette_01" t-attf-style="background-image: #{backgroundImageURL};">
<!-- The remote display replaces pos-customer_facing_display contents, but not it -->
<!-- Therefore, pos-no-order is an inner div -->
<div class="pos-no-order" t-attf-style="background-image: #{backgroundImageCSSValue};">
<div class="pos-no-order" t-attf-style="background-image: #{backgroundImageURL};">
<div class="pos-company_logo" t-attf-style="background-image:url(/logo?company=#{pos.company.id})" />
</div>
</div>
</t>
<t t-name="point_of_sale.CustomerFacingDisplayOrder">
<t t-set="backgroundImageURL" t-value="pos.config.iface_customer_facing_display_background_image_1920 ? 'url(/web/image/pos.config/' + pos.config.id + '/iface_customer_facing_display_background_image_1920)' : 'none'" />
<!-- Header -->
<t t-call="point_of_sale.CustomerFacingDisplayHead" />
<div class="pos-customer_facing_display pos-palette_01">
<!-- Only visible in portrait orientation -->
<div class="pos-portrait-top">
<div class="pos-header" t-attf-style="background-image: #{backgroundImageCSSValue};">
<div class="pos-header" t-attf-style="background-image: {{backgroundImageURL}};">
<div class="pos-company_logo" t-attf-style="background-image:url(/logo?company=#{pos.company.id})" />
</div>
</div>
@@ -57,7 +59,7 @@
<t t-call="point_of_sale.CustomerFacingDisplayMainContainer" />
</div>
<div class="pos-payment_info" t-attf-style="background-image: #{backgroundImageCSSValue};">
<div class="pos-payment_info" t-attf-style="background-image: {{backgroundImageURL}};">
<!-- Company Logo only visible in landscape orientation -->
<div class="pos-company_logo" t-attf-style="background-image:url(/logo?company=#{pos.company.id})" />
addons/point_of_sale/static/src/app/store/pos_store.js
-11
View File
@@ -1021,21 +1021,11 @@ export class PosStore extends Reactive {
* @returns {string}
*/
async customerDisplayHTML(closeUI = false) {
const backgroundImageBase64 =
this.config.iface_customer_facing_display_background_image_1920;
let backgroundImageCSSValue;
if (backgroundImageBase64) {
backgroundImageCSSValue = "url('data:image/png;base64," + backgroundImageBase64 + "')";
} else {
backgroundImageCSSValue = "none";
}
const order = this.get_order();
if (closeUI || !order) {
return renderToString("point_of_sale.CustomerFacingDisplayNoOrder", {
pos: this,
origin: window.location.origin,
backgroundImageCSSValue,
});
}
@@ -1053,7 +1043,6 @@ export class PosStore extends Reactive {
pos: this,
formatCurrency: this.env.utils.formatCurrency,
origin: window.location.origin,
backgroundImageCSSValue,
order,
productImages,
});