Amillia Publishing Company Advertisement  © The beautiful Golden Gate Bridge arching across to the Golden Gate in the heavy Springtime fog.

🏆 🏇 🝀 🝁 🝂 🝃 🝄 🝅 🝆 🝇 🝈 🝉 🝊 🝋 🝌 🝍 🝎 🝏 🝐 🝑 🝒 🝓 🝔 🝕 🝖 🝗 🝘 🝙 🝚 🝛 🝜 🝝 🝞 🝟 🝠 🝡 🝢 🝣 🝤 🝥 🝦 🝧 🝨 🝩 🝪 🝫 🝬 🝭 🝮 🝯 🝰 🝱 🝲 🝳 🞀 🞁 🞂 🏈 🎀 🎁 🎂
🏆 🏇 🝀 🝁 🝂 🝃 🝄 🝅 🝆 🝇 🝈 🝉 🝊 🝋 🝌 🝍 🝎 🝏 🝐 🝑 🝒 🝓 🝔 🝕 🝖 🝗 🝘 🝙 🝚 🝛 🝜 🝝 🝞 🝟 🝠 🝡 🝢 🝣 🝤 🝥 🝦 🝧 🝨 🝩 🝪 🝫 🝬 🝭 🝮 🝯 🝰 🝱 🝲 🝳 🞀 🞁 🞂 🏈 🎀 🎁 🎂
🏆 🏇 🝀 🝁 🝂 🝃 🝄 🝅 🝆 🝇 🝈 🝉 🝊 🝋 🝌 🝍 🝎 🝏 🝐 🝑 🝒 🝓 🝔 🝕 🝖 🝗 🝘 🝙 🝚 🝛 🝜 🝝 🝞 🝟 🝠 🝡 🝢 🝣 🝤 🝥 🝦 🝧 🝨 🝩 🝪 🝫 🝬 🝭 🝮 🝯 🝰 🝱 🝲 🝳 🞀 🞁 🞂 🏈 🎀 🎁 🎂
🏆 🏇 🝀 🝁 🝂 🝃 🝄 🝅 🝆 🝇 🝈 🝉 🝊 🝋 🝌 🝍 🝎 🝏 🝐 🝑 🝒 🝓 🝔 🝕 🝖 🝗 🝘 🝙 🝚 🝛 🝜 🝝 🝞 🝟 🝠 🝡 🝢 🝣 🝤 🝥 🝦 🝧 🝨 🝩 🝪 🝫 🝬 🝭 🝮 🝯 🝰 🝱 🝲 🝳 🞀 🞁 🞂 🏈 🎀 🎁 🎂
🏆 🏇 🝀 🝁 🝂 🝃 🝄 🝅 🝆 🝇 🝈 🝉 🝊 🝋 🝌 🝍 🝎 🝏 🝐 🝑 🝒 🝓 🝔 🝕 🝖 🝗 🝘 🝙 🝚 🝛 🝜 🝝 🝞 🝟 🝠 🝡 🝢 🝣 🝤 🝥 🝦 🝧 🝨 🝩 🝪 🝫 🝬 🝭 🝮 🝯 🝰 🝱 🝲 🝳 🞀 🞁 🞂 🏈 🎀 🎁 🎂

















spin spin spin





"Why don't we BASH 🚀 for a while?"


this demonstration merges concepts from various other demonstration pages. The hope is for a solid idiom without the fragility of some idioms. older version of this here and here.

utilizing simple BASH concepts, and for loops, auto genereated cal_face elements are on this page as angle spin guage 'faces'.

The assumption is, always, at code-frag, that our readers are with it enough to be able to understand the items here. If you have questions then please open up the page in your copy of firefox with an enabled copy of firebug, that you will have figured out, on your own, how to load and use.

The process to create the faces for a hub from a BASH prompt follows. Recommended toolset: BASH, kate, gcc, gnu, XML, anything from the W3C, FC#, (currently at FC20)

create a color array

lcv=0;for color in {00,aa,ff}{00,aa,ff}{00,3f,6f,77,aa,bb,cc,ff}; do echo $lcv; colorarray[$lcv]=$color;let lcv+=1; done;

create a symbol array

lcv=0;for uni_sym in {,,,,,,,,,,,🏆,🏇,\ 🝀,🝁,🝂,🝃,🝄,🝅,🝆,🝇,🝈,🝉,🝊,🝋,🝌,🝍,🝎,🝏,🝐,🝑,🝒,🝓,🝔,🝕,🝖,🝗,\ 🝘,🝙,🝚,🝛,🝜,🝝,🝞,🝟,🝠,🝡,🝢,🝣,🝤,🝥,🝦,🝧,🝨,🝩,🝪,🝫,🝬,🝭,🝮,🝯,🝰,🝱,🝲,🝳,\ 🞀,🞁,🞂,🏈,🎀,🎁,🎂,🎃,🎄,🎅,🎆,🎇,🎈,🎉,🎊,🎋,🎌,🎍,🎎,🎏,🎐,🎑,🎒,🎓,🎔}; do echo $lcv;\ symbolarray[$lcv]=$uni_sym ; let lcv+=1; done;

create a background color array

lcv=0;for color in {ff,00,aa}{ff,00,aa}{ff,cc,bb,aa,77,6f,3f,00}; do echo $lcv; bcolorarray[$lcv]=$color;let lcv+=1; done;

and then the following outputs all of the nodes for our hub.

hub_rad=700;for ((lcv=0;lcv<72;lcv=lcv+1)) do let var=lcv*5; \ echo -e "@lt;cal_face style=\"color:#"${colorarray[$lcv]}";\ background-color:#"${bcolorarray[$lcv]}";\ translate-orgin 50% 50%;transform: rotateY("$var"deg) translateZ("$hub_rad"px)\"@gt;"\ ${symbolarray[$lcv]}"@lt;/cal_face@gt;"; done;

These must now be pasted to our html file and put it into one of the spin-guage holders, replacing the cal_face nodes that are there. Or make a new hub, which isn't that complex.

In order for this to work in all browsers one needs to add in the other browser equivalents as per the idiom like this:

-webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); -o-transform:rotateX(45deg); transform: rotateX(45deg);

but make it in-line. This has been tested in firefox. It may not work with a webkit or IE version of a browser.

To add a hub just copy an old one. Then you can change that one's id after you paste it as a copy. Remember, there may be some offsets that need tweeking in the new hub too. It should all be obvious if it overlaps on itself.

The motion of these hubs comes from javascript call backs. You will need to hook these to any new hub.

In order to make a hub with fewer faces you would simply change the number of elements necessary to a different amount by modifying the for loop. You would also want to call it a different class of face because the demensions of it will also be different

One could even imagine a template class of the above process which would store, as well, the number of faces on the hub. The hub would then expect that many input elements to put upon the faces.

When the elements are in a hub the content actually is inside of that face which is 'attached to' the hub. So, for example, if we wanted an array of 16 symbols arranged in a square for each face we would have to have 16 times the characters. It would behoove us to have a way to create this data locally so we could slim down the requirements for the bandwidth. But as my scheme would be, I would have a single span definition for each character. Doesn't that seem just a little bit inefficient?

A little bit of profiling this in my head. For each of the faces there will now be 16 spans elements. The unicode for each will be the contents of that element. Maybe we would also put it in as an attribute of the span node just to hammer home the point that this thing is this character and not a different one (and maybe even the other unicode controls spelled out as hex too, prob not). For each of these span there will be an inline style. That way each character can have it's own color, background, font, font-size, and transformation of animation tied to it for independant spinning behavior.

Lemons are all yellow, Cherries are always red

We could define styles of that speicific character, which we would tag that as a class, say name it as the unicode? I doubt that is valid CSS but I have not tried it yet.

🍒 { /*we can't use a unicode symbol like this! */ color:red; /*this does not work!*/ }

I hope I don't break anyone's browser! lol. I've put in the above non-CSS frag into the style section of this page. It doesn't work

these from the wikipedia
☉ sun
☿ Mercury
♀ Venus
♁ Earth
 moon
♂ Mars
asteroids
♃ Jupiter
♄ Saturn
♅ Uranus
♆ Neptune
♇ Pluto 
zodiac
♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓
zodiac from here