Angle Spin Gauge with manual control

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

0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100 105 110 115 120 125 130 135 140 145 150 155 160 165 170 175 180 185 190 195 200 205 210 215 220 225 230 235 240 245 250 255 260 265 270 275 280 285 290 295 300 305 310 315 320 325 330 335 340 345 350 355

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'

spin spin spin

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

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 is random.