Iemand hier verstand van modern JS/HTML frontend development

Gewoon even offtopic praten over van alles en nog wat.

Moderator: Moderators

Plaats reactie
Gebruikersavatar
DaBit
Donateur
Berichten: 7634
Lid geworden op: 05 dec 2012 13:48
Locatie: Oss

Iemand hier verstand van modern JS/HTML frontend development

Bericht door DaBit » 27 jun 2017 18:42

Ik ben wat aan het pierewaaien met een stuk techniek waar ik totaal geen kaas van gegeten heb: frontend ontwikkeling, dus wat op het apparaat van het poppetje dat het apparaat bedient draait.

Omdat ik niet leer als ik geen zinnige toepassing heb, heb ik verzonnen dat ik LinuxCNC een HTML5+Javascript GUI wil geven. Voordeel is dat je die meerdere kunt draaien, en op apparaten die jou uitkomen. Het schermpje aan de machine, maar ook je tablet of de PC in het kantoor.
Het ding dat LinuxCNC draait hoeft dan geen grafische gebruikersinterface meer te doen, en kan gereduceerd worden tot een ARM-processortje met WiFi op een bordje van 10-25 euro.

De huidige opzet is dit (niet compleet):
Afbeelding

LinuxCNC kletst via normale TCP (met of zonder TLS) verbindingen met een MQTT broker 'ergens'. MQTT hiervoor is eigenlijk misbruik, maar een mooi protocolletje voor dit doel. Het werkt als dit forum: gebruikers posten berichten in een topic, en anderen krijgen een 'er is een nieuw bericht gepost' notificatie en kunnen die berichten lezen. Heel simpel, heel rechttoe-rechtaan, MQTT broker heeft amper geheugen en CPU-tijd nodig en de latency is laag. Maar tegelijkertijd kan ik vele onderdelen van een 'machine' in topics laten posten zonder dat ze van elkaar moeten weten of zelfs maar op hetzelfde stukje hardware hoeven draaien. Verder heb je nog een paart extra handige features zoals 'wat moet er gebeuren als iemand zomaar verdwijnt?'

Nog mooier is dat de meeste MQTT brokers (in mijn geval Mosquitto) ook via een websocket kunnen kletsen. Kijk, en daarmee is het pad naar een browser vrijgemaakt. Een HTML5+Javascript applicatie krijgt direct al die leuke data binnen en kan door zelf in topics te posten de machine besturen.

Het leuke van een 'statische' JS+HTML applicatie is weer dat ik die makkelijk kan 'compileren' naar Android/iOS/Windows/Linux apps. En al doe ik dat niet, dan is een paar statische pagina's serveren ook voor een processorbordje van 10-25 euro geen noemenswaardige belasting. Alles kan dus draaien op goedkoop ARM-spul. Raspberry Pi Zero, 4x L6470 stepperdrive van een tientje, wat voeding voor het spul, reken zelf maar uit waar dat op uit komt.

In het simpelste geval draaien die HTTP server en MQTT broker op het CPU bordje, gedraagt dat CPU bordje zich als WiFi-accesspoint, en verbind je een tablet of telefoon daarmee. Verder heb je op het lokale schermpje (if any..) dan een fullscreen browservenster openstaan, hoppa, je bedieningspaneel.
In een ingewikkelder geval draait de MQTT broker online en kletst de machine via internet. Dan kun je op vakantie zo af en toe nog even controleren of de 3D printer nog wel lekker bezig is met de printjob van 12 dagen.
En zo zijn er nog wel meer configuraties te bedenken.

Nu, dat 'laat LinuxCNC kletsen met de MQTT broker' heb ik voor elkaar. Eigenlijk is de hele Python-interface beschikbaar vanuit Javascript in de browser:
Afbeelding

Maar dan de andere kant. Daar zie ik door de bomen het bos niet meer zo. Vooralsnog zie ik er wel heil in om Polymer te gebruiken om WebComponents te bouwen van een 'machine-aanuit-knop', een DRO, een MDI venster, etc. Dan is een aangepaste gebruikersinterface zo gebouwd, en het is voor mij eigenlijk meer een studie dan wat anders, dus hoog inschieten :mrgreen:

Maar ik zou wel iemand kunnen gebruiken die zo af en toe kan zeggen 'dat kun je beter zo doen' en 'daar moet je voor oppassen', want ik word duizelig van de hoeveelheid informatie.
Zitten die mensen hier?

Gebruikersavatar
DaBit
Donateur
Berichten: 7634
Lid geworden op: 05 dec 2012 13:48
Locatie: Oss

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door DaBit » 22 nov 2017 00:09

Die hele Web-bende bevalt me niet. Je moet toch van behoorlijk goede huize komen wil het een beetje universeel werken, zeker als je ook zaken als WebGL wil gebruiken.

Maar eens over een andere boeg gegooid en Qt geprobeerd. Daar moest ik toch eens wat mee doen, is nodig voor wat anders. Leuk spul is dat. Gewoon de kern in C++ in plaats van die Javascript/HTML/CSS mengelmoes (en heel veel vlotter) en je hebt wat minder last van browser-nukken.

Nu werkt leren door een tutorial van A tot Z te doorlopen bij mij voor geen centimeter, beter pak ik een soort van doel en werk ik daar naar toe. Dus dit zaakje maar eens opgepakt met behulp van Qt. Ik vind het resultaat van een aantal uurtjes pierewaaien en veel schelden al best aardig:


Link

Gebruikersavatar
Breaker
Donateur
Berichten: 1390
Lid geworden op: 26 mei 2015 22:43
Locatie: Nabij Antwerpen
Contacteer:

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door Breaker » 22 nov 2017 08:52

Ja, werkt leuk toch?

Een client is zo gek nog niet, heb je niet te maken met tien verschillende browsers, jammer genoeg wel met duizend verschillende apparaten :shock: Maar zeker met wat c++ achtergrond en een gerichte client heb je zo wel direct een voordeel.

Dat webspul heeft ook zo z’n toepassing, misschien als je toegang wilt geven tot de freesmachine als een cloud service: CNCaas.nl o.i.d. :mrgreen:
Geduld is een schone zaak, frezen niet...

Gebruikersavatar
DaBit
Donateur
Berichten: 7634
Lid geworden op: 05 dec 2012 13:48
Locatie: Oss

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door DaBit » 22 nov 2017 13:47

Uiteindelijk wil ik zo af en toe iets maken dat telefoon of tablet gebruikt om met een ESP32 oid te kletsen via Bluetooth of WLAN, en heel LinuxCNC op <75 euro aan hardware inclusief de stepperdrives is ook een leuke 'because we can'.

Nu heb ik geen tijd en zin om me 83 toolkits eigen te maken, en ik dacht dat HTML5+JS zo'n beetje de heilige graal was. Browsers zijn overal, spul dat wifi's kan praten kan ook statisch HTML serveren, met Cordova is er een mobiele app te fabriceren van dat HTML-spul, en met Electron een Windows/Linux applicatie, indien gewenst. Beiden bieden in theorie ook toegang tot de connectivity en sensoren.

Maar de praktijk is wat weerbarstiger. Dat hele HTML is niet gemaakt om applicaties te bouwen; zaken simpelweg positioneren waar je ze hebben wil is al een behoorlijk drama. En dat Javascript is niet gemaakt om er meer mee te doen dan een menuutje. Voor een 'DRO component heeft het LinuxCNC component nodig voor z'n data, dus die moet-ie laden. Het spindelcontrole-component heeft ook LinuxCNC nodig, maar hoeft die niet meer te laden omdat het al gebeurd is' moeten er eigenlijk al externe modules zoals RequireJS gebruikt worden, en dan maar bidden dat het niet bijt met iets anders wat ook nodig is en hopen dat het ook nog werkt op iets anders als Chrome en te traag of geheugenhongerig word (die browsers vreten megabytes alsof het smarties zijn).

Bleh. Allemaal niks voor een vonkenboer die zo af en toe op kleuterschoolniveau software klopt.


Met dat Qt gebeuren was ik in enkele uren op dreef, en C++ is een voordeel. Stel dat ik nog een OpenGL preview erbij wil jongen, dan kan ik nu de interpreter van LinuxCNC gebruiken en voor het verwerken van de resulterende grote hoeveelheden data is C toch ook een eind vlotter dan scripttaaltjes.

deargonaut
Berichten: 191
Lid geworden op: 03 aug 2015 11:18
Locatie: Regio Haarlem
Contacteer:

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door deargonaut » 23 nov 2017 11:30

Je kunt overwegen om wel JS (wat inmiddels een behoorlijk volwassen taal aan het worden is), te gebruiken binnen de 'kernel' van Chrome: Chromium. Maar dat doe je dat niet al met de app in je filmpje?

Je gebruikt CSS om je elementen te positioneren, het liefst 'responsive', zodat het meeschaalt met het scherm van een gebruiker. OpenGL is ook zeker te gebruiken in JS.

Als je je vraag iets gerichter kan maken kan ik je absoluut op weg helpen. Ik denk namelijk dat het vrij makkelijk te realiseren is wat je wilt.

Gebruikersavatar
DaBit
Donateur
Berichten: 7634
Lid geworden op: 05 dec 2012 13:48
Locatie: Oss

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door DaBit » 23 nov 2017 15:12

Met dat responsive heb ik ook gespeeld (Bootstrap).
Dat is harstikke leuk voor een E-mail client, forum, social media appje, bla. Maar ik vind het niks voor een 'apparaat frontpaneel', en daar is het me stiekum om te doen. Neem een versterker bijvoorbeeld: het is niet handig als de volumeknop van je versterker opeens onder de bass en treble knoppen schuift.

Chromium meelinken ben je bijna verplicht toe als je Cordova of Electron gebruikt, anders ben je aan de goden overgeleverd. De standaard WebView van oudere Androids snapt toch vooral veel niet. CSS box model is problematisch, ES6 is problematisch. Maar link je Chromium mee dan zit je gelijk aan ~50MB pakketgrootte (opzich geen drama) en het opstarten duurt een kleine eeuwigheid op iets minder moderne telefoons.

WebGL is verder inderdaad mogelijk, en lijkt als 2 druppels water op gewoon OpenGL. Maar met een hoop haken en ogen. Kwa fatsoenlijke support kom je al gauw wederom terecht bij Chrome/Chromium. Maar dan nog werkt het niet overal waar reguliere OpenGL (ES) wel werkt. Voorbeeld: onder Linux met een videosysteem dat schakelt tussen de ingebakken Intel en externe nVidia (oftewel: veel laptops) zegt Chrome 'bekijk het maar'.
En hier geld ook weer dat Javascript niet de beste keus is voor manipulatie van relatief grote hoeveelheden data. WebGL werkt het beste als de displaylists en shaders eenmaal richting de renderer gaan en je daarna voornamelijk de transformatiematrices modificeert. Een CNC-backplot is veel vervelender.

Het kan allemaal wel (zie ook bijvoorbeeld OnShape), maar voor een lone wolf is een applicatie bouwen als je eigenlijk ook een applicatie hebben wil zo'n gek idee nog niet.

deargonaut
Berichten: 191
Lid geworden op: 03 aug 2015 11:18
Locatie: Regio Haarlem
Contacteer:

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door deargonaut » 23 nov 2017 15:58

DaBit schreef:Met dat responsive heb ik ook gespeeld (Bootstrap).
Dat is harstikke leuk voor een E-mail client, forum, social media appje, bla. Maar ik vind het niks voor een 'apparaat frontpaneel', en daar is het me stiekum om te doen. Neem een versterker bijvoorbeeld: het is niet handig als de volumeknop van je versterker opeens onder de bass en treble knoppen schuift.
Wellicht kun je een beetje spelen met blokken.
Dan kan je alles als 'tabblad' maken bijvoorbeeld (soort van jouw app). Op grotere schermen schaalt dat mee naar niet tabbed.
Verder heb je ten alle tijden de controle over dat de 'volumeknop' boven de andere knoppen staat.
Maar waar je op een groot breed scherm de volumeknop naast de bass en treble hebt zitten, heb je op een klein scherm de volume knop volledige breedte en daaronder twee keer de halve breedte.
DaBit schreef: Chromium meelinken ben je bijna verplicht toe als je Cordova of Electron gebruikt, anders ben je aan de goden overgeleverd. De standaard WebView van oudere Androids snapt toch vooral veel niet. CSS box model is problematisch, ES6 is problematisch. Maar link je Chromium mee dan zit je gelijk aan ~50MB pakketgrootte (opzich geen drama) en het opstarten duurt een kleine eeuwigheid op iets minder moderne telefoons.
Bootstrap V4 werkt met flexboxes, dat is behoorlijk chique.
Wat betreft RequireJS, dat maakt het mogelijk om alleen de data in te laden die nodig is.
Maar het is een beetje de vraag wat je wilt. Wil je een web oplossing of een (semi-)native oplossing?
DaBit schreef: WebGL is verder inderdaad mogelijk, en lijkt als 2 druppels water op gewoon OpenGL. Maar met een hoop haken en ogen. Kwa fatsoenlijke support kom je al gauw wederom terecht bij Chrome/Chromium. Maar dan nog werkt het niet overal waar reguliere OpenGL (ES) wel werkt. Voorbeeld: onder Linux met een videosysteem dat schakelt tussen de ingebakken Intel en externe nVidia (oftewel: veel laptops) zegt Chrome 'bekijk het maar'.
En hier geld ook weer dat Javascript niet de beste keus is voor manipulatie van relatief grote hoeveelheden data. WebGL werkt het beste als de displaylists en shaders eenmaal richting de renderer gaan en je daarna voornamelijk de transformatiematrices modificeert. Een CNC-backplot is veel vervelender.

Het kan allemaal wel (zie ook bijvoorbeeld OnShape), maar voor een lone wolf is een applicatie bouwen als je eigenlijk ook een applicatie hebben wil zo'n gek idee nog niet.
Die laatste zin snap ik niet helemaal.
Wat betreft WebGL check eens https://threejs.org/. Er zijn volgens mij mogelijkheden om de native kaart aan te spreken.
Verder kun je altijd kijken op https://caniuse.com/, hier vul je een functie of css attribuut in en zie je hoe dit ondersteund wordt.

Ik vind het behoorlijk interessant als iets als dit lukt.
Zelf ben ik bezig geweest om via het web 3d modellen om te zetten naar een uniform 3d-formaat, en ben heel lang op zoek geweest naar een 'automatisch' programmeerbare CAM-software. Dat eerste lukte, maar helaas bestaat die cam-software niet. Maar op die manier - samen met zo'n frontend - kun je inderdaad een CNC-A-A-S realiseren.
Hoe dan ook, als je meer inhoudelijke hulp nodig hebt, hoor ik dat graag.

Gebruikersavatar
DaBit
Donateur
Berichten: 7634
Lid geworden op: 05 dec 2012 13:48
Locatie: Oss

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door DaBit » 24 nov 2017 15:13

Ik hou het voorlopig op de native oplossing. In vergelijking met dat Qt spul heeft Web voor mij weinig voordelen. Ik ben meer fan van C/C++ dan de gemiddelde scripttaal voor de logica, en voor de dosis gemak heb je dat QML+JS nog.

De twee komen trouwens dichter naar elkaar toe; asm.js/webassembly en Emscripten zijn toch veelbelovend. dit is toch knap indrukwekkend voor een 'browsertje'.

En Qt komt ook die kant op: klik.

Lijkt me dus geen slecht idee om het gehobby wat rondom dat Qt te houden; tijd vinden voor 1 framework is al lastig genoeg. En het feit dat Qt al 20 jaar meegaat zegt ook wat.

spixycat
Berichten: 6
Lid geworden op: 14 dec 2017 17:34

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door spixycat » 15 dec 2017 10:34

Klopt het dat je in feite een "real time" achtige weergave van data zou willen weergeven?

Kan je een voorbeeld geven om zo een idee te krijgen wat je zou willen realiseren?

Gebruikersavatar
DaBit
Donateur
Berichten: 7634
Lid geworden op: 05 dec 2012 13:48
Locatie: Oss

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door DaBit » 15 dec 2017 12:37

Niet alleen weergave van data. Ik wil de hele userinterface losgekoppeld hebben van de CNC-control, en de communicatie via een broker. Zo hoeven de control en de gebruikersinterface niet meer op hetzelfde stukje silicium te draaien.

Daarmee bereik ik een aantal dingen:
- De processor voor de CNC-control kan een stuk lichter, en daarmee energiezuiniger en goedkoper. Aangezien het op een Raspberry Pi B+ model 1 werkt zou het op een Raspberry Pi Zero van EUR 6,99 net zo goed moeten werken. In principe kun je er zelfs een 4-assige CNC besturing inclusief 80V/10Amp stepperdrives mee bouwen onder de 100 euro.

- Ik kan meer dan 1 userinterface draaien voor dezelfde CNC-control. Bijvoorbeeld op het touchscreen bij de machine, op de Windows-machine in het verwarmde kantoor, en op de telefoon of tablet zodat je om je grote router heen kunt lopen. Ik noem maar wat. Vrijheid.

- Omdat ik N userinterfaces ondersteun en ze best allemaal een deel mogen doen is het ook mogelijk om een pendant te zien als extra userinterface. Alleen heeft die dan enkel jogwieltjes en eventueel een displaytje voor de coordinaten. Conceptueel heel simpel dus, niks geen aparte ingangen voor pendants die functie bla weer niet ondersteunen. Kwa implementatie ook; het komt neer op berichten afleveren bij de broker en luisteren naar informatie die jou interesseert. En dat is iets dat elk IoT-platformpje standaard al kan. En wil ik dan een pendant voor aan de machine en eentje achteraan de machine, nou prima, dan doe ik dat toch? Kwa kosten: een ESP8266 doet de truuk al en dan hebben we het over een euro of 3. Display, knoppen, etc. naar smaak toe te voegen. Pendant stuk? Telefoon is minder ideaal, maar die doet het ook. Kun je toch je ding doen. Vrijheid.

- Vanwege de broker hoeven CNC-sturing en UI niet perse op hetzelfde netwerk aanwezig te zijn. Als je telefoon overschakelt van WiFi naar 4G dan is dat geen probleem, en als je wil controleren of de machine nog vrolijk doorloopt terwijl je in de lokale vetschuur de vrijdagmiddaghap aan het consumeren bent kan dat ook.
Aan de andere kant is gebruik maken van een broker als losstaand 'ding' ook al niet verplicht; die kan evengoed op de CNC-sturing zelf draaien. Vrijheid.

- Losse producenten van data (webcam, niveausensor van je koelmiddel, verzin maar wat) kunnen hun data separaat van de bestaande zaken aanleveren bij de broker, en desgewenst kan het zelfs door een separaat proces op de CNC-besturing of zelfs een ander fysiek printplaatje geconsumeerd worden.
Dat zal de gebruikers een worst wezen, maar voor ontwikkelaars is het heerlijk. Dan kun je iets toevoegen zonder het risico te lopen dat iets bestaands omvalt.

spixycat
Berichten: 6
Lid geworden op: 14 dec 2017 17:34

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door spixycat » 15 dec 2017 13:57

Volgens mij heb je het in feite over een zgn https://nl.wikipedia.org/wiki/Model-vie ... ller-model

Wat je zou willen bereiken is (denk ik) dat je meerdere Views hebt die ieder op een specifieke manier (en los van elkaar) de data en ook de veranderingen in de data weergeven.

Hoe en waar je de Views laat draaien en hoe deze Views hun informatie krijgen is nl niet relevant.

Hebben we het mss over het zelfde?

Gebruikersavatar
DaBit
Donateur
Berichten: 7634
Lid geworden op: 05 dec 2012 13:48
Locatie: Oss

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door DaBit » 15 dec 2017 15:47

MVC is een ontwerppatroon, dat bruikbaar is voor alle componenten in het hele systeem. Aan de CNC-control kant is het stuk programmalogica dat met de broker praat een view op de data die de motioncontroller produceert (model) en de controller die de status modificeert.
Aan de UI-kant heb je ook zoiets: er komt data het model binnen via een link met de broker (pubsub, als je de buzzwordbingo wil winnen), heb je een view met databindings (observable/observer) die de data representeert, en uiteraard ook weer de verfoeide 'controller'.

Overigens heb ik er officieel de ballen verstand van; ik ben hooguit hobbymatig softwareboer. Maar tegen de tijd dat je zaken gaat partitioneren dan volgen dit soort zaken eigenlijk automatisch, en dan blijkt het achteraf een naam te hebben :lol:

Officieel heb ik trouwens een bloedhekel aan 'controllers'. Meestal als je iets 'controller' wil gaan noemen dan is dat omdat de functionaliteit vaag en los gedefinieerd is. Nauw gerelateerd aan 'This is where the magic kicks in' en 'wat het doet weert ik niet maar het werkt, afblijven dus'. Vroeg of laat doen die 'controllers' je een keer pijn.

spixycat
Berichten: 6
Lid geworden op: 14 dec 2017 17:34

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door spixycat » 15 dec 2017 20:10

mss een client in puur Java schrijven dus (zeker) niet (voor alle duidelijkheid) in Javascript

zie bv https://developers.google.com/api-clien ... /dev-guide

Gebruikersavatar
DaBit
Donateur
Berichten: 7634
Lid geworden op: 05 dec 2012 13:48
Locatie: Oss

Re: Iemand hier verstand van modern JS/HTML frontend develop

Bericht door DaBit » 15 dec 2017 20:16

Ik hou het lekker bij C/C++. Voor mijn doeleinden is dat meestal de beste en zo niet enige keuze en de tijd en zin om me de grollen van 83 talen eigen te maken heb ik niet.

Qt is ook leuk, die hou ik erin.

Plaats reactie