Flagg

il blog di un diversamente sano di mente

Category: Tech (Page 1 of 4)

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

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…

Nikon Picture Controls showcasing

Starting from NikonPC preview (one by one), I made a little script to automate:

  • selection of a single picture control
  • downloading the modified preview image

Target is a gallery with ALL the previews in order to choose the preferred/best one for the photo.

Two methods: one to update the preview, another one to force a file download.

The Script


function updatePreview(index)
{    
    
js('imgPreview').onReady('onLoad', function() {
    curve.init();
    curve.initPreviewImage();
    var elmFileList = js('selFileList').elm;
    if (!elmFileList) {
        console.log("elmFileList " + index);
        return false
    }
    elmFileList.selectedIndex = index;
    var src = this.elm.src;
    this.elm = new Image();
    js(this.elm).addEvent('load', function() {
        npc.load();        
        forceDownload(index);
    }, false);
    this.elm.src = src;
});
    
}

function forceDownload(index)
{   
    var link = document.createElement('a');
    link.href = $("#cLutImage")[0].toDataURL("image/png");      
    link.download = 'Download' + index + '.png';    
    document.body.appendChild(link);
    link.click();
}

function main(index)
{       
    updatePreview(index);
}

How to launch:

  • Open https://nikonpc.com/
  • Press F12
  • Inside JS Console
    • Paste the above code
    • input main(X), where X is an available Picture Control in the page. i.e. main(4)
    • press Enter
  • DownloadX.png modified file will be downloaded

Rename Visual Studio Window Title

When you have a lot of different solution to work on, on the same time:

Visual Studio Extension: Customize Visual Studio Window Title

vs_rename_window_title.jpg

vs_rename_window_title.jpg

Support for VS 2010 onwards

Just open Tools –> Options  –> Rename VS Window Title and set something like [parent:2]\[solutionName] (there are other optional settings)

Json Test Helpers

Create an HTML file containing this code and open it from the web browser:

 

A Json sample:

{"employees":[ {"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}

Hide images from WhatsApp Web interface

  • Press F12 with the https://web.whatsapp.com/ page opened
  • Go to the console command line
  • Copy and paste the below code
  • Press Enter

Code:

var thumbs = document.getElementsByClassName("image-thumb");
var l = thumbs.length;for (var i = 0; i < l; i++) { thumbs[0].parentNode.removeChild(thumbs[0]);}

All the thumbnails will be removed and your privacy will be preserved!

Enable log in Mysql (for investigation)

SET global general_log = 1;
SET global log_output = ‘file’;

show variables;

The curious case of updating a value

The issue, described below is very strange when you find it, because it works only in MySql.

In MySql the update keeps track of the order of the parameters updated. So while for any known DBMS when you update a field computed considering another one (i.e. set A = 10, B = A…) the value of A and B are calculated starting from the original value for each update in MySql as soon as you update a field, this new value will be used instead of the original.

Besides this you can use the order clause to specify HOW update the values.

This cose works on MySql and on SQL SERVER:

create table testUpdate (id int primary key not null, 
valA decimal(10),
valB decimal(10),
valC decimal(10)
);

insert into testUpdate values (1,0,0,0);
insert into testUpdate values (2,0,0,0);
insert into testUpdate values (3,0,0,0);
 
-- update session

update testUpdate 
set  valA=100, valB=200, valC=valA+valB
where id = 1;
update testUpdate 
set  valA=100,valC=valA+valB, valB=200
where id = 2;
update testUpdate 
set  valC=valA+valB, valA=100, valB=200
where id = 3;


select * from testUpdate; 
drop table testUpdate;


Page 1 of 4

Powered by WordPress & Theme by Anders Norén