PowerApps

Post został zainspirowany komentarzem zawierającym pytanie opublikowanym jakiś czas temu pod postem nt. ręcznego podpisu. Kevan zapytał, czy jest to możliwe aby zrobić zdjęcia, następnie nanieść na nim notatki i na koniec połączyć te dwa obrazy w jeden.

Pomyślałem, że to powinno być dość łatwe i szczerze mówiąc, tak nawet było, jednak poległem na ostatnim kroku – scalania obrazów. Muszę to przyznać – nie udało mi się zrobić tego samodzielnie. Zdecydowałem się wobec tego na użycie darmowego API o nazwie „Convert API”. Chciałem zrobić to za pomocą funkcji Azure, ale nie byłem w stanie dać sobie samodzielnie rady, a pomoc znikąd nie nadchodziła 🙂

Rozwiązanie

Jest zbudowane z następujących elementów:

  1. PowerApps – użyty jest do robienia zdjęć, a następnie do nanoszenia na nie notatek;
  2. Blob Storage – użyty jest do przechowywania obrazu z kamery oraz drugiego – z notatkami, a także za przechowywanie ostatecznego, połączonego obrazu;
  3. Flow – otrzymuje wszystkie informacje o transformacjach wykonanych na obrazach i szkicach oraz tworzy HTML łączący dwa obrazy w jednym kontenerze;
  4. Convert API – użyty jest do doskonałej konwersji HTML do pliku PNG 🙂

Notatki w PowerApps

Idea jest prosta. Użytkownik najpierw robi zdjęcie:

Camera in PowerApps for taking pictures
Kamera w PowerApps służąca do robienia zdjęć

Następnie manipuluje nim (obraca, skaluje, ustala pozycję) korzystając z dostępnych opcji:

Image manipulation in PowerApps
Manipulacja obrazem w PowerApps

I na koniec może dodać notatki:

Appending notes to an image
Dodawanie notatek do obrazu

Ostatecznie klika w przycisk służący do rozpoczęcia procesu łączenia obrazu z notatkami w jeden i w efekcie otrzymuje link do wygenerowanego obrazu:

Confirmation message after merging photo with notes in Microsoft Flow
Wiadomość potwierdzająca poprawne wygenerowanie obrazu przez Microsoft Flow

Wygenerowany plik:

Merged image with notes
Obraz z kamery połączony z notatkami

Łączenie obrazów w PowerApps (i Flow 😉

Flow gra pierwsze skrzypce w tym rozwiązaniu. Najpierw otrzymuje wszystkie informacje o transformacji wykonane na obrazie:

Receiving image transformation properties in Flow
Otrzymywanie transformacji przez Flow

Dane są przekazywane z PowerApps za pomocą parametrów funkcji:

Set(
    FileURL,
    Mergedrawingwithphoto.Run(
        "/files/takenNotes.png",
        "/files/takenPhoto.png",
        TakenPhoto.Width,
        TakenPhoto.Height,
        Notes.Width,
        Notes.Height,
        Scale_slider.Value,
        Value(Rotation),
        TakenPhoto.X,
        TakenPhoto.Y
    )
);

Następnie Flow pobiera zdjęcia i notatki z Blob Storage:

Downloading blobs from Blob Storage in Microsoft Flow
Pobieranie blobów z Blob Storage w Microsoft Flow

Następnie Flow sprawdza, czy obraz został obrócony do pozycji pionowej, czy jest w poziomie. Na tej podstawie generuje inny HTML:

Flow generating HTML with overlaying images
Flow generuje HTML nakładający na siebie obrazy

Następnie wysyła kod HTML do usługi Convert API, aby otrzymać kod JSON z danymi pliku PNG:

Passing HTML to ConvertAPI
Przekazywanie HTML do Convert API

Wreszcie, parsuje JSON, który otrzymuje z Convert API i przesyła zawartość pliku PNG do Blob Storage oraz zwraca URL wgranego pliku z powrotem do PowerApps:

Parsing JSON and uploading file to Blob Storage
Parsowanie JSON i wgrywanie pliku do Blob Storage
body('Parse_Conversion_Body')?['Files'][0]['FileName']
body('Parse_Conversion_Body')?['Files'][0]['FileData']

Działające rozwiązanie

Zobacz, jak to działa:

PowerApps desktop - merging image with notes
PowerApps desktop – łączenie obrazu z notatkami

Rozwiązanie działa także bardzo dobrze gdy jest uruchomione w wersji mobile:

PowerApps mobile - merging image with notes
PowerApps mobile – łączenie obrazu z notatkami

Jeśli chcesz pobrać rozwiązanie znajdziesz je opublikowane w galerii rozwiązań Community PowerApps tutaj:
https://powerusers.microsoft.com/t5/Community-Apps-Gallery/App-for-taking-photos-and-adding-notes/m-p/289368#M186