npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

twvott

v0.2.0

Published

The Worse Version Of Text Tv

Readme

TWVOTT - The Worse Version Of Text Tv

This is a library to communicate information using a Text-TV alike system. It is currently extremely basic and serves more as a learning experience rather than something one would consider useful. The project name should become self explonatory once you've read the documentation.

Please see the example folder if you're (understandably) confused.

Setup

# Installing deps
$ npm i

# Running tsc
$ npm run build

# Running tsc with watch mode
$ npm run dev
<script src="twvott.js"></script>

Writing content

There are two modes: "text" and "pixel".

Text Mode

Lets look at an example:

> ¶¶ :30 #green Welcome!
>
>
> ¶¶ TWVOTT (The Worse Version Of Text TV) is a custom class I've
> ¶¶ built to communicate info trough the canvas element. The name is
> ¶¶ confusing on purpose...

> ¶¶ It works very well for basic stuff, like text
> ¶¶ with #green support for inline text colors #white and  ##blue #red inline background colors ##black
> ¶¶ and other cool stuff like :b bold text :n or :i italic text.
>
> ¶¶ #yellow Read more on page 2

This creates the following image:

text

The first thing you may notice is that every line starts with a >. This indicates that you're writing text on that line. If you do not provide it, no text will be rendered.

The second thing you notice is the the two characters. These act as blank space, and can effectively be used as padding. For technical reasons, you can not just add many normal spaces after each other.

Next up, there is a :30 at the first row. The : character acts as a "command" or "modifier" to text after it. In this case, the size is changed to 30. You can also make text bold with :b, italic with :i or normal with :n.

Lastly, there are colors. You can change the text color with one hashtag followed by a color name, for example: #green. Two hashtags instead modify the background color, for example: ##green.

Pixel Mode

Lets look at an example:

> ¶¶ You can also draw, wow!
>
$ ¶¶¶0¶0¶0¶0¶0¶
$ ¶¶0¶0¶0¶0¶0¶0
$ ¶¶¶0¶0¶0¶0¶0¶
$ ¶¶0¶0¶0¶0¶0¶0
>
> ¶¶ Different pixels colors are supported too:
>
$ ¶¶ #red ¶¶0¶0¶¶
$ ¶¶ #red ¶0¶0¶0
$ ¶¶ #red ¶0¶¶¶0
$ ¶¶ #red ¶¶0¶0
$ ¶¶ #red ¶¶¶0

This creates the following image:

pixel

Just as with the text, the acts as empty space and # followed by a color changes the color. A 0 represents an actual pixel. You cannot change pixel size, it is locked to the font size you set on the fontSize option in the class construcctor.

Documentation

TWVITT Class

const textTV = new TWVOTT(targetCanvas, options);

Parameters

  • targetCanvas (String):

    • The id of the target <canvas> HTML element where the text will be displayed.
  • options (Object):

    • A configuration object with the following properties:
      • width (Number): Width of the canvas in pixels.
      • height (Number): Height of the canvas in pixels.
      • fontSize (Number): Font size of the text in pixels.

Example Usage

const textTV = new TWVOTT('textTVCanvas', {
  width: 500,
  height: 500,
  fontSize: 12,
});

In this example:

  • The textTVCanvas canvas element is targeted to render the text.
  • The display area is set to 500x500 pixels.
  • The font size of the text is set to 12 pixels.

Methods

clearScreen(color)

Clears the screen and fills the background with the specified color.

  • Parameters:

    • color (String, optional): The background color to fill the screen with. Defaults to this.colors.black.
  • Example:

    textTV.clearScreen('#000000'); // Clears the screen with black color

loadPage(pageNumber)

Loads and renders a specific page content on the canvas.

  • Parameters:

    • pageNumber (Number): The page number to render.
  • Example:

    textTV.loadPage(3); // Loads and displays page number 3

addPage(pageNumber, content)

Adds a new page with the specified page number and content.

  • Parameters:

    • pageNumber (Number): The page number to assign to the new page.
    • content (String): The content to display on the page.
  • Example:

    textTV.addPage(5, '> Welcome to page 5!'); // Adds page 5 with content

nextPage()

Navigates to the next page.

  • Example:

    textTV.nextPage(); // Advances to the next page

previousPage()

Navigates to the previous page.

  • Example:

    textTV.previousPage(); // Goes back to the previous page

Text Formatting

  • Text Mode
    • Activated using >
    • Colors
      • Text Colors:
        • Use #color to set the text color.
      • Background Colors:
        • Use ##color for inline background colors (e.g., ##red).
      • Supported colors:
        • #white
        • #black
        • #red
        • #green
        • #blue
        • #yellow
        • #magenta
        • #cyan
    • Text Styling:
      • Bold Text: Use :b to make text bold.
      • Italic Text: Use :i for italicized text.
      • Normal Text: Use :n to revert to normal text.
      • Center Text: Use :c to center text.
      • Underline Text: Use :u to underline text.
      • Striketrough Text: Use :x to striketrough text.
    • Font Size:
      • Use :number to set the font size, where number is a specific size.
  • Pixel Mode:
    • Activated using $.
    • Drawing
      • Use for space, 0 for pixels, and specify colors with #color.