Advertisement:

Author Topic: How can I use special characters as smiley codes?  (Read 8683 times)

Offline Jade Elizabeth

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,629
  • Gender: Female
  • Keep your enemies close and your friends closer ;)
    • jadetrainor on LinkedIn
    • @alundra on Twitter
    • Jades-World
How can I use special characters as smiley codes?
« on: February 27, 2016, 06:45:16 AM »
When I paste these into the message box it wont preview/post...so I've attached a picture of the codes. I want to use codes like facebook does...How can I make this work? Also I would need my posts to still work...since it doesn't seem to be working when I paste this stuff in posts.

You can find a full list here.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring forum: Color Me Forum/Patreon.

Offline Study Force

  • SMF Hero
  • ******
  • Posts: 3,101
    • @studyforceps on Twitter
    • Study Force
Re: How can I use special characters as smiley codes?
« Reply #1 on: February 27, 2016, 12:54:02 PM »
Interested too, given that many people use their phones to browse my site...

For me, when I used emojis, the post comes out blank.

Offline Jade Elizabeth

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,629
  • Gender: Female
  • Keep your enemies close and your friends closer ;)
    • jadetrainor on LinkedIn
    • @alundra on Twitter
    • Jades-World
Re: How can I use special characters as smiley codes?
« Reply #2 on: February 27, 2016, 01:28:02 PM »
Same here. Is your forum also UTF8?
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring forum: Color Me Forum/Patreon.

Offline nend

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,755
  • 2 deep n2 the code
    • sicommnend on GitHub
    • SIComm.us
Re: How can I use special characters as smiley codes?
« Reply #3 on: February 27, 2016, 02:21:16 PM »
I found something that may be of some help, just need to find a way to incorporate it into SMF.

http://emojione.com/developers/

Allot of demo scripts in there, so most of the work is already done.  ;D
http://git.emojione.com/demos/2.1.1/autocomplete.html

Also for the unicode aspect
http://git.emojione.com/demos/2.1.1/jstoshort.html

Conversion
http://git.emojione.com/demos/2.1.1/class-convert.html

However allot of support, allot of routes you can go.

Offline Study Force

  • SMF Hero
  • ******
  • Posts: 3,101
    • @studyforceps on Twitter
    • Study Force
Re: How can I use special characters as smiley codes?
« Reply #4 on: February 27, 2016, 03:39:31 PM »
Same here. Is your forum also UTF8?

Yes it is

Offline Jade Elizabeth

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,629
  • Gender: Female
  • Keep your enemies close and your friends closer ;)
    • jadetrainor on LinkedIn
    • @alundra on Twitter
    • Jades-World
Re: How can I use special characters as smiley codes?
« Reply #5 on: February 28, 2016, 02:15:45 AM »
The only issue I have with emojione is that I want twitter emoji..
http://emojipedia.org/twitter/

I've already downloaded basically all of them and resized, the codes are the same as used for Facebook.

Same here. Is your forum also UTF8?

Yes it is

I have a feeling it might actually work on non utf-8 forums which makes me sad because I thought ahead lol.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring forum: Color Me Forum/Patreon.

Offline nend

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,755
  • 2 deep n2 the code
    • sicommnend on GitHub
    • SIComm.us
Re: How can I use special characters as smiley codes?
« Reply #6 on: February 28, 2016, 09:06:56 AM »
I don't know if you looked at this.
http://www.unicode.org/emoji/charts/index.html

It should work on UTF-8,  We have here a encoding(UTF-8) and a character set(Unicode), not the same thing. Also Unicode emojis are dependent on the OS how things will be displayed. I think in Twitter's case they are replacing the character with a image, not a impossible task but repetitive and time consuming depending how deeply you want to support it.

Offline Jade Elizabeth

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,629
  • Gender: Female
  • Keep your enemies close and your friends closer ;)
    • jadetrainor on LinkedIn
    • @alundra on Twitter
    • Jades-World
Re: How can I use special characters as smiley codes?
« Reply #7 on: February 28, 2016, 10:39:19 AM »
How will that work if they're copying and pasting from the above link? I don't really understand why it wont work and how to get it working.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring forum: Color Me Forum/Patreon.

Offline nend

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,755
  • 2 deep n2 the code
    • sicommnend on GitHub
    • SIComm.us
Re: How can I use special characters as smiley codes?
« Reply #8 on: February 28, 2016, 11:24:35 AM »
To make it uniform across all systems you'll have to convert it sort of how the BBC smilies work. Which may be allot of work depending on how many you want to convert.

The reason SMF has trouble previewing is due to code support. I haven't looked where but it is either in the JavaScript or the PHP side that encodes it.

It will not work perfect at this time without a modification. It will work somewhat though, but fragmented between different browsers and operating systems.

Offline margarett

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 19,761
  • Gender: Male
Re: How can I use special characters as smiley codes?
« Reply #9 on: February 28, 2016, 08:11:28 PM »
That should actually work in 2.0.10+ when we added the utf8mb4 compatibility stuff...

😷 🙌 👀
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

Quote
Over 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Offline Jade Elizabeth

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,629
  • Gender: Female
  • Keep your enemies close and your friends closer ;)
    • jadetrainor on LinkedIn
    • @alundra on Twitter
    • Jades-World
Re: How can I use special characters as smiley codes?
« Reply #10 on: February 28, 2016, 10:22:30 PM »
Is there a way to get it now? My smileys are kinda broken lol.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring forum: Color Me Forum/Patreon.

Offline Study Force

  • SMF Hero
  • ******
  • Posts: 3,101
    • @studyforceps on Twitter
    • Study Force
Re: How can I use special characters as smiley codes?
« Reply #11 on: February 28, 2016, 11:46:37 PM »
That should actually work in 2.0.10+ when we added the utf8mb4 compatibility stuff...

😷 🙌 👀

So it does work? Could you elaborate?

Offline nend

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,755
  • 2 deep n2 the code
    • sicommnend on GitHub
    • SIComm.us
Re: How can I use special characters as smiley codes?
« Reply #12 on: February 29, 2016, 12:33:13 AM »
So it does work? Could you elaborate?
It does and it doesn't.

Unicode Emoji's are dependent on OS and browser.

To fix fragmentation between these you would have to translate the Unicode Emoji's, so that anyone's whose setup doesn't support a particular emoji can use them and so they show the exact same emoji across setups.

Is there a way to get it now? My smileys are kinda broken lol.
This would be a major undertaking for anyone that wants to create a similar user experience and add full compatibility due to this fragmentation. This is one of the reasons I suggested Emoji One, I know it isn't Facebooks or Twitters set, but the hard work is already done.

I hate to be so blunt, but I too thought it might be fast and simple to do, that was until I looked at the data.  :(

Here is the full list of Unicode Emoji's
http://www.unicode.org/emoji/charts/full-emoji-list.html

Here is the reference key.
http://www.unicode.org/emoji/charts/index.html#emoji-data-chart-key

"Brow." is what your current setup of your current machine supports. Apple is like iPhone and iOS. Google is Chrome OS, Android. Emoji One and Twitter either use client side or server side processing to convert Unicode to provide a uniform experience.

I use Ubuntu as my main desktop PC and most of the Emoji's are just blocks which means they aren't in my character set. On my Android device I get most of them, but there is the problem what I may see on my Android I can not see on my desktop.

Offline nend

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,755
  • 2 deep n2 the code
    • sicommnend on GitHub
    • SIComm.us
Re: How can I use special characters as smiley codes?
« Reply #13 on: March 12, 2016, 09:16:16 PM »
Ok, on this I put it aside after seeing how much would have to be converted and after looking how badly coded the EmojiOne developer references are.

Well today I was trying to figure out where SMF stores the custom profile data in the database, well I never found it but while going through the message table I noticed how Unicode data is stored, it is stored in decimal format.

Then I remembered that the EmojiOne pack was stored in hexadecimal file names, that is when a light bulb appeared.

All I would need to do is convert decimal to hexadecimal. Will here it is, a working EmojiOne hack so forth, may release it on the mod site soon.

Here is code in Subs.php
Code: [Select]
//Emoji decimal codes 128512-128591
preg_match_all('/&#([0-9]{6});/', $data, $matches, PREG_PATTERN_ORDER);
if (!empty($matches[0])) {
$replaces = array();
foreach ($matches[0] as $match => $dec) {
$int = substr($dec,2,-1);
if ($int <= 128591 && $int >= 128512) {
$hex = dechex($int);
$replaces[$dec] = '<img src="http://emojione.com/wp-content/uploads/assets/emojis/'.$hex.'.svg" alt="'.$dec.'" class="smiley" />';
}
}
$data = strtr($data, $replaces);
}

Put it before
Code: [Select]
if (!empty($modSettings['autoLinkUrls']))
{
// Are we inside tags that should be auto linked?
$no_autolink_area = false;
if (!empty($open_tags))
{
foreach ($open_tags as $open_tag)
if (in_array($open_tag['tag'], $no_autolink_tags))
$no_autolink_area = true;
}

// Don't go backwards.
//!!! Don't think is the real solution....

Make sure to put it in that spot as this will prevent SMF from going through the HTML image tags it produces. ;)

If you use this code above it is set to use the EmojiOne sites library, you can download the images and host them yourself, it is a big though. ;)

Offline nend

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,755
  • 2 deep n2 the code
    • sicommnend on GitHub
    • SIComm.us
Re: How can I use special characters as smiley codes?
« Reply #14 on: March 12, 2016, 09:25:43 PM »
Ok,

The code above has the wrong url in it, it will work but it is basically hot linking off the EmojiOne site.

Here is the correct place to link it.

For SVG
Code: [Select]
http://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.1/assets/svg/
For PNG
Code: [Select]
http://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.1/assets/png/

Offline nend

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,755
  • 2 deep n2 the code
    • sicommnend on GitHub
    • SIComm.us
Re: How can I use special characters as smiley codes?
« Reply #15 on: March 12, 2016, 10:00:34 PM »
Updated code, widened the values a little bit because the scope is a little bigger than another source suggested.
Code: [Select]
preg_match_all('/&#([0-9]{6});/', $data, $matches, PREG_PATTERN_ORDER);
if (!empty($matches[0])) {
$replaces = array();
foreach ($matches[0] as $match => $dec) {
$int = substr($dec,2,-1);
if ($int >= 127344 && $int <= 128709) {
$hex = dechex($int);
$replaces[$dec] = '<img src="http://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.1/assets/svg/'.$hex.'.svg" alt="'.$dec.'" class="smiley" />';
}
}
$data = strtr($data, $replaces);
}

Offline nend

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,755
  • 2 deep n2 the code
    • sicommnend on GitHub
    • SIComm.us
Re: How can I use special characters as smiley codes?
« Reply #16 on: March 12, 2016, 11:30:57 PM »
Found the other problem with previewing not working with these characters, it seems like SMF's correcting for older browser support is interfering.

In Post.template.php
Find
Code: [Select]
x[x.length] = textFields[i] + \'=\' + document.forms.postmodify[textFields[i]].value.replace(/&#/g, \'&#38;#\').php_to8bit().php_urlencode();
Replace
Code: [Select]
x[x.length] = textFields[i] + \'=\' + encodeURIComponent(document.forms.postmodify[textFields[i]].value);
Will have to look into it further but looks to be a bug.  :-\

Offline Study Force

  • SMF Hero
  • ******
  • Posts: 3,101
    • @studyforceps on Twitter
    • Study Force
Re: How can I use special characters as smiley codes?
« Reply #17 on: March 13, 2016, 03:31:37 AM »
Insightful, thx

Offline nend

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 1,755
  • 2 deep n2 the code
    • sicommnend on GitHub
    • SIComm.us
Re: How can I use special characters as smiley codes?
« Reply #18 on: March 15, 2016, 11:19:16 AM »
Been looking into some issues. I have found out there are a few characters that do not get translated in a post.

Not really looking into converting these because that would mean allot of unnecessary load.

For example if I do it on the PHP side then that would mean a decent size conversion table, it would be fast but then you have the large file size. You don't want this for something non vital as it would be cached by the system opcode cache. I try to stay away from growing this cache with non-vitals, you don't want the server reading from filesystem too much.

JavaScript wise the user would have to load the file and wait for the page to be translated, bad user experience in other words.

I can convert the strings amongst posting,  which might be the best option.

Offline Study Force

  • SMF Hero
  • ******
  • Posts: 3,101
    • @studyforceps on Twitter
    • Study Force
Re: How can I use special characters as smiley codes?
« Reply #19 on: March 16, 2016, 02:08:50 AM »
I've decided to simply upload all the EmojiOne icons at images into smileys. Seems to be a more native way to do this, even though it's going to be a pain in the arse later on. What this does is give you that edge when it comes to using emojis and one's cellphone while browsing a forum