Skip to content

Commit

Permalink
Add Alternative single colour dictionary and split intro into general…
Browse files Browse the repository at this point in the history 
… LED UI and Green Code specific.
  • Loading branch information
@zeth
zeth committed May 3, 2016
1 parent 0c41848 commit 30afb5c
Show file tree
Hide file tree
Showing 7 changed files with 445 additions and 152 deletions.
3 changes: 3 additions & 0 deletions css/white.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body {
background: grey;
}
185 changes: 36 additions & 149 deletions green-code-intro/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<!-- The above 3 meta tags *must* come first in the head; any
other head content must come *after* these tags -->
<title>Introduction To Green Code</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
Expand All @@ -26,20 +26,25 @@
<div class="container">
<h1>Introduction to Green Code</h1>
<br />
<p>This document explains the basics of Green Code; if you
already know about it, you might want to skip the text and
just scroll down to look at the pictures!</p>
<p>This document explains the basics of Green Code and some of
the design decisions that were made. If you just want to get
started, you might be better off just consulting
the <a href="/dictionary/">Green Code Dictionary</a>.</p>

<h2>Why is it called Green Code?</h2>

<p>The primary reason is, of course, because of its potential use
in environmentally friendly low-power applications, as mentioned
below, and the obvious Matrix allusion.</p>
<p>The primary reason is, of course, because of its potential
use in environmentally friendly low-power LED Grid based
applications, and the obvious Matrix allusion.</p>

<p>In an early 8x1 version, all the characters were in green,
but since we moved to a 4x1 RGB format, we found that blue and
red gave a greater contrast against the white plastic LED
housing that many of the common devices have. However, as we
shall see, the green square is the most important control
code, so there is still quite a bit of the colour green in
Green Code.</p>

<p>However, as we shall see, the green square is the most
important control code, so there is a lot of the colour green in
Green code.</p>

<h2>What is Green Code?</h2>
<div class="row">
<div class="col-md-1">
Expand All @@ -50,12 +55,7 @@ <h2>What is Green Code?</h2>
represented by four coloured squares in a 4x1 grid (like the
long thin block in the video game Tetris).</p>

<p>Green Code is particularly aimed at the kind of 8x8 or 8x4
LED Grids that are commonly connected to single board computers
or micro-controllers, but you can also use it on a normal
computer using your normal screen.</p>

<p>There is also an alternative black and white representation
<p>There is also an <a href="/whitecode/">alternative black and white representation</a>
which uses a 4x2 grid for each character. Obviously this is 50%
less space efficient, but it can be used on single colour
(i.e. on and off) LED grids without having to learn a second
Expand All @@ -73,125 +73,14 @@ <h2>What is Green Code?</h2>
your own language(s). If like me your primary language is
English, you only really need to learn the 26 letters, 10 digits
and a few punctuation characters.</p>

<p>The rest of this simple introductory document focuses on
English. If your language is not English, I would love you to
make your own introduction to Green Code that focuses on the
characters you need. Also feedback or suggestions on the use of
Green Code in other languages will be gratefully accepted. I
would also love to hear about any similar efforts in non-Latin
languages (e.g. Chinese), it would be pretty interesting to see
how you could encode those in LED form.</p>
</div>

<h2>Why was Green Code Invented?</h2>

<p>I realised that my Raspberry Pi Sense HAT, an 8x8 LED Grid,
used 25 times less power than my little DSI touchscreen and
50 times less power than my HDMI monitor.</p>
<p>Having spent my whole childhood playing Tetris, my brain is
already trained to read coloured blocks from a grid. Therefore
I decided to see how far I could push the concept of using an
LED grid. Could it replace a monitor in my house, saving
electricity and thus helping the planet?</p>
<div class="row">
<div class="col-md-4">
<div class="figure"><img src="/images/sensehat1.png" width=300 height=300 /></div>
<div class="caption">
<p>This was my first attempt at an LED grid based
notification application.</p>
<p>It aimed to show me a visual summary of my
communications while away from my main desk, e.g. on the
breakfast table, etc.</p>
<p>The symbol in the top right is telling me that today it
will be cloudy with rain (i.e. it is actually meant to
be a little picture of a rain cloud).</p>
<p>However, I can cheer up because the two columns of
stacked dots are telling me I have five emails in my
Gmail and three Twitter notifications.</p>
</div>
</div>
<div class="col-md-4">
<div class="figure"><img src="/images/sensehat2.png" width=300 height=300 /></div>
<div class="caption">
<p>The next logical step was to be able to read email subjects,
tweets, etc on the device. So when I selected a dot using a
joystick, it would scroll the text across the screen using
large letters.</p>

<p>This however was slightly slow and fragile, i.e. if in my
impatience, I got bored and moved my gaze away, I could
easily lose a few characters and have to wait until it had
finished scrolling and then start it scrolling all over
again.</p>
</div>
</div>
<div class="col-md-4">
<div class="figure"><img src="/images/sensehat3.png" width=300 height=300 /></div>
<div class="caption">
<p>What I really wanted was a way to have several
characters on screen at one time. I realised that if each
character was encoded in a vertical 4 square block, I
could see up to 16 characters on screen at once.</p>
<p>Later, come back and see if you can read this message.</p>

</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="figure"><img src="/images/spock.png" width=300 height=300 /></div>
<div class="caption">
<p>Green Code clearly takes off, especially in the 23rd
Century. Enterprise science officer and first officer
Spock, has all the information he needs from four colour
matrices. No fancy pictures, no talking robots, no
holograms.</p>
<p>Incidentally, Matt Jefferies, art director and
production designer on the original Star Trek series was a
distinguished World War II aviator, and took the concept
of 'space navy' seriously in his designs, using military
technology and design principles.</p>
</div>
</div>
<div class="col-md-4">
<div class="figure"><img src="/images/predator.png" width=300 height=300 /></div>
<div class="caption">
<p>In the Predator movies, the creatures control their
masks and weapons using these four little panels. We don't
want to spoil the plot, but we can say it is the last
display a Predator will ever need.</p>
</div>
<p>If you want to encode a non-Latin script language
(e.g. Chinese), then you will need to invent your own
encoding. If you do, then please let me know, it would be
pretty interesting to see what you come up with!</p>
</div>
<div class="col-md-4">
<div class="figure"><img src="/images/matrix.png" width=300 height=300 /></div>
<div class="caption">
<p>Green Rain from the Matrix films, beautiful if somewhat
slightly impractical. These days, even nano can colour
source code.</p>
</div>
</div>
</div>

<h2>Why use Green Code?</h2>

<p>Obviously, this is a whimsical endeavour, and is meant to
be fun. A load of weird lights is an entertaining but very niche
way to read. If you didn't leave at the sight of images of Spock
and the Matrix above, then you probably are the right person to be
here.</p>

<p>It might be difficult to read War and Peace with this format,
but it works quite well for: "rain 20 degrees, meeting at 11,
don't forget the milk" or whatever you want to be notified
about.</p>

<p>Building my low-power grid based UI is a work in progress and
it is somewhat off topic to go into further detail
here. However, if you find a use for Green Code or build an
application that uses Green Code, I would love to hear about
it.</p>

<h2>What are the basics?</h2>
<div class="row">
<div class="col-md-4">
Expand All @@ -210,7 +99,7 @@ <h2>What are the basics?</h2>
<div class="col-md-4">
<div class="row" id="basics-2"></div>
<p>This is the letter t. It has one red square (and three off
squares). The colour red represents light or long (aka dash/dah).</p>
squares). The colour red represents light or long (aka dash/dah).</p>
</div>
</div>
<div class="row">
Expand Down Expand Up @@ -238,7 +127,7 @@ <h2>What are the basics?</h2>
<p>Above is a word in Green Code, as you can see, characters
are built up vertically and then combined horizontally to
form words.</p>

</div>
<div class="col-md-4">
<img src="/images/picard.png" width=300 height=300 />
Expand All @@ -250,34 +139,30 @@ <h2>What are the basics?</h2>
<p>So if a character starts with blue or red, it is probably a
basic letter. If a character starts with green, it is probably
a digit and so on.</p>
<p>There are actually exceptions to this rule, but don't run
before you can walk.</p>
</div>
</div>

</div>


<h2>Digits</h2>
<div class="row" id="digits-row"></div>
<br />
<p>Digits all start with a green square. If you know Roman
numerals, the three lower squares are very simple.</p>

<p>If you look at the character 0, it has a green square and
three blank squares.</p>

<p>Now look at the character 1. It has a blue square in second
position. You can think of it like I in Roman numerals.</p>

<p>Now look at the character 5. It has a red square in second
position. You can think of it like V in Roman numerals.</p>

<p>8 is the one that doesn't immediately translate to Roman,
however I like to pretend there is another (hidden) red square
below it, i.e. IIVV, and V+V=X so IIX which is 8 (correct
Roman 8 is VIII of course, but that doesn't fit either).</p>


<h2>Letters</h2>
<p>Here are the English characters in Green Code. Like in
Morse Code, there is no upper and lower case, only one case,
Expand All @@ -290,10 +175,12 @@ <h2>Letters</h2>
<div class="row" id="letters-0"></div>
<div class="row" id="letters-1"></div>
<div class="row" id="letters-2"></div>

<h2>More</h2>
<p>Carry on by looking at the full <a href="/dictionary/">Green Code Dictionary</a>, or look at <a href="/hundred/">some common words</a>.</p>

</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Expand All @@ -312,7 +199,7 @@ <h2>Letters</h2>
{{#each colours}}
<div class="square {{this}} square{{@index}}"></div>
{{/each}}
</div>
</div>
</script>

<script id="greenword-template" type="text/x-handlebars-template">
Expand All @@ -324,13 +211,13 @@ <h2>Letters</h2>
<div class="square-{{cell.pos}} {{cell.colour}}"></div>
{{/each}}
</div> <!-- end row -->
{{/each}}
{{/each}}
</div>
</script>

<!-- Green code -->
<script src="../js/greencode.js"></script>
<script src="../js/intro.js"></script>

</body>
</html>
9 changes: 7 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any
other head content must come *after* these tags -->
<title>Introduction To Green Code</title>
<title>The LED UI Project - Making brighter applications</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
Expand All @@ -25,6 +25,11 @@
<body>
<div class="container">
<h1>LED UI Project</h1>
<h2>Making Brighter Applications</h2>
<ul>
<li><a href="/introduction/">Introduction</a></li>
</ul>

<h2>Ledgrid module</h2>
<p>The ledgrid module is useful for developing LED applications
on your computer.</p>
Expand All @@ -40,7 +45,7 @@ <h2>Green Code</h2>
<li><a href="/dictionary/">Green Code Dictionary</a> - all of the currently defined characters in standard (RGB) form of the language. </li>
<li><a href="/hundred/">Green Code Hundred words</a> - Here is a list of 100 common English words, many of which are short. I seem to find that long words can be easier to read since after decoding a few letters, you can employ your 'hangman' skills.</li>
<li><a href="/devices/">Device list</a> - different hardware and notes about them</li>
<li>Alternate one colour format</li>
<li><a href="/whitecode/">White Code</a> - Alternate one colour format</li>
<li>Greco - Green Code learning game.</li>


Expand Down
Loading

0 comments on commit 30afb5c

Please sign in to comment.