ESP8266 Community Forum

- Fri Sep 18, 2015 9:33 am #29351 I'm trying to change the icons and their sizes so they look good on mobiles, and I dont need to zoom.

Has anyone done it successfully?

So far I've upped the pixel count on the icons.png file by 5 fold.

So that in my mind, should push the regular 32px borders to 5*32 = 160px

Then in wifi.tpl I've increased the 32's to 160's...but it doesn't seem to work properly.

Any ideas?

Code: Select allfunction createInputForAp(ap) {
   if (ap.essid=="" && ap.rssi==0) return;
   var div=document.createElement("div");
   div.id="apdiv";
   var rssi=document.createElement("div");   
        var rssiVal=-Math.floor(ap.rssi/51)*160; //var rssiVal=-Math.floor(ap.rssi/51)*32;
   rssi.className="icon";
   rssi.style.backgroundPosition="0px "+rssiVal+"px";
   var encrypt=document.createElement("div");
   var encVal="-320"; //var encVal="-64"; //assume wpa/wpa2
   if (ap.enc=="0") encVal="0"; //open
   if (ap.enc=="1") encVal="-160"; //if (ap.enc=="1") encVal="-32"; //wep
   encrypt.className="icon";
   encrypt.style.backgroundPosition="-160px "+encVal+"px"; //encrypt.style.backgroundPosition="-32px "+encVal+"px";
   var input=document.createElement("input");
   input.type="radio";
   input.name="essid";
   input.value=ap.essid;
   if (currAp==ap.essid) input.checked="1";
   input.id="opt-"+ap.essid;
   var label=document.createElement("label");
   label.htmlFor="opt-"+ap.essid;
   label.textContent=ap.essid;
   div.appendChild(input);
   div.appendChild(rssi);
   div.appendChild(encrypt);
   div.appendChild(label);
   return div;
}

function getSelectedEssid() {
   var e=document.forms.wifiform.elements;
   for (var i=0; i<e.length; i++) {
      if (e[i].type=="radio" && e[i].checked) return e[i].value;
   }
   return currAp;
}


function scanAPs() {
   xhr.open("GET", "wifiscan.cgi");
   xhr.onreadystatechange=function() {
      if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
         var data=JSON.parse(xhr.responseText);
         currAp=getSelectedEssid();
         if (data.result.inProgress=="0" && data.result.APs.length>1) {
            $("#aps").innerHTML="";
            for (var i=0; i<data.result.APs.length; i++) {
               if (data.result.APs[i].essid=="" && data.result.APs[i].rssi==0) continue;
               $("#aps").appendChild(createInputForAp(data.result.APs[i]));
            }
            window.setTimeout(scanAPs, 20000);
         } else {
            window.setTimeout(scanAPs, 1000);
         }
      }
   }
   xhr.send();
}

- Fri Sep 18, 2015 10:52 am #29364 Never mind, that is how to do it above. I was just not referencing the icons properly in css because I had moved them and merged the two css scripts.

Muphys law. Struggle for hours, decide to post, then immediately figure it out. Apologies.