Small picture (logo) per card

[jokay]

It would be great to be able to set a small picture per card on the overview.

Or even having an overview with the logo and name of the card only:
https://c.mobilegeeks.de/wp-content/uploads/2013/02/stocard-04.jpg

[brarcher]

Before creating this application I took a look at Stocard and a few others and how they worked. My concern with packaging the logos in the app is a legal one (discussion here). It is not clear to me if I would need to get permission from each company in writing prior to packaging their logo into the application and using it. Stocard's model appears to be based on partnerships with retailers. Although I do not know for sure, I suspect Stocard has the permission of the 1800 companies (as reported on Google Play) whose logo it uses.

It is unfortunately more complicated than all of that, however. This application is free (as in speech and beer) because of the license I have selected (GPLv3). To provide the assets with the same freedom if a logo from another company were to be included the company would need to give permission not only to me but to anyone who would fork this project, not knowing what they may do with it.

In the end, I am glad to provide an application that I (and hopefully others) find useful. I do not want to expose myself to legal trouble, nor be able to provide the application with the level of freedom and flexibility I expect.

Sadly, although your feature request would be really nice to have, I must decline it. Hopefully the reason is understood.

[jokay]

The idea was not to package the logos directly into the application but to provide the possibility to set a picture per card.

[brarcher]

Oh, that sounds do-able.

[brarcher]

How would that work, in your mind? Would the user take a picture with the camera of a logo? Would they import a photo? Something else?

[jokay]

For stocard I had taken some picture from a google image search and cropped it before setting it in the app.

You may link to an existing picture from the user's gallery or better import / copy it to some sub-dir of the loyality-card-locker data dir?

[jokay]

Or do directly a base64 encode of the picture.

[ni720]

That would significantly raise the acceptance in some shops for this app. As soon as an employee sees the logo of his company he is more likely to accept scanning the loyalty card from an app. Some shops however have a strict no-app-policy.

[brarcher]

Some shops however have a strict no-app-policy

Really? I've not heard of that before. Interesting.

I am for the idea of having a user selectable logo displayed with the summary on the main page and with the barcode. What is holding back the idea is a nice layout design for when there is and is not a logo present. I'm not the best that that, and am hoping that someone with an idea may contribute a suggestion.

[jokay]

Why not using a default card icon as kind of placeholder if no picture was set?

[jokay]

[jokay]

Some samples without and with icon.

[jokay]

I'm not sure if it's really necessary to have the barcode displayed on the main page?

[jimmyswimmy]

This last set of pictures offers an interesting idea - it would be awesome to include pictures of the card. I was shopping at Costco and the cashier wanted to see the card, but then scanned my phone... but he said if I'd had pictures he would have accepted that. I'd be interested to try to implement this (know nothing about android programming but I'm a quick study) if x-jokay has all of those icons etc. I hate front end work.

[jokay]

The screenshots were taken from the app stocard, I don't "own" those icons.

[brarcher]

If the issue is icons, I've used a number of icons from The Noun Project for other applications. @jimmyswimmy, if you are interested in taking this on and need some icons, maybe give that a look. The only thing which would need to be done is to ensure that the icons are release under a Creative Commons license and give credit in the README and in the About dialog. Here is an example of adding references for image resources.

[miawgogo]

Has any progress happened in this issue yet, I am tempted to work on this issue as I also feel like it would be useful in shops that might be a bit hesitant on scanning a barcode from this app

I'm currently thinking about how display it on the card page, I'll upload some scribbles at a later point as I am currently not near a laptop/desktop

[brarcher]

I've not made any progress on this. I encourage you to give it a shot!

[jokay]

Not as I'm aware of :)

Anyway, mobile payment solution providers start to integrate customer cards directly and will be used automatically during payment process.

We may continue to use this app for customer cards which are not yet supported.

[miawgogo]

Currently i have 3 ideas for the placement of the store logo, 2 i have mocked up in GIMP and the other is just having the logo over the barcode. I like it being by the store name, but that only works with stores that have a logo like the national trust, or the body-shop, most have their name in the logo so having it above the barcode may work but does not allow for low resolution images.

Mockups:

1

2

[miawgogo]

@x-jokay yeah, android pay supports quite a few now, although I did find this useful when visiting a national trust property and my farther had forgotten his card

[brarcher]

but that only works with stores that have a logo like the national trust

I would expect that if the store had or did not have the name in the logo it would still be recognizable to the end user, and may not require having the store name and logo both.

Could you create a mock-up with the logo above the barcode, to see what that is like?

but does not allow for low resolution images

Do you mean that if one were to use a low resolution image it would not look good, so for a good experience one would need to source higher resolution images?

[miawgogo]

@brarcher on the resultion thing, yes I did mean that

I'll try to make a mock up of the logo above the barcode when I can.

[brarcher]

Thanks for taking this on, @ioangogo!

[miawgogo]

Here is a mock up of it above the barcode

[brarcher]

I've received additional feedback on the layout in issue #194 from @denilsonsa. Namely,

• the number text was too long and was truncated sometimes,
• the name of the card does not appear in the single card view but the name is valuable, and
• the note of the card does not appear but is valuable

The first item is a good point. It is easy enough to reduce the font size to accommodate more characters. I would like to have the card ID one one line, but understand that a card ID can be any length. If the font were reduced it could acccomidate maybe 20 characters on my example device, from:

to this:

Is it preferable to allow the card ID to fill as many lines as it may take up? That is, something like:

For the third point, I'm not opposed to displaying the note if one has been entered. Perhaps something as simple as:

About the second point about the store name, presently the only option for the area at the top is to display the first character of the name. The goal for the future is to display the logo. If the logo is displayed, the store name is unnecessary. Should there be middle ground when no logo is configured? Namely, should the name be listed under the color but above the barcode, or within the color area:

[denilsonsa]

TL;DR: Please always show both the note and the barcode content, and make sure they are not truncated (i.e. wrap them as needed).

Hi! I'm gonna present some real-world use-cases.

About numbers and notes

There are some cases where the actual number in the barcode and the number printed on the card differ. For instance, I have a card that has 1234 5678 9012 3 printed, but the barcode actually reads 6064361234567890123 (i.e. the barcode includes a prefix). For this case, I store the human-readable number as a note.

Sometimes, the printed number is nicely formatted (01-234.567.8901), so I'd like to store this formatting somewhere, because it is easier to recognize as a valid number and easier to type manually. I'm currently storing it as a note.

In addition, some scanners (usually the laser ones) cannot read from the phone screen, or we are typing the number on a website, which means we really need the full number visible. Sometimes the barcode number is okay, other times the note is better.

There is one case where I store a "pin" code as a note (I know, not secure, I do not recommend doing that, but for this use-case it is fine). So, for this case I need both the number and the note visible.

Summary

Please show both the barcode number and the note.

And please make sure they all fit into the screen.

Fitting into screen is tricky, because of different device sizes and device resolutions, and arbitrary barcode content length. I have a few ideas regarding that:

• The simplest implementation is to have a fixed font size and allow the text to wrap.
• A more complex implementation could be to auto-adjust the font-size within a certain range to scale the text as needed. We could aim for largest font size without wrapping. And if it still doesn't fit, just wrap.
• As a special case, it could try to wrap the text exactly in half, if it is longer than one line but fits in two lines. Still, I'm not sure this is worth the effort.

I'd go for the simple solution.

[denilsonsa]

TL;DR: Just read the bold text.

About pictures

I like the idea of having a logo or a picture attached to each card. That's nice. However, be aware that adding such feature brings a lot of extra work.

• How to import the picture? Only from gallery or also from the camera? (I suppose Android already has an intent that solves this issue for us.)
• Can I try grabbing a picture from the Internet and use it? Google Docs has this feature, and it will likely be very useful for letting users find logos for their cards.
• After the picture is imported, the user might like to edit it (to fix distortion and rotation, crop the photo, tweak the colors/lighting/brightness/contrast). Sure, one could argue this is a job for a different app, but having this built-in can improve UX. And, yes, I know, this is a lot of effort to implement; as a developer I would like not to implement that. But as a user I would like to have that.
• After the picture is imported, how to display it? Because it will likely have a different aspect ratio than the widget. Should it be scaled to fit the area (no cropping), or scaled to cover the area (cropping). Should small images be scaled up? What if the user would like to view the picture as "full screen", including zoom?
• Cool! Now we have one picture imported into the card! Can I replace the picture with a new one? Surely, right?
• Can I add a second picture? As previously commented in this thread, people would like to keep both the front and the back of the card.
• Now that we have two pictures, how to display them? Sliding to the sides, like a carousel?
• Should we restrict to only two pictures? What if the user needs more?
• Okay, finally all of these questions have been solved! We are done, right? Well, not yet. People can export the cards as CSV, and pictures cannot go into CSV. How can we export the data from the app in a way that includes pictures? (Maybe a zip file with CSV and images, and the CSV includes a column with the picture names for each card.)
• Now that we can export everything, the app must be able to import it.

Do I want to discourage anyone from implementing this feature? A little bit Not at all! I just want to show the amount of work needed. We need to break it down by steps, by small tasks, and keep track of which tasks are still unfinished.

About names, logos, colors

Once we have a picture or logo, should it replace the name? Yeah, I think so. I don't see much reason to keep both the name and the picture visible in the "view card" screen. If the picture is displayed in a carousel widget, we could have one "slide" with just the name and another "slide" with just the picture. That way, if someone really needs, they can just swipe to one of the sides and see the name.

Now I have another feature request: please allow the user to pick their own colors for each card. Why? Because each company has their own brand color, so it is easier to find the card if the colors match. Even employees might "trust" the app a bit more if the colors match.

But, if we are going to support custom colors, we must support both background and foreground colors.

The end

Thank you for reading through my long wall of text. :)

[brarcher]

I appreciate the feedback about your use case, @denilsonsa. Thanks for the details.

Please show both the barcode number and the note.

Having used the app more since the layout change, I agree. How does the following look? I've changed the text to auto-size within a certain range. The card ID will go until it runs out of screen. If there is a note, it will be the last line of the screen. In addition, the single letter "logo" is replaced with the store name. Here are some examples:

Do I want to discourage anyone from implementing this feature? A little bit Not at all! I just want to show the amount of work needed.

This is one reason I've been putting it off. I've another app (which keep track of budgets) that allows photos of receipts. Managing the photos, allowing them to be imported/exported, etc, is a bit of work. In that case the images have no edit option, but to use the images in this app something would need to be done. If someone takes a photo it will likely not look that nice. Letting the app fetch an images from the internet requires internet permission, and I want to avoid that.

Getting colors and a better design for the main layout was an easier first step. (:

please allow the user to pick their own colors for each card.

I'm thinking that after getting some of the layout issues resolved this will be the next step. Right now the color is chosen for you and is basically arbitrary.

[denilsonsa]

I like the new screenshots!

A couple comments/questions:

• What if the note does not fit one line?
• If, like I explained, I have a human-readable version of the number in the note, shouldn't the note have a font as big as the main number?
• As a bonus, can the user select (and copy) the displayed number and note? Which is something from New feature: Copy the card ID #90. ;)

Getting colors and a better design for the main layout was an easier first step. (:

Fully agree! And I agree that picking colors seem like the next step.

[denilsonsa]

Just an idea I wanted to share…

In case we would like to let the user fetch logos from companies from the Internet, we could try letting the user navigate through this:

• https://commons.wikimedia.org/wiki/Category:Logos_of_companies_by_country
• https://commons.wikimedia.org/wiki/Category:Logos_of_organizations_by_country

On one side, the app would not ship with any logo, but just provide a browsing tool to find one. And it would get one from wikimedia commons.

However, I don't know the legal implications of that (hopefully none); and indeed it would require Internet access permission.

[brarcher]

What if the note does not fit one line?

If the card id is too long it can overflow the screen; as the length of the id is unbounded this is possible.

My prototype has the note field taking precedence over the id field. That is, if the card id is too long the note field will still be shown. Right now the note field is not limited in the number of lines. If this were so and the note were really big, the card Id could never appear.

If, like I explained, I have a human-readable version of the number in the note, shouldn't the note have a font as big as the main number?

I've not figured out how to get that to work just yet. Using a text view that has its size adaptable, I find that if the card ID has large text it squishes the note field. What could be done for now is to increase the minimum font size for the note field:

As a bonus, can the user select (and copy) the displayed number and note?

Can do.

In case we would like to let the user fetch logos from companies from the Internet

I'd like to avoid giving this app Internet permission. This is for privacy reasons, although it does make the use case of adding an icon more difficult. It is possible to launch a browser from an intent, but I am not aware of doing so and getting a result back (e.g. an image file). It could be a two step process, namely (1) tell user to download icon from a webpage and launch browser, then (2) tell user to find the icon they downloaded and launch a file browser. It would be a little clunky, but would avoid the Internet permission.

However, I don't know the legal implications of that (hopefully none)

I'm not a lawyer, but using the logos would be for "personal use", and it would be difficult to come after someone for downloading an image available from Wikimedia for use on their own phone.

Now, that list from wikimedia is interesting. Looking through some details, they source the images from elsewhere and post them as public domain (from what I saw). Trademark laws do apply, however. Here is an example statement from Apple about their logo:

Use of the keyboard Apple Logo (Option-Shift-K) for commercial purposes without the prior written consent of Apple may constitute trademark infringement and unfair competition in violation of federal and state laws. Use of Apple trademarks may be prohibited, unless expressly authorized.

This app is not "commercial" (as I get no revenue from it). However, the last sentence attempts to deny all right except those explicitly granted. That said, here is the Apple logo on Wikimedia.

It would be feasible (technically, not sure legally yet) to have the logos embedded into the app. However, it would increase the size of the app significantly. For example, the stocard app has 3944 logo embedded in it. Compressed that is 9MB. There is also a database which maps the logos to countries.

Coming back to the issues about the store name and note, are the images I shared above inline with your use case and OK for now?

[denilsonsa]

Yes, they look great! Looks like a great improvement from the first iteration (0.19).

My comment about very very long notes and numbers comes from my developer background trying to think and handle corner cases and trying to abuse the software to see if/when it breaks. It does not come from any real use case (but maybe someone somewhere will try it).

I dislike the idea of embedding hundreds of images into the APK. That's a lot of wasted storage for most users, something very valuable for low-end phones. And there will be several requests of adding new images and updating existing ones.

[brarcher]

I'll push the changes from my screenshots and create a new release.

The next step will likely be the custom colors. Can you clarify what you mean by:

But, if we are going to support custom colors, we must support both background and foreground colors.

Namely, what is the background and what is the foreground? In the following image, is the foreground blue and the background white? Does that refer to the top section with the store name?

[denilsonsa]

Can you clarify what you mean ny […]

Indeed, in that case the background is blue and the text (foreground) is white.

But there are cases where the background will be light and the text must be dark (or some color). BestBuy would have a yellow background with black text; IKEA would have yellow on blue, or blue on yellow.

For instance, Gmail labels can be configured to a pair of colors (background/foreground).

[brarcher]

I've a prototype for selecting the colors of the card info header. The configurations look like the following:

where one can either pick from a small selection of colors:

or pick or enter a custom color:

A default background color is selected at random (or for pre-existing cards it uses the same color used now). The color choices affect both the single card view as well as the main listing:

Anyone interested in giving it a try and providing feedback? The APK is:
loyalty-card-keychain-v0.21b.apk.zip

Note that this does add entries to the database, so take a backup before installing it in case you want to restore to the previous release.

[devurandom]

Would it be possible to allow the user to use a logo instead of the coloured-single-letter in the list of cards? That would make it easier / quicker to find the desired card in the list.

[brarcher]

I do not see why it could not. Right now I'm satisfied with the app layout. If someone where interested in working on the logo feature I'd be happy to review the pull request.

[OmlineEditor]

• How to import the picture?
  to start, use only the download option from the gallery

• Can I try grabbing a picture from the Internet and use it?
  do not use the internet at all. no internet

• After the picture is imported, the user might like to edit it
  at the beginning make only a crop. just select the desired piece from the picture and that's it. just the right aspect ratio. it is only at the beginning then in the future we will add new functionality

• After the picture is imported, how to display it?
  

• People can export the cards as CSV, and pictures cannot go into CSV.
  use base64 to import inside csv. now tah I have stored photos of contacts from the phone book. they are converted to base64

All problems can be solved. need to start acting. The idea was proposed already 2 years ago and there is no implementation yet. I hope this comes soon.

[OmlineEditor]

I do not see why it could not. Right now I'm satisfied with the app layout. If someone where interested in working on the logo feature I'd be happy to review the pull request.

Today, exactly 2 years have passed since the opening of the ticket.

you may not need to make a complex project to select a logo image.

you can make a simple logo for cards in the form of a picture of a certain size no more than 200x125 pixels (this is the ratio of the card 86x54 mm) the user can only upload small pictures that will be shown in the app. no cropping, no zooming, only simple images from the gallery no more than the specified size.

can you do that?

[TheLastProject]

@brarcher did say fairly clearly that they have no intent to work on this but will happily review a pull request introducing this feature. Sadly, to this day, nobody has created a pull request for this.

I may (no promises!) get to this at some point as I've been tackling a lot of little things in this project in my spare time, but if you really want this feature, maybe you should contribute some of your spare time implementing it. If you look at the pull requests section on GitHub, the vast majority get approved given the code is of acceptable quality and unit tests are written for them.

[OmlineEditor]

maybe you should contribute some of your spare time implementing it.

sorry I don't know this programming language. I can't program for Android.
I will wait.

[jokay]

Patience is a virtue.

[brarcher]

@OmlineEditor, thanks for your interest in the project. The project is a hobby that I do for free. These days there are other things taking my free time, so I'm not able to contribute as much as before. This is the reason I've really only accepted pull requests from other contributors rather than creating new features myself.

I'm happy that there are developers who are interested in the project and have submitted improvements or features. Not everyone is a developer or familiar with Android, so it is perfectly fine to report bugs, and suggest improvements and features and hope that someone picks them up. As the project is entirely run by volunteers, there is no expectation that anything in particular will be worked on. Contributions are based on what someone finds interesting. (:

My initial hesitance with this feature is the project possibly controlling the store logo assets. Expecting a user to go through the steps to download the logo and import it into the app removes this concern. All the other aspects of the feature are solvable from there, as @OmlineEditor's summary shows. Implementing the change will involve a bit of work -- if someone were interesting in giving it a try I'd help review the changes.

sorry I don't know this programming language. I can't program for Android.

That is fine. (:

Truth be told, this was one of the first Android apps I ever wrote. (And that is why the app is far from perfect -- there is a bit I would do differently if I had to do it over). If you were interested in trying to start with Android you are welcome to use contributing to this project as a learning opportunity, @OmlineEditor.