Pages: 1 [2]   Go Down
Author Topic: increase sketch size for arduino webserver ( Uno and ethernet shield)  (Read 3216 times)
0 Members and 1 Guest are viewing this topic.
Tasmania - Australia
Offline Offline
Sr. Member
****
Karma: 16
Posts: 307
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

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
Logged


0
Offline Offline
Tesla Member
***
Karma: 145
Posts: 9636
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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:
<!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>
Logged

Consider the daffodil. And while you're doing that, I'll be over here, looking through your stuff.   smiley-cool

0
Offline Offline
Tesla Member
***
Karma: 145
Posts: 9636
Arduino rocks
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Code:
//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="";
        }
      }
    }
  }
}

Logged

Consider the daffodil. And while you're doing that, I'll be over here, looking through your stuff.   smiley-cool

Offline Offline
Newbie
*
Karma: 0
Posts: 28
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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?
Logged

Pages: 1 [2]   Go Up
Jump to: