Send a value to a variable from a webpage [SOLVED]

The error I mentioned above happens each time I click the button, but 2 errors actually pop up first, right when the page loads:

Uncaught SyntaxError: Unexpected token <

and

Uncaught SecurityError: Failed to read the ‘contentDocument’ property from ‘HTMLIFrameElement’: Blocked a frame with origin “my website.com” from accessing a frame with origin “https://widgets.wp.com”. The frame requesting access has a protocol of “http”, the frame being accessed has a protocol of “https”. Protocols must match.

Seems that’s the case: https://www.godaddy.com/garage/webpro/wordpress/3-ways-to-insert-javascript-into-wordpress-pages-or-posts/

1 Like

Great, thanks for the detective work! I’ll try this weekend and report back.

1 Like

It works! It took some poking around, so I’ll include how I got this to work on Wordpress:

The article @Moors7 included above has 3 ways of doing this, I went with using the Scripts n Styles plugin. Install the plugin, and then go to the page you want to add particle functionality to. Problem 1 you’ll run into - Scripts n Styles metabox doesn’t pop up until you click on “screen options” in the top right hand corner, and then select Scripts n Styles.

Now down below your main content box, you’ll have a Scripts n Styles box to add Javascript. To use Morrs7’s code, put the following html into the content box:

<html>
  <head>
      <title>Spark function buttons Example</title>
  </head>

  <body>
    
    <input type="text" class="form-control" placeholder="Start Hour?" id="startHour">
    <input type="text" class="form-control" placeholder="Start Minute?" id="startMinute">
    <input type="text" class="form-control" placeholder="Stop Hour?" id="stopHour">
    <input type="text" class="form-control" placeholder="Stop Minute?" id="stopMinute">
    
    <br>
<button type="button" onclick="sendValues()">Send values</button>
    <!--
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 1</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 2</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 3</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 4</button>
    -->    

[hoops name="particle"] 

  </body>
</html>

Then down in the Scripts n Styles box, add the following to the body box:

  //you can use your accesstoken, or your email/passsword to log in. Uncomment accordingly below.

  var accessToken = "your token";
  var deviceID = "your ID";
  
  var startHour;
  var startMinute;
  var stopHour;
  var stopMinute;
  
  var combinedTime;
  
  //console.log(startHour + startMinute + stopHour + stopMinute);
  
  function sendValues(){
    startHour = document.getElementById('startHour');
    startMinute = document.getElementById('startMinute');
    stopHour = document.getElementById('stopHour');
    stopMinute = document.getElementById('stopMinute');
    
    combinedTime = startHour.value + '~' + startMinute.value + '~' + stopHour.value + '~' + stopMinute.value;
    console.log(combinedTime);
    
    functionCall('parse', combinedTime);
    
    startHour.value = '';
    startMinute.value = '';
    stopHour.value = '';
    stopMinute.value = '';
  }
  
  
  spark.on('login', function(response) {           
    console.log(response);        
  });

  // callback to be executed by each core
  var callback = function(err, data) {
    if (err) {
      console.log('An error occurred while getting device attrs:', err);
    } else {
      console.log('Device attr retrieved successfully:', data);
    }
  };
  
  function functionCall(functionName, functionArgument){
    // The function needs to be defined  in the firmware uploaded to the
    // the Spark core and registered to the Spark cloud, same thing we do
    // with variables. You pass along the name of the function and the params.
    spark.callFunction(deviceID, functionName, functionArgument, callback);  
  }
  
  // Uncomment a line below depending on your preferred log-in method.   
  //spark.login({ username: 'email@example.com', password: 'password' });  
  spark.login({ accessToken: accessToken });

Finally, you need to create a hoop, because the plugin preformats the script tag. Go to Tools -> Scripts n Styles > Hoops, put particle in the name field, and the following in the code field.

<script src="http://cdn.jsdelivr.net/sparkjs/1.0.0/spark.min.js"></script>
1 Like

Hello, I need a help, I am doing my project with arduino, I have 2 temperature sensors DS18B20 and I can print them on webserver. But the third “temperature” will be just a number that I want to set in input text field with a submit button and somehow send it from webserver to Arduino to compare with real values of temperature and according to comparison opening/closeing relays. I tried to do it from string but I need an integer or float. Can you help me please ? i´m sending the code.

#include <SPI.h>
#include <DallasTemperature.h> 
#include <OneWire.h> 
#include <Ethernet.h> 
#define ONE_WIRE_BUS_PIN 2 
OneWire oneWire(ONE_WIRE_BUS_PIN);
DallasTemperature sensors(&oneWire);
DeviceAddress Probe01 = { 0x28, 0x55, 0x76, 0xA2, 0x09, 0x00, 0x00, 0x0A }; 
DeviceAddress Probe02 = { 0x28, 0xFD, 0x3F, 0xA2, 0x09, 0x00, 0x00, 0xED }; 
byte mac[] = {0x90, 0xA2, 0xDA, 0x00, 0x9C, 0xB7};
IPAddress ip(192, 168, 0, 177); 
EthernetServer server(80);
String readString;
int rele1=4;

void setup()   
{
   pinMode(rele1, OUTPUT);
  digitalWrite(rele1, HIGH);
  Serial.begin(9600);
  Serial.print("Initializing Temperature Control Library Version ");
  Serial.println(DALLASTEMPLIBVERSION);
  
  // Initialize the Temperature measurement library
  sensors.begin();
  
  
  sensors.setResolution(Probe01, 10); 
  sensors.setResolution(Probe02, 10);
  
 Ethernet.begin(mac, ip);
  server.begin(); 
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
  pinMode(rele1, OUTPUT);
  digitalWrite(rele1, HIGH);
}

void loop() 
{
 
  delay(1000);
  Serial.println();
  Serial.print("Number of Devices found on bus = ");  
  Serial.println(sensors.getDeviceCount());   
  Serial.print("Getting temperatures... ");  
  Serial.println();   
  
   
  sensors.requestTemperatures();  
  
  Serial.print("Probe 01 temperature is:   ");
  printTemperature(Probe01); 
  Serial.println();

  Serial.print("Probe 02 temperature is:   ");
  printTemperature(Probe02); 
  Serial.println();
 
         

   
   

  EthernetClient client = server.available();

 
         
  
  if (client) {
    Serial.println("new client");
   
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (readString.length() < 100) {

          //store characters to string
          readString += c;
          //Serial.print(c);
        Serial.write(c);
        }
        if (c == '\n' && currentLineIsBlank) {
          
          
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close"); 
          client.println("Refresh: 5");  
          client.println();
          client.println("<!DOCTYPE HTML>");
           client.println("<meta charset='UTF-8'>");
          client.println("<html>");
          client.print("<p style='text-align: center;'>&nbsp;</p>");
          client.print("<p style='text-align: center;'><span style='font-size: x-large;'><strong>Actual temperatures</strong></span></p>");
          client.print("<p style='text-align: center;'><span style='color: #0000ff;'><strong style='font-size: large;'>temp 1 = ");
           client.print(sensors.getTempC(Probe01)); 
           client.print("<p style='text-align: center;'><span style='color: #0000ff;'><strong style='font-size: large;'>temp 2 = ");
           client.print(sensors.getTempC(Probe02));  
           client.print("<br>");

      
           client.println("<FORM ACTION='http://192.168.0.177' method=get >"); //uses IP/port of web page

          client.println("Požadovaná teplota: <INPUT TYPE=TEXT NAME='Tpoz' VALUE='' SIZE='25' MAXLENGTH='50'><BR>");

          client.println("<INPUT TYPE=SUBMIT NAME='submit' VALUE='  '>");

          client.println("</FORM>");
        

          
          
          client.println("</html>");
          break;
        }
        if (c == '\n') {
          
          currentLineIsBlank = true;
        } else if (c != '\r') {
         
          currentLineIsBlank = false;
        }
      }
    }
   
    delay(1);
    
    client.stop();
   
    Serial.println("client disconnected");
  }
  
     if (readString.length() >0) {
    Serial.println(readString);  //so you can see the captured String
    int n = readString.toInt();  //convert readString into a number
   
    Serial.print(n);
    readString="";
     }
  if(readString.toInt()>sensors.getTempC(Probe01)){
    
  digitalWrite(rele1, LOW);
  }
  else{
     digitalWrite(rele1, HIGH);
  }
}
 

void printTemperature(DeviceAddress deviceAddress)
{

float tempC = sensors.getTempC(deviceAddress);

   if (tempC == -127.00) 
   {
   Serial.print("Error getting temperature  ");
   } 
   else
   {
   Serial.print("C: ");
   Serial.print(tempC);
   
   }
}

Hey there, though I’d love to help, this forum is intended for the Particle platform, and that’s a lot of code to go through with which I’m not familiar.
Have you given the Arduino forums a try? They might be able to give more specific advice.

No, I haven’t. Then I will try on arduino forum. Thank you for reply.