Flagg

il blog di un diversamente sano di mente

Category: Concepts (Page 1 of 2)

Resize Image on client side (Shrink Photo)

Scenario: your (web) application has to shrink an image before sending it to the server, in order to limit bandwidth and server storage
Many suggestion and js library could be found, the best in my perspective is Image Load (it adds feature like Exif inspection, Jcrop support and scale, rotation).
Everything was working like a charm, on the paper, on my mind… but then
  • Edge was not sending the resized image
  • Safari on iPad and iPhone was sending rotated images
  • Firefox was not sending the image at all

Every point of the above list was caused by something very annoying in the front-end development word. Sort of half-compliance to standard API.

For example:

  1. Edge supports the Javascript API File, but the File object (native method) and the Blob object differ from the standard W3C implementation (problems with the name for example and in some case you have to use msSaveBlob instead of the Blob method that you can find in Chrome/Firefox). So you have to “cast” the Blob to a File, or adding for example the name of the file to the server in another way (form hidden field etc etc)
  2. IE/Edge form object (useful FormData() ) doesn’t support delete method, so you can copy all the elements of an existing form but you cannot remove them
  3. Safari saves camera rotated images (it is an exif property) but you cannot see this until you don’t send the image to the server
  4. Firefox skip preventdefault event in random case (?!?)

So, the File Management Browser implementation is “almost” safe, “almost” sound but needs a bit of customization for each vendor.

 

PS as the original idea was related to uploading selfie like or avatar photo I’m saving on server side all the images in JPG format, as there is no camera mobile or not that save in PNG format… I want to highlight this as all the example I found manage only Canvas -> Png export/save  (even the Load Image Test page saves the output to Png renamed to Jpeg)

Other sources and credits

Negative space e stampa fotografica

Illusioni ottiche, loghi e composizione fotografica sono solo alcuni esempi di spazi negativi  comuni. In particolare in graphic design i creativi sono quelli che ne fanno più uso per realizzare brand unici. Amazon, FedEx, Carrefour per citare qualche esempio.

L’idea di veicolare un messaggio dentro un altro mi ha sempre fatto pensare a concetti come il watermark, la firma d’acqua,  la steganografia, dove appunto messaggio è “nascosto”, o meglio non è percepibile immediatamente, dentro un altro usato come veicolo.

I giapponesi hanno persino un kanji ad hoc per rappresentare questo concetto: ma

una alternativa

Finito il preambolo necessario giungo a descrivere l’idea, o meglio la genialata che mi è venuta in mente mettendo insieme altri due concetti:

  • spazio negativo
  • stampa di immagini
  • risparmio (di denaro e di spazio)

Tutto è nato dalla mia volontà di stampare alcune fotografia in formato 1:1, utilizzando però una stampante che al massimo stampa fotografie a sublimazione (dalla resa per me fenomenale) in un formato ridotto rispetto a quello originale.

Alternative? Un banale collage? Si può fare ma insorgono alcuni problemi:

  • bisogna ritagliare l’immagine originale in sotto immagini dalle dimensioni corrette
  • la proporzione della stampa non è uguale a quella della foto originale, quindi si perderebbe comunque una percentuale di area non stampata
  • un collage deve essere sistemato su una superficie stabile e magari incorniciato

Here comes the negative space: mi sono chiesto, perchè non stampare solo parti dell’immagine che collocate alla giusta distanza creino nell’osservatore l’idea dell’immagine originale? Nel caso di una figura intera o un primo piano americano bastano 3 immagini orizzontali che creano una composizione verticale.

Nel caso di un panorama viceversa, tre crop verticali sono sufficienti a realizzare una idea di insieme.

Update come richiesto giustamente da Dread, aggiungo qualche contributo dei primi esperimenti…

Mancano dei quadretti di sfondo per sopperire all’ORRIBILE tappezzeria

Kaizen – Zen

Come dire con due immagini basta perdere tempo per migliorare ma vivere in maniera tranquilla, senza troppi pensieri. Banalmente:

  • Kaizen : continuo miglioramento
  • Zen: tranquillità dell’animo

Chambara the App (Alpha)

Chambara (ALPHA) su Google Play Store

 

In honor of a great classic anime, Manga Mitokomon (in italian “L’invincibile Shogun“)

  • Free (as free beer)
  • No Spam
  • Less than 10MB (sorry at the moment is the minimum I can afford)

Come fare un app (funzionante) per Android con Python e Kivy

Sottotitolo

Seiryoku-Zenyo:  ovvero massima resa, minor energia sprecata uno-dei-motivi-cui-so-tante-cose

Dalla semplice volontà di creare una app che mostri una immagine e faccia sentire una canzone (IDEA moooolto banale).
Ma poi vuoi realizzarla per Android (per il momento, anche perchè non saprei come testarla su un dispositivo IOS).
E poi la vuoi realizzare in Python (con Kivy).
E poi vuoi proprio una app, un apk e magari anche firmato.
E poi scopri che per creare un apk con buildozer, Windows ti è inutile e ti serve obbligatoriamente una macchina virtuale, che trovi già pronta in rete ma solo a 64bit e quindi non la puoi usare.

Allora ti crei una bella Ubuntu pulita, ci installi quello che sembra essere necessario e:
riesci a compilare il primo APK con buildozer (un mostro di Frankenstein, che compila Java a partire da Python e ti sputa come minimo 6 MB di APK, anche per un Hello World).

L’APK funziona e riesci a caricarlo sullo smartphone e parte anche. Ma poi dicevi di volere l’audio e al file di configurazione di buildozer aggiungi una solo stringa e tutto il mondo scoppia.
Perchè ffmpeg ha le sue maledizioni…
Fattostà che ad un certo punto non compila più niente, si spacca tutto. Provi a rimuovere Python da Ubuntu (NON LO FATE MAI) ed a reinstallarlo.
Dopo parecchie altre maledizioni riprende a compilare APK, ma per l’audio ancora ciccia.
Poi cerchi nei newsgroup e aggiungendo altri pacchetti riesci ad aggiungere il supporto a ffmpeg MA NON FA PARTIRE GLI MP3.
Allora converti ad OGG VORBIS ma ancora nulla…
Alla fine devi coercitivamente forzare le estensioni di tutti i file multimediali che ti servono MA SOPRATTUTTO LE STESSE CARTELLE CHE LI CONTENGONO!
E la app parte e fa la canzoncina che volevi e mostra lo sfondo che volevi.
La macchina virtuale la ho salvata e la iberno anche nel frigo.

Si ringrazia CatLog per l’aiuto…

Massive Spam Delete on WordPress

I found a lot (A LOT) of spam comments on WordPress recently and decided to get rid of them easily.

Solution 1: from the WP backend

This solution is not reasonable because at the moment any bulk operation on the Db from the application generally cause a timeout. Akismet itself (the plugin which choose what is spam and what is not) has no such feature and installing SOMETHING to REMOVE other stuff is quite crazy imho.

So I decided to create a procedure on Database side, checking also the MySQL performance against such an operation.

First cold attempt: find what is Spam for Akistmet:

Table wp_commentmeta

Filter: meta_key = ‘akismet_result’ and meta_value = ‘true’

As you know something like “delete from `wp_commentmeta`where comment_id in (SELECT comment_id FROM `wp_commentmeta` WHERE meta_key = ‘akismet_result’ and meta_value = ‘true’) limit 1000” cannot be performed because MySql should operate on a table already analyzes.

So first save the comment ids in another table

create table to_delete as SELECT comment_id FROM `wp_commentmeta` WHERE meta_key = ‘akismet_result’ and meta_value = ‘true’

The you should delete this using an inner join or a in like

DELETE FROM `wp_commentmeta` WHERE comment_id IN (SELECT comment_id FROM `to_delete`
) LIMIT 10000

The magic limit value is a good parameter to check performance. And my DB at the moment is really bad on performance and unpredictable (the db is online and in “production”)

  • delete 1000 3.5 sec
  • delete 10000 16 sec
  • delete 10000 29 sec

So to complete, first attempt to create a stored procedure in order to do all the job:

drop procedure if exists remove_spam_comments;

delimiter #
create procedure remove_spam_comments()
begin

declare v_max int unsigned default 1000;
declare v_counter int unsigned default 0;

start transaction;
while v_counter < v_max do
DELETE FROM `wp_commentmeta` WHERE comment_id IN (SELECT comment_id FROM `to_delete`) LIMIT 10;
set v_counter=v_counter+1;
end while;
commit;
end #

Custom Map Manager

Requirements:

  • Gestione mappa in JS (visualizzazione, eventi mouse, callback, caricamento mappe raster e vettoriali)
  • Generazione di mappa dinamica basata su punti
  • Riconoscimento della forma in base ai punti della mappa o della immagine da analizzare
  • Raccolta dei dati in un database locale (i.e immagine X, 4 rettangoli e loro posizioni)
  • Salvataggio dei vari livelli di analisi in una nuova immagine PNG, contenente nei metadati tutte le informazioni raccolte.

Fonti:

  • http://codepen.io/taylorcoffelt/pen/EsCcr
  • https://github.com/auduno/clmtrackr
  • http://www.vincentbroute.fr/mapael/
  • http://kartograph.org/about/kartograph.js/
  • Sodipodi

Harvest

Primo dei due proof-of-concept che ho ultimato in questi giorni (pensati durante le ferie).

Ogni tanto mi serve, data una pagina web, visualizzare tutte le immagini contenute. Perchè? Boh in questo momento neanche lo ricordo…

Ah si! Così posso passare un sito come sorgente “pulita” di immagini.

Comunque l’url della prima alfa è questo 

http://www.rlieh.com/testing/harvest/harvest.php?url=SITO&opzioni

Esempio

http://www.rlieh.com/testing/harvest/harvest.php?url=http://500px.com/glaucopater

In querystring aggiungerò varie opzioni, per il momento:

  • css, aggiunge due righe di stile 
  • format=json, genera un file json al posto dell’html

Website to Gallery

500px Page -> Feed Rss -> JSON -> Lightbox Gallery

Per fare tutto ciò una volta ci volevano dei giorni, ora si realizza tutto con Jquery e due plugin poco invasive.

Il tutto anche testabile con http://jsfiddle.net/

Piccolo update: demo salvata su jsfiddle

Il plugin di jQuery pare ora svanito nel nulla, per fortuna ne esistono ancora delle copie in rete.

Sotto il codice, qua un’anteprima a schermo intero

<head>
<script type=“text/javascript” src=“http://leandrovieira.com/projects/jquery/lightbox/js/jquery.lightbox-0.5.pack.js”>script>
    
    <script type=“text/javascript” src=“http://bobcravens.com/demos/RssDemo/scripts/jquery.jgfeed-min.js”>script>
    
<link rel=“stylesheet” type=“text/css” href=“http://leandrovieira.com/projects/jquery/lightbox/css/jquery.lightbox-0.5.css” media=“screen” />
        <script>   
    
$.jGFeed(‘http://500px.com/glaucopater/rss’,
function(feeds){
// Check for errors
if(!feeds){
// there was an error
return false;
}
// do whatever you want with feeds here
for(var i=0; i<feeds.entries.length; i++)
{
var entry feeds.entries[i];
console.log(entry);
/Entry title
//$(‘#results’).append(entry.title ‘ : ‘ entry.link 
);

var img $(“img”entry.content).attr(“src”);
var title entry.title;
var link entry.link;

$(‘#results’).append(+img +“‘ style=’width:150px;height:150px;’/>);

};

$(function() {
$(‘#results a’).lightBox({fixedNavigation:true});
});
}, 9);
    </script>   
    
head>

<body>
<div id=“results”>div>
body>

Menu Custom in Xampp

Modifica da apportare allo script \xampp\htdocs\xampp\navi.php, dopo la riga 109 aggiungere 

 

















$dir = "../";
if ($handle = opendir($dir)) {
while (false !== ($entry = readdir($handle)))
{
if ($entry != "." && $entry != "..") {
if (is_dir($dir."/".$entry) === true)
{
echo "". substr($entry,0,10)."
";
}
}
}
closedir($handle);
}
?>



Page 1 of 2

Powered by WordPress & Theme by Anders Norén