Skip to content

GitLab

A
appinventor-sources
Commit b674ce87 authored by hal's avatar hal
Browse files
Options

Merge pull request #21 from eld013/colorDocs 

Color Documentation
parents 98852ab2 da5d2ea0
Hide whitespace changes
Inline Side-by-side
Showing with 38 additions and 86 deletions
appinventor/docs/learn/reference/blocks/colors.html
View file @ b674ce87
...@@ -43,6 +43,15 @@ ...@@ -43,6 +43,15 @@
colors can also be selected from the color dropdown lists in the Designer's colors can also be selected from the color dropdown lists in the Designer's
Properties panel. Properties panel.
</p> </p>
<h3>
Using Predefined Colors
</h3>
<p>
Predefined colors are listed in the Colors drawer.
</p>
<div class="imagecontainer">
<img alt="" src="images/predefinedcolors.png" width="162" />
</div>
<h3> <h3>
Making your own colors Making your own colors
</h3> </h3>
...@@ -67,7 +76,7 @@ ...@@ -67,7 +76,7 @@
<em> <em>
B B
</em> </em>
specifications for may colors, or you can experiment with your own specifications for many colors, or you can experiment with your own
<em> <em>
R R
</em> </em>
...@@ -90,100 +99,43 @@ ...@@ -90,100 +99,43 @@
underlying screen will show though. underlying screen will show though.
</p> </p>
<p> <p>
To get a color number for App Inventor, combine the four numbers according to the A "make color" block will take a list of your
following algorithm: <em>
</p> R
<ol> </em>
<li> ,
Start with the opacity. <em>
</li> G
<li> </em>
Multiply this by 256 and add ,
<em> <em>
R B
</em> </em>
. and opacity components and create
</li> that color for you. The opacity component is optional, if omitted is set to 255. A
<li> "split color" block takes a color and returns a list of the four number components.
Multiply the result by 256 and add
<em>
G
</em>
.
</li>
<li>
Multiply the result by 256 and add
<em>
B
</em>
.
</li>
<li>
Take the result and subtract 16
<sup>
8
</sup>
= 4294967296
</li>
<li>
The resulting (negative) number is what you use for App Inventor.
</li>
</ol>
<p>
As an example, the
<em>
R
</em>
,
<em>
G
</em>
,
<em>
B
</em>
values for a deep shade of
purple are
<em>
R
</em>
= 160,
<em>
G
</em>
= 32,
<em>
B
</em>
= 240. Applying the
algorithm to these values, with an opacity of 255, gives −6283024. If you set the
background color of a canvas to −6283024, you'll see a purple patch on the screen.
</p> </p>
<p> <p>
<a href="colorchart.html"> <a href="colorchart.html">
Here is a chart This chart
</a> </a>
that gives the numbers for a variety gives the numbers for a variety
of colors. of colors.
</p> </p>
<p> <p>
And here's a blocks program that computes the color number given Here's a sample program that assigns the name purple to the color with R=160, G=32, B= 240,
<em> and opacity = 255.
R </p>
</em> <div class="imagecontainer">
, <img alt="" src="images/makecolor.png" width="483" />
<em> </div>
G <p>
</em> Using the "split color" block, the user can manipulate the R, G, B and opacity values separately.
, and Here’s an example program using “split color”. The procedure takes in a color and then
<em> returns a new color with the opacity at 100.
B
</em>
. The opacity is fixed ar 255, but you can change that by
changing the global variable.
</p> </p>
<div class="imagecontainer"> <div class="imagecontainer">
<img alt="" src="images/colorNumber.png" width="735" /> <img alt="" src="images/splitcolor.png" width="561" />
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment