Rysowanie progress bar'a w PIL - jakas biblioteka?
22 views
Skip to first unread message
zeppelin
Oct 22, 2016, 6:24:19 AM10/22/16
to django-pl - grupa polskiej społeczności Django
Potrzebuję narysować coś takiego z gradientem:
http://kottenator.github.io/jquery-circle-progress/ (drugi przykład od lewej - "animation progress")
Tyle, że to musi być obraz statyczny. Chcę go zwrócić jako django'wy widok, czyli na końcu funkcji we views.py powinno być coś w rodzaju:
return http response (content-type: 'image/png').
Wszystko po to, aby użyć tego adresu z wygenerowanym dynamicznie obrazkiem w facebook'owym og:image. Wcześniej próbowałem tak wygenerować obrazek z base64 - po przerobieniu canvasa z powyższej bilbioteki jquery, ale facebook nie przyjmuje takiej postaci.
matplotlib jest całkiem ciekawy, ale jednak trochę mało efektowny w porównaniu z jquery-circle-progress: http://matplotlib.org/examples/pie_and_polar_charts/pie_demo_features.html
Lub jeśli nie ma jakiejś fajnej bilbioteki to może pomysł jak ugryżć w PIL (pillow) narysowanie czegoś takiego jak w jquery-circle-progress?
Dzięki!
Maciek Olko
Oct 22, 2016, 5:56:17 PM10/22/16
to django-pl - grupa polskiej społeczności Django
Najsprytniej byłoby uruchomić linkowaną przez Ciebie bibliotekę jako usługę po stronie serwera, robić z widoku żądanie do usługi (z konwersją canvasa na base64 http://stackoverflow.com/a/5971674/1161025 ) i po prostu return HttpResponse(base64tekst, 'image/png').
Jeśli chodzi o PIL-a, po Twoim pytaniu rozejrzałem się w Internecie, szukając odpowiedzi. Wygląda na to, że do gradientów w PIL-u zawsze trzeba pisać własne funkcje.
Linki, które być może się przydadzą:
Jak znajdziesz później czas, to daj znać, co wymyśliłeś.
--
Otrzymujesz tę wiadomość, bo subskrybujesz grupę „django-pl - grupa polskiej społeczności Django” w Grupach dyskusyjnych Google.
Aby anulować subskrypcję tej grupy i przestać otrzymywać od niej wiadomości, wyślij e-maila na django-pl+...@googlegroups.com.
Aby opublikować wpis w tej grupie, wyślij e-maila na djan...@googlegroups.com.
Otwórz tę grupę na https://groups.google.com/group/django-pl.
Więcej opcji znajdziesz na https://groups.google.com/d/optout.
zeppelin
Oct 22, 2016, 6:02:05 PM10/22/16
to django-pl - grupa polskiej społeczności Django
Ciekawa propozycja. Nigdy w node.js nic nie robilem. Co dokladnie robi wskazany przez Ciebie na stackoverflow fs.writeFile('image.png', buf); ?
Wyglada jakby zapisywało plik.
Jeszcze myslalem o opcji uzycia jakiejs libki to ... zrzutu ekranu :)
Maciek Olko
Oct 22, 2016, 7:12:09 PM10/22/16
to django-pl - grupa polskiej społeczności Django
Tak, zapisuje grafikę w systemie plików (https://nodejs.org/api/fs.html#fs_fs_writefile_file_data_options_callback). W dodatku w tamtym linku do SO ktoś ręcznie przekleja base64, więc nie jest to najlepszy przykład.
Jako że ta biblioteka operuje na canvasie (czyli potrzebuje przeglądarki), przydałby się PhantomJS (http://phantomjs.org/) i skrypt w nim w stylu:
"use strict";
var page = require('webpage').create();
"use strict";
var page = require('webpage').create();
var imageData;
page.viewportSize = { width: 400, height : 400 };
page.content = '<html><body><canvas id="surface"></canvas></body></html>';
page.viewportSize = { width: 400, height : 400 };
page.content = '<html><body><canvas id="surface"></canvas></body></html>';
page.includeJs( 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js',
function() {
(page.includeJs(
'https://raw.githubusercontent.com/kottenator/jquery-circle-progress/master/dist/circle-progress.min.js',
function() {
(page.includeJs(
'https://raw.githubusercontent.com/kottenator/jquery-circle-progress/master/dist/circle-progress.min.js',
function() {
(page.evaluate(function() {
// jQuery is loaded, now manipulate the DOM
var $circle = $('#surface');
$circle.circleProgress({ value: 0.75 });
$circle.circleProgress({ value: 0.75 });
imageData = $circle.circleProgress('widget').toDataURL("image/png");
}))
}))
}
))
}
}
);
phantom.exit();
phantom.exit();
return imageData;
Jeśli chodzi o zrzut ekranu – pamiętaj, że silnik musi wykonywać też JavaScript po stronie przeglądarki. Wygląda na to, że najlepszym sposobem na to jest Selenium i też PhantomJS.
zeppelin
Nov 23, 2016, 6:40:44 PM11/23/16
to django-pl - grupa polskiej społeczności Django
Porzucilem pomysl zrzutu ekranu, bo po 1) dosc wolno dzialalo, po 2) mialem problemy na serwerze z konfiguracją (lokalnie ok).
Póki co teraz mam rozkminę odnośnie użycia obrazków wygenerowanych przez PIL i użytych jako og:image. Okazuje się, że FB nie chce ich czytać. Bardzo mnie to zmartwiło.
Na stronie testującej OG tagi zwrócony został komunikat:
"The provided 'og:image' properties are not yet available because new images are processed asynchronously."
Maciek Olko
Nov 25, 2016, 3:51:02 AM11/25/16
to django-pl - grupa polskiej społeczności Django
Czyta je, ale asynchronicznie, czyli nie w tym samym momencie, kiedy tworzy wpis dla strony po raz pierwszy. Według mojego rozumienia komunikatu, przeczyta je w niedalekiej przyszłości.
Tomek Kiedos
Nov 25, 2016, 4:27:43 AM11/25/16
to djan...@googlegroups.com
Tak, ale jak się otwiera okno share na fb to nie czyta tego obrazka z og:image więc na jedno wychodzi.
Chyba pozostaje zapis obrazka i podanie urla juz istniejącego, choć tego chcialem uniknąć.
Aby anulować subskrypcję tej grupy i przestać otrzymywać od niej wiadomości, wyślij e-maila na django-pl+unsubscribe@googlegroups.com.
Aby opublikować wpis w tej grupie, wyślij e-maila na djan...@googlegroups.com.
Otwórz tę grupę na https://groups.google.com/group/django-pl.
Więcej opcji znajdziesz na https://groups.google.com/d/optout.
--
Otrzymujesz tę wiadomość, bo subskrybujesz grupę „django-pl - grupa polskiej społeczności Django” w Grupach dyskusyjnych Google.
Aby anulować subskrypcję tej grupy i przestać otrzymywać od niej wiadomości, wyślij e-maila na django-pl+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages