4aiman/JS-DualShock3-Monitor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add fancy gradients

Browse source
This commit is contained in:
4aiman 2020-01-20 15:55:24 +03:00
commit f5863723e8
2 changed files with 13 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

29
gpcon.js
View file

@ -61,23 +61,7 @@ function onFrame() { // gets repeatedly executed
buttEle.setAttribute("id",'button_'+j) // set new button's ID so we can get it later and change it's style buttEle.setAttribute("id",'button_'+j) // set new button's ID so we can get it later and change it's style
buttdiv.appendChild(buttEle); // add newly created button to the 'container' buttdiv.appendChild(buttEle); // add newly created button to the 'container'
// now to add SVG-generated graphics to some non-round-shaped buttons buttons[j] = true; // // for now all we need is to remember the fact that jth button has been added
if (j==9) {// start
buttEle.innerHTML = '<svg id="button_9_border"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(70,70,70,0.5)" points="0,0 30,9 1,18 0,0"></polygon></svg>';
}
if (j==12) {//up
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(70,70,70,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
}
if (j==13) {//down
buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(70,70,70,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
}
if (j==14) {//left
buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(70,70,70,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
}
if (j==15) {//right
buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(70,70,70,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
}
buttons[j] = true; // remember that jth button has been added
} else { // this part kick in when jth button has been added already } else { // this part kick in when jth button has been added already
let buttEle = document.getElementById('button_'+j); // we get correnponding element in our HTML document let buttEle = document.getElementById('button_'+j); // we get correnponding element in our HTML document
@ -104,22 +88,23 @@ function onFrame() { // gets repeatedly executed
} }
} else { // if current button is *not* pressed we should revert it's style } else { // if current button is *not* pressed we should revert it's style
if (j==9) {// once again, the 'start' button needs special attention if (j==9) {// once again, the 'start' button needs special attention
buttEle.innerHTML = '<svg id="button_9_border"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(70,70,70,0.5)" points="0,0 30,9 1,18 1,0"></polygon></svg>'; buttEle.innerHTML = '<svg id="button_9_border"><linearGradient id="Gradient0" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient0)" points="0,0 30,9 1,18 1,0"></polygon></svg>';
} else { } else {
if (j<=11) { // round-shaped buttons can be processed similarly if (j<=11) { // round-shaped buttons can be processed similarly
buttEle.style.background='rgba(70,70,70,0.5)'; buttEle.style.background='rgba(70,70,70,0.5)';
buttEle.style['background-image'] = "linear-gradient(to bottom, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%), linear-gradient(to right, rgba(190,190,190,0.25) 0%, rgba(50,50,50,0.25) 100%)";
} }
if (j==12) { // and of cource directional buttons: up if (j==12) { // and of cource directional buttons: up
buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(70,70,70,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg id="button_12" height="25" width="25" transform="rotate(0)"><linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient1)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
if (j==13) {// down if (j==13) {// down
buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(70,70,70,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg id="button_13" height="25" width="25" transform="rotate(180)"><linearGradient id="Gradient2" x1="1" x2="0" y1="1" y2="0"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient2)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
if (j==14) {// left if (j==14) {// left
buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(70,70,70,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg id="button_14" height="25" width="25" transform="rotate(270)"><linearGradient id="Gradient3" x1="1" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient3)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
if (j==15) {// right if (j==15) {// right
buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="rgba(70,70,70,0.5)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>'; buttEle.innerHTML = '<svg id="button_15" height="25" width="25" transform="rotate(90)"><linearGradient id="Gradient4" x1="0" x2="1" y1="1" y2="0"><stop offset="0%" stop-color="rgba(150,150,150,0.5)"/><stop offset="100%" stop-color="rgba(50,50,50,1)"/></linearGradient><polygon fill-rule="evenodd" stroke="rgba(50,50,50,0.5)" fill="url(#Gradient4)" points="1,3 3,1 22,1 24,3 24,15 14,24 12,24 1,15"></polygon></svg>';
} }
} }
} }

14
main.css
View file

@ -1,5 +1,5 @@
body { body {
/*background:rgba(0,80,80,0.7); */
} }
.button { .button {
@ -33,8 +33,6 @@ body {
.button_9 { .button_9 {
border:0px; border:0px;
background:transparent; background:transparent;
height:25px;
width:25px;
} }
@ -59,17 +57,17 @@ body {
} }
.button_2::after { .button_2::after {
content:"□"; content:"□"; /*square*/
color: rgba(250,80,80,0.5); color: rgba(250,80,80,0.5);
font-size:35px; font-size:35px;
top:-12px; top:-10px;
} }
.button_3::after { .button_3::after {
content:"△"; content:"△";/*triangle*/
color: rgba(60,200,100,0.5); color: rgba(60,200,100,0.5);
font-size:23px; font-size:23px;
top:-3px; top:-2px;
} }
.button_4::after { .button_4::after {
@ -188,7 +186,7 @@ body {
#buttons { #buttons {
position:absolute; position:absolute;
transform: scale(0.9); transform: scale(1);
} }