Breadcrumbs

Web-pohjainen ulkoinen käyttöliittymä

web_käyttöliittymä.png

Video aiheesta

Aiheesta löytyy webinaarivideo Vertex Systems Oy:n internet-sivuilta:




Tämä teksti on generoitu videon litteroinnin perusteella

Web-pohjainen ulkoinen käyttöliittymä suunnitteluautomaatille

1. Mitä web-pohjaisella käyttöliittymällä tarkoitetaan?

Web-pohjainen ulkoinen käyttöliittymä on erillinen HTML-sivu (nettiselainlomake), jonka kautta käyttäjä syöttää suunnitteluautomaatin tarvitsemat muuttujat.

Itse Vertex G4 -malli ja mittataulukon Python-koodi ovat taustalla ennallaan – web-käyttöliittymä vain:

  • kysyy käyttäjältä tarvittavat arvot (esim. halkaisija, korkeus, materiaalin paksuus, valinnat kyllä/ei),

  • tallentaa ne JSON-tiedostoon,

  • ja tämä JSON luetaan myöhemmin suunnittelijan ajamalla Python-ohjelmalla, joka ohjaa G4-mittataulukkoa.

Käyttöliittymä ei siis ole osa Vertex G4:ää, vaan täysin erillinen verkkosivu, joka toimii esimerkiksi:

  • suunnittelijan työasemalla,

  • myyjän omalla koneella tai

  • älypuhelimen selaimessa.

2. Mitä pitää olla valmiina?

Web-pohjainen käyttöliittymä ei korvaa varsinaista suunnitteluautomaattia, vaan rakentuu sen päälle. Ennen käyttöliittymän tekemistä tulee olla:

  1. Toimiva 3D-mittamalli Vertex G4:ssä

    • Malli, jota ohjataan mittataulukon muuttujilla.

  2. Mittataulukon Python-koodi valmiina

    • Python-skripti, joka lukee mittataulukon, laskee tarvittavat asiat ja ohjaa G4-mallia → lataa json-tiedostosta muuttujien arvot

    • Sama logiikka, jota käytetään myös Python- tai Excel-pohjaisissa käyttöliittymissä.

  3. Sovittu muuttujalista

    • Muuttujien nimet (esim. halkaisija, lieriön_korkeus, ainevahvuus) on määritelty mittataulukossa ja Python-koodissa.

    • Web-käyttöliittymä käyttää täsmälleen samoja nimiä JSON-tiedostossa.

3. JSON – linkki web-sivun ja suunnitteluautomaatin välillä

Web-käyttöliittymän ja G4-suunnitteluautomaatin välinen rajapinta on JSON-tiedosto.

JSON sisältää käytännössä vain:

  • yhden aaltosulkujen { … } sisällä olevan objektin

  • jonka sisällä on muuttujan nimi : arvo -pareja.

Esimerkki JSON-rakenteesta (yksinkertaistettu):

{
  "halkaisija": 3000,
  "lieriön_korkeus": 8000,
  "ainevahvuus": 5,
  "lisävaruste": 2
}

Huomioita videon esimerkin perusteella:

  • Muuttujien nimet vastaavat mittataulukon tunnuksia.

  • Esimerkiksi halkaisija, lieriön_korkeus ja ainevahvuus saavat numeeriset arvonsa suoraan lomakkeelta.

  • Kyllä/ei-tyyppisissä valinnoissa käytetään usein koodauksia:

    • 1 = ei

    • 2 = kyllä
      Tämä on sama tyyli kuin Python-käyttöliittymässä ja sopii hyvin mittataulukon if-lauseisiin.

Kun web-lomakkeella painetaan Tallenna, sivu muodostaa yllä kuvatun JSON-tiedoston ja tallentaa sen valittuun kansioon.

4. Web-käyttöliittymän rakenne ja sijainti

Web-käyttöliittymä on yksi HTML-tiedosto, esimerkiksi:

  • siilo_konfiguraattori.html

Videon esimerkin mukaan:

  • Tiedosto on tallennettu paikalliseen kansioon käyttäjän koneelle.

  • HTML avataan tavallisella selaimella (Chrome, Edge, tms.).

  • Sama tiedosto toimii myös puhelimen selaimessa, kunhan se saadaan avattua esim. jaetusta verkko­kansiosta tai palvelimelta.

Käytännössä:

  1. Käyttäjä avaa HTML-tiedoston selaimessa.

  2. Lomakkeella on syöttökentät ja valinnat samoille muuttujille, joita mittataulukko käyttää.

  3. Käyttäjä täyttää kentät ja valitsee halutut vaihtoehdot.

  4. Painamalla Tallenna JSON tms. nappia, sivu:

    • kysyy, mihin kansioon JSON tallennetaan,

    • antaa käyttäjän kirjoittaa tiedoston nimen,

    • ja tallentaa JSON-tiedoston.

5. JSON-tiedoston tallennus eri käyttäjille (esim. myyjät)

Videossa käytettiin esimerkkiä, jossa:

  • web-käyttöliittymää käyttää useampi myyjä,

  • kaikki tekevät omat konfiguraationsa tarjousvaiheessa,

  • suunnittelija käyttää samoja tietoja myöhemmin Vertex G4:ssä.

Tyypillinen toimintamalli:

  1. Myyjälle tehdään yhteinen lomakesivu (esim. siilokonfiguraattori).

  2. Jokainen myyjä:

    • avaa lomakkeen selaimessa,

    • syöttää asiakkaan mitat ja valinnat,

    • tallentaa JSON-tiedoston esim. nimellä
      myyja1_asiakasX.json

  3. Tiedoston nimiin voidaan lisätä:

    • myyjän tunnus (myyja1, myyja2, …),

    • asiakkaan nimi tai projektinumero,

    • tms., jotta konfiguraatiot löytyvät helposti.

Tämän jälkeen suunnittelija:

  1. Avaa Vertex G4:ssä mittataulukkoon kytketyn Python-ohjelman.

  2. Ohjelma pyytää valitsemaan JSON-tiedoston kansiosta.

  3. Suunnittelija valitsee juuri sen tiedoston, jonka kyseinen myyjä on tallentanut.

  4. Python-ohjelma lukee JSON-muuttujat ja ajaa automaation:

    • 3D-malli päivittyy,

    • piirustukset ja osaluettelot voidaan generoida normaalisti.

6. Tallennus mihin tahansa kansioon – myös pilveen

Yksi web-pohjaisen käyttöliittymän iso hyöty on, että:

  • JSON voidaan tallentaa mihin tahansa kansioon, jonka käyttäjä näkee tallennusikkunassa.

Videolla mainitaan myös:

  • mahdollisuus tallentaa JSON Google Driveen,

  • jolloin web-lomake voisi toimia luontevasti mobiilissa:

    • myyjä täyttää lomakkeen puhelimella,

    • JSON tallentuu Driveen,

    • suunnittelijan työasemalla Drive-kansio on synkronoitu,

    • Python-ohjelma lukee JSON-tiedoston samasta sijainnista.

Google Drive -ratkaisu edellyttää tyypillisesti:

  • pientä erillistä skriptiä tai palvelua Drive-tallennusta varten (esim. Google Apps Script).

  • Videossa tätä ei vielä oltu viety loppuun, mutta todettiin, että ratkaisu on tehtävissä.

7. Mahdolliset lisätoiminnot web-käyttöliittymään

Vaikka videon esimerkki keskittyi JSON-tallennukseen, samaan HTML-sivuun voidaan halutessa lisätä:

  • PDF-raportin generointi (esimerkiksi JavaScript-kirjaston avulla),

  • lisäkenttiä (projekti, asiakas, myyjän nimi, päivämäärä),

  • tarkistuslogiikkaa (pakolliset kentät, arvojen rajat),

  • visuaalisia ohjekuvia tai schemoja.

Perusidea pysyy kuitenkin samana:

  • Web-lomake on vain keräys- ja tallennusväline.

  • Varsinainen “äly” ja geometria on Vertex G4 + Python + mittataulukko -yhdistelmässä.

8. Yhteenveto

Web-pohjainen ulkoinen käyttöliittymä toimii näin:

  1. Mittamalli ja Python-koodi toimivat taustalla Vertex G4:ssä kuten ennenkin.

  2. HTML-muotoinen web-lomake kysyy samoja muuttujia käyttäjältä.

  3. Lomake tallentaa arvot JSON-tiedostoon:

    • muuttujien nimet ovat samat kuin mittataulukossa,

    • arvot voivat olla lukuja tai koodattuja kyllä/ei-valintoja (esim. 1 = ei, 2 = kyllä).

  4. Suunnittelija ajaa Python-ohjelman, joka:

    • pyytää valitsemaan JSON-tiedoston kansiosta,

    • lukee arvot,

    • päivittää 3D-mallin ja muut dokumentit.

Tämän mallin etuja:

  • Käyttöliittymä toimii sekä tietokoneella että puhelimessa.

  • Mitään ohjelman asennusta ei tarvita myyjälle – pelkkä selain riittää.

  • JSON-tiedostot voivat sijaita missä tahansa, kunhan suunnittelijan on mahdollista lukea ne:

    • paikallinen levy, verkkojaettu kansio, pilvipalvelu.

Kun tästä kokonaisuudesta ymmärtää roolit:

  • G4 + mittataulukko + Python = varsinainen suunnitteluautomaatio,

  • web-käyttöliittymä = erillinen lomake, joka vain kirjoittaa oikeanlaisen JSON-tiedoston,

on web-pohjaisen ulkoisen käyttöliittymän toiminta helppo hahmottaa ja laajentaa omaan käyttöön.