 Ei ole hyvin hyvää asia, joten se on vähän ympäristöinen, mutta ehkä voimme ympäristää sitä. Onko sinä olevan ympäristössä? Ei ole HTML5. Kappu? Okei, joten lopulta sen. Minä olen Simbio. Minä olen ympäristössä web-app. App-asia, joilla me olemme 12 000 ihmisiä, jota on tullut vain Suomessa ja China. Tässä on myös ympäristössä. Joten olemme ympäristössä. Minä ajattelin, että olen tullut HTML5 ympäristössä. Ja sitten olemme ympäristössä. Mitä on HTML5? Se on hieman ympäristössä. Se on ympäristössä, jota on ילנותä goo, jonka ilmestö on jäänyt ympäristössä paremmin. Siellä, kun jotketaan HTML5, he voivat pystyä HTML5-raosissa. He voivat pystyä HTML5-raosissa. So it provides maybe CSS3 kind of styling additions and maybe even webGL. So it's more like a web to dot something was a couple of years ago that this is maybe dot3 or 4 or whatever. So kind of a modern web application development. The reality of course is that there is a lot of diversity. So if someone has been doing Android development and thinks that's difficult, then this adds a few. So basically you have a lot of different input mechanisms. You have touch, you have mouse, you might have voice. It can be anything. Different screen sizes, different screen resolutions, different browsers even. Then you have a kind of evolution of devices. So basically, for example, from Android landscape, you have a lot of different features that are supported throughout the life cycle. Different CPUs, you have to design the UI so that they are quick enough on lower end devices. And then you have higher end devices that you might want to utilize a bit better features. And also hardware acceleration support on different CSS transitions, for example, might be different. So quite a lot of things, but then also quite a lot of opportunities. And of course when talking about automotive landscape, you don't have to target as many devices. You can just target one hardware, so you don't have to actually worry about this. But the good thing is there is actually a lot that it provides you out of the box. So you don't have to worry about underlying stuff. It's already built for real time. You have web sockets. There is two-way communication between devices. You can build peer-to-peer webcam chats if you want. There is a lot of kind of stuff that is already given. Also you can write once and get many. We wrote the AGL demonstrator so that it works on mobile phones. It works on tablets. It works on desktop and it works in the car. So quite a lot of different types of things, not just web. Low barrier to entry. Don't have to be a domain specialist. You just have to be somewhat familiar with web development to get going. And what HTML5, maybe most of all, is that it's not only online anymore. So you have offline apps. You have standalone apps. It's just an app framework, basically. You have a lot of options to interact with the device. File system API, local databases, different kinds of cache for offline assets and so forth. And also it offers quite a lot of tools for handling the diversity that comes with it. You have feature detection libraries, which are open source. When it goes to styling, there are a lot of features that are still experimental and you need to have prefixes in them. You have tools to accompany with that and so forth. So there's a good community and a good drive going forward. And a lot of stuff is coming up. So you don't have to limit to simple UIs and a business type of application. But you can do WebGL, CSS shaders, a lot of functionalities. So basically, CSS shaders are open GLES shaders that you can apply on Web elements. You have canvas that you can draw on audio, input and output, video, different kinds of sensor data. So a lot of stuff that is basically becoming a standard and you can access from the browser. The bad thing is that still it's quite new technology, so you need to tweak it quite a bit. So like mentioned, there are prefixes for different, for example, CSS features. You need to handle the feature support and you have to degrade gracefully and take into account the kind of lowest end device that you want the main use cases to work with and then build from there. And there are not a lot of established best practices to do this. So a lot of trial and error and kind of reinventing the wheel, unfortunately, at this point. And also, you need to know a bit about what happens under the hood in the browser, especially for mobile. Because, well, mobiles have usually the least processing power. So when you're building something high end, you need to take the advantage of that properly. That's kind of something that usually app developers shouldn't have to think about. So it's a bit of a shame at the moment, but we're getting it there. And also, good performance requires memory management. You have to understand how to handle inputs. You have to understand what is hardware accelerated, how things need to be done to get them fast. But I mean, we're getting there. It's not that far away. Okay, so then to the HVAC demo, I guess. So I'm not an automotive developer. Actually, I don't even know anything about Tizen. That's something I probably shouldn't have told, but the point is that you don't have to. It's all standard. So basically, what we built is a standard web app. It doesn't have to care about Tizen. It doesn't have to care about being in a car. It's just a standard web application. We have a couple of guys developing it for the UI part. I was the only one doing it. Basically, we're doing it as a side project along everything else. And also with a 10-hour time zone difference. So it's quite nice progress, I would say, and fairly complex integration landscape in this sense. So we have a lot of different communication methods inside the car and outside it. And given the circumstances, I think it worked out quite well. So the result is the car HVAC interface with real-time web remote and it's interfacing with the CAN bus. This unfortunately looks bad, but it doesn't matter. So basically, we have a vehicle app. Have you seen it already? Okay, we'll show it to you downstairs. So basically, it's an HVAC UI with fan speed, temperature, that kind of things. We have exactly the same app as a mobile and desktop app. So you have a remote to the car. You can take your mobile and adjust stuff in the car. And it's shared code, so nothing is changed. The same stuff is on the phone as it is in the car. It's not only similar, it's exactly the same. Because we didn't have the opportunity to kind of start forking and kind of adjusting. And it will be a really big integration problem. The only difference is that the web app that is running on the mobile, it's talking in web sockets. To the web backend, so you have two-way connection. So whenever you change anything in the car, it actually changes on the mobile. And on the backend with the exosense, we're talking with JSON-RPC. So basically the web backend is a proxy for the JSON-RPC interface. So vehicle app is W3C standard package app. It has a conflict XML file, icon file, and static assets. So standard stuff, nothing specific in this use case. It doesn't care that it's run on Tizen. It's based, it's HTML5, JavaScript, and CSS3. And JSON-RPC integration is done with jQuery, Ajax requests, so quite simple. Web app, same thing, only difference is that it's using web sockets. Socket IO there on the backend. Basically nothing special here. On the backend we're using RESTler for the rest communication that we're doing with jQuery and the UI. Works on all webkit-based browsers. It's not optimized for different screens, but you can use it on iPhone, iPad, Android phones. So for communication, I just mentioned, one problem in the car is that since we don't have a web server that we could listen to the JSON-RPC notifications, we have to actually poll it, which is a bit nasty, but that was during the, well, we had to do it in this timeframe. Otherwise, the kind of web backend site is real-time listening to events, so that's kind of a bit smarter solution. About graphics and performance. So we draw basically all of the graphics on canvas, so it scales. Transitions done in CSS3 because that's the best way to get performance out of it. It's hardware accelerated. There are a couple of pictures, which are the icons that are unfortunately designed by me. You will see that I'm not an icon designer, but they are written already also. So if you have a high definition screen, they should look good on that as well. Just a quick end note that when interfacing with touch devices, please don't use clicking because that will introduce extra lag to the UI. But that's about it. Any questions on the UI side of things? Oh, that bad. Thank you. If you have any questions, feel free to contact me or send me an email.