Web-pohjainen ulkoinen käyttöliittymä

Video aiheesta

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

Web-pohjainen ulkoinen käyttöliittymä

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.

Related Articles