Diff: resource.h

Revision:

23:3563e1699fb9

Parent:

22:6d7a72fab8ff

Child:

26:ea5e0ff46492

--- a/resource.h	Thu Jan 01 15:00:33 2015 +0000
+++ b/resource.h	Sun Jan 04 12:15:05 2015 +0000
@@ -1,4 +1,4 @@
-const char javascript[] = "var colorMap = ['#003366','#336699','#3366CC','#003399','#000099','#0000CC','#000066',\
+const char javascript[] = "var colorMap=['#003366','#336699','#3366CC','#003399','#000099','#0000CC','#000066',\
 '#006666','#006699','#0099CC','#0066CC','#0033CC','#0000FF','#3333FF',\
 '#333399','#669999','#009999','#33CCCC','#00CCFF','#0099FF','#0066FF',\
 '#3366FF','#3333CC','#666699','#339966','#00CC99','#00FFCC','#00FFFF',\
@@ -15,26 +15,47 @@
 '#FF9966','#FF6666','#FF0066','#CC6699','#993366','#999966','#CCCC00',\
 '#FFFF00','#FFCC00','#FF9933','#FF6600','#FF5050','#CC0066','#660033',\
 '#996633','#CC9900','#FF9900','#CC6600','#FF3300','#FF0000','#CC0000',\
-'#990033','#663300','#996600','#CC3300','#993300','#990000','#800000', '#993333'];\
-function onLoad() {\
-    var areas = document.getElementsByTagName('area');\
-    for( i=0; i<areas.length; i++ ) {\
-        areas[i].onclick = (function(color) { return function() { changeColor(color); }; })(colorMap[i]);\
-    }\
-}\
-function changeColor(color) {\
-    var red = parseInt('0x'+color.slice(1,3));\
-    var green = parseInt('0x'+color.slice(3,5));\
-    var blue = parseInt('0x'+color.slice(5,7));\
-    var url = 'setcolor?r='+red+'&g='+green+'&b='+blue;\
-    xmlHttp = new XMLHttpRequest();\
-    xmlHttp.open( 'GET', url, true );\
-    xmlHttp.send(null);\
-}";
+'#990033','#663300','#996600','#CC3300','#993300','#990000','#800000','#993333'];\r\n\
+function onLoad(){var map=document.getElementById('colormap');var startx=63;var countx=7;var i=0;for(y=0;y<=180;y+=15){var endx=startx+(countx*18);for(x=startx;x<endx;x+=18)\
+{var area=document.createElement('AREA');area.shape='poly';var coords=String(x)+','+String(y)+','+String(x+9)+','+String(y+4)+','+String(x+9)+','+String(y+15)+','+\
+String(x)+','+String(y+19)+','+String(x-9)+','+String(y+15)+','+String(x-9)+','+String(y+4);area.coords=coords;\
+area.onclick=(function(color){return function(){changeColor(color);};})(colorMap[i]);map.appendChild(area);i++;}\
+if(y<90){startx-=9;countx++;}else{startx+=9;countx--;}}}\
+function changeColor(color){var red=parseInt('0x'+color.slice(1,3));var green=parseInt('0x'+color.slice(3,5));var blue=parseInt('0x'+color.slice(5,7));\
+var url='setcolor?r='+red+'&g='+green+'&b='+blue;xmlHttp=new XMLHttpRequest();xmlHttp.open('GET',url,true);xmlHttp.send(null);}\
+function updateSettings(){var div=document.getElementById('message');var opMode=document.getElementById('opmode');var ssid=document.getElementById('ssid');var pwd=document.getElementById('pass');\
+var url='updateconfig?opmode='+opMode.value+'&ssid='+ssid.value+'&pwd='+pwd.value;xmlHttp=new XMLHttpRequest();div.innerHTML='Saving Settings...';div.style.color='black';\
+xmlHttp.open('GET',url,true);xmlHttp.responseType='json';xmlHttp.onreadystatechange=function(){updateSettings_callback(xmlHttp,opMode,ssid,pwd,div);};xmlHttp.send(null);}\
+function updateSettings_callback(xmlHttp,opMode,ssid,pwd,div){if(xmlHttp.readyState==4){var staip=document.getElementById('staip');\
+var result=xmlHttp.response.result;div.innerHTML=result;if(result!='Success'){div.style.color='orangered';}else{div.style.color='green';pwd.value='';}\
+opMode.value=xmlHttp.response.opmode;ssid.value=xmlHttp.response.ssid;staip.innerHTML=xmlHttp.response.staip;}}";
 
-const char css[] = "body { background-color:#DDDDDD; font-size:14px; } area {cursor: pointer;} span {cursor: pointer;} span:hover {text-decoration:underline;}";
+const char css[] = "body {background-color:#DDDDDD;font-size:14px;} table {margin:auto;} area {cursor: pointer;} span {cursor:pointer;} span:hover {text-decoration:underline;}\
+table#config {border:2px solid black;} table#config tr td:first-child {font-weight: bold;} table#config tr td:nth-child(2) {background-color: #BBBBBB;border: 1px solid black;\
+padding: 4px 10px;} table#config tr td input[type=button] {padding: 5px 20px;margin-top: 10px;} div#message {text-align: center;font-size: x-large;padding-bottom: 10px;}";
 
 const char areaHTML[] = "<area shape='poly' coords='%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d,%d'>";
+const char htmlHead[] = "<html><head><title>RGB WiFi Lamp</title><link rel='stylesheet' href='wifilamp.css' /><script src='wifilamp.js'></script></head><body onLoad='onLoad()'>";
+const char htmlTail[] = "</body></html>";
+
+const char htmlConfigHTML[] = "<div id='message'></div><table id='config'>\
+<tr><td>Operating Mode</td><td><select id='opmode' onChange='changeOpMode()'>\
+<option value='1'%opmode1%>Station Only</option>\
+<option value='2'%opmode2%>AP Only</option>\
+<option value='3'%opmode3%>AP and Station</option>\
+</select></td></tr>\
+<tr><td align='right'>Station MAC</td><td>%stamac%</td></tr>\
+<tr><td align='right'>Station IP</td><td id='staip'>%staip%</td></tr>\
+<tr><td align='right'>SSID</td><td><input type='text' id='ssid' value='%ssid%' /> [<a target='_blank' href='apscan'>Scan</a>]</td></tr>\
+<tr><td align='right'>Password</td><td><input type='password' id='pass' /></td></tr>\
+<tr><td colspan='2' align='center'><input type='button' onClick='updateSettings()' value='Update Settings' /></td></tr>\
+<tr><td colspan='2' align='center'><hr /></td></tr>\
+<tr><td align='right'>SoftAP MAC</td><td>%apmac%</td></tr>\
+<tr><td align='right'>SoftAP IP</td><td>%apip%</td></tr>\
+<tr><td colspan='2' align='center'><hr /></td></tr>\
+<tr><td colspan='2' align='center'><a href='/'>Main Screen</a></td></tr>\
+</table>";
+const char jsonConfigReply[] = "{\"opmode\":%d,\"staip\":\"%s\",\"ssid\":\"%s\",\"result\":\"%s\"}";
 
 const unsigned char colormap[7074]=
 {
@@ -682,4 +703,22 @@
     0x00,0xD2,0x48,0x97,0x34,0xDA,0x25,0x8D,0x78,0x49,0xA3,
     0x5E,0xD2,0xC8,0x97,0x34,0x5C,0xF7,0xB4,0x40,0x00,0x00,
     0x3B,
-};
\ No newline at end of file
+};
+
+unsigned char configIcon[144]=
+{
+    0x47,0x49,0x46,0x38,0x39,0x61,0x10,0x00,0x10,0x00,0xA2,
+    0x06,0x00,0xC0,0xC0,0xC0,0x80,0x80,0x00,0x80,0x80,0x80,
+    0xFF,0xFF,0x00,0xFF,0xFF,0xFF,0x00,0x00,0x00,0xFF,0xFF,
+    0xFF,0x00,0x00,0x00,0x21,0xF9,0x04,0x01,0x00,0x00,0x06,
+    0x00,0x2C,0x00,0x00,0x00,0x00,0x10,0x00,0x10,0x00,0x00,
+    0x03,0x55,0x68,0xAA,0xB2,0xFE,0x82,0x14,0x69,0xCA,0x5B,
+    0x02,0x4C,0x51,0xA6,0x7D,0x12,0x11,0x4E,0xDA,0xC5,0x71,
+    0x5E,0x81,0x3E,0x05,0x20,0x76,0xD3,0xCB,0x72,0x44,0x14,
+    0x02,0x0D,0x65,0x48,0x78,0x54,0x04,0x1D,0x49,0x61,0x60,
+    0xD9,0x74,0x38,0x83,0x80,0x2F,0x39,0xA9,0xA4,0x7E,0xC1,
+    0xE8,0x67,0xF1,0x1B,0x08,0x27,0x4C,0x16,0xD0,0xCA,0x85,
+    0x82,0x86,0x81,0x80,0x24,0x40,0x24,0xB0,0x98,0xC3,0x4E,
+    0x78,0x4A,0xF5,0x00,0x85,0x17,0x07,0xCC,0x91,0x00,0x00,
+    0x3B,
+};