upp-scale-input

Weight field built on upp-input. When the caller supplies an open WSConnection and a scale device (model, optional port), the widget starts live capture and writes readings (grams) into the reactive form control. The caller owns WSOpen / WSClose.

When to Use

Use inside product cart or other forms that need weight in grams. Prefer it over a bare upp-input when a scale may be attached. Do not open or close the WebSocket inside this widget.

Layout: Place under a parent [formGroup] and wrap in ion-item like other form controls.

Demo

Source Code

HTML

<div class="demo-scroll-container">
    <upp-scrollable [scrollbar]="'y'">
        <div class="demo-content">
            <h2>Scale weight field</h2>
            <p class="demo-description">
                <code>upp-scale-input</code> wraps <code>upp-input</code> for weight in grams.
                Without <code>connection</code> + <code>device</code> it behaves as a manual field.
                Live capture is owned by the caller (open WS, pass inputs, close WS on destroy).
            </p>

            <div class="demo-controls">
                <ion-button size="small" (click)="setSampleWeight()">Set 1250 g</ion-button>
                <ion-button size="small" color="medium" (click)="resetForm()">Reset</ion-button>
            </div>

            <div class="demo-section" [formGroup]="form" uppDataId="demo-scale-input">
                <upp-form-section title="Weight (grams)">
                    <ion-item>
                        <upp-scale-input
                            controlName="weight"
                            title="Weight"
                            placeholder="0"
                            type="number"
                            [kiosk]="false"
                            [connection]="connection"
                            [device]="device">
                        </upp-scale-input>
                    </ion-item>
                </upp-form-section>
                <p class="demo-hint">Current value: {{ form.get('weight')?.value ?? '—' }}</p>
            </div>
        </div>
    </upp-scrollable>
</div>

TypeScript

import { Component } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'demo-upp-scale-input',
    templateUrl: './demo-upp-scale-input.html',
    styleUrls: ['../demo-common.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DemoUppScaleInputComponent {
    form = new FormGroup({
        weight: new FormControl<number | null>(null, [Validators.required]),
    });

    /**
     * Demo stays in manual mode (no live WS). Product callers open the socket
     * and pass `connection` + `device` into the widget.
     */
    connection = null;
    device = null;

    constructor(private change: ChangeDetectorRef) {
    }

    setSampleWeight(): void {
        this.form.patchValue({ weight: 1250 });
        this.form.get('weight')?.markAsDirty();
        this.change.markForCheck();
    }

    resetForm(): void {
        this.form.reset();
        this.change.markForCheck();
    }
}

API Reference

Input	Type	Default	Description
controlName	string	'weight'	Name of the FormControl in the parent FormGroup
connection	WSConnection | null	null	Open socket; required with device for live capture
device	{ model, port? } | null	null	Scale identity for START/STOP
placeholder / title / type / kiosk / readonly / disabled / errornfo	same as upp-input	—	Forwarded to the inner input

Behaviour

• No connection/device: manual numeric input; no status icon.
• With connection+device: starts capture (WSInputScale + doIniRead); icon toggles capture; destroy/Release ends capture without disconnecting the socket.
• E2E ids: fixed internals scale-input-weight, scale-input-status; caller sets container uppDataId.

Related

• upp-input
• Functional contract: libs/upp-wdgt/src/components/upp-scale/upp-input.mdc
• Cart integration: libs/feature/product/src/components/cart/upp-cart.mdc