 Hello and welcome to my lightning talk about Qt Quick PCB remote user interfaces for machine tools. My talk will be in four parts. First I'm going to tell you who I am. Then I'm going to talk about the topic, the scope of the project which evolves around machine kit and open source machine control software. Then I'm going to talk about the user interface, the Qt user interface for machine kit and then I will present a few applications. My name is Alexander Rössler and I'm actually an embedded engineer but I'm involved in Qt and developing user interfaces with Qt longer than an MM embedded engineer actually. I'm also involved in some open source projects since some years and actually got involved into this project because I like to play with 3D printers and I was very dissatisfied with the available user interfaces in this area. First of all, what is machine kit? Machine kit is an open source software for controlling machine tools or actually a solution for machine control applications. It can be used, for example, for 3D printers, CNC machines, but not only, but also it's intended to be used, for example, for robots, quadcopters as driving layer. The whole idea is that it can work on first of embedded devices, embedded computers, but also on desktop computers, meaning Linux, and the user interface itself can run on desktop computers, smartphones and tablets and also on embedded devices. And why I actually started this project was because I was very dissatisfied with the available solutions. Machine kit evolved from the Linux CNC project and for anyone who knows Linux CNC, maybe anyone here? Okay, one guy. Yeah, the available user interface solutions are not very sophisticated. They're basically stuck somewhere in the 90s with Tikka Inter and all this very old school user interface frameworks. And so I actually started the Qt Quick VCP project. And one problem to solve was actually traditional machine control applications or the CNC applications work on one single computer, but since we're moving to embedded systems or single board computers, we have a problem. The graphical hardware is usually not strong enough to handle good user interfaces. And therefore the solution was to build a distributed system and to actually run the graphical user interfaces on the devices we all have used every day, for example tablets, smartphones or normal desktop computers. And to make this possible, we have developed a middleware called Machine Talk, which uses Serum Q or in the case of the Qt Quick VCP Nset MQT, a wrapper on Serum Q, the Google Protocol buffers and multicast DNS and SSD for service discovery. MachineKit actually is very nice not only for CNC applications because it allows to abstract the actual machine control configuration. Basically there are components, which can be for example very simple and logic end component or more sophisticated PAD controller or even a complete motion controller. And you can glue them together using signals. And so you can basically create machine control systems without even programming one line. And this is nice, this is very nice, but what should we do with it without nice user interfaces? And so for this reason I started the Qt Quick VCP project. VCP stands for Virtual Control Panel. This is what the user interfaces for MachineKit are traditionally called and that's where I get the name from. Basically it's a set of QML modules, which can be used to build user interfaces for MachineKit to be exactly remote user interfaces, meaning they can be run on an Android tablet or a desktop computer or even on the same device. The work we're using in machine talk, the cross-platform, the work on Android iOS and all the desktop platforms of course we're using Qt. And yeah, very nice about this, the idea is that you can remotely start new machine control instances meaning if you have a single computer that can do many things like for example, it can be used for a CNC and at the same time used for a 3D printer or you can switch between them, then you can start remotely, you can remotely deploy. One idea was also to have a single client for everything so as a user you don't have to download 10 different user interfaces or then different applications just to use multiple user interfaces and this is called the MachineKit client. And you can basically create two types of user interfaces. One are the HAL remote user interfaces, HAL is the configuration layer of MachineKit and the other ones are the application or EMC enhanced machine controller user interfaces which are dedicated to CNC machines, 3D printers and so on. Everything that uses this Cartesian driven machines basically. Quick overview of our remote components and how they are used inside the user interface. Basically you can think of HAL as like an electronic, basically like electronic components connected by signals and you can just plug them together and the idea is to have one component basically represented also in the user interface and in the user interface you can connect for example a button, a progress bar or whatever to this component or to the pin of the component and using this you can quickly create very sophisticated user interfaces for applications without thinking a lot about the communication and everything that is evolved around is usually involved when creating such a system. Yeah, how does this work? Basically as I said it does auto discovery, it does launching and everything so you have two components. One is a component that starts everything or launches the user interface which is called connection window. You can have two types of user interfaces, local user interfaces which are locally available and one that are deployed remotely. You can have multicast DNS discovery or single-cast, unicast DNS where you have to type basically an IP address and on the other side you have what this loads basically is a normal user interface and to quickly create these components one can use either directly use a hard remote component QML component basically but also you can quickly click together or create user interfaces like this which is very simple basically it would create a hard remote component called foo and with one pin which is called button and you can use this component then in your machine configuration basically. Yeah, this is only a part of the whole quick recipe you can also use this application components which can be used to show gcode, show 3D preview and so on. So there's a lot more involved but that's too much for 10 minutes. Okay, and then there is the machine kit SDK which is basically a set of wizards, plug-ins and templates which can be added to Qt Creator so you can quickly start a new project and also can use Qt Quick Designer to click together using interface basically. So what are applications? First of all I created a user interface for 3D printers. Yeah, it's very, so to say it's very complete so it has a lot of features and yeah. Then there's Ketos which is a replacement for the access user interface of Linux in the machine kit it's from CNC, MILF, Slaves, Rautos typical applications of machine kit. And other applications could be first of all currently working on a commercial CNC user interface and generic machine control user interface small applications, prototyping, testing and so on. Yeah, thank you very much for your attention here are some further links first of all my blog machinecoder.com machinekit.io the machinekit project and then the links to the GitHub Qt Quick recipe machinekit vagrant to get started quickly get started and the machinekit SDK. Okay, thank you very much. Thank you. I'm afraid we don't have time for Q&A so just reach him if you need any questions afterwards. Next one. What are you going to have this control of what they do so that we can play that out and what they do and what they do. Sorry. Yeah. No time for it. I could not take the 3D printer on the plane. Do you need this paper? No. Right. Yes, does it work? I will show you. Okay. You want to just come on down? Yes. What? A presentation in QML? Yes, it is. So, yeah, double tap. So, yeah, welcome to my presentation about presentations in QML. My name is Daniel Buller from FAA University of Applied Sciences and I'm very interested first just his presentations in QML already, maybe some of us. Oh, we are quite some people. So how did I come to the topic of doing presentations in QML? Well, one and a half years ago I did my master degree and finished writing all my texts in latech and still had two weeks to prepare a presentation for my professors. So for me to question which technology should I use to do this presentation. Well, it was obvious to use latech for this job too because I already had all my figures and my content and but I was quite unhappy with this decision because my professor is a very visual type of person. She wants a video in every presentation and so I wanted to impress her and also add some slick animations to my presentation. So I could have done these animations in PowerPoint or I could have used PowerPoint but I wanted to have a professional workflow on this and using the Git versioning system, for example. So I've just found QML and yeah, that started working. So when I'm talking about slick animations please don't understand me wrong. I'm not talking about animations like this. So I've just completely overloaded with pointless animations. Yeah yeah with QML. So I think that animations can also help your audience to understand complex topics. Yeah, so how can we get started writing presentations in QML? There is this repository on GitHub. The link to it is in the end of my presentation and what we need to do is write a small C++ application which basically spawns our Q quick view and we also can use this tool QML scene which is meant to be a debugging tool but I think it is okay to use it for the presentations too. So what do we get when we when we clone this repository is basically we get two components. One component is the presentation element which cares about going to the next slide and going to the preview slide and the other component we get is the very powerful slide component which has implementations for 90% of all the slides you will ever need. So what we see here is on the right is actually the code of this slide in an empty presentation but without the code block itself putting the code block and code block would result in an endless recursion. What we see here is that creating these bullet points of this slide is actually an array of strings and this leading space here indicates that this bullet point should be nested one level. The repository is also a great tutorial and lots of examples which helps you getting started very quickly. In this repository is also a small tool called print slides which lets you make PDFs out of your presentation and this tool is very basic what it does is it starts your presentation and actually just makes screenshots of every slide so very basic but it works if you want to make a handout of your presentation. So then I brought an example of those animations I was talking about. My master thesis was about rendering three-dimensional heat maps volumetric heat maps and on the right you see the geometry I sent to the graphics card in the original presentation I showed some code at this point and then also we can do some optimizations to this geometry so make it look more like a data point or like a point like a sphere and these spheres were then rendered into one big three-dimensional texture which looked like this and we can then visualize it with a transfer function and it results in such an image. So I could have done an animation like this using videos and play and pause video every time but for this I actually could use my application code and put it directly into the slide so I basically skipped the step of making videos and cut them and could use it directly later on I recognized how powerful it is to put your application code directly into a slide and this is the next use case you can put your whole front end into your application and just maybe discuss it with some state, discuss an early prototype of your application with some stakeholders and it is also interactive at this point here and one and a half years ago it was also a bit hacky to get this 3D content into your presentation nowadays we have Q3D which can be instantly integrated into a slide easily with this component and for the ones of us who made the training yesterday or know it this component registers the input aspect also here and this makes the component completely interactive inside the presentation so this is very fancy and if that is not enough we also have charts we can add in our presentations since Qt 5.7 these are available for the open source developers this is a bar chart and we also have pie charts and they can be animated to have a look and I was very surprised when I saw how view lines of code are needed to include such a chart into the slides we have a chart view here for the pie chart and inside is the actual pie chart the chart view is configured to enable all animations and then we see down here there is one pie slice which which sets is exploded property to true when the slides proceeds three steps and this is what triggered the animation we just saw so the key of being efficient when creating QML presentations is using components you can or creating your own components you can reuse very often and I found myself comparing different images of different approaches so I came up with this component which lets me compare different approaches with my audience and the other component I added is this progress indicator you hopefully already noticed which we know from Latif the bottom line is it offers a lot of possibilities and the simple things can be done simple and the more complex slides also take a bit of effort it would be nice to have more components and also to have some more tooling so me as a presenter here I have a small window with nodes maybe but I can't see the next slide so for 10 minute presentation that is ok but there wouldn't be a tool to show me the next slide here and also I use the smart phone as a timer that would be nice to have maybe so all the catered people here I think they are doing their slides very often also in QML but they have this application called slide viewer and it seems to be very powerful so maybe if there is enough demand one time this might be available to the public maybe but until now we have this QML presentation system with the link shown here and also my own fork of it which contains these two components I talked about and the ability for a slide to have multiple states to have these animations in so thanks a lot for your attention thank you very much ok next one alright my name is Michael Tims I'm here to talk about a native QML location API that we have put together at Esri that is focused on scripters or web developers with a JavaScript web background I work at Esri on our product that is called the ArcGIS Runtime SDK for Qt and just quickly agenda so we will go just a little bit about why we are doing this what we are doing QML API for JavaScript developers I will show you a demo I will go over just a couple extra APIs that we have had to expose to QML because they are not in the Qt framework to be able to support our SDK and then I will follow it up with a summary QML for JavaScript developers at Esri so why design a native API and QML for web developers that only requires you to know some sort of web technology and no C++ required at Esri we have built a pretty good foundation on the web technology we have a lot of people that are attracted to our technology and they come with an HTML5 or a web background but the industry these organizations want to build apps that run on the desktop not only the desktop but mobile devices they want to put their apps in stores they want to be able to bring your own device and have the application running on your device and that is where we have come in and we have built our entire location API and exposed it to QML no C++ skills are required because you are basically programming against our API all in QML with JavaScript business logic we will get better performance than hybrid or web technologies probably not as good as performance of our C++ API because we also have a C++ API but we are going to get some pretty good performance and we have been able to prove that most of these users have never envisioned that they would be able to write a mobile app that they actually wrote for iOS or Android that is not running in the web browser these are we have gotten a huge amount of these developers they are being exposed to the Q framework most of them never even knew what QML was before but now they do and they are programming against QML and using JavaScript so just going to step you through a couple demos just to kind of give you a feel for the API here I have an application that when I spin up it is going to bring up a world imagery map and I am going to click this button to just zoom to this yellow stone spring and nice simple little application as long as the network comes up and this application just real quickly zooms in to this spring on the screen so let's take a look at the code behind how do you do this in just QML we have this API where we start out by declaring a map view let's blow that up a little bit nest a map and that imagery map that you saw is our base map and that goes into our map you can think of our map as a model to our map view and that's really all you had to do to really get that map up on the screen so then when they start wanting to interact and write logic say they have this button and on click they want to zoom to the spring you can declare our different geometry types and this is just a point that's with a geographic point that we can zoom to and within this zoom to spring function we can dynamically declare our types in QML so we'll declare this a view point center type and give it that location on the screen and then we just on our view say we want to set the view point with four seconds so it'll take four seconds to zoom to that particular location and that was all in QML with some javascript logic and it gets a little bit more detailed than that obviously but this is just a simple example also available for QML javascript developers is our 3D technology that we'll be bringing to our API as well so we'll be able to come in here and if the network is being nice to me we can come in here and we can look at our scene and we call this a scene layer and this is running in a scene view it'll take a little while to texturize the buildings because the network connection but you can come in here and you can work in 3D now running on the desktop running on my native platform and run everything in 3D using QML so let's take a look at that language. I know that didn't load up but come by and see me if you want to see a little bit more about 3D but this is similar to what we had with the 2D map instead of a map view we have a scene view with a scene, same thing the base map imagery with labels was the base map we were using we also have in here a surface so this is an elevation source and this is how we get elevation to our 3D so we are just hitting our ArcGIS back in services to give us elevation and then we have this scene layer and this is that scene layer of San Francisco that we had and we wait for it to be loaded before we set the viewpoint to be its extent so that's where we got the effect where it loaded up and then it zoomed into San Francisco but this is all basically just using JavaScript and you know a very quick QML language syntax so this is really attractive for our developers to be able to write these apps just knowing QML you'll be surprised the JavaScript developers that come from the web they can get up and running with this language very very quickly it's been really nice for us to be able to have them get up and running super fast so back to the slides just a little bit about how some other things we've had to do to be able to support what we're doing with our QML API we're missing just simple file I.O in QML you might be able to get some third party JavaScript stuff that does it or you might be able to work that in but we want something that's written in QML so they can declare a file info type to copy it around or detect if it exists and things like that because we're a native API we have support for offline everything that you just saw will have support to be able to run that all offline we can't rely on the web all the time same with different network APIs something we've worked on being able to download these files put them to disk on the device so that we can access them and we want to expose more of these APIs from the your standard Qt C++ types and up to QML so that our JavaScript community can take advantage of those and then we plan on contributing these back to Qt if necessary if they get accepted and that's another story that's a little washed out but this is just an example of our QML file info class so you just declare this and register it with QML give it a couple properties where you have the path specified to the file be able to detect if it exists and then down at the bottom is just an example of how you declare one of these file info types to a certain path here I have a file geodatabase this is a SQLite geodatabase format that we accept in our API with the ArcGIS platform and you can just work with file IO operations just directly in QML so in summary we want to attract a large developer audience from the web community and that is happening and we're very pleased by that we cannot have any C++ required as you all probably know because you are cute developers that at least there's a little bit of C++ they're needed to launch the application well we just ship a template with our SDK that has that already ready to go for them so they don't have to write that they should never even have to look at that they just need to get up and running with their main QML and go from there it's very important for us to handle a synchronous processing on our back end so we produce the API and we write it all in C++ expose it up run the asynchronous operations in C++ code and then notify when those are done back to the QML API when they're done so we can do all the heavy lifting there shouldn't be a lot of business logic that's being written in javascript against our API we want to handle as much of that as possible out of the box models to plug right into QML list views path views whatever it may be so they can just work directly with some of our data types that we expose right out of the QML API if you want to get a little bit more info we'll have the programming and the geographic context session tomorrow from 1.45 to 2.45 in the afternoon we'll go a little bit more into our SDK we'll even we'll touch on more of our C++ API as well in there and then here's some information about a little bit more information on our website developers.archist.com slash Q and that's it for me, thank you we have one more don't leave yet I think it's me but I thought we have only one more end user in QML that's me I think there is someone after me okay I have large traces in QML profiler should be here right? in 78 but I don't see it in the list I have it in my list I don't know why you don't see it I think it was on the sheet of paper is it in the app? that's mine okay now we have the talk about end users and QML in RoleStream I don't know what it is hi everyone I am Monogazenek and I'm the lead developer of a project called Role Steam I don't know Role Steam is a virtual tablet of software to play role-playing games written in C++ with Qt under GPL2 it's offered to players from around the world to play together through the network obviously as you may know as you may know to play role-playing games you need character sheets managing them it's a little bit difficult firstly because the character sheet is covering all data about a character one needs to be accessible by other parts of the software such as a dice roller for example each game has its own character sheets which requires high level of customization and to fit this needs there is I think two solutions first as many of my competitors they choose HTML and I don't want to go that way because it's too easy and as Role Steam is a Qt application the name the name sorry the expected solution for me was QML I mean it's a great challenge and also it's a better way to improve my skill in QML so let's go with QML but one problem is that end users are not QML developers and I need those end users to be able to create character sheets for their games so the main challenge become to provide an easy way to create character sheets and to initiate them on QML coding to do so I create Role Steam character sheet editor obviously its name explain what it does so the first feature of this software is to design the user interface basically you drop a character sheet background and put field at the right place of course field properties can be amend such as positioning background color and so on then one set the editor can generate the QML code and you are able to see the result it's displayed exactly as it will be in Role Steam because both software show the same code and also the QML code is also displayed it's offering a good opportunity to study the QML code as you can see some fields are custom QML items but I designed to update data from my model and to be adapted by my model ok then when the user are confident enough they can edit the QML code to add some features just like animation transition or even behavior if they want they can also connect the character sheet to PostgreSQL database if they want anything possible with QML as the language it becomes bigger and bigger so when all of this step are done the last one is to play with it so you have to load the character sheet into Role Steam and let's go so I have a little video for you first I will start Role Steam as a game master kind of a super user then I start another Role Steam instance as a player I did this video yesterday so it's a little bit long then the game master load the character sheet database and share one character to the player and the player gets its character sheet and you will see that the player try to edit the level value and the game gets the updated value of course I will implement permission management to prevent cheaters and I think it's all for me I hope you enjoy the presentation this link can help you if you want more details about Role Steam and thanks for your attention by the way the presentation was also a QML application and you can it's free also you can get it on my github account next does this work? nope yeah no that is not the intended effect it worked before ok whatever let's try it like this any of you no this doesn't work no you can see something but I can't ok we can try it like this ok I'm Ulf Herrmann I've been working on the QML profile since 2013 basically if any of you used the QML profile yet quite a few people now maybe you know the effect basically your profile and application generates a lot of data and it takes forever to load the data it's loading and loading and loading and eventually it runs out of memory and crashes I don't have that much time here so I'm going to do that exercise right now if I can do that actually blindly yeah it seems like a cat seems like a cat so this is a pretty big trace it's like 1GB and I'm going to start to load it now while I'm talking so what is the problem basically you have an application that performs badly why is it performing badly because it does a lot of things it runs a lot of JavaScript functions it executes a lot of bindings sets a lot of signals around all that stuff that make it generate a lot of trace data that trace data has to be stored somewhere first in the application where it's recorded then it has to be sent over the network or over the local socket to Qt Creator then it has to be stored again then it's loaded in a transformed form to the graphics card and somewhere in the process well it can be pretty heavy on your memory however obviously those applications are the most interesting ones profile you actually want to know what's going on there are two ways to tackle this first I've done some things in Qt Creator 4.1 and in Qt 5.7 to reduce the memory footprint of those things and we're going to see that in a minute basically it uses smaller data structures for everything it doesn't duplicate the file names and the function names and so on but only sends the timestamps and IDs for the functions and stuff like that it compresses the timeline according to the GPU so if there are too many events so that they wouldn't fit in the GPU memory it basically compresses multiple of them into one geometry block that's uploaded so let's save some space it uses temporary files now to store the actual trace data so it doesn't all capture memory in Qt Creator and you get a new data format that's 10 times smaller because it's binary rather than XML so let's see what it's done apparently the computer is still running so it has crashed I hope so this is the trace it has loaded you can technically interact with that but it's kind of a pain this is Qt Creator 4.0 so this is before my changes that's why it's red I also have a green one that you'll see in a minute that will be Qt Creator 4.1 and we should be able to check how much memory it took let's make that bigger so that I can actually see it and let's see how much memory Qt Creator is actually using at the moment so you see those two Qt Creators here in the process list one is 4.0 that's apparently number 2423 and the other one is 4.1 we haven't used that yet 2423 just now that thing uses about 10 gigabytes of virtual memory and 3.5 gigabytes roundabout are actually memory allocated hardware memory allocated to that process so that's quite heavy and I've not got a lot the other trace in parallel to that so let's close that quickly here but this is Qt Creator 4.1 and we are going to do the same experiment with this one right if I can still do it so with Qt Creator 4.1 you see there's also a separate option here I promise you this is the same data you could write it home and it's 10 times smaller because it's the data the binary data format rather than the XML data format and I'm going to load that now meanwhile I can tell you what you can do to reduce the memory footprint of your QML traces first you should only record what you're interested in I can tell you the most expensive thing to record are memory usage events QML allocates a lot of memory and each and every memory allocation is recorded and sent to Qt Creator if you record them if you're not interested in that better switch it off second every binding and every signal handler is also a JavaScript function call so if you're not interested in the bindings and signal handlers as bindings and signal handlers especially you can switch that off and just look at the JavaScript function calls and you'll see all the stuff too you don't see binding loops and you don't necessarily see which signals triggered the JavaScript functions but usually you see the same thing then since Qt 5.6 Qt can actually periodically flush the trace cache so you can specify in Qt Creator I'll show that in a minute that it should instruct QML to send the trace data every such and such milliseconds and clear the cache to make room for new trace data that should prevent the application to run out of memory however that has a cost of course sending the trace data in time and might distort your profile you have to do your own experiments with that and finally you can use the binary trace data file format to get 10 times smaller traces so let's see this one has loaded the trace it's somewhat faster and somewhat easier to use than the other one let's hope it also takes less space so this is 2437 okay this one takes about 4 gigabytes of virtual memory and only about 2.3 gigabytes are actually hardware memory allocated to that process so that's a reduction of like more than 60% something like that just between Qt Creator 4.0 and Qt Creator 4.1 for the same trace and I'll show you the respective options here so if you want to limit what the thing is going to record before recording you can switch stuff off in this menu here so if I see that right this is memory usage now it's off and you won't get this memory usage category then mind that the recording button is something else in the filter button the filter button is superior I think you can filter out the memory usage and then display it again but that does make it disappear the flush interval is either in the global settings or in the project specific run settings and it's this basically you switch it on you set some interval this is one second you can set it to 5 seconds or whatever and there you go yeah okay thank you we have a party for everyone at 6.30 with free beers you can go there now time for it