Konvertovanje WinForm aplikacije u web-based aplikaciju

[MasterChief2]

Pozdrav svima. Imam jedan problem koji ne znam kako da resim, pa mi treba savet nekih iskusnijih ljudi.. Naime, danas sam imao razgovor sa klijentom koji zeli da postojecu desktop aplikaciju koja je kucana u .NET C# (WinForm app) prebaci u neko web baziranu aplikaciju (Electron + React/Vue). Problem u svemu tome je taj sto ta WinForm aplikacija zavisi od "API"-a koji se vrti na Host masini. U pitanju je DLL fajl u kom se nalaze C-ovske exportovane funkcije (po prilozenoj dokumentaciji) koje ova WinForm aplikacija poziva na klik odredjenih dugmica. Razlog zbog kog klijent zeli da sve prebaci u web baziranu aplikaciju je sledeci:
1. Trenutni dizajn je katastrofa i koristi default dizajn Windows-a (oni hoce nesto modernije)
2. U buducnosti zele da dodaju podrsku za logovanje, cuvanje slike, monitoring zakacenih kamera itd. i ne zele da im aplikacija bude samo za Windows sistem

Sta radi trenutna aplikacija:
1. Kada je otvorite, pritisnete dugme koja vam dozvoljava da ucitate neku sliku
2. Zatim se ta slika ucita i prosledi se nekoj od funkcija iz importovanog DLL fajla. Ove funkcije takodje primaju po referenci niz u koji ce biti smesten "protobuf object" (sta god to bilo, brzo guglanje kaze da je to neki tip odgovora, nalik JSON-u, ali nije string)
3. Taj DLL fajl radi nesto sa slikom, zatim je salje nekom servisu na njihovom cloud-u i taj servis vraca modifikovanu sliku, protobuf object i povratna vrednost funkcije je jedna od DEFINE vrednosti (vrednost koja signalizira success ili neku od gresaka)

Sta oni ocekuju od mene:
1. Hoce da se aplikacija prosiri tako da ima pristup kamerama koje su zakacene preko USB-a na racunar
2. Da ima dugme koje ce da uradi capture image sa kamere
3. I da sam dizajn aplikacije bude mnogo lepsi

Problem u svemu ovome jeste kako iz JavaScript (ili Go-a/Python-a/Jave) pozvati neku C-ovsku funkciju iz DLL-a? Ja koliko znam u Python-u, JS-u i Javi nije moguce importovati DLL. Moja pitanja su sledeca:

1. Da li napraviti mozda neki REST API u C++ sa nekim lightweight serverom koji bi importovao taj DLL i koji bi se ponasao kao Proxy izmedju moje aplikacije i tih funkcija iz DLL-a?
2. Ako bi ih nekako nabedio da aplilaciju radimo u C# sta koristiti za stilizovanje? Nekada davno sam radio WinForm aplikacije u srednjoj skoli i WPF na fakultetu i secam se da su bile sto se tice dizajna katastrofa. (nalik Win Classic temama)

Ako imate bilo kakav predlog, znacilo bi mi mnogo. Unapred hvala!

 

[golosdobra]

Ja koliko znam u Python-u, JS-u i Javi nije moguce importovati DLL

Moguće je. Izguglaj "Call C code from <js/java/...>" ili "<js/java/...> Foreign Function Layer". A možeš i da napraviš backend u C# i nastaviš sa manje-više istim kodom i da bude cross-platform sa mono runtime-om.

1. Da li napraviti mozda neki REST API u C++ sa nekim lightweight serverom koji bi importovao taj DLL i koji bi se ponasao kao Proxy izmedju moje aplikacije i tih funkcija iz DLL-a?

Može, ali je najlakše to odraditi u Pythonu.

2. Ako bi ih nekako nabedio da aplilaciju radimo u C# sta koristiti za stilizovanje? Nekada davno sam radio WinForm aplikacije u srednjoj skoli i WPF na fakultetu i secam se da su bile sto se tice dizajna katastrofa. (nalik Win Classic temama)

Imaš brdo tema i za WinForms i za WPF. Pogledaj recimo https://wpfui.lepo.co/ ili https://github.com/Carlos487/awesome-wpf

 

[MasterChief2]

Moguće je. Izguglaj "Call C code from <js/java/...>" ili "<js/java/...> Foreign Function Layer". A možeš i da napraviš backend u C# i nastaviš sa manje-više istim kodom i da bude cross-platform sa mono runtime-om.

Gledao sam neke module za Node.js. node-ffi nije dobio apdejt od 2020, bio je neki fork njega koji je isto obustavljen. Nasao sam neki Koffi, ali mi nije bas najjasnije kako radi. Konkretno mi nije jasno kako ja da prosledim neki array is JS (koji nema tip podatka) u C funkciju po referenci. Da li to uopste moze.. Zakacio sam u prilogu sliku zipovanog "API-a" (oni ga tako zovu) i header file koji ima sve te funkcije (funkcije koje oni koriste u ovoj njihovoj aplikaciji su ReadAllModels(...) i TokenLogin(...) ). Doduse u ovoj njihovoj WinForm aplikaciji nigde ne importuju taj header file, samo "dank.dll".

Može, ali je najlakše to odraditi u Pythonu.

Dakle mislis da bi mi najlakse bilo da napravim neki Proxy u Pythonu koji bi importovao taj DLL, njemu bi slao sliku u HTTP zahtevu, a zatim nakon zavrsetka poziva funkcije iz tog API-a vratim response sa svim podacima? Da li imas mozda neki tutorial koji se bavi ovom tematikom? Pravio sam nekada Proxy za Xbox dok nisam portovao noviji OpenSSL na njega, ali tamo nisam imao nikakve DLL-ove..

Imaš brdo tema i za WinForms i za WPF. Pogledaj recimo https://wpfui.lepo.co/ ili https://github.com/Carlos487/awesome-wpf

Problem u svemu ovome je sto ja moram imati Demo gotov do utorka/srede. To podrazumeva pristup kameri i koristenje slike sa te kamere umesto uploada + da to bude koliko toliko lepo. Ako budu zadovoljni sa Demo-om onda idu pregovori oko daljeg posla. Tako mi je barem sef rekao.

WinForm radio u srednjoj skoli, pravio kalkulator i slagalicu, ne znam ni odakle da krenem. WPF radio kao student pre 4 god. i to je dizajn bio full old-school, fazon Win98. Morao bih se prisetiti kako se uopste kuca u WPF-u pa tek onda da pogledam ove teme koje nikada koristio nisam. Najjednostavnija solucija za mene bi bila da napravim neki Proxy, a da UI radim u Quasar Framework-u.

 

[golosdobra]

Gledao sam neke module za Node.js. node-ffi nije dobio apdejt od 2020, bio je neki fork njega koji je isto obustavljen. Nasao sam neki Koffi, ali mi nije bas najjasnije kako radi.

Kad je poslednji apdejt - i nije toliko bitno; dokle god radi posao, super. Problem je što je debagovanje katastrofa za Node.js (barem moje skromno mišljenje). Paketi su lakši nego direktna integracija sa Node-om (+ što ti imaš samo dve funkcije koje pozivaš).

Konkretno mi nije jasno kako ja da prosledim neki array is JS (koji nema tip podatka) u C funkciju po referenci. Da li to uopste moze..

Pa imaš "serialized" tip koji dobijaš od v8 engine-a koji koristi posebnu internu strukturu koju ne možeš direktno da proslediš u eksterni C kod. Ono što tebi treba je pointer koji pokazuje na lokaciju gde počinje prvi element i gde svaki sledeći je odmah za njim u memoriji. Tako da bi morao da prođeš kroz array koji dobiješ od v8 engine-a, konvertuješ svaki element u potreban tip podatka i recimo sačuvaš u std::vector. Posle proslediš u C kod .data() kao pointer i .size()*sizeof(TipPodatka) kao argument za veličinu array-a.

Drugi problem koji (verovatno) imaš je (a)sinhronizacija (ako će ovaj mali proxy servlet služiti više od jednog računara).

Dakle mislis da bi mi najlakse bilo da napravim neki Proxy u Pythonu koji bi importovao taj DLL, njemu bi slao sliku u HTTP zahtevu, a zatim nakon zavrsetka poziva funkcije iz tog API-a vratim response sa svim podacima?

Da. Pogledaj fastapi, flask ili django. Dobiješ REST api u tuce linija. Što se tiče pozivanja funkcije iz eksterne datoteke, gledaj prevashodno cffi biblioteku (ali postoje i druge). Ako projekat ikad postane prevelik, razmisli o https://github.com/ctypesgen/ctypesgen i sličnim solucijama.

Sad ne znam da li je namera projekta da nudi real-time image processing ili je više tipa one-shot image processing? Ako je ovo prvo, onda se drži C# i WPF-a (manje latence, manjak HTTP overhead-a, itd).

 

[Jera]

U WinForms možeš da dizajniraš komponente po svojoj volji, ne postoje ograničenja. Možeš da napraviš UI u Photoshop-u, pa da definišeš regione kao tastere...
Evo par primera formi i komponenti, samo kao početna ideja (na prvoj slici su 2 winforms prozora jedan preko drugog, druge dve su forme sa standardnim i custom komponentama i na kraju custom pan/tilt/zoom kontrola za upravljanje kamerom) :



Edit: evo i jednog custom VU-metra koji je bukvalno crtan u C# - svi elementi komponente su programski generisani:

 

[MasterChief2]

Sad ne znam da li je namera projekta da nudi real-time image processing ili je više tipa one-shot image processing? Ako je ovo prvo, onda se drži C# i WPF-a (manje latence, manjak HTTP overhead-a, itd).

Ovo bi trebali raditi, ako taj Demo prodje kako treba:

1. Spojler: Buduci taskovi

   1. interface:
      • support of USB and industrial cameras for image access.
      • Use of the industrial camera APIs for image acquisition.
        • IDS peak
        • Mobotix
        • Standard USB camera driver
      • Modes for image capture:
        • Capture Mode (Take image by pressing button on screen or a key on a keyboard -separate storage of the image).
        • Live Mode (Live Camerastream)
        • Automatic Mode (taking image after a few settings)
      • Camera should be automated recognized
   2. image analysis API:

   [*]- Use of DENKAPI
   
   - Checking the licence via dongle or logging in via the DENK VISION AI Hub platform
   
   

   • Evaluate on CPU or GPU via DirectML in Windows
   • presentation of results:
     • Simple and intuitive presentation of the evaluation results. See UI
   • logging functions:
     • Data logging
       • Save image or evaluated image
       • Save results of image (txt File)
       • Save results in CSV

   [*]
   
   

   1. performance and accuracy:
      • Best performance of the process for:
        • Taking images
        • Evaluating images
        • Showing the results
   2. Backend:
      • Modular backend - for changes or additional features
      • Reduced to simple actions
      • Rely on good standard
      • Autostart compatible (by starting the pc, the programm should start as well)
   3. ease of use:
      • Simple and intuitive user interface for configuring and using the programme
        • 2 Main Pages:
          • Operating View
            • Show Image & Evaluated Image in the same frame
            • Colored background (red/grenn/blue) for showing the evaluation results
            • Full Screen Mode
          • Setting View
            • Chose Camera
            • CameraLivestream for setting up Camera
            • Set AutoFokus
            • Choose Model / Folder
            • Choose Recipe /Folder
            • Chose Config/Datastorage
            • Toogle Evaluation Mode --> Disable Analysis
            • Toogle "Show AI Annotations"
            • SignIn to Plattform
            • Set Image Taking Time (1s to 1 min)
            • Toggle Datalogging
            • Show statistics (Counting of imgages, Good/Bad and Results history)
      • Frontend/UI
        • Easy to Use
        • Modern --> can be based on microsoft Framework or other simlple frame works
        • Touchscreen compatible (should be usable by touchscreen
        • Light/bright design
      • Data logging
        • Save image or evaluated image
        • Save results of image (txt File)
        • Save results in CSV

   [*]8. Compatibility:
   
   

   • Compatibility with different operating systems Win 10 and up
   • Save image in commen image format (png/jpeg/bmp)

   [*]9. documentation and support:
   
   

   • Quality is the most important (Program has to work)
   • Documentation of used open Source libraies
   • documentation of the program for further support (your or our side)
   • Support and further feature development your be easily possible
   • Additional after MVP
     • Upload images to DENK VISION AI Hub Platform (easy select Button)

   [*]

U WinForms možeš da dizajniraš komponente po svojoj volji, ne postoje ograničenja. Možeš da napraviš UI u Photoshop-u, pa da definišeš regione kao tastere...
Evo par primera formi i komponenti, samo kao početna ideja (na prvoj slici su 2 winforms prozora jedan preko drugog, druge dve su forme sa standardnim i custom komponentama i na kraju custom pan/tilt/zoom kontrola za upravljanje kamerom) :

Pogledajte prilog 390739 Pogledajte prilog 390740 Pogledajte prilog 390741 Pogledajte prilog 390742

Edit: evo i jednog custom VU-metra koji je bukvalno crtan u C# - svi elementi komponente su programski generisani:
Pogledajte prilog 390743

Sve je ovo super, ali moje znanje WPF-a/WinFormi je ravno nuli, plus oni hoce neki UI nalik modernim web sajtovima. A i ove sve taskove koje bi oni da rade ne znam koliko je pametno raditi u WinForm aplikaciji. Photoshop nemam pojma, za sve to morao bi da cimam dizajnere da mi rade.

 

[golosdobra]

Po zahtevima za završnu fazu projekta, tebi ne treba nikakav "backend" (u web smislu), tebi treba samo dodatan service/daemon pored glavne aplikacije koji će raditi u pozadini.

Moj savet ti je da ostaneš na C#, precrtaš Electron, Python, Vue, itd. ideje i umesto toga naučiš osnove XAML-a (što je suštinski varijacija HTML-a i CSS-a; što je krajnje prosto) i ne komplikuješ dalje bespotrebno.

 

[MasterChief2]

Vazi, hvala na pomoci!

 

[Solesoslav]

Vazi, hvala na pomoci!

Sta si na kraju napravio?

 

[MasterChief2]

Napravio sam neki jednostavan UI u React-u sa Material UI i vrepovao sve to uz pomoc Electrona kao Desktop aplikaciju. U Pythonu sam napravio wrapper klasu oko tog DLL-a uz pomoc ctypes-a. Tj. kreirao sam abstaktnu DLL klasu koju nasledjuje konkretna DLL klasa, ucitava DLL i rade implementaciju svih metoda. Na kraju se svodi na instanciranje te klase i pozivanje metoda kao funkcija. Sve je radilo super i nije bilo nikakve razlike po pitanju brzine u poredjenju sa njihovim kodom. Na poslednjem call-u su rekli da su zadovoljni, ali da bi oni kao isli sa GO jezikom, a ne Python-om jer su pre koristili Python i nije im se svideo jer su bundlovane aplikacije bile glomazne. I rekli su javice se za sledece korake, medjutim evo vec 9 dana je proslo i ni traga ni glasa od njih.

Python servis je bio oko 7MB kada se bandluje sa pyinstaller, jedino je Electron zauzimao dosta, oko 100MB. Tako da bi bre isao sa Quasar frejmvorkom ili sa Tauri frejmvorkom.

 

[Deleted member 1735]

Napravio sam neki jednostavan UI u React-u sa Material UI i vrepovao sve to uz pomoc Electrona kao Desktop aplikaciju. U Pythonu sam napravio wrapper klasu oko tog DLL-a uz pomoc ctypes-a. Tj. kreirao sam abstaktnu DLL klasu koju nasledjuje konkretna DLL klasa, ucitava DLL i rade implementaciju svih metoda. Na kraju se svodi na instanciranje te klase i pozivanje metoda kao funkcija. Sve je radilo super i nije bilo nikakve razlike po pitanju brzine u poredjenju sa njihovim kodom. Na poslednjem call-u su rekli da su zadovoljni, ali da bi oni kao isli sa GO jezikom, a ne Python-om jer su pre koristili Python i nije im se svideo jer su bundlovane aplikacije bile glomazne. I rekli su javice se za sledece korake, medjutim evo vec 9 dana je proslo i ni traga ni glasa od njih.

Python servis je bio oko 7MB kada se bandluje sa pyinstaller, jedino je Electron zauzimao dosta, oko 100MB. Tako da bi bre isao sa Quasar frejmvorkom ili sa Tauri frejmvorkom.

Svaka ti cast na trudu.
Ja bi to oterao ili bi ih odrao posteno za to budzenje.
Najgore je prerpavka starih budzeva.
Jedino ako je to softverska firma pa ti trazi da se dokazes, ali se plasim da ti nisu ukrali kod i otkacili te.

 

[MasterChief2]

Svaka ti cast na trudu.
Ja bi to oterao ili bi ih odrao posteno za to budzenje.
Najgore je prerpavka starih budzeva.

Ja sam placanjem nemam nista, za to je zaduzen sef A i nije mi trebalo mnogo vremena, 2 dana istrazivanja i 1 dan kucanja.

Jedino ako je to softverska firma pa ti trazi da se dokazes, ali se plasim da ti nisu ukrali kod i otkacili te.

UI im je bio dostupan na Digital Ocean-u radi testiranja da mogu da vide koliko vremenski treba da se slika posalje, obradi i dobije odgovor. A ja sam im preko screenshare-a pokazao kako izgleda u Electronu.