{"id":18336157,"url":"https://github.com/turekbot/letter-avatar","last_synced_at":"2025-04-09T19:55:00.592Z","repository":{"id":76571173,"uuid":"123493056","full_name":"TurekBot/letter-avatar","owner":"TurekBot","description":"A Material-Design-like avatar that displays the first letter of a user's name. Similar to those shown at inbox.google.com","archived":false,"fork":false,"pushed_at":"2018-04-19T23:48:24.000Z","size":20,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-09T19:54:55.704Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TurekBot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-01T21:13:51.000Z","updated_at":"2018-04-19T23:48:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"b738582b-4b4b-41ff-a989-2e9c1b3b4da7","html_url":"https://github.com/TurekBot/letter-avatar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TurekBot%2Fletter-avatar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TurekBot%2Fletter-avatar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TurekBot%2Fletter-avatar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TurekBot%2Fletter-avatar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TurekBot","download_url":"https://codeload.github.com/TurekBot/letter-avatar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103911,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T20:06:23.574Z","updated_at":"2025-04-09T19:55:00.565Z","avatar_url":"https://github.com/TurekBot.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LetterAvatar\nA Material-Design-like avatar that displays the first letter of a user's name. Similar to those shown at inbox.google.com\n\n![Prime Example](https://i.imgur.com/OsmmaMe.png)\n\n\n## It's SceneBuilder compatible!\n\n1. Clone this repository and run `mvn clean install` in the root of the project.\n2. Add to SceneBuilder\n    1. ![Add to SceneBuilder Animation](https://i.imgur.com/7DHuDJQ.gif)\n\n## Sample Usage\n```java            \n// The argument will determine the background color; this will always be the same color for the same input.\n// This assumes you want the avatar's letter to be the first letter of the user's name.\nLetterAvatar la = new LetterAvatar(user.getName());\n\n// If you want to be explicit about which letter to use, use this constructor.\nLetterAvatar la = new LetterAvatar(\"B\", \"some unique-to-the-user value\");\n```\n---\n\n## Change Avatar Character\nI designed LetterAvatar to have one character, but if you felt like it, maybe you could put two.\n\n    letterAvatar.setAvatarCharacter(\"Z\");\n    \n## Change Size\n`LetterAvatar` changes its size based on the font size, so all you have to do is make the font a little bigger and the background circle will automatically grow.\n\n    letterAvatar.setFont(Font.font(32));\n    \n## Change Background Color Pallete\n`LetterAvatar` uses the [Material Design Color Palletes].\n\nBy default I assume you want to use *all* of them and so the only thing left to do is to decide **how dark**—I call this the color number for lack of a better phrase.\n\n### Darkness\n\n    leterAvatar.setColorNumber(\"100\");\n    \n    ![the gammut](https://i.imgur.com/GRLyJYo.png)\n\nYou can pick\n\u003cul\u003e\n\u003cli\u003e50\u003c/li\u003e\n\u003cli\u003e100\u003c/li\u003e\n\u003cli\u003e200\u003c/li\u003e\n\u003cli\u003e300\u003c/li\u003e\n\u003cli\u003e400\u003c/li\u003e\n\u003cli\u003e500\u003c/li\u003e\n\u003cli\u003e600\u003c/li\u003e\n\u003cli\u003e700\u003c/li\u003e\n\u003cli\u003e800\u003c/li\u003e\n\u003cli\u003e900\u003c/li\u003e\n\u003cli\u003eA100\u003c/li\u003e\n\u003cli\u003eA200\u003c/li\u003e\n\u003cli\u003eA400\u003c/li\u003e\n\u003cli\u003eA700\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/p\u003e\n*A100, A200, A400, and A700 are not available for brown, grey and blue-grey.\n\n#### Font Color\nIf you find yourself hating the fact that at a certain darkness some colors require a white font fill and others don't,\n 1. [Blame](https://gist.github.com/maxd/63691840fc372f22f470#file-modena-css-L112) [JavaFX](https://gist.github.com/maxd/63691840fc372f22f470#file-modena-css-L204) :smile:\n 2. In your stylesheet, override the -fx-text-fill using something like this\n    \n    .letter-avatar {\n        -fx-text-fill: white;\n    }\n    \n### Hues\nThe hues are looked up from a stylesheet that `LetterAvatar` holds inside it. Theoretically, if you were to maintain the pattern, at runtime you could add and take away hues from `letterAvatar.getHues()`. This would be your stratgey if you wanted to use accent colors (because brown, grey and blue-grey don't have accent colors).\n\n    \n[Material Design Color Palletes]: https://material.io/guidelines/style/color.html#color-color-palette\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturekbot%2Fletter-avatar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fturekbot%2Fletter-avatar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturekbot%2Fletter-avatar/lists"}