Skip to content

Input

Example#

preview

Code-example#

<measmatic-grid>
  <measmatic-card>
    <measmatic-input data-id=0></measmatic-input>
    <measmatic-input data-id=1 label=label></measmatic-input>
    <measmatic-input data-id=2 unit=V label="unit='V'"></measmatic-input>
    <measmatic-input data-id=3 unit=V start-prefix=G label=GV-V></measmatic-input>
    <measmatic-input data-id=4 unit=V end-prefix=n label=V-nV></measmatic-input>
    <measmatic-input data-id=5 unit=V start-prefix=G end-prefix=n label=GV-nV></measmatic-input>
    <measmatic-input data-id=6 selected-prefix=k unit=V start-prefix=G end-prefix=n label="GV-nV kV"></measmatic-input>
    <measmatic-input data-id=7 type=text value=zwölf label="type=text"></measmatic-input>
    <measmatic-input data-id=8 type=number value=12 label="type=number"></measmatic-input>
    <measmatic-input data-id=9 type=text value=12 label="label=12"></measmatic-input>
    <measmatic-input data-id=10 type=checkbox label="type=checkbox"></measmatic-input>
    <measmatic-input data-id=11 type=checkbox checked label=checked></measmatic-input>
    <measmatic-input data-id=12 type=checkbox checked></measmatic-input>
    <measmatic-input data-id=13 type=file label=File></measmatic-input>
    <measmatic-input data-id=14 unit=V value=12 label=disabled disabled></measmatic-input>
  </measmatic-card>
  <measmatic-card highlight-header>
    <measmatic-input data-id=15 value=12 label=highlight-header></measmatic-input>
    <measmatic-input data-id=16 value=12 label=content></measmatic-input>
  </measmatic-card>
  <measmatic-card highlight-header>
    <measmatic-input data-id=17 unit=V start-prefix=k end-prefix=m value=12 label="highlight-header unit"></measmatic-input>
    <measmatic-input data-id=18 unit=V start-prefix=k end-prefix=m value=12 label="content unit"></measmatic-input>
  </measmatic-card>
  <measmatic-card highlight-header>
    <measmatic-input data-id=19 type=text value=text label="highlight-header text"></measmatic-input>
    <measmatic-input data-id=20 type=text value=text label="content text"></measmatic-input>
  </measmatic-card>
  <measmatic-card highlight-header>
    <measmatic-input data-id=21 type=file label="highlight-header file"></measmatic-input>
    <measmatic-input data-id=22 type=file label="content file"></measmatic-input>
  </measmatic-card>
  <measmatic-card highlight-header id=disable-all-card>
    <measmatic-input data-id=23 type=checkbox checked label="disable all"></measmatic-input>
    <measmatic-input data-id=24 unit=V start-prefix=k end-prefix=m value=12 label=unit></measmatic-input>
    <measmatic-input data-id=25 type=text value=text label=text></measmatic-input>
    <measmatic-input data-id=26 type=file label=file></measmatic-input>
    <measmatic-input data-id=27 type=checkbox label=checkbox></measmatic-input>
    <measmatic-select data-id=28 options='["Sweep","Bias"]' label=select></measmatic-select>
  </measmatic-card>
</measmatic-grid>

Measmatic-input#

This custom-element will generate a control-element to input data and is based on HTMLInputElement. To organize Inputs you can use measmatic-card.

Structure

<measmatic-input data-id="controlId1" type="number" value="1" label="input number"></measmatic-input>

The HTML-structure is selfbuilding and editable by adding attributes.

Attributes

  • data-id required to initialize your control with measmatic
  • type supported types are number (= float datatype, default), float, integer (blocks the use of units), text, file (blocks units and variables) and checkbox (blocks units and variables)
  • label creates a label at the left site of the control with the given attribute data
  • checked checkes control when type=checkbox
  • value presets a value for controls with the type of number, float, integer, file or text
  • unit sets the baseunit and will activate the usage of measmatic-unit
  • start-prefix selects the largest choosable prefix
  • end-prefix selects the smallest choosable prefix
  • selected-prefix selected-prefix="" will select base (no prefix)
  • variables creates a button to look up given variables from your excisting tests (default = true) variables="false" will deactivate the variables button
  • disabled disables the input-field, the unit and the variables button (for type="file" the choose button), can be added or removed at any time

For type="file", the choose button uses window.measmatic.openFileDialog("") inside Measmatic. In a browser it falls back to window.showOpenFilePicker when available.

Properties of interest

  • to access setter/getter of contained childs
  • disabled sets/gets if the element is disabled
  • element.inputField returns the contained measmatic-input-field element
  • element.inputUnit returns the contained measmatic-input-unit element
  • element.inputVariable returns the contained measmatic-input-variable element