colorForHTML_ul.mw
Creating HTML style color codes
with Maple components
© Tim Van Dusen, 2007
Introduction
Although this example doesn't have much, if anything to do with the typical use of Maple, I decided to make it available to others since it demonstrates a little about the use of the Maple components within the document interface.
This control can be used to create the 6-digit (24-bit) hexadecimal code that is used by HTML. Being new to Maple, I began experimenting with components to manipulate my plots while at the same time I was working on a web page which I still write code for, line by line, using PHP and HTML, requiring me to manually enter the various color codes for the HTML content. Color code charts can easily be found on the internet with simple "googling" but I figured it might be kinda fun to do something like this with Maple components.
|
|
Overview
The HTML makes use of RGB ( Red, Green, Blue ) color values represented by hexadecimal color codes whenever a color is required for fonts or whatever. When working with HTML code, when a color is needed, it's convenient to be able to mix a color and have a visual representation, and then just copy and paste the resulting hexadecimal number into an HTML document. For those who aren't familiar with HTML, below is an example of the way this color is used.
<html><body bgcolor=#FFFFFF>
<font face=verdana color=#FF8300>
<b>hello from html</b>
</body></html>
|
PRODUCES:
The bgcolor above sets the document background color, as does the other value set the font color. HTML uses an 8-bit numeric to represent each of the colors RGB, so for a solid red color, the code would be, #FF0000 while orange - a mix of green and red - would be something like #FF8300.
copy and paste into HTML -> 
Usage
To make this work, I first created the sliders. I started by placing the cursor where I wanted the first slider to be and then clicked on the slider in the component menu which caused the slider to appear in the document. I wanted a text space between each component so just before I placed the second slider, I made sure I was in "text" mode and made a couple of spaces before placing the second slider. I used the same technique for the rest of the components.
Component settings
I encountered two dialogs for setting up the control - one for slider properties and the other for the action to be taken when the slider is moved.
Slider properties and action to be taken when slider is moved
To set the range for each of the sliders, I right-clicked on the component and chose "properties" from the drop-down menu. I used 100 as the highest value for each of the colors to make it easier to convert the slider value to the 8-bit one being created in the textbox to be used by the HTML. The conversion simply requires multiplying each slider value by 2.55 to produce a maximum of 255 (FF hexadecimal ), as may be more easily understood by viewing the code which is shown after clicking the "Edit" button from the dialog shown below.
Additional notes
I used sprintf() for creating the HEX value for each slider position after first experimenting with the convert() function provided with Maple. I started by just using Maple's convert function, but that required that I do some shifting of each of the Red and Green byte in order to build the 24-bit overall value before the conversion and then I was confronted with the apostrophes that Maple adds to the final result after the conversion. The HTML requires the pound (#) character to precede the HEX code which I wasn't able to squeeze in between the apostrophe and the HEX string, so I just opted for the use of sprintf() to make the whole thing easier.
I found the components very easy to use but am still learning their capability within my current version 10 of Maple.
About me
I'm 53 years old, and have finally found some time in my life to review the mathematics I learned many years ago as well as learn more. I consider myself very fortunate to have discovered Maple as it is one of the greatest learning tools I have ever encountered. I hope to be able to contribute something more "math worthy" in the future, but for the time being, I hope that this worksheet might help someone like myself who is new to maple and experimenting with some of the components of Maple-10.
|
Legal Notice: The copyright for this application is owned by the author(s). Neither the author nor Maplesoft are responsible for any errors contained within and are not liable for any damages resulting from the use of this material. This application is intended for non-commercial, non-profit use only. Contact the author for permission if you wish to use this application in for-profit activities.
|