Italian Visibilità pulsanti

AlpVir

Well-Known Member
Licensed User
Longtime User
Ho un'app che visualizza, a pieno schermo, l'immagine di una webcam. Sul lato destro ci sono 4 o 5 icone nere su fondo trasparente che si sovrappongono all'immagine. Esse hanno le funzioni di un pulsante.
Fino a qui tutto ok ma se l'immagine ha tonalità scura le icone (che hanno funzioni da pulsante) si vedono malamente o non si vedono affatto. L'ideale sarebbe che le icone fossero bianche su sfondo trasparente.
Il contrario se l'immagine ha tonalità (per lo meno in quel lato) chiara.
La domanda è la seguente: è possibile in modo facile e soprattutto veloce stabilire se il set di icone da visualizzare sia quello nero o bianco (entrambi ovviamente con sfondo trasparente) ?
Grazie per l'attenzione.
P.S.: Allego qualche icona da me utilizzata.
 

Attachments

  • frecciasinistra.png
    frecciasinistra.png
    1.8 KB · Views: 186
  • ic_create_black_48dp.png
    ic_create_black_48dp.png
    578 bytes · Views: 215
  • ic_delete_black_48dp.png
    ic_delete_black_48dp.png
    498 bytes · Views: 190
  • ic_refresh_black_48dp.png
    ic_refresh_black_48dp.png
    1.4 KB · Views: 198

LucaMs

Expert
Licensed User
Longtime User
Ovviamente intendi dire se sia possibile rilevare la luminosità dell'ambiente ripreso e quindi adattare il tuo menu.

Non so, dovrei cercare in giro; intanto una mezza soluzione sarebbe... fare la via di mezzo (In medio stat... il dito per gestacci :p), ovvero fare le icone di colore grigio.
 

AlpVir

Well-Known Member
Licensed User
Longtime User
Per evitare equivoci preciso che le immagini sono quelle di alcune webcam che riprendono situazioni magari distanti migliaia di km. L'ambiente e la sua luminosità in cui si trova il dispositivo Android non centra per nulla. Si tratta di esaminare delle immagini (o meglio una piccola parte di esse) e di decidere se vanno meglio le icone bianche o quelle nere. Analizzare pixel per pixel mi sembrerebbe assai oneroso, posto che sappia farlo.
 

udg

Expert
Licensed User
Longtime User
Analizzare le immagini secondo lo schema HSL e contare in particolare su L, potrebbe essere un modo?
In caso affermativo credo che sul Forum esistano pezzi di codice che trasformano da un sistema all'altro (es. RGB -> HSL).
https://it.wikipedia.org/wiki/Hue_Saturation_Brightness
 

AlpVir

Well-Known Member
Licensed User
Longtime User
Per quel che ne ho capito io i suggerimenti circa gli schemi RGB e HSL considerano i singoli punti delle immagini. A lume di naso, poichè i punti sono migliaia un esame di essi impiegherebbe un tempo inaccettabile.
Ho fatto qualche esperimento con Photoshop ed ho visto che forse si potrebbe sfocare moltissimo tutta l'immagine o - meglio - solo la parte di essa, quella interessata dalle icone. Prelevare da questa parte 3 o 4 o 5 punti che - sembrerebbe - hanno sempre una buona corrispondenza con la luminosità generale dell'immagine (o di una sua parte). Quindi individuare la luminosità di questi 3 o 4 punti e a questo punto decidere se usare le icone nere oppure quelle bianche.
 

Emme Developer

Well-Known Member
Licensed User
Longtime User
Io penso che ci sia direttamente un problema di fondo di UX, non risolvibile con un set di icone bianche piuttosto che nero. Il processo computazionale dietro al calcolo dell'immagine frame per frame è già abbastanza alto per i fatti suoi essendo una webcam, figurati andandola ad analizzare.
La soluzione migliore è quella di porre una banda scura sotto il set di icone bianco, dipende un po' quello che serve a te. Se hai un dispositivo abbastanza grande, può mettere le icone a 24px, fare una banda da 48px sotto e ridurre la grandezza della view che cattura la webcam di 48px. L'altra soluzione è sovrapporre il panel nero con una trasparenza, solitamente si fa 0x99000000

Altra cosa, le icone che stai utilizzando le trovi nell'assets di Material design. Non usare delle imageview per caricarle, usa una label e impostale con il Typeface del Material design, in modo che puoi cambiare facilmente colore e grandezza dell'icona senza dover andare su ps ogni volta
 
D

Deleted member 103

Guest
Che ne pensi die questa soluzione?
icon_background.png
 

Attachments

  • Icone_background.zip
    8 KB · Views: 190

AlpVir

Well-Known Member
Licensed User
Longtime User
Credo che l'aver specificato che si tratta di immagini di una o più webcam abbia messo fuori strada qualcuno. Sono immagini provenienti dal web, webcam o non webcam.
L'app non influisce sulla loro creazione o modifica o analisi o altro nè può intervenire su di esse salvo visualizzarle così come sono, chiare o scure che siano.
Ho ben evidente che se le icone le metto su uno sfondo uniforme di tonalità e colore opportuni essere saranno sempre ben evidenti, ma non è questo quello che voglio fare e non è scopo delle mie domande.
Vorrei in soldoni mantenere lo sfondo delle icone trasparenti (così non si perdono particolari delle immagini e non devo ridurne le dimensioni) e che esse siano sempre ben visibili. E' un problema, in fondo in fondo, di analisi di immagini e di decisioni da prendere in funzione del risultato di questa analisi.
 

udg

Expert
Licensed User
Longtime User
Di un'immagine potresti analizzare solo le parti che verrebbero ricoperte dalle icone e quindi trarre indicazione della luminosità in quelle aree.
Come ulteriore riduzione del numero di pixel da analizzare potresti limitare il check a perimetro e qualche punto interno.
Come contro vedrei la possibilità di avere icone chiare e scure alternarsi sulla stessa immagine a causa di diverse luminosità rilevate lungo la striscia delle icone. Prova a disegnare questo effetto con un programma grafico e vedi se possa essere un problema o se invece è esattamente ciò che vorresti ottenere.
 

sirjo66

Well-Known Member
Licensed User
Longtime User
secondo me grossi problemi non ce ne sono
1) prendi l'immagine voluta, e fai un copia-incolla su di un altra immagine, ma solo della zona a destra, cioè quella interessata dai tuoi pulsanti
2) su di questa immagine (che quindi sarà abbastanza piccola) applichi un "filtro" e la trasformi in bianco e nero (in realtà la trasformi in tonalità di grigio)
3) fai un calcolo e trovi il valore medio tra tutti i pixel grigi
4) se il valore calcolato è minore di un certo valore (che poi stabilirai tu) l'immagine è scura e devi visualizzare le icone chiare, se invece questo valore è superiore al valore stabilito l'immagine è chiara e quindi dovrai mostrare le icone scure
 

AlpVir

Well-Known Member
Licensed User
Longtime User
Approssimativamente la soluzione proposta da sirjo66 (che ringrazio) ricalca quella solamente da me accennata al post #9.
Sono tutte cose da sperimentare (lo farò quanto prima, in fase di rifinitura dell'app) ed in particolare lo sono la scelta del tipo di filtro da adottare ed il calcolo del valore medio dei pixel grigi.
 

sirjo66

Well-Known Member
Licensed User
Longtime User
per tua comodità ti riporto la formula per il filtro da adottare:
per ogni pixel devi fare:
Luminosità = 0.21 R + 0.72 G + 0.07 B
Praticamente ti esce un numero da 0 a 255 che rappresenta il grigio, e che non è altro che la tua luminosità.
Poi fare la media è semplicissimo, se ad esempio ti ritrovi ad analizzare 1000 pixel, non fai altro che fare la somma del valore della luminosità di ogni pixel e poi dividi per 1000
 
Last edited:

AlpVir

Well-Known Member
Licensed User
Longtime User
Direi che con la formula fornita da sirjo66 ho tutti gli elementi per verificare se l'idea di scegliere uno o l'altro set di icone produce un risultato valido o meno dal punto di vista dell'usabilità dell'app.
Ho intenzione di utilizzare la libreria FastBlurUtil per sfocare l'immagine
B4X:
    ivsmall.Initialize("ivsmall")
    Activity.Color=Colors.White
    Activity.AddView(ivsmall,100%x,0,50%x,50%y)
    ivbig.Initialize("ivbig")
    Activity.AddView(ivbig,0,0,100%x,100%y)
    ivsmall.Bitmap=LoadBitmap(File.DirAssets,"32.jpg")
    ivsmall.Gravity=Gravity.FILL
    ivbig.Bitmap=fbu.toBlur(LoadBitmap(File.DirAssets,"32.jpg"), 2)
    ivbig.Gravity=Gravity.FILL
ed in successione la libreria MESGraphix per trasformare tutto in b/n
B4X:
    Dim IV As ImageView
    IV.Initialize("IV")
    Activity.AddView(IV,0,0,100%X,100%y)
    Dim convert As Bitmap
    convert.Initialize(File.DirAssets, "32.jpg")
    convert = mes.toGrayscale(convert)
    IV.Bitmap=convert
A questo punto, invece di controllare 1000 pixel ne controllo solo una decina e, grazie al fatto che l'immagine è sfocata, ho la quasi assoluta certezza di ricavare un unico valore medio attendibile sulla base del quale fare le mie considerazioni.
Forse un processo un po' lungo e complicato ma fattibile.
 

ilpesce

Member
Licensed User
Longtime User
Salve ragazzi... io ho risolto un problema simile semplicemente aggiungendo un contorno bianco alle icone nere (forse potrebbe anche bastare un ombreggiatura), l'effetto non è male.
tanti auguri a tutti
 
Top