Html5 chat, SVG drawing feature

We added a new tool, called SVG drawing.
You can now easily drawn and append some Vector – SVG – pictures inside the chat. The Drawing tool has most of tools you need such as:

  • Hand writing
  • Curves drawing
  • Lines drawing
  • Shapes (rectangle, circle…)
  • Predefined shapes
  • Text
  • Transformations: scale, rotations
  • Alignements
  • Z-ordering

You need to enable the property called “can Draw” that in roles to add a new button in the chat bar.

HTML5 chat SVG editor.
HTML5 chat SVG editor.
socialENgine

SocialEngine chat integration

Social engine is a php commercial dating script.

We will add the link chat into /groups/chat so your chat link will be
https://yoursite.com/groups/chat

edit /application/modules/Group/controllers/IndexController.php
And add this function

public function chatAction() {
    $webmasterid = xxxx;
    $password = 'yyyy';
    $viewer = Engine_Api::_()->user()->getViewer();
    $userid = $viewer->getIdentity();
    $fields = Engine_Api::_()->fields()->getFieldsValuesByAlias($viewer);
    $user = Engine_Api::_()->getItem('user', $userid);
    $avatar = $user->getPhotoUrl('thumb.profile');
    $profileLink = $viewer->getHref();
    $gender = 'male';
    $role = $user_level = Engine_Api::_()->user()->getViewer()->level_id;
    $roleLabel = Engine_Api::_()->getItem('authorization_level', $role)->getTitle();
    switch($fields['gender']) {
        case 1:
            $gender = 'male';
            break;
        case 2:
            $gender = 'female';
            break;
        case 3:
            $gender = 'couple';
            break;
    }
    switch($roleLabel) {
        case 'Superadmins':
            $role = 'admin';
            break;
        case 'Admins':
            $role = 'admin';
            break;
        case 'Moderators':
            $role = 'moderator';
            break;
        case 'Default Level':
            $role = 'guest';
            break;
        case 'Public':
            $role = 'guest';
            break;
        case 'Monthly Member':
            $role = 'user';
            break;
        case '6 Month Member':
            $role = 'user';
            break;
        case 'Yearly Member':
            $role = 'user';
            break;
        case '15 Day Free Membership Trial':
            $role = 'guest';
            break;
        default:
            $role = 'user';
            break;
    }

    $json = json_encode(array(
            'id'=>$userid,
            'username'=>$fields['first_name'],
            'password'=>$password,
            'gender'=>$gender,
            'role'=>$role,
            'image'=>'//'.$_SERVER['HTTP_HOST'].$avatar,
            'profile'=>'//'.$_SERVER['HTTP_HOST'].$profileLink
        )
    );
    $encoded = file_get_contents("https://jwt.html5-chat.com/protect/".base64_encode($json));
    $this->view->script = "https://html5-chat.com/script/$webmasterid/$encoded";
    $this->_helper->layout->disableLayout();
}

replace xxxx by your webmasterid and yyyy with your html5-chat password

You can get values profil type from table engine4_authorization_levels

create chat.tpl in application/modules/Group/views/scripts/index/

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chat</title>
</head>
<body>
<script src="<?=$this->script?>"></script>
</body>
</html>

and you will get your own chat on /groups/chat

Sngine : Social Network PHP script

Sngine – The Ultimate PHP Social Network Platform is a cool php script.
How to integrate html5 chat into that script ?

Edit the .htaccess file and add these lines:

# Chat
RewriteRule ^chat/?$ chat.php [L,QSA]

Create chat.php file and paste this code:

<?php
$webmasterid = xxxx; // your webmasterid html5chat account
$password = 'yyyy'; // your html5 chat password
require('bootloader.php');
if (!isset($user) || !isset($user->_data) || !isset($user->_data) || !isset($user->_data['user_id'])) {
    header('Location:/');
}
if ($user->_is_admin) {
    $role = 'admin';
} else if ($user->_is_moderator) {
    $role = 'moderator';
} else {
    $role ='user';
}
$user = $user->_data;
$json = json_encode(array(
        'id' => $user['user_id'],
        'username' => $user['user_name'],
        'password' => $password,
        'gender' => $user['user_gender'],
        'role' => $role,
        'image' => base64_encode($user['user_picture']),
        'profile' => "https://yoursite.com/{user['user_name']}"
    )
);
$encoded = file_get_contents("https://jwt.html5-chat.com/protect/" . base64_encode($json));
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chat</title>
    <style>
        html, body, #chatContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="chatContainer">
    <script src="https://html5-chat.com/script/<?= $webmasterid ?>/<?= $encoded ?>"></script>
</div>
</body>
</html>

Edit the first lines and put your own data

$webmasterid = xxxx;
$password = 'yyyy'; 

Then navigate to yourSite.com/chat

and you should see WHOLE page html5 chat

web radio

html5 chat and webradio (updated)

Set a global radio for your chat

You can set a global webradio player for whole site. Just go to your chatadmin / config and specify a valid https resource for your radio

or set a radio per room !

You can now specify a webradio per room. Just go your chatadmin/room and specify (or leave blank) a web radio url for each room

Audio restrictions

How to customize the radio look&feel ?

In fact the webradio is just a html <audio> element.
So it is quite limited to make some customizations. However we will add some better player soon like: https://www.mediaelementjs.com/

Where to find Radio streams ?

Google is your friend: You can easily find thousands of free radios
ex: http://dir.xiph.org/

But.. make sure they are playable inside the html5 <audio>element (mostly of time they should be .mp3 files)

How to start webcams muted ?

This is also a frequent question. You can now start webcam muted in a room. (go to your chatadmin ->rooms)

But you can also assign muted webcam per role.
(go to chatadmin->roles->advanced)

Ex: admin And DJ roles will have webcam no muted, whereas roles like guest and user will have their webcam muted

background

How to add picture to background ?

This is a common question we receive. The answer is obvious to who knows some CSS.
I recommend to read the post about customizing the design with CSS.

For people who do not have CSS knowledge

First, it is really important you learn CSS since design on web is totally related to CSS. Let add a background image for you chat step by step

  1. Prepare Picture
    You background picture should have a good size (ex: 1024x800px) and should be available somewhere on the web accessible through HTTPS
    ex:
    https://c.pxhere.com/images/d1/a4/ccfdcc5bc5f116abc867b0e9c7f7-1458005.jpg!d
  2. With your editor (notepad for instance) create a file with .css extension ex: myCss.css
  3. Edit this file and insert that code inside
#container {
background-image: url("https://c.pxhere.com/images/d1/a4/ccfdcc5bc5f116abc867b0e9c7f7-1458005.jpg!d");
background-size: cover;
}
#tabs .nav-tabs {
background-color: inherit;
}
#roomsContainer2, #usersContainer2, #friendsContainer2 {
background-color: inherit;
}

#footer {
background-color: inherit;
}

#tabs .tab-pane {
background-color: inherit;
}

#tabs {
background-color: inherit;
}
#usersContainer {
background-color: inherit!important;
}
  1. Save that file and upload it to YOUR server so it is accessible with HTTPS
    ex: https://www.mysite.com/myCss.css
  2. Go to you chatadmin, go to config and then choose design/layout tab and insert that link ( https://www.mysite.com/myCss.css) in the Link to external CSS to customize your chat  field
inside config

6. and that’s all: the background image should be inside your chat

This is also the procedure to change the design of any element of your chat. With CSS you can customize EVERYTHING you want, including the layout.

css

How to change my chat’s design ?

If you want to customize the look&feel of your chat, you need to use CSS.
If you don’t know what is CSS, please visit that site. (however learning CSS will take a few days, so If you have some urgent customisations, I suggest you hire a freelancer or eventually contact us for this extra task)

Do not overwrite, but add !

Many users ask us to send them access to CSS so they can modify it. This is a big misunderstanding about how CSS really works.
In order to maintain the script up to date, you will never change script or CSS, but you will add yours. The added properties will simply overwrite the existing one.

How to add my own CSS ?

Go to your chatadmin panel -> config ->Design/Layout and insert there the link to your own CSS under the Link to external CSS to customize your chat text field.
Ex:
https://www.mywebsite.com/myCss.css

How to write my own CSS ?

You need good knowledge of CSS. Use Google Developer tool to get the selector of your DOM, and then write the property.
Ex: Here is the CSS to overwrite the way messages are shown in the chat:
We hide the avatar, the time and make the message fit 1 line:

div.message img.userItem {
display: none;
}
div.message div.timeStamp {
display: none;
}
div.message div.content {
box-shadow: none;
border: none;
display: inline;
}
div.message div.flex-property {
display: inline!important;
}
.arrow-chat {
display: none!important;
}
div.message div.userItem {
display: inline;
font-weight: bold;
}

div.message div.userItem:after {
content: ":";
}

The messages will appear now:

CSS to make messages appear on 1 line !
tab mode

New Tab mode

The tab mode in html5 chat has now two new features. (the tab mode is one of the display mode available in chat). It displays webcams on top of the screen. These webcams are sortable

Splitter to resize webcams

You can use the splitter to resize the webcams.

Resizable webcams

Pop in and pop out webcams

You can pop out the windows from the tab and make them independent draggable and resizable windows and pop them back to the stack.

pop out and pop back the windows

To enable the tab mode, just go to your chatadmin and set the display mode as “tab

avatars

Avatar libraries

You can now choose between 5 libraries for guest users avatars: when a guest user connects, he’s automatically assigned an avatar. However, it is not possible to choose between 6 different avatar libraries

Default avatar

This is an SVG based library. This library differentiates males and females

Default library

Pixel avatar

This is an SVG based library. This library differentiates males and females

pixel library

Avataars

SVG cool library: no males/females

Avataars library

Griddly avatar

SVG strange library: no males/females

Griddly lib

Botts library

SVG robot like images based library

Botts library

Initials library

SVG library that takes your initial username (google doc like)

Initials lib

You can choose which one of these libraries you want to use inside
/chatadmin/config/ under users management tab

layout

Left layout for chat

We updated our layout system using flex for display elements. This allows to easily change the layout of the chat.

The first layout change you can do is to align the user list on the left. You can swap from left/right layout from you chatadmin console -> config-> design and select between “left” and “right” from the “Display users’ list on the left” select box.

A sample with LEFT layout