Archives for August 2018

August 17, 2018 - No Comments!

Milion złotych to za mało, by z powodzeniem projektować urządzenia

W zeszłym tygodniu NCBR zmienił zasady finansowania projektów badawczo-rozwojowych dla funduszy Bridge Alfa. W praktyce limit inwestycyjny zmniejszył się z 3 mln do 1 mln PLN. Jako Summer Agency jesteśmy partnerem w Shape VC, nowym funduszu założonym po to by finansować i wspierać rozwój projektów B+R i startupów w obszarze elektroniki, automatyki czy technologii produkcji. Pracujemy także jako kontrahent z wieloma startupami, które korzystają z tego rodzaju finansowania. Dlatego też pokusiliśmy się o sprawdzenie, jakie konsekwencje dla projektodawców może mieć zmiana limitu z punktu widzenia rozwoju produktu.

Milion złotych to kwota, która tylko pozornie daje nieograniczone możliwości. Rzeczywistość niestety wygląda zupełnie inaczej. W momencie, w którym będziemy chcieli zaprojektować, wyprodukować oraz sprzedać urządzenie oparte o mechanikę i elektronikę, pojawią się problemy.

1. Tworzenie urządzenia od podstaw

Za przykład niech posłuży nam gadżet z rodziny urządzeń IoT (Internet of Things), służący do analizy ruchu kończyn osób podczas rehabilitacji ruchowej. Załóżmy, że posiadamy grupę trzech świeżo upieczonych genialnych magistrów inżynierów, którzy są przekonani, że ich urządzenie zawojuje świat.

Na początek, poczyńmy pewne założenia, które będą nam przyświecać podczas całego procesu rozwoju naszego startupu.

  • nasze urządzenie będzie małych rozmiarów pudełeczkiem ze zintegrowaną ładowalną baterią litową,
  • urządzenie będzie posiadało radio w standardzie Bluetooth Low Energy - tak, aby informacje o ruchu można było przesłać do telefonu lub tabletu rehabilitanta
  • urządzenie będzie posiadało zaawansowany układ pomiaru ruchu, składający się z akcelerometru, żyroskopu i magnetometru cyfrowego
  • w celu optymalizacji zużycia energii i zajętości pasma radiowego, proces analizy i obróbki danych zrobimy na samym sensorze
  • od samego początku będziemy współpracować z lekarzami i rehabilitantami nad rozwojem urządzenia - tak, aby zmaksymalizować jego przydatność
  • urządzenie dystrybuowane będzie w EU i US 

2. Finansowanie spółki i kosztów z nią związanych

Następnie zabieramy się za proces projektowania urządzenia. Tutaj zaczynają się pierwsze problemy finansowe. Przede wszystkim jako świeżo powstała spółka nie posiadamy narzędzi niezbędnych do prowadzenia projektu, koniecznie jest więc zakupienie stanowiska dla naszych inżynierów:

  • Dla elektronika absolutne minimum przy początku pracy to komputer wraz z licencją na oprogramowanie do projektowania płytek PCB (około 40 tys. złotych), podstawowe wyposażenie laboratoryjne (multimetr, oscyloskop, zasilacz) to kolejny wydatek oscylujący w granicach 20 tys. złotych. W rzeczywistości jest to minimum często całkowicie niewystarczające, w szczególności przy bardziej skomplikowanych projektach
  • Stanowisko dla programisty systemów wbudowanych – komputer z oprogramowaniem (6 tys. złotych), proste stanowisko laboratoryjne do uruchamiania elektroniki składające się z programatora i zasilacza to 7 tys. złotych
  • Stanowisko programisty mobilnego (kolejne 9 tys. złotych)

Tym sposobem, jeszcze dobrze nie zaczęliśmy pracy, a z naszego portfela wydaliśmy już znaczną kwotę na sam sprzęt niezbędny do jej wykonania. Rozpoczynamy proces projektowania pierwszego prototypu naszego urządzenia.

3. Tworzenie prototypów oraz testowanie urządzenia

Po pół roku intensywnej pracy nad naszym urządzeniem, mamy jego pierwszy, działający prototyp. Kosztowało nas to jednak dużo. Każdy z naszych inżynierów potrzebuje wypłaty (załóżmy 8000zł brutto). W perspektywie 6 miesięcy, uwzględniając koszty pracodawcy i składki, wyniesie nas to 144 tys. złotych. Dodatkowo musieliśmy wyprodukować nasze prototypy (wraz z kosztem elementów oraz druku pierwszych zaprojektowanych na szybko obudów kosztowało to około 10 tys. złotych).

Następnie, przystępujemy do testów naszego urządzenia wraz z pacjentami. Po trzech miesiącach pracy oraz wydanych kolejnych 70 tys. złotych wypłaty, dochodzimy do wniosku, że algorytmy, które zaprojektowaliśmy w urządzeniu nie do końca skutecznie pokazują ruch nogi. Dodatkowo mamy problem z krótkim czasem pracy na baterii, urządzenie zawiesza się od czasu do czasu, bez możliwości zresetowania go. Ponadto obudowa, którą wydrukowaliśmy jest niewygodna dla pacjenta i nie utrzymuje się w odpowiedniej pozycji.

Czas, by zebrać wyniki testów i przystąpić do kolejnej pętli projektu. Wiemy już jednak, że posiadamy problem z algorytmem. Pojawia się więc pomysł, że algorytm najlepiej wykona znajomy specjalista. Zwracamy się do niego z prośbą o pomoc i szczęśliwie składa się, że akurat może poświęcić trochę swojego czasu na zapoznanie się z problemem. Nasz budżet właśnie znów się uszczuplił, ponieważ wycenił on usługę na 300 tys. złotych. Niestety tak wyglądają realia.

Mija kolejne 6 miesięcy,  lecz mamy już kolejną iterację urządzenia, która wydaje się tą docelową. Elektronika działa poprawnie i nie jest już kłębowiskiem kabelków. Algorytm zaczyna działać już całkiem nieźle, a dodatkowo zrobiliśmy na drukarce obudowę, która nie przeszkadza w czasie badania. Nasz proces kosztował kolejne 100 tys. złotych, ale pozwoliło nam to przystąpić do certyfikacji.

4. Certyfikacja

Niestety, tutaj znów napotykamy problemy. Pokazaliśmy urządzenie jednostce, zajmującej się certyfikacją i dostaliśmy informację, że musi ono spełnić cały szereg norm i standardów.

  • Badania na bezpieczeństwo urządzeń – koszt wraz z badaniem baterii to około 40 tys. złotych
  • Badania Radiowe wraz z EMC oraz badaniami do FCC + dodatkowo opłata za korzystanie z interfejsu Bluetooth – 100 tys. złotych
  • Badania na zgodność z dyrektywą medyczną - 200 tys. złotych

Decydujemy się na przeprowadzenie dokładnej analizy by upewnić się, że urządzenie ma szansę przejść te badania. Zatrudniamy więc specjalistę, który wykona ekspertyzę w laboratorium. Koszt takiej ekspertyzy wynosi 30 tys. złotych. Okazuje się, że mamy jednak problem w torze radiowym i potrzebne jest wykonanie kolejnej iteracji projektu z odpowiednią oprawką. Tym razem zlecamy przeprojektowanie toru ekspertowi tak, by zyskać pewność, że nie będzie już dalszych problemów. Kosztuje nas to kolejne 50 tys. złotych oraz kilka miesięcy produkcji prototypu. W międzyczasie pracujemy nad zaprojektowaniem porządnej obudowy do naszego urządzenia. Nie mamy jednak takich kompetencji, więc wzornictwo i projekt mechaniki zlecamy profesjonalnej firmie. Koszt takiej usługi wynosi 200 tys. złotych. Obudowy trzeba wykonać w technologii wtrysku, do którego potrzebujemy form za 150 tys. złotych. Mija kolejne 6 miesięcy projektu, które kosztuje nas 100 tys. złotych w wypłatach.

Zbliżamy się powoli do pilota produkcji naszego urządzenia. Produkujemy 100 sztuk, służących do jego promocji oraz do badań normatywnych. Jest to koszt około 20 tys. złotych. Badania trwają kolejne 6 miesięcy, po tym etapie przystępujemy do produkcji masowej urządzenia (5000szt). Okazuje się, że na tym etapie potrzebujemy oprzyrządowanie produkcyjne (w tym tester automatyczny, który kosztuje około 200 tys. złotych). Dodatkowo, jako młoda firma musimy zapłacić za zlecenie produkcyjne z góry. Wraz z montażem, wkładaniem do pudełek itd. kosztuje nas to kolejne 150 tys. złotych.

Warto dodać, że na uwadze musimy mieć również koszty marketingu i sprzedaży, które sprawią, że nasz projekt zostanie zauważony i zainteresuje odbiorców.

Podsumowując projekt naszego prostego urządzenia, od konceptu do wykonania kosztował nas on niecałe 2 miliony złotych. Niestety musimy przygotować się na tego rzędu wydatki, jeżeli chcemy poważnie myśleć o projektowaniu nowoczesnych urządzeń elektronicznych. Warto dodać w kontekście programu Bridge Alfa, że w naszym przykładzie nie uwzględniliśmy prac badawczych, będących w wielu przypadkach podstawą innowacji, stąd wprowadzony właśnie limit może mieć negatywne skutki dla rozwoju dobrych technologii. Mamy nadzieję, że nasz post przyczyni się do zrozumienia, dlaczego.

 

Published by: admin in blog

August 7, 2018 - No Comments!

Amazing in-app animations with Lottie library

 

Everyone knows that with creating a beautiful and eye-catching app comes a lot of UI/UX designer’s work. Amazing animations and graphics play an important role in convincing customers to dedicate their time to an app.

So the first thing is to design such app graphics but the second issue is to implement it in our application by a mobile developer.

Is it really that though?   

You may have already asked yourself a question: “Well, there has to be an easy way to implement such things, right?”

YES! Today I'll introduce to you the astonishing library - Lottie. It was created by an AirBnb team and developed to simplify adding animations to your application. With Lottie you can make your app more vibrant with only few lines of code.

With this short tutorial, you will learn how it can be done in few simple steps. I will show you how to add it to the Android app. It's also available in iOS, web and react native.

The very first steps

At first, you need to add a Lottie library to your module build.gradle file in the dependencies section. At this moment, the 2.5.5 version is the newest one.

You can always check the latest version at this site - https://github.com/airbnb/lottie-android

Dependencies {
  …
  implementation 'com.airbnb.android:lottie:2.5.5’
}

The next step is to add a LottieAnimationView in your layout xml file.

<com.airbnb.lottie.LottieAnimationView
  android:id="@+id/lottieAnimationView"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:lottie_autoPlay="true"
  app:lottie_loop="true" />

As you may have thought already.. “I have a library, a special view to show this animation, but.. where the heck is the particular ANIMATION?!” Here comes the main part.

Preparing the main part - animation

You can create your own animation by using Adobe AfterEffects + Bodymovin plugin to export it to JSON file. But it's a more advanced process, usually created by graphic designers. Today, we’re going to focus on using premade JSON files from https://www.lottiefiles.com

It's a very helpful page, created to share animations with other people. You can use it as long as you want, but remember to mention the author in the ‘about’ section in commercial app.

Let's take a look at this animation of a man riding a motorcycle.

https://www.lottiefiles.com/29-motorcycle

Don’t ask why.. it’s just eye-catching 🙂

Adding animation to the project and making it work  

There are two ways of adding your desired animation to make it work (it is added in the layout xml file):

  • by using app:lottie_fileName="motorcycle.json"
  • or app:lottie_rawRes="@raw/motorcycle”.

I recommend you to use the second one, then you'll be able to use a static reference to this file, not just by using it’s name.

To make an animation loop and auto play on creating an activity, I' am adding these two lines of code to the activity_main.xml file:

app:lottie_autoPlay="true"
app:lottie_loop="true"

So, my xml file looks like this below:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:app="http://schemas.android.com/apk/res-auto" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:gravity="center" 
  tools:context=".MainActivity">
 
  <com.airbnb.lottie.LottieAnimationView 
    android:id="@+id/lottieAnimationView" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:lottie_autoPlay="true" 
    app:lottie_loop="true" 
    app:lottie_rawRes="@raw/motorcycle" /> 
</FrameLayout>

And MainActivity.kt is as simple as it can be:

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
  }
}

Now, we can click “run project” and see how much we are talented! 🙂

Helpful hints 

If we won’t add an autoPlay attribute to our layout xml file, the animation won’t start immediately after creating the view. We are able to start it at any time we want, by adding some code to our MainActivity.kt file.

lottieAnimationView.playAnimation()

The above line allows us to achieve the same thing as the app:lottie_autoPlay="true" line of code in xml file. It's really helpful when we don’t want to start the animation immediately, but later on.

The same thing happens with a loop attribute. It decides if our animation will loop endlessly. We could also remove it and achieve the same by kotlin code.

lottieAnimationView.repeatCount = ValueAnimator.INFINITE

If we use ValueAnimator.INFINITE, it loops infinitely. But what if we want to loop it only 3 or 5 times and stop? Nothing easier! Instead of ValueAnimator.INFINITE, you can just add an Integer value, defining number of repeating count. So it will look like the code below:

lottieAnimationView.repeatCount = 3

What if you want to run your animation for a certain amount of time? Let’s say, for 5 seconds? Just add the below code with handler, which after 5 seconds (value in code is in milliseconds) will pause your animation. It's that simple!

Handler(Looper.getMainLooper()).postDelayed({
      lottieAnimationView.pauseAnimation()
    }, 5000)

The same steps are required to start it after some time, by replacing lottieAnimationView.pauseAnimation() with lottieAnimationView.startAnimation().

MainActivity.kt file with stopping animation after 5 seconds:

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    lottieAnimationView.playAnimation()
    lottieAnimationView.repeatCount = ValueAnimator.INFINITE
    Handler(Looper.getMainLooper()).postDelayed({
      lottieAnimationView.pauseAnimation()
    }, 5000)
  }
}

Listening our animations 

Another cool option is adding AnimatorListeners to the animations. Let’s take a look at another animation – a favourite icon. You like something sooo.. you want to show it! Or maybe you just want to save something for later. What about making it more vivid with Lottie? : )

I choose this one - https://www.lottiefiles.com/72-favourite-app-icon - it’s beautiful and makes a good interaction with users.

At first, let’s replace app:lottie_rawRes="@raw/motorcycle" with app:lottie_rawRes="@raw/favourite_app_icon". Another step is to remove the looping from animation and auto play, because we don’t want to run it on start. That’s how LottieAnimationView looks now:

<com.airbnb.lottie.LottieAnimationView
  android:id="@+id/lottieAnimationView"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:lottie_rawRes="@raw/favourite_app_icon" />

When do we want to run it? I’m going to implement it while clicking on  the animation area. It’s handy and intuitive.

In the second step, I’m removing the previous code, which was responsible for stopping the animation after some time.

Now my MainActivity.kt file looks like the one below:

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    lottieAnimationView.setOnClickListener {
      if (lottieAnimationView.progress == 0f) {
        startAnimation()
      } else {
        lottieAnimationView.progress = 0f
      }
    }
  }

  private fun startAnimation() {
    val animator = ValueAnimator.ofFloat(0f, 1f).setDuration(500)
    animator.addUpdateListener { valueAnimator ->
      lottieAnimationView.progress = valueAnimator.animatedValue as Float
    }
    animator.start()
  }
}

As you can see, I've added a click listener to our animation view, where I am checking if the progress of animation equals 0 or something else (eg. 100). If it’s a zero (the star is unchecked), I’m running the startAnimation() function. In other case (the star is checked) – it's getting unchecked. That’s the “hard” mechanism of checking and unchecking the star : ) It’s not difficult!

In the startAnimation() method, we are initialising a ValueAnimator object, which changes some value from the starting point to an end, in defined time. In my example, it's defined to run for 600 milliseconds, you can change it as much as you want 🙂 One can also change the starting and the ending point. If you want, you can change values in parentheses in ValueAnimator.ofFloat() function. Let’s assume that your idea is to stop the animation in the middle – easy peasy!

Just write

ValueAnimator.ofFloat(0f, 0.5f)

..and the rest of the previous code.

Finally, we are adding an update listener to the animator, which with every step of changed value updates the value of progress in our lottie animation. The last step is to run start() method on animator and that’s all! You’ve just mastered the ability to like/unlike something in your future app.

Wasn’t it simple? I think working with lottie animations can be fun! There are lots of other features and moments in which it could help us save a bit of our precious time! 🙂

Happy coding!

Author: Bartłomiej Rolek, Android Developer

Published by: admin in blog