timetable-f

Create timetable and put there your text. You can show/moveLeft/moveRight

Usage no npm install needed!

<script type="module">
  import timetableF from 'https://cdn.skypack.dev/timetable-f';
</script>

README

timetable-f

Coverage Status

timetable-f is a module. The main purpose is to process text in timetable.

show(), moveLeft(), moveRight() 

Table of Contents

  1. Install
  2. Introduction
  3. Usage
  4. Contributing
  5. Motivation

Install

npm install timetable-f

Introduction

timetable-f is a module. The main purpose is to process text in timetable.

show(), moveLeft(), moveRight()

This version 1.0.0 support next characters only in UpperCase:

{
  ua: 'АБВГДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ._-!:><=+/0123456789',
  eng: "ABCDEFGHIJKLMNOPQRSTUVWXYZ-.':?><+/=_!0123456789"
}

Usage

PrepareAssets

!!! Important !!!

Download image from here.
By default "timetable-f" try to get image from 'public/img/off.png'.

You can set your own path.

const Timetable = require('timetable-f');
Timetable.setImage('yourPath/off.png');

show

With default options:

const Timetable = require('timetable-f');

// Be sure that div.className is exist in DOM
const table = new Timetable('className').init();
table.show('text');

By default the second parameter in Timetable constructor set:

{ 
    height: 30,  
    columns: 40,
    color: 'chartreuse',
    language: 'eng',
    interval: 500,
    backgroundColor: 'black'
}

With custom options:

const Timetable = require('timetable-f');

const options = { 
  height: 80, 
    columns: 80,
    color: 'red',
    language: 'eng',
    interval: 1000,
    backgroundColor: 'black'
};

const table = new Timetable('className', options).init();
table.show('ENG_TEXT');

moveLeft

const Timetable = require('timetable-f');

const text = 'text';
const timeToRepeat = 2; // optional =0
const timeout = 300; // optional =500

const table = new Timetable('className').init();
table.moveLeft(text, timeToRepeat, timeout);

moveRight

const Timetable = require('timetable-f');

const text = 'text';
const timeToRepeat = 2; // optional =0
const timeout = 300; // optional =500

const table = new Timetable('className').init();
table.moveRight(text, timeToRepeat, timeout);

getColumnsByText

Calculate columns by custom text

const Timetable = require('timetable-f');
const text = "text";
const options = {
  columns: Timetable.getColumnsByText(text, 'eng'),
};
 
const table = new Timetable('className', options).init();
table.show(text);

getColumnsFullWidth

Calculate columns by div.className.width:

const Timetable = require('timetable-f');
const tableHeight = 70;
const className = 'className';
const options = {
  height: tableHeight,
  // tableHeight here is need because imageSize calculated from tableHeight
  columns: Timetable.getColumnsFullWidth(tableHeight, className)
};
const table = new Timetable(className, options).init();
table.show('text');

createCharacter

When you want to add some characters or maybe language you can use next tool:

const Timetable = require('timetable-f');
Timetable.createCharacter('className');

You click on table and see coordinates in console. Then copied into Character obj.

clear

You can clear table. All methods show(), moveLeft(), moveRight() delete previous text if they work with one object

const Timetable = require('timetable-f');

const table = new Timetable('className').init();
table.show('text 0');
table.clear();
table.moveLeft('text 1');
table.moveRight('text 2');
table.show('text 3'); // show 'text 3'

AnIdeaToUse

const Timetable = require('timetable-f');
// Be sure div.className is in DOM
const timer = new Timetable('timer', { height: 80, color: '#00aaff' }).init();
const format = time => time < 10 ? '0' + time : time;

setInterval(() => {
  let date = new Date();
  const HOURS = format(date.getHours());
  const MINUTES = format(date.getMinutes());
  const SECONDS = format(date.getSeconds());
  timer.show(`${HOURS}:${MINUTES}:${SECONDS}`);
}, 1000);

Contributing

Do you want to contribute to this module ? You are welcome!)

Motivation

I always loved timetable. Especially different colors with different data. That's some kind of magic)