fdebijl / emojibuilder Goto Github PK

View Code? Open in Web Editor NEW

13.0 2.0 1.0 927 KB

Construct (or destruct) emoji from layered SVGs

Home Page: https://emoji.debijl.xyz/

License: GNU Affero General Public License v3.0

HTML 23.21% CSS 12.48% JavaScript 55.43% PHP 8.89%

javascript emoji twemoji svg

emojibuilder's Introduction

EmojiBuilder

Summary:

Use Twitter's Open Source SVG emoji to build your own emoji/abominations.

Roadmap:

EmojiBuilder is still very much in development, check out the roadmap project for all the function that should be implemented shortly. If you think something is missing, put in an issue above!

Contributing & Building:

Yes please

Build your local copy by downloading or cloning the repo and doing the following:

sudo apt-get install nodejs npm && sudo apt-get update
npm install
gulp

Build/update the emoji collection by running svg.php - this script is also set to run after npm install by default:

# You should also install git in the unlikely event you have not done so yet.
sudo apt-get install php && sudo apt-get update
# Assuming cwd is emojibuilder root
php -f fetcher/svg.php

When deploying you should only upload the following files:

css
favicon
img
js
svg_detailed
svg_latest
emojiworker.js
index.html
svgs_detailed.json
svgs_latest.json
manifest.json

emojibuilder's People

Contributors

Stargazers

Watchers

Forkers

fernandobdansi

emojibuilder's Issues

Detect PWA mode and remove superfluous menu items accordingly

such as 'Available offline' and 'Add to desktop'

Improve loading performance

Time to interactivity is 14 seconds right now, this could easily be reduced by only loading the first N number of emoji or lazy loading them.

Path manipulation

Every path should be scalable, rotatable and duplicatable.
Requires #4 to be implemented first.

upon saving I get blank image

it's like I saved nothing but empty space.

elements currently not movable?

Hi, the elements of the emojis on your site are currently unmovable for me. LMK if this is just a glitch on my end or if something is wrong, but I thought you should be alerted to it regardless.

Prevent sidebar overflow

The emojigrid in the sidebar overflows somewhat on most dimensions, this should be fixed with some CSS refactoring.

'Save as PNG' doesn't render SVG

Seems to be a known problem with html2canvas.

Possible solution:
Copy the drawboard to a new temporary element and use canvg to render out the inline SVG as canvas elements.

Categories with spaces are assigned the wrong class

Should be tab_body-parts, where the dash is swapped with a space when linking the directory for the images to be loaded from.

Import emoji via script

allan please add implementation
https://unicode.org/Public/emoji/11.0/emoji-test.txt

Add old emoji (unicode 9-10)

The current emoji are very grouped, so there's not much to move around. There should probably be a splash screen asking which version to use.

PNG output is clipped compared to drawboard

This drawboard:

Results in this output, where the top 50 or so pixels are clipped:

Probable cause:
Either the renderbox is too small, or the SVG's are too large. The SVG's and the renderbox both need an absolute value in pixels for their width and height, so either one of those needs to be adjusted dynamicallly in SaveAsPNG()

Add loading spinner for sidebar while loading emoji

Layer selection

Every path should be selectable by means of a single/double click, which in turn should allow the following functionality:

deletion of paths
reordering of paths