I am making a home appliance control device using arduino. I got this html code from the website. What is the code to get the value from the Arduino?
I think
$("#temperatureDisplay").load('temperature_display.php');
This part would be a receiving the value from the Arduino, but I am confusing. If I know what is code for receiving the value, how can I use if statement to change the background color with different value of output from Arduino?
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.0.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Weather Station</title>
</head>
<body>
<div class="data">
<div class="dataTitle">Temperature: </div>
<div id="temperatureDisplay">Waiting for data ...</div>
</div>
<script type="text/javascript">
setInterval(function()
{
$("#temperatureDisplay").load('temperature_display.php');
}, 1000);
</script>
</body>
</html>
This is php file and the data file is just number. This number is always changed with the Arduino.
<?php
$myFile = "temp_data.txt";
$fh = fopen($myFile, 'r');
$line = fgets($fh);
fclose($fh);
echo $line;
?>
Related
I have written an HTML file, in the same when I try to pass data to a .gs file in order to print or console.log then it doesn't give the log in the output of the console and instead, it reflects these statements in the console:
Net state changed from IDLE to BUSY
Net state changed from BUSY to IDLE
Attaching the code UI, HTML file, and .gs file below for reference.
HTML output:
HTML file:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">insert_link</i>
<input id="zz" type="text" class="validate">
<label for="zz">Insert Text</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="testBox.gs"></script>
<script>
var gSheetUrl = document.getElementById("zz");
document.getElementById("btn").addEventListener("click",abc);
function abc(){
console.log("inside abc");
var data = {
zzz: zz.value
}
google.script.run.getData(data);
}
</script>
</body>
</html>
.gs file:
function openIndexDialog() {
var template = HtmlService.createTemplateFromFile("indexDialog");
var html = template.evaluate().setHeight(450).setWidth(600);
SlidesApp.getUi().showModalDialog(html,"Demo App");
}
function getData(data){
console.log(data)
console.log("data logged")
}
Console output:
Main Problem: Not able to print data when passed through getData(data)
Those are not error messages, they are information logs about the server- client communication .
Every time that your client code call a server-side function using google.script.run there will be a Net state changed from IDLE to BUSY log and when the server-side function ends will be a Net state changed from BUSY to IDLE.
Regarding
Main Problem: Not able to print data when passed through getData(data)
If you want to print data on the client side, you have use console.log on the client-side, not on the server-side. Logs printed from the server side can be found in the executions page.
Related
Unwanted Output In Console
How to call a perl script which is returning data "text" type inside a html file.Posting the perl script for reference.This script has to be called in the index.html so how to do that
#!/usr/bin/perl -w
use CGI;
my $cgi = CGI->new;
my $remote = $cgi->remote_host();
my $AB = "16.108";
my $CD = "16.214";
my $EF = "10.99";
my $GH = "10.243";
my $XY = "10.179";
my #remote_ip_values = split(/\./, $remote);
my $remote_ip = $remote_ip_values[0] .".". $remote_ip_values[1];
print "Content-type: text/html\n\n";
print "document.write(\"<style>\\n\");\n";
print "document.write(\"font color:red;\\n\");\n";
if ($remote_ip eq $AB)
{
print "document.write(\"SUCCESSFUL\");\n";
}
else
{
print "document.write(\"TEST\");\n";
}
exit;
I am editing my answer as I now understand what you are trying to do. I have set up a simple example which will load the content from "another website" - which for you will be your Perl CGI.
This HTML uses some simple JQuery. I am loading the following HTML page, http://chocksaway.com/tester.html and copying the contents into the "test" div:
<!DOCTYPE HTML>
<html>
<head>
<title>Loader</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test').load('http://chocksaway.com/tester.html');
});
</script>
</body>
</html>
http://chocksaway.com/tester.html has the following HTML:
<html>
<header></header>
<body>
this is a test so there
</body>
</html>
If you open you http://chocksaway.com/tester2.html, you will see:
this is a test so there
Replace "http://chocksaway.com/tester2.html" with the URL of your Perl CGI.
I am trying to create a webpage to be able to sell things online, and have come up with an issue while creating a file to automatically create a new item. I am trying to use Ruby to temporarily take off the end of the file, append the correct line to the file, and put the end back. My code so far is
puts "what is the item number?"
item_num = gets.chomp
puts "what is item description?(not optional)"
desc = gets.chomp
file_text = File.read("template.html")
file_text = file_text.gsub(/Item#/, "Item #{item_num.to_s}")
file_text = file_text.gsub(/<img class="item-image" src="">/, '<img class="item-image" src="' + item_num.to_s + '">')
file_text = file_text.gsub(/Item-desc/, desc)
puts file_text
file_create = File.new(item_num.to_s + ".html", "w")
file_create.puts(file_text)
file_create.close
item_page_end = '
</div>
<div class="col-sm-12">
<div class="headings">
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="width=80%"/>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/55b73bf748.js"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
'
file_to_update = File.read("item_page.html")
file_to_update = file_to_update.gsub(item_page_end, "")
file_to_update = File.open("item_page.html", "a+")
file_to_update.puts( '<p class="col-md-4"><img src="../images/' + item_num + '.jpg" />Item' + item_num + '</p>')
file_to_update.puts(item_page_end)
sleep 10
The HTML file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHS Metal | Store</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/logo-icon.png"/>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../css/owl.carousel.css" rel="stylesheet">
<link href="../css/owl.theme.default.min.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="main element">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="title mt80">Store</h2>
</div>
<div class="col-sm-12">
<div class="headings">
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="width=80%"/>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/55b73bf748.js"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
What ends up happening is that the program inserts the HTML line I want to add to the "item_page.html" file to the end and then adding the "item_page_end" string at the end. Does anyone know how to fix it put the HTML line in the Ruby program after
<h2 class="title mt80">Store</h2>
Any other solution I have found is either for an array, a string or simply doesn't work.
If you can edit the HTML file, I see two possible answers:
(Please note that in all cases I use a function called add_all_elements which is a function that just returns whatever you want placed in your file.)
Cut your file in two, read the first half, add your elements and then read the second half. It should be something like this:
buffer = File.read("template_first_half.html")
buffer += add_all_elements()
buffer += File.read("template_second_half.html")
It is easy to use, but the HTML can be difficult to read.
You can also add a reference in the file and use gsub to replace it:
buffer = File.read("template.html")
buffer = buffer.gsub("#####anchor#####", add_all_elements())
Also easier to use, it will require that you place a unique sub-string within the file. The problem is that the reference must absolutely be unique within the file. The advantage is that the HTML file remains easy to read.
If you cannot edit the HTML file:
line_num = 0
buffer = ''
break_point = 42
text.each_line do |line|
if line_num == break_point
buffer += add_all_elements()
end
buffer += line
line_num += 1
end
Basically, you read the file line-by-line and place it into a buffer. When the line count reaches the required value (here, the variable break_point that I set at 42) you insert into the buffer all of the elements.
The inconvenient is that if the file is edited, the breaking point must be re-set each time. You could also use a string as a break point to avoid most of that problem.
You could do something like this:
file_to_update = File.read("item_page.html")
file_to_update = file_to_update.sub(/(?<=<h2 class="title mt80">Store<\/h2>)/,file_text)
File.write("item_page.html",file_to_update)
With this there's no need to create a new file for file_text.
Basically whats happening is the second line here uses a lookbehind assertion to insert file_text into file_to_update after "Store</h2>". Then you just overwrite the contents of item_page.html with the updated string.
is it possible to reference / import a file that is inside the script.
test.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src="/testsrc.html"></script>
</head>
<body onLoad="onLoad()">
<div>
<p id='result'>....</p>
</div>
</body>
</html>
testsrc.html
function onLoad(){
document.getElementById("result").innerHTML = "ran";
}
You could do:
<?!= HtmlService.createHtmlOutputFromFile('testsrc').getContent() ?>
instead of
<script src="/testsrc.html"></script>
Don't forget to wrap all your js code in testsrc.html file in <script></script>
PS: better yet in your code.gs file create an include() function like this
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
then you can call it any time you need to include any file:
<?!= include('testsrc') ?>
Hi I have to develop a mobile application using cross platform technology(HTML,CSS,JAVASCRIPT) wherein I need to send data to server and receive data from server.so I thought to use ajax so I tried below given code.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("http://10.16.10.188/login/Hello.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
The above code is working when I keep this html and text file on wamp server in same directory. but its not working when I keep this html file in my android asset folder and text file on server.it is not giving any response.could someone please help me to get this done.thank you so much
I was able to solve the problem by using jsonp in below given code.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.1.min.js">
</script>
<script>
$.ajax({
url:"http://10.16.10.188/login/loginValidator.php",
dataType: "jsonp",
success:function(data,status){
if(status=='success')
{
alert("Data: " + data.fullname + "\nStatus: " + status);
var val = data.fullname;
$("#imchanged").html(val);
}
}
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button id="imchanged">Get External Content</button>
</body>
</html>
Below is loginValidator.php code where my html points.
<?php
$array = array(
'fullname' => 'Jeff Hansen',
'address' => 'somewhere no.3'
);
$data = json_encode($array);
echo $_GET['callback']."(".$data.")";
?>
Using above given code I am able to invoke php file from mobile emulator and get the response from server.