search

spbgovbr-vlibras / vlibras-web-browsers

GNU Lesser General Public License v3.0
2 stars 0 forks source link

readme

Banner with VLibras avatars (Hosana, Ícaro and Guga) # VLibras Web (Plugins and Widget) VLibras Web Plugins and Widget are extensions for web browsers and HTML pages. ![Version](https://img.shields.io/badge/version-v6.0.0-blue.svg) ![Platform](https://img.shields.io/badge/platform-chrome%20%7C%20firefox%20%7C%20safari-lightgrey) ![License](https://img.shields.io/badge/license-LGPLv3-blue.svg) ![VLibras](https://img.shields.io/badge/vlibras%20suite-2023-green.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH4wIHCiw3NwjjIgAAAQ9JREFUOMuNkjErhWEYhq/nOBmkDNLJaFGyyyYsZzIZKJwfcH6AhcFqtCvFDzD5CQaTFINSlJJBZHI6J5flU5/P937fube357m63+d+nqBEagNYA9pAExgABxHxktU3882hjqtd9d7/+lCPsvpDZNA+MAXsABNU6xHYQ912ON2qC2qQ/X+J4XQXEVe/jwawCzwNAZp/NCLiDVgHejXgKIkVdGpm/FKXU/BJDfytbpWBLfWzAjxVx1Kuxwno5k84Jex0IpyzdN46qfYSjq18bzMHzQHXudifgQtgBuhHxGvKbaPg0Klaan7GdqE2W39LOq8OCo6X6kgdeJ4IZKUKWq1Y+GHVjF3gveTIe8BiCvwBEZmRAXuH6mYAAAAASUVORK5CYII=)

Table of Contents

Getting Started

These instructions will get you a copy of the project compiled and running on your local machine for development and testing purposes.

System Requirements

Prerequisites

Before starting the build of the tools, you need to install some prerequisites:

Node.js

curl -sL https://deb.nodesource.com/setup_current.x | sudo -E bash -
sudo apt install -y nodejs


VLibras Player WebJS

VLibras Player WebJS is required at project installation, you just need to clone it in the same path as the root of this project.

git clone https://gitlab.lavid.ufpb.br/vlibras2019/vlibras-web-extensions/vlibras-player-webjs.git

Note: It is necessary to have access to the VLibras Player WebJS repository to be able to clone it.

Configuration

Before running the application, make sure to create a .env file in the project root and set the following environment variable:

# Content of .env (set to "production", "homolog" or "development")
MODE=development

Installing

After installing all the prerequisites, install the project by running the command:

cd vlibras-web-browsers/
npm install

Building

When the installation is complete, you can now build the Plugins and Widget.

Building the Widget

npm run gulp build:widget

The compiled file can be found in the widget/app/ folder. Go to the Widget installation section for installation instructions.

Building the Plugins

Before building, you must set $is-widget to 0 in plugin/scss/_variables.scss:

$is-widget: 0;

To build the plugin you have two different options of building, according to the target browser you wish to build to:

npm run gulp build:webextensions
npm run gulp build:safari

Note: You can also generate all the builds to all targets at once by running the command: npm run gulp build

Installation

Installing the Widget

The Widget can be installed on your website by inserting a few snippets of code before closing the <body> tag of a HTML page:

<body> <!-- Begin of the page body -->

  ... <!-- Content of the page -->

  <div vw class="enabled">
    <div vw-access-button class="active"></div>
    <div vw-plugin-wrapper>
      <div class="vw-plugin-top-wrapper"></div>
    </div>
  </div>
  <script src="https://github.com/spbgovbr-vlibras/vlibras-web-browsers/raw/dev/<your-directory-path>/app/vlibras-plugin.js"></script>
  <script>
    new window.VLibras.Widget();
  </script>
</body> <!-- End of the page body -->

Note: The app folder can be copied to any directory, remember to enter the correct path for it.

Default Values Configuration

When using the Widget, you can customize various aspects such as personalization, opacity, position, and avatar. Below are the available parameters:

Parameter Default Value Description
rootPath "https://vlibras.gov.br/app/" The base path for resources used by the Widget. Can be configured to point to a specific directory. In development, use your local path.
personalization null Specifies a valid JSON URL for custom avatar configurations.
opacity 1 Controls the background opacity of the Widget. A value between 0 (completely transparent) and 1 (completely opaque).
position "R" Sets the initial position of the Widget on the page. The valid values are: "TL" (top-left), "T" (top), "TR" (top-right), "R" (right), "BR" (bottom-right), "B" (bottom), "BL" (bottom-left), and "L" (left).
avatar "icaro" Define the initial VLibras avatar. The available avatars are: "icaro", "hosana" and "guga". You can also use "random".

Usage example: 

new window.VLibras.Widget({
  rootPath: "/app",
  personalization: 'https://vlibras.gov.br/config/configs.json',
  opacity: 0.75,
  position: 'L',
  avatar: 'random'
});

Installing the Plugins

VLibras already has official versions of the plugins in the Chrome and Firefox extensions store. To use the version of the plugins built in your machine, see the extensions installation instructions on your browser's official page.

Contributors

License

This project is licensed under the LGPLv3 License - see the LICENSE file for details.