Go Down

Topic: increase sketch size for arduino webserver ( Uno and ethernet shield) (Read 3643 times) previous topic - next topic

Quote
Patrikk wrote:
the jquery is over 200K then the html is so far 17k css is about 100k


All the suggestions above are valid and good.
Another thing to help you improve performance is to use the minimised version of jQuery, it is way smaller at around 32Kb.
Also, with your css at 100Kb, do you use all that I wonder?
Strip it back, take out the stuff you don't need, and even look at minimising it.

Or again use a standard normalised css file externally resourced, as you would normally do with jQuery.

Paul

zoomkat

Bottom is the servosld.htm file that goes with the slider code I posted. Below are the links to the slider.js, bluev_sl.gif,
and bluev_bg.gif files.

http://web.comporium.net/~shb/pix/slider.js

http://web.comporium.net/~shb/pix/bluev_bg.gif

http://web.comporium.net/~shb/pix/bluev_sl.gif

Code: [Select]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Zoomkat's SSC-32 Slider Servo Control - Demo #1</title>
<script language="JavaScript" src="http://192.168.1.102:84/slider.js"></script>
</head>

<body>




<form>
  <div align="center"><center><table border="0" cellpadding="0">
    <tr>
</td>

<form action="">

</form>


     <td width="0%">

<form action="http://192.168.1.102:84/?" method="get" name="demoForm" target= 'inlineframe'>
<input name="0" id="sliderValue0" type="Text" size="3">
<script language="JavaScript">
var A_TPL = {
'b_vertical' : true,
'b_watch': true,
'n_controlWidth': 16,
'n_controlHeight': 120,
'n_sliderWidth': 15,
'n_sliderHeight': 16,
'n_pathLeft' : 1,
'n_pathTop' : 1,
'n_pathLength' : 103,
's_imgControl': 'http://192.168.1.102:84/bluev_bg.gif',
's_imgSlider': 'http://192.168.1.102:84/bluev_sl.gif',
'n_zIndex': 1
}
var A_INIT = {
's_form' : 1,
's_name': 'sliderValue0',
'n_minValue' : 500,
'n_maxValue' : 2500,
'n_value' : 1500,
'n_step' : 10
}

new slider(A_INIT, A_TPL);
</script>
<input name="Submit" type="Submit" value="Set 0">

</form>
</td>
     <td width="0%">

<form action="http://192.168.1.102:84/?" method="get" name="demoForm" target= 'inlineframe'>
<input name="1" id="sliderValue1" type="Text" size="3">
<script language="JavaScript">
var B_TPL = {
'b_vertical' : true,
'b_watch': true,
'n_controlWidth': 16,
'n_controlHeight': 120,
'n_sliderWidth': 15,
'n_sliderHeight': 16,
'n_pathLeft' : 1,
'n_pathTop' : 1,
'n_pathLength' : 103,
's_imgControl': 'http://192.168.1.102:84/bluev_bg.gif',
's_imgSlider': 'http://192.168.1.102:84/bluev_sl.gif',
'n_zIndex': 1
}
var B_INIT = {
's_form' : 2,
's_name': 'sliderValue1',
'n_minValue' : 500,
'n_maxValue' : 2500,
'n_value' : 1500,
'n_step' : 10
}

new slider(B_INIT, B_TPL);
</script>
<input name="Submit" type="Submit" value="Set 1">

</form>
</td>
</td>
     <td width="0%">

<form action="http://192.168.1.102:84/?" method="get" name="demoForm" target= 'inlineframe'>
<input name="2" id="sliderValue2" type="Text" size="3">
<script language="JavaScript">
var C_TPL = {
'b_vertical' : true,
'b_watch': true,
'n_controlWidth': 16,
'n_controlHeight': 120,
'n_sliderWidth': 15,
'n_sliderHeight': 16,
'n_pathLeft' : 1,
'n_pathTop' : 1,
'n_pathLength' : 103,
's_imgControl': 'http://192.168.1.102:84/bluev_bg.gif',
's_imgSlider': 'http://192.168.1.102:84/bluev_sl.gif',
'n_zIndex': 1
}
var C_INIT = {
's_form' : 3,
's_name': 'sliderValue2',
'n_minValue' : 500,
'n_maxValue' : 2500,
'n_value' : 1500,
'n_step' : 10
}

new slider(C_INIT, C_TPL);
</script>
<input name="Submit" type="Submit" value="Set 2">

</form>
</td>
     <td width="0%">

<form action="http://192.168.1.102:84/?" method="get" name="demoForm" target= 'inlineframe'>
<input name="3" id="sliderValue3" type="Text" size="3">
<script language="JavaScript">
var D_TPL = {
'b_vertical' : true,
'b_watch': true,
'n_controlWidth': 16,
'n_controlHeight': 120,
'n_sliderWidth': 15,
'n_sliderHeight': 16,
'n_pathLeft' : 1,
'n_pathTop' : 1,
'n_pathLength' : 103,
's_imgControl': 'http://192.168.1.102:84/bluev_bg.gif',
's_imgSlider': 'http://192.168.1.102:84/bluev_sl.gif',
'n_zIndex': 1
}
var D_INIT = {
's_form' : 4,
's_name': 'sliderValue3',
'n_minValue' : 500,
'n_maxValue' : 2500,
'n_value' : 1500,
'n_step' : 10
}

new slider(D_INIT, D_TPL);
</script>
<input name="Submit" type="Submit" value="Set 3">

</form>
</td>
     <td width="0%">

<form action="http://192.168.1.102:84/?" method="get" name="demoForm" target= 'inlineframe'>
<input name="4" id="sliderValue4" type="Text" size="3">
<script language="JavaScript">
var E_TPL = {
'b_vertical' : true,
'b_watch': true,
'n_controlWidth': 16,
'n_controlHeight': 120,
'n_sliderWidth': 15,
'n_sliderHeight': 16,
'n_pathLeft' : 1,
'n_pathTop' : 1,
'n_pathLength' : 103,
's_imgControl': 'http://192.168.1.102:84/bluev_bg.gif',
's_imgSlider': 'http://192.168.1.102:84/bluev_sl.gif',
'n_zIndex': 1
}
var E_INIT = {
's_form' : 5,
's_name': 'sliderValue4',
'n_minValue' : 500,
'n_maxValue' : 2500,
'n_value' : 1500,
'n_step' : 10
}

new slider(E_INIT, E_TPL);
</script>
<input name="Submit" type="Submit" value="Set 4">

</form>
</td>
     <td width="0%">

<form action="http://192.168.1.102:84/?" method="get" name="demoForm" target= 'inlineframe'>
<input name="5" id="sliderValue5" type="Text" size="3">
<script language="JavaScript">
var F_TPL = {
'b_vertical' : true,
'b_watch': true,
'n_controlWidth': 16,
'n_controlHeight': 120,
'n_sliderWidth': 15,
'n_sliderHeight': 16,
'n_pathLeft' : 1,
'n_pathTop' : 1,
'n_pathLength' : 103,
's_imgControl': 'http://192.168.1.102:84/bluev_bg.gif',
's_imgSlider': 'http://192.168.1.102:84/bluev_sl.gif',
'n_zIndex': 1
}
var F_INIT = {
's_form' : 6,
's_name': 'sliderValue5',
'n_minValue' : 500,
'n_maxValue' : 2500,
'n_value' : 1500,
'n_step' : 10
}

new slider(F_INIT, F_TPL);
</script>
<input name="Submit" type="Submit" value="Set 5">

</form>
</td>
     <td width="0%">

<form action="http://192.168.1.102:84/?" method="get" name="demoForm" target= 'inlineframe'>
<input name="6" id="sliderValue6" type="Text" size="3">
<script language="JavaScript">
var G_TPL = {
'b_vertical' : true,
'b_watch': true,
'n_controlWidth': 16,
'n_controlHeight': 120,
'n_sliderWidth': 15,
'n_sliderHeight': 16,
'n_pathLeft' : 1,
'n_pathTop' : 1,
'n_pathLength' : 103,
's_imgControl': 'http://192.168.1.102:84/bluev_bg.gif',
's_imgSlider': 'http://192.168.1.102:84/bluev_sl.gif',
'n_zIndex': 1
}
var G_INIT = {
's_form' : 7,
's_name': 'sliderValue6',
'n_minValue' : 500,
'n_maxValue' : 2500,
'n_value' : 1500,
'n_step' : 10
}

new slider(G_INIT, G_TPL);
</script>
<input name="Submit" type="Submit" value="Set 6">

</form>
</td>
     <td width="0%">

<form action="http://192.168.1.102:84/?" method="get" name="demoForm" target= 'inlineframe'>
<input name="7" id="sliderValue7" type="Text" size="3">
<script language="JavaScript">
var H_TPL = {
'b_vertical' : true,
'b_watch': true,
'n_controlWidth': 16,
'n_controlHeight': 120,
'n_sliderWidth': 15,
'n_sliderHeight': 16,
'n_pathLeft' : 1,
'n_pathTop' : 1,
'n_pathLength' : 103,
's_imgControl': 'http://192.168.1.102:84/bluev_bg.gif',
's_imgSlider': 'http://192.168.1.102:84/bluev_sl.gif',
'n_zIndex': 1
}
var H_INIT = {
's_form' : 8,
's_name': 'sliderValue7',
'n_minValue' : 500,
'n_maxValue' : 2500,
'n_value' : 1500,
'n_step' : 10
}

new slider(H_INIT, H_TPL);
</script>
<input name="Submit" type="Submit" value="Set 7">

</form>
</td>
    </tr>
  </table>
  </center></div>
<P>
<a href="#" onClick="NewWindow=window.open('http://192.168.1.102:84/servosld.htm','NewWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=460,height=200,top=,left=');">Put me in a popup Window</a><BR>
<IFRAME name=inlineframe style='display:none'></IFRAME>
</body>
</html>
Google forum search: Use Google Advanced Search and use Http://forum.arduino.cc/index in the "site or domain:" box.

zoomkat

Arduino code including the servo functions from the sliders. Don't have any servos currently connected, but the code appears to work.

Code: [Select]

//zoomkat 1/26/13
//SD server slider test code
//open serial monitor to see what the arduino receives
//address will look like http://192.168.1.102:84/servosld.htm when submited
//for use with W5100 based ethernet shields
//put the servosld.htm, slider.js, bluev_sl.gif,
//and bluev_bg.gif on the SD card
//files at http://web.comporium.net/~shb/servoslider.htm page


#include <SD.h>
#include <SPI.h>
#include <Ethernet.h>

#include <Servo.h>
Servo myservoa, myservob, myservoc, myservod;  // create servo object to control a servo
Servo myservoe, myservof, myservog;
String readString, pos;

byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = {
  192, 168, 1, 102 }; // ip in lan
byte gateway[] = {
  192, 168, 1, 1 }; // internet access via router
byte subnet[] = {
  255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port

//////////////////////

void setup(){

  Serial.begin(9600);

  // disable w5100 while setting up SD
  pinMode(10,OUTPUT);
  digitalWrite(10,HIGH);
  Serial.print("Starting SD..");
  if(!SD.begin(4)) Serial.println("failed");
  else Serial.println("ok");

  Ethernet.begin(mac, ip, gateway, gateway, subnet);

  //delay(2000);
  server.begin();
  Serial.println("Ready");
 
  myservoa.attach(2);  //the pin for the servoa control
  myservob.attach(3);  //the pin for the servob control
  myservoc.attach(5);  //the pin for the servoc control
  myservod.attach(6);  //the pin for the servod control
  myservoe.attach(7);  //the pin for the servoa control
  myservof.attach(8);  //the pin for the servob control
  myservog.attach(9);  //the pin for the servoc control
  //myservoh.attach(10);  //the pin for the servod control

}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {
          //store characters to string
          readString += c;
          //Serial.print(c);
        }
        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //print to serial monitor for debuging
         
         //select proper header for file to be sent to browser
         
          client.println("HTTP/1.1 200 OK"); //send new page
          if(readString.indexOf("servosld") >=0) {
          client.println("Content-Type: text/html");
          client.println(); }

          if(readString.indexOf("slider") >=0) {
          client.println("Content-Type: application/x-javascript");
          client.println(); }
         
          if(readString.indexOf("bluev") >=0) {
          client.println("Content-Type: image/gif");
          client.println(); }
         
          //select file to send to browser
          if(readString.indexOf("servosld") >=0) {
            File myFile = SD.open("SERVOSLD.HTM");
            if (myFile) {
              while (myFile.available()) {
                client.write(myFile.read());
              }
              myFile.close();
            }
          }

          if(readString.indexOf("slider") >=0) {
            File myFile = SD.open("slider.js");
            if (myFile) {
              while (myFile.available()) {
                client.write(myFile.read());
              }
              myFile.close();
            }
          }

          if(readString.indexOf("bluev_sl") >=0) {
            File myFile = SD.open("bluev_sl.gif");
            if (myFile) {
              while (myFile.available()) {
                client.write(myFile.read());
              }
              myFile.close();
            }
          }

          if(readString.indexOf("bluev_bg") >=0) {
            File myFile = SD.open("bluev_bg.gif");
            if (myFile) {
              while (myFile.available()) {
                client.write(myFile.read());
              }
              myFile.close();
            }
          }

          delay(1);
          //stopping client
          client.stop();

          //process GET string request from client and and position servo
         
          pos = readString.substring(8, 12); //get the first four characters         
          //Serial.println(pos);
          int n = pos.toInt();  //convert readString into a number   
          Serial.println(n);
          Serial.println();
         
          if(readString.indexOf("?0") >0) myservoa.writeMicroseconds(n);
          if(readString.indexOf("?1") >0) myservob.writeMicroseconds(n);
          if(readString.indexOf("?2") >0) myservoc.writeMicroseconds(n);
          if(readString.indexOf("?3") >0) myservod.writeMicroseconds(n);
          if(readString.indexOf("?4") >0) myservoe.writeMicroseconds(n);
          if(readString.indexOf("?5") >0) myservof.writeMicroseconds(n);
          if(readString.indexOf("?6") >0) myservog.writeMicroseconds(n);
          //only seven servo pins, so back to myservoa for testing
          if(readString.indexOf("?7") >0) myservoa.writeMicroseconds(n);

          //clearing string for next read
          readString="";
          pos="";
        }
      }
    }
  }
}

Google forum search: Use Google Advanced Search and use Http://forum.arduino.cc/index in the "site or domain:" box.

I have a CSS, HTML and .js page for my project how do I group them together so the Arduino code has a place to find them and then access them
I built all three files with the visual studio 2012 IDE and there all three in a project called rover project Do i put the project in a package on the divice that will be controling the rover or what?

Go Up