Coder Social home page Coder Social logo

term-graille's Introduction

Term-Graille

Braille Characters for Terminal Graphical Applications

termgraille

Drawille is a method of using Braille characters as a mechanism for graphical display in a terminal. Ports of the original by asciimoo exist inmultiple other languages including Perl, Java, Rust, NodeJS, and others. The Perl version was initially produced by @hoelzro, but not much changed since about 8 years ago.

This is another Perl version, targeting ANSI compatible consoles. It delivers significantly higher performance and extends Term::Drawille by including features like:-

  • Integrated Turtle-like drawing
  • Built-in drawing primitives including line and curve, circle, ellipse, polyline more on the way
  • Scrolling with or without wrapping
  • Some frame border manipulation
  • Text overlays

Tools in other languages have been used in publications, system monitoring tools and for games. Term::Graille allows Perl programmers access to a expanding set of features for developing simple general purpose graphics, graphing applications, games etc from the console.

Associated with Term::Graille is Algorithm::Line::Bresenham. The plotting primitives in the latter are used in Graille

Features to be included are colors, sprites, maps, and more on user request. For more information see the wiki

Version 0.06

Importing images

Graille does not have the resolution for fancy graphics. Having said that, images converted into mono with appropriate dithering can be surpisingly recognisable at the low resolution oferred. The image2grl.pl script in the examples folder uses Image Magick to perform the transromation down to a Graille canvas's resolutions, and plotted on to the canvas pixel by pixel. Graille offers the option to import or export .grl files.

grailleimage

Animation Demo

The animation demo uses Image::Magick to convert a folder of frames into monochrome images, which are then converted to bitmap plots on a canvas. These bitmap plots are displayed sequentially creating an animation.

This is an animation derived from a sprite sheet at Adobe stock photos which do a 30 day free trial.

animate

Fonts

In the initial demo above a Turtle script was used to produce a drawing of text. This is rather combersome. Fortunately bitmap fonts exist, and can be easily converted to Braille. DamienG has produced a series of 8X8 fonts which can translated into 4X2 braille characters. The fonts are consistently coded, so font2grf.pl in the example folders converts the Z80 assembly data into .grf files for importing into Graille. Fonts are not the only thing that can be transformed, and one imagines potential for sprites or tilemaps to be similarly encoded.

fonts

Variable thickness Lines

Herbert Breuning had made this suggestion. There are many examples of thick line algorithms on the net. Alan Murphy gives the classic version, which has been improved and it is this code that has been ported to Perl and used in Algorth::Line::Bresenham v0.151. INtegrating these into Graille was in v0.08.

Screenshot from 2022-08-02 18-32-01

Drop down menu

In developing a sprite editor on the console, mulitiple user interactions were required. Interactive graphical menus are not easy in the console. Tickit and Term::Menus are powerful modules. Term::Graille::Menu goes for simplicity rather than power. This comes in v 0.09. The sprite editor itself is not complete yet, but would be very cumbersome without something to aid visual development with multiple options and features.Term::Graille::Menu makes it very simple to create menus for ANSI terminals.

The menu in this image is created using:

my $menu=new Term::Graille::Menu(
          menu=>[["File","New Sprite Bank","Save Sprite Bank","Load Sprite Bank","Quit"],
                 ["Sprites","New Sprite","Delete Sprite","Import Sprite","Export Sprite"],
                 ["Edit","Clear","MirrorX","MirrorY","Rotate+","Rotate-",
                                             ["Reformat","2x4","4x4"],
                                             ["Scroll","left","right","up","down"]],
                 "About"],
          redraw=>\&main::refreshScreen,
          callback=>\&main::menuActions,
          );
          

menu

Audio

A component of interaction often neglected in terminal aplications is sound. Sound also adds an extra dimension to games. Term::Graille::Audio attempts to add sound with the least possible dependencies. It curently depends on pulseaudio in Linux to create a /dev/dsp (and Win32::Sound on Windows although this is as yet untested). At its simplest Audio can play a sound from its built-in sound sample set which it can autogenerate, although this is customisable and may include a speech synthesizer module based on SP0256 allophones.

use Term::Graille::Audio;

my $beep=Term::Graille::Audio->new();    # TERM::Graille's Audio module
$beep->playSound(undef, "A#1");
piano.webm

Games

One of objective of combining in interactivity with graphics and sound is the cfreation of Games for the PerlaySation Games Console

invaders

breakout.webm

term-graille's People

Contributors

saiftynet avatar oalders avatar

Stargazers

 avatar Randolf Richardson 張文道 avatar Michael S Costello avatar  avatar Maciek Preuss avatar Dariusz Piwowarski avatar Rawley avatar  avatar Ovid avatar Fulvio Scapin avatar tadegenban avatar  avatar Erik E avatar spongi avatar Yozen Hernandez avatar Thibault Duponchelle avatar Bartosz Jarzyna avatar  avatar Mhlov avatar Éric avatar Brian Blankenship avatar

Watchers

 avatar  avatar

term-graille's Issues

Loses cursor after drawing canvas

After drawing the canvas made by Term::Graille, the cursor is lost/becomes invisible, running clearScreen / clear doesn't restore it, need to run 'tput cnorm' to restore (or 'reset' also works).

Cursor is lost in the console, xterm, konsole, xfce-terminal

Seems to be the use of
my $blit="\033[?25l"
in printAt in Graille.pm, with no \033[?25h to restore it

Unused vars

I was poking around at this briefly and I figured I'd check for unused variables. You may or may not find this helpful. 😄

perlcritic --single-policy Variables::ProhibitUnusedVarsStricter lib | grep -v \$self | grep -v OK
lib/Term/Graille.pm: $value is declared but not used at line 184, column 18.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille.pm: @points is declared but not used at line 233, column 5.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille.pm: $xOffset is declared but not used at line 488, column 18.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille.pm: $yOffset is declared but not used at line 488, column 27.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille.pm: $xTics is declared but not used at line 513, column 54.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille.pm: $yTics is declared but not used at line 513, column 61.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille.pm: $xTics is declared but not used at line 524, column 54.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille.pm: $yTics is declared but not used at line 524, column 61.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Textarea.pm: $obj is declared but not used at line 73, column 20.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Textarea.pm: $gV is declared but not used at line 73, column 34.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Dialog.pm: $obj is declared but not used at line 81, column 20.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Dialog.pm: $gV is declared but not used at line 81, column 34.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Dialog.pm: @etc is declared but not used at line 87, column 18.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Dialog.pm: $dir is declared but not used at line 204, column 6.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Dialog.pm: $filter is declared but not used at line 204, column 11.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Dialog.pm: $callback is declared but not used at line 204, column 19.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Dialog.pm: $redraw is declared but not used at line 204, column 29.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Dialog.pm: $parameter is declared but not used at line 204, column 37.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Selector.pm: $obj is declared but not used at line 56, column 20.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Selector.pm: $gV is declared but not used at line 56, column 34.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Chart.pm: $title is declared but not used at line 39, column 5.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Chart.pm: $side is declared but not used at line 111, column 12.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Chart.pm: $data is declared but not used at line 111, column 18.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Chart.pm: $nTicks is declared but not used at line 111, column 24.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Chart.pm: $axisLength is declared but not used at line 111, column 32.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Sprite.pm: $chHeight is declared but not used at line 180, column 5.  Unused variables clutter code and make it harder to read.  (Severity: 3)
lib/Term/Graille/Audio.pm: $type is declared but not used at line 229, column 38.  Unused variables clutter code and make it harder to read.  (Severity: 3)

Cartesian Coordinate System

Many graphical systems (e.g. SVG, Image::Magick etc, Terminal ) often use a non-cartesian coordinate system.. The y axis goes from to bottom, with 0,0 being at the top left hand corner. I have chosen to the use a cartesian system for the Graille Canvas, as my goal had been to be able to do charts and drawings,, but it may be worthwhile to optional revert to the non-cartesian. The transformation may be simple.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.