Recently I needed head regulation and it was super easy & cheap to implement using ESP8266 & Blynk. And yes, I know that both exist for a quite long time, but I didn't do "simple analogue in/out IoT" for a long time.
 |
| Just the beginning of mess I made |
 |
| DHT11 with Blynk app |
Blynk is IoT platform, it has Android and iOS client apps, libraries for most popular development boards (including ESP8266) and the most for important for me it is open source. Unfortunately, they still don't have a web client.
Today I successfully replaced Xiaomi Note 4X screen!
A touchscreen was completely was completely broken. However, screen used to work until I accidentally cut a screen cable during the disassembling process. Therefore, I had to buy both, screen and touchscreen which cost around 20e.
The screen is not the same quality as it used to be, but I am still happy as I disassembled and assembled a the l parts of phone.
I have always been interested in robotics, but I have never tried to work with robots. About two years ago I was watching the national Eurobot competition in Serbia and got impressed by engineering challenges, as well as fair play. Two opponent teams were sharing mechanical parts just before a match, it was fantastic! And after a while, I became a member of one of the robotics team, Memristor, and since then robotics is my favourite hobby.
During my first year at Memristor, I learnt about embedded platforms, short-range protocols, industry class sensors and actuators, multiple algorithms how a robot can determine it's position and much more. Beside technical stuff I was interacting with students, assistants and professors from different branches of engineering (as you know robotics combine mechanics, electronics and software) and it was amazing hearing completely different approaches to a problem.
That year, I was working on improving already written software, implementing communication and writing some specific code for that competition. We were in first three teams at the national competition so we got an opportunity to travel to Paris, to world Eurobot competition. In Paris was difficult, many broken parts, coding on the field, but we managed to repair most of them. There I saw a difference between "make it work" and "make it work reliably", and the difference was huge in term of implementation.
I am looking forward to next year competition!
 |
| Spending free time in robotics laboratory |
| Eurobot 2016 - Paris, France |
I am looking forward to next year competition!
Robotic platform that enables app switching (sharing, marketplace) and app development from your web browser was idea that my friends from high school and I tried to implement.
 |
| SpesRobo website - spesrobo.bitbucket.io |
I started to learn React a few days ago, but today I learned a lot. Ten hours of coding and fifteen minutes to take a break and eat.
This morning I had seen PhotoSwipe, and it had amazing performances. First I had though it is canvas, but it was NOT. I just needed to make my own, with same performances, and I thought it would be easy. I planned to use PhotoSwipe in my project, but it is complicated to customise to my specific needs.
I had wanted to get better in React and to see how Hammer works, so I chose Hammer, React and jQuery. The first prototype was made with jQuery and Hammer only, two predefined slides, lots of constants but it worked great on swipe left on a laptop.
Then I had included React and built React component. I was using Angular 1 before, and I must say that React is much more intuitive. Learning curve is higher than other front-end frameworks, and I like components. First time I heard about React I though it is silliness, but now I am changing my mind. There were few things I had not knew how to do, but I learned fast. Moment of truth, I opened a page on mobile, and it had much lower performance than PhotoSwipe.
Pain and sweat to get smooth performance. I had thought it was because of jQuery, so I removed it. That was hard. React + jQuery = super easy, React = pretty hard & lots of things to learn. I needed to replace $(node), css(), animate() and all these great and simple methods. I needed to rewrite all of it on "React way". Do you know that React has setState(), I didn't, I found out it is only way to manipulate with inline styles dynamically. Next challenge was children problem. I could not figure out how to get DOM node of children (look at the solution at the StackOverflow). I learned a lot about React. I ran on my mobile and again disappointment, still not fluid, I was losing hope. I tried to optimise JavaScript code, but there was still the same problem.
I was moving slides by changing "margin-left". I had done research, and I get an idea to replace "margin-left" with "transform: translate3d()". Eureka! It works!
I just found performances tests
https://jsperf.com/translate3d-vs-xy/57
As you can see "transform: translate3d()" is much faster than "margin-left" (35 times faster on my Chrome 45 on Ubuntu).
You can try component on mobile phone
http://lukicdarkoo.github.io/examples/react-light-swipe/index.html
it is in the early alpha stage; there is a lot of to do, but it is fast and smooth as I like.
This morning I had seen PhotoSwipe, and it had amazing performances. First I had though it is canvas, but it was NOT. I just needed to make my own, with same performances, and I thought it would be easy. I planned to use PhotoSwipe in my project, but it is complicated to customise to my specific needs.
I had wanted to get better in React and to see how Hammer works, so I chose Hammer, React and jQuery. The first prototype was made with jQuery and Hammer only, two predefined slides, lots of constants but it worked great on swipe left on a laptop.
Then I had included React and built React component. I was using Angular 1 before, and I must say that React is much more intuitive. Learning curve is higher than other front-end frameworks, and I like components. First time I heard about React I though it is silliness, but now I am changing my mind. There were few things I had not knew how to do, but I learned fast. Moment of truth, I opened a page on mobile, and it had much lower performance than PhotoSwipe.
Pain and sweat to get smooth performance. I had thought it was because of jQuery, so I removed it. That was hard. React + jQuery = super easy, React = pretty hard & lots of things to learn. I needed to replace $(node), css(), animate() and all these great and simple methods. I needed to rewrite all of it on "React way". Do you know that React has setState(), I didn't, I found out it is only way to manipulate with inline styles dynamically. Next challenge was children problem. I could not figure out how to get DOM node of children (look at the solution at the StackOverflow). I learned a lot about React. I ran on my mobile and again disappointment, still not fluid, I was losing hope. I tried to optimise JavaScript code, but there was still the same problem.
I was moving slides by changing "margin-left". I had done research, and I get an idea to replace "margin-left" with "transform: translate3d()". Eureka! It works!
https://jsperf.com/translate3d-vs-xy/57
As you can see "transform: translate3d()" is much faster than "margin-left" (35 times faster on my Chrome 45 on Ubuntu).
You can try component on mobile phone
http://lukicdarkoo.github.io/examples/react-light-swipe/index.html
it is in the early alpha stage; there is a lot of to do, but it is fast and smooth as I like.
Otvori web stranicu sa testovima | Preuzmi mobilnu aplikaciju za Android
Razvijajući novu verziju SpesDrivera fokusirao sam se na nekoliko stvari:
Serverski dio
Krenuo sam skoro od "nule", kopirao 3 - 4 modela i možda neki kontroler. Sada sam koristio Yii2 tako da sam i sa kopiranim dijelovima imao dosta posla.
Klijentski dio
Bilo je jako bitno odabrati prave tehnologije, jer je ista aplikacija trebala da radi na različitim rezolucijama i browserima, ali i da sa Cordovom napravim aplikacije za različite platforme. Polymer je bila tehnologija koja mi je privlačila pažnju, ali s obzirom da dosta browsera ne podržava WebComponente odustao sam.
Izabrao sam Angular i Angular Material koji je još bio u ranoj Alpha fazi razvoja. Trenutno sam razočaran, aktuelna verzija je 0.8.3, na Android Browseru i IE <= 11 se raspada. Aplikacija je skoro gotova ali je ne mogu objaviti, jer još nema podršku za pomenute browsere, a nisam siguran ni da li će imati. Ali glavu gore i idemo dalje.
Koristio sam Gulp, odlična stvar. Uspio sam minifovati i kombinovati fajlove. Angular templati se zahvaljujući Gulpu nalaze u JS fajlu. Slike linkovane u CSS su base64 enkodovane. Smanjio sam broj zahtjeva, pa se nadam i opterećenje na serveru.
Sa Angularom sam vrlo lako odradio deep routing, veliki broj linkova se kešira i to storageu. Prezadovoljan sam Angularom, ali vrlo je bitno voditi računa od stilu pisanja koda. Zbog toga sam u početku nekoliko puta počeo sve iznova. Dobar "Style Guide" pronašao sam na ovom linku:
https://github.com/johnpapa/angularjs-styleguide
Nemojte se zanositi video tutorijalima, brže se savladaju neki osnovni koncepti, kontroleri, servisi, direktive, $scope... Ali tu je kod optimizovan za male aplikacije, UVIJEK pratite style guide iskusnih programera. Angular2 je potpuno izmijenjen tako da pretpostvaljam da će biti lakše.
Mobilna aplikacija
S obzirom da sam jedini developer odlučio sam se za Cordovu. Dok sam pravio web aplikaciju razmišljao sam da sebi olakšam pravljenje mobilne aplikacije, tako da je web aplikacija brzo pretočena u mobilnu. Problem je nastao kada sam je testirao na Android 4.3 i manje. Te, starije verzije koriste Stock Browser za WebView tako da aplikacija zbog Angular Material nije radila. Namučio sam se Crosswalkom i sad imam dvije verzije aplilacije za Android. Muka!
Link za preuzimanje:
https://play.google.com/store/apps/details?id=com.lukicdarkoo.spesdriver
Zaključci
Nadam se skoroj podršci Angular Materiala za starije browsere. Sljedeći put biram isprobane tehnologije. Klijentski dio je najteže razviti, super stvari su tu, ali ako ih odaberete gubite dio korisnika.
Razvijajući novu verziju SpesDrivera fokusirao sam se na nekoliko stvari:
- da test bude stabilniji, brži i sa više opcija,
- da se lako koristi u Cordovi
- bolje optimizovan za mobilne uređaje,
- posjeduje više država,
- posjeduje spisak autoškola,
- posjeduje novi, moderniji, dizajn.
Serverski dio
Krenuo sam skoro od "nule", kopirao 3 - 4 modela i možda neki kontroler. Sada sam koristio Yii2 tako da sam i sa kopiranim dijelovima imao dosta posla.
Klijentski dio
Bilo je jako bitno odabrati prave tehnologije, jer je ista aplikacija trebala da radi na različitim rezolucijama i browserima, ali i da sa Cordovom napravim aplikacije za različite platforme. Polymer je bila tehnologija koja mi je privlačila pažnju, ali s obzirom da dosta browsera ne podržava WebComponente odustao sam.
Izabrao sam Angular i Angular Material koji je još bio u ranoj Alpha fazi razvoja. Trenutno sam razočaran, aktuelna verzija je 0.8.3, na Android Browseru i IE <= 11 se raspada. Aplikacija je skoro gotova ali je ne mogu objaviti, jer još nema podršku za pomenute browsere, a nisam siguran ni da li će imati. Ali glavu gore i idemo dalje.
Koristio sam Gulp, odlična stvar. Uspio sam minifovati i kombinovati fajlove. Angular templati se zahvaljujući Gulpu nalaze u JS fajlu. Slike linkovane u CSS su base64 enkodovane. Smanjio sam broj zahtjeva, pa se nadam i opterećenje na serveru.
Sa Angularom sam vrlo lako odradio deep routing, veliki broj linkova se kešira i to storageu. Prezadovoljan sam Angularom, ali vrlo je bitno voditi računa od stilu pisanja koda. Zbog toga sam u početku nekoliko puta počeo sve iznova. Dobar "Style Guide" pronašao sam na ovom linku:
https://github.com/johnpapa/angularjs-styleguide
Nemojte se zanositi video tutorijalima, brže se savladaju neki osnovni koncepti, kontroleri, servisi, direktive, $scope... Ali tu je kod optimizovan za male aplikacije, UVIJEK pratite style guide iskusnih programera. Angular2 je potpuno izmijenjen tako da pretpostvaljam da će biti lakše.
Mobilna aplikacija
S obzirom da sam jedini developer odlučio sam se za Cordovu. Dok sam pravio web aplikaciju razmišljao sam da sebi olakšam pravljenje mobilne aplikacije, tako da je web aplikacija brzo pretočena u mobilnu. Problem je nastao kada sam je testirao na Android 4.3 i manje. Te, starije verzije koriste Stock Browser za WebView tako da aplikacija zbog Angular Material nije radila. Namučio sam se Crosswalkom i sad imam dvije verzije aplilacije za Android. Muka!Link za preuzimanje:
https://play.google.com/store/apps/details?id=com.lukicdarkoo.spesdriver
Zaključci
Nadam se skoroj podršci Angular Materiala za starije browsere. Sljedeći put biram isprobane tehnologije. Klijentski dio je najteže razviti, super stvari su tu, ali ako ih odaberete gubite dio korisnika.
