UI Configuratie Gids

Deze gids legt alle beschikbare UI configuratie-opties uit voor het aanmaken van een nieuwe sessie. Alle instellingen zijn optioneel en staan standaard aan/zichtbaar om backwards compatibel te zijn. Daarom is het mogelijk om alleen een gelimiteerde set aan instellingen in te sturen, voor alleen de onderdelen die je wilt uitschakelen.

UI Controls Screenshot

Complete JSON Structuur

▶

{
  "options": {
    "ui": {
      "enableUpload": boolean,
      "toolbox": {
        "buttons": {
          "undo": boolean,
          "rotateLeft": boolean,
          "rotateRight": boolean,
          "flip": boolean,
          "reset": boolean,
          "zoomOut": boolean,
          "setToFit": boolean,
          "crop": boolean
        }
      },
      "sideList": {
        "buttons": {
          "addBlankPage": boolean,
          "deleteAll": boolean,
          "downloadPreview": boolean,
          "deleteSide": boolean
        },
        "showQualityLabels": boolean
      },
      "rightBar": {
        "enabled": boolean,
        "qualityControlSection": {
          "enabled": boolean
        },
        "pageInfoSection": {
          "enabled": boolean,
          "pageNumber": boolean,
          "scaling": boolean,
          "fileFormat": boolean,
          "font": boolean,
          "resolution": boolean
        },
        "yourProductSection": {
          "enabled": boolean,
          "pagesCount": boolean,
          "productSize": boolean,
          "minimalResolution": boolean
        },
        "sourceFileSection": {
          "enabled": boolean,
          "filename": boolean,
          "pageNumber": boolean,
          "size": boolean
        },
        "tipSection": {
          "enabled": boolean,
          "title": string,
          "text": string
        }
      }
    }
  }
}

Upload Functionaliteit

▶

Schakel de volledige upload functionaliteit uit.

Een mogelijke toepassing: geef een pdf-bestand mee bij het maken van de sessie (via fileUrl) en schakel dan de uploadfunctie uit om te voorkomen dat de klant eigen bestanden gaat uploaden.

{
  "options": {
    "ui": {
      "enableUpload": false
    }
  }
}

Standaard: true (ingeschakeld)
Effect: Uploaden aan-/uitzetten

Toolbox Configuratie

▶

Configureer welke knoppen getoond worden in de bewerkingstoolbox.

{
  "options": {
    "ui": {
      "toolbox": {
        "buttons": {
          "undo": false,
          "rotateLeft": true,
          "rotateRight": false,
          "flip": true,
          "reset": false,
          "zoomOut": true,
          "setToFit": true,
          "crop": false
        }
      }
    }
  }
}

Alle knoppen standaard: true (zichtbaar)
Beschikbare knoppen:
- undo: Laatste actie ongedaan maken
- rotateLeft: 90° tegen de klok in draaien
- rotateRight: 90° met de klok mee draaien
- flip: Horizontaal spiegelen
- reset: Terug naar originele staat
- zoomOut: Uitvullen incl. afloop
- setToFit: Passend maken binnen trimbox
- crop: Bijsnij-editor openen

Zijlijst Configuratie

▶

Configureer de linker zijbalk functionaliteit.

Knoppen

{
  "options": {
    "ui": {
      "sideList": {
        "buttons": {
          "addBlankPage": false,
          "deleteAll": false,
          "downloadPreview": true,
          "deleteSide": false
        }
      }
    }
  }
}

Alle knoppen standaard: true (zichtbaar)
Beschikbare knoppen:
- addBlankPage: Lege pagina toevoegen
- deleteAll: Alle pagina's verwijderen
- downloadPreview: Preview PDF downloaden
- deleteSide: Individuele pagina verwijderen (prullenbak icoon per pagina)

Kwaliteitslabels

{
  "options": {
    "ui": {
      "sideList": {
        "showQualityLabels": false
      }
    }
  }
}

Standaard: true (zichtbaar)
Effect: Regelt zowel individuele pagina badges (oranje/rode labels) als de samenvattingstekst boven de lijst ("X pagina's met waarschuwingen")

Rechter Balk Configuratie

▶

De rechter zijbalk bevat meerdere secties die individueel geconfigureerd kunnen worden.

Hoofd Schakelaar

{
  "options": {
    "ui": {
      "rightBar": {
        "enabled": false
      }
    }
  }
}

Standaard: true (zichtbaar)
Effect: Verbergt gehele rechter zijbalk en vergroot preview gebied naar volledige breedte

Kwaliteitscontrole Sectie

{
  "options": {
    "ui": {
      "rightBar": {
        "qualityControlSection": {
          "enabled": false
        }
      }
    }
  }
}

Standaard: true (zichtbaar)
Effect: Toont/verbergt de gehele kwaliteitscontrolelijst sectie
Note: Individuele items getoond hangen af van backend kwaliteitscontrole configuratie

Pagina Info Sectie

Configureer de pagina informatie weergave met gedetailleerde controle.

{
  "options": {
    "ui": {
      "rightBar": {
        "pageInfoSection": {
          "enabled": true,
          "pageNumber": false,
          "scaling": true,
          "fileFormat": false,
          "font": false,
          "resolution": true
        }
      }
    }
  }
}

Alle opties standaard: true (zichtbaar)
Sectie controle: enabled regelt gehele sectie zichtbaarheid
Individuele velden:
- pageNumber: Huidige paginanummer
- scaling: Schaalpercentage met waarschuwingen
- fileFormat: Bestandsformaat (PDF)
- font: Lettertype informatie
- resolution: Resolutie bericht component

Uw Product Sectie

Configureer de product informatie weergave.

{
  "options": {
    "ui": {
      "rightBar": {
        "yourProductSection": {
          "enabled": true,
          "pagesCount": false,
          "productSize": true,
          "minimalResolution": false
        }
      }
    }
  }
}

Alle opties standaard: true (zichtbaar)
Sectie controle: enabled regelt gehele sectie zichtbaarheid
Individuele velden:
- pagesCount: Aantal pagina's/zijden
- productSize: Product afmetingen (breedte x hoogte)
- minimalResolution: Vereiste DPI instelling

Bronbestand Sectie

Configureer de bronbestand informatie weergave.

{
  "options": {
    "ui": {
      "rightBar": {
        "sourceFileSection": {
          "enabled": true,
          "filename": false,
          "pageNumber": true,
          "size": false
        }
      }
    }
  }
}

Alle opties standaard: true (zichtbaar)
Sectie controle: enabled regelt gehele sectie zichtbaarheid
Individuele velden:
- filename: Originele bestandsnaam
- pageNumber: Bron paginanummer
- size: Bronbestand afmetingen in mm

Tip Sectie

Configureer de tip/help sectie met aangepaste inhoud.

{
  "options": {
    "ui": {
      "rightBar": {
        "tipSection": {
          "enabled": true,
          "title": "Aangepaste Tip Titel",
          "text": "Uw aangepaste tip tekst hier met instructies."
        }
      }
    }
  }
}

Standaard ingeschakeld: true (zichtbaar)
Standaard titel: "Tip"
Standaard tekst: "Gebruik muiswiel om in en uit te zoomen op de grote preview. Sleep de afbeelding om de randen te inspecteren."
Aanpassing: Zowel titel als tekst kunnen volledig aangepast worden

Layout Gedrag

▶

### Responsief Ontwerp

Wanneer rightBar.enabled = false:

Rechter zijbalk verdwijnt volledig
Preview gebied vergroot van span 14 naar span 19 (wint 5/24 breedte eenheden)
Layout behoudt linker zijbalk op span 5

Hiërarchische Controle

De configuratie volgt een hiërarchische structuur:

Hoofdniveau (bijv. rightBar.enabled) overschrijven alle subsecties
Sectieniveau (bijv. pageInfoSection.enabled) overschrijven individuele velden
Veldniveau bieden granulaire controle binnen ingeschakelde secties

Voorbeeld: Minimale UI Configuratie

▶

{
  "options": {
    "ui": {
      "enableUpload": false,
      "toolbox": {
        "buttons": {
          "undo": false,
          "rotateLeft": true,
          "rotateRight": true,
          "flip": false,
          "reset": false,
          "zoomOut": false,
          "setToFit": true,
          "crop": true
        }
      },
      "sideList": {
        "buttons": {
          "addBlankPage": false,
          "deleteAll": false,
          "downloadPreview": true,
          "deleteSide": false
        },
        "showQualityLabels": false
      },
      "rightBar": {
        "enabled": false
      }
    }
  }
}

Deze configuratie creëert een minimale interface met:

Geen upload functionaliteit
Beperkte toolbox (alleen draaien, passend maken, bijsnijden)
Geen kwaliteitslabels
Geen rechter zijbalk (maximale preview ruimte)
Alleen download preview knop beschikbaar