1

我有一个简单的 html 文件,其中包含引用 google 图表的 javascript 代码。

我使用的代码是这样的(我将展示重要的部分):

function drawChart(){
    var data = google.visualization
                     .arrayToDataTable([ ['Label', 'Value'],['Temp', 22.75],]);

    // etc...
}

我使用 bash 命令 (sed) 将 22.75 值替换为 .txt 文件最后一行中的新值。但是,这会引发一些我无法纠正也无法识别的错误。

那么是否有任何 javascript 代码获取该文件,提取最后一个值并将其简单地显示在代码的正确位置?

更新:

抱歉,这个问题缺少信息,我非常感谢所有花时间阅读我的问题的人。我会在接下来的几分钟内尝试填写更多信息。

我能够提取 .txt 文件的最后一行,提取“-”符号右侧的值并将其存储在变量中。然后使用 sed 命令获取该值以更新 html 文件。当值更新但没有值时出现错误。我猜这是由于 txt 文件中的温度记录失败而导致的,那么提取的值为空。最后是带有javascrit代码的html字段恰好是这样的:

(...)['Temp' , ], ]);

然后更新程序无法更新该值,因为由于 sed 命令的编写方式,我猜它无法检测到其中的无数字值。所以 html 一直没有值。

TXT 文件结构:

(...)
20:25:03-23.312
20:26:02-23.312
20:27:03-23.375
20:28:03-23.375
20:29:02-23.375
20:30:02-23.312

bash 脚本:

# (...code...)
lastRecord=`cat /home/pi/scripts/temp_control/logs/"$today".log | awk 'END{print}'`

function rightNow {
  lastTemp=`echo $lastRecord | cut -d'-' -f2`

  timeOfTemp=`echo $lastRecord | cut -d'-' -f1` # Not used yet

  #Command used to update
  sed -i "s/['Temp', [0-9]\{1,2\}.[0-9]\{1,3\}]/$lastTemp]/" /var/www/rightnow.html
}

rightNow
4

3 回答 3

4

您可以像任何其他 ajax 请求一样获取您的文件。

使用 javascript

var request = new XMLHttpRequest();
request.open('GET', 'public_path_to_file.txt', false);
request.send();

var textFileContent = request.responseText

使用 jQuery

var textFileContent;
$.get('public_path_to_file.txt', function(data) {
  textFileContent = data;
});

剩下的是从textFileContent. 根据文件的结构,我们可以用不同的方式来做到这一点。如果没有示例文件,您只能靠自己,但这里有一些示例。

如果你需要最后一行

var lines = textFileContent.split("\n");
var lastLine = lines[lines.length - 1];

如果您需要使用正则表达式

var regex = //* some regex to get your content*//gm;
var result = regex.exec(textFileContent);
// result should now the content who matches your regex
于 2013-09-14T23:58:30.180 回答
1

首先,我假设您最终希望使用浏览器读取本地文件,并且您当前的工作流程类似于本地“bash 脚本”

  1. 首先使用从本地 txt 文件中检索到的最后出现的值(使用 sed)更新/修改一段内联 javascript(在本地存储的 html 文件中)
  2. 在通用浏览器中打开(刚刚修改的 html-)文件(通过命令行)。

然后我假设 sed-route 曾经有效但现在不再有效(可能是因为 html 文件已更改?)现在您希望内联 javascript(在 html 文件中)从文本文件本身获取该值和随后使用它(因此不需要 'bash-script'/sed 解决方案。

因此,您的最后一个问题的答案(基于上述假设):'是否有任何 javascript 代码获取该文件,提取最后一个值并将其简单地显示在代码的正确位置?',取决于您的最终要求:您是否可以在每次查看 html 文件时
选择文本文件的文件输入?

如果您的回答是肯定的,那么(取决于您使用的浏览器)您可以读取本地文件(并对它的内容施展魔法)。
在现代浏览器中,使用File API(在 HTML5 中添加到 DOM)现在可以让 Web 内容要求用户选择本地文件,然后读取这些文件的内容。

例如,使用 FireFox 的 ' FileReader ' 你可以这样做:

html:

<input type="file" id="fileinput" multiple />

javascript:

function readAllFiles(evt){
    var files = evt.target.files, i = 0, r, f;
    if(files){
        for(; f = files[i++]; ){
            r = new FileReader();
            r.onload = (function(f){
                return function(e){
                    alert(e.target.result);
                };
            })(f);
            r.readAsText(f);
        }
    } else {
        alert("Error loading files");
    }
}
document.getElementById('fileinput')
        .addEventListener('change', readAllFiles, false);

请注意,要在 Chrome 中访问本地文件,您必须使用此开关启动 Chrome:chrome --disable-web-security

但是,
如果答案是否定的(因此您要在“代码”内指定文件,更重要的是它的路径,因此您不必每次本地应用程序运行时都选择文本文件),那么您(通常)不能(因为您无法获取/设置路径,感谢伟大的制造商)...
除非您选择特定的较旧/未修补的浏览器(专门针对此任务),您知道(黑客)方式无论如何都要这样做(比如 IE xml 漏洞XMLHTTP 漏洞等......你明白了......)。

一些替代解决方案(不需要您一遍又一遍地选择正确的文本文件)

  1. 设置一个成熟的网络(LAMP)服务器(使用在 aross 答案中使用的 XMLHttpRequest 方式,但这可能感觉就像用大炮向蚊子射击......)
  2. 探索不同的脚本语言(但实际上仍然与您现在损坏的 sed 解决方案相同)
  3. 结合 1 和 2,从 php 中选择(最新版本包含一个小型网络服务器,您可以在需要时启动/停止它(即使在 bash-script 工作流程中)或使用 node.js(这是“javascript” 您可以在哪里只需几行代码即可编程/控制一个小型任务特定的服务器)。

希望这可以帮助!


更新:
根据您更新的问题、评论和推荐请求,我建议使用 PHP 从您的日志 txt 文件中动态获取值,并使用内联 javascript 动态生成您的 html 代码(每次您访问页面)。

浏览器永远不会看到 php 代码,只会看到 php 插入到您的页面的内容(在本例中是最后找到的值或 0)。

您将rightnow.html文件重命名为rightnow.php并修改它(类似):

<!DOCTYPE html>
<html><head>
  <!-- your header code -->

<script type="text/javascript">
//parts of your javascript

<?php                                // start php script
$logFile= '/pathToYour/logFile.log'; // <-Modify
if( $fp= @fopen($logFile, "r") ){    // if logfile succesfully opened,
    fseek($fp, -30, SEEK_END);       // set pointer 30 chars from EOF
    $val= array_pop(explode("-", rtrim(fread($fp, 30))));  //get last value
    fclose($fp);                     // close file
} 
?>                                   // end php script

function drawChart(){
  var data=google.visualization
                 .arrayToDataTable([ ['Label', 'Value'],
                                     ['Temp', <?php echo $val? $val : "0"; ?>],
                                   ]);     // ^php above inserts value or 0

  // etc...
}

//parts of your javascript
</script>

</head><body>

  <!-- your body code -->

</body></html>

请注意,fopen结合通过设置文件指针fseek和从指针到 EOF 的顺序fread-ing不会将完整的日志文件(60 分钟 * 24 小时 = 1440 行 16 字节 = 22.5kB 在一天结束时)加载到内存中(对此有好处目的),但只有最后 30 个字符(如本例所示)。

您的日志文件和路径的变量仍必须根据您的情况进行修改(我不知道您的$today变量的格式)。

根据您的进一步需求,您可能希望对爆炸返回的值数组执行一些额外的检查/逻辑(而不是弹出最后一个值)。或者稍微修改一下 html,这样您还可以包括上次温度的读取时间等。(但是这段经过测试的代码应该可以帮助您入门并解释采用 php 方式的过程)。


更新:
由于您选择将日志文件的最后一个已知值放置 公共 www-root 内的文本文件中(我假设使用 bash 脚本,每天的每一分钟?),您现在确实可以使用“ajax”方式,正如 aross 所回答的那样!

但是我想暗示这里所有当前答案中的代码/解决方案可能是混合的(因为你现在也有 ajax 工作):你可以让 php 获取并将这个值发送到即时/按需浏览器!

因此,http://url_to_my_rpi/file_to_download.txt您可以请求http://url_to_my_rpi/read_last_temperature.PHP哪个应该从日志文件中获取最后一个已知值(设置适当的安全性/访问权限)并将其发送到浏览器(设置适当的标头),而不是 requesting ,就像您的文本文件一样。除了您请求的 url,您无需更改 html/javascript 中的任何内容。

优点是(取决于您当前的 bash 脚本的工作方式)您的 PI 现在仅在您查看监控页面时执行此“工作”(获取日志文件的最后一个值)。而且您不是每天每一分钟都在 www-root 中写入该文件(正如我所怀疑的那样)。

于 2013-09-15T02:55:31.467 回答
0

最终实现的解决方案是这样的:

我使用 jQuery 语句并重用Google Charts的 javascript 代码来做到这一点。

首先,我在 html 文件中添加了 javascript 和 jQuery 标签:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>

然后我将 jquery 代码和 javascript 代码合并到一个脚本中:

<script type='text/javascript'>

  // Needed this var so that I could use it in other places of the code 
  var t;

  jQuery.get('http://url_to_my_rpi/file_to_download.txt',function(data){
  console.log(data)

  t=data;

  },'text');    

  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {

    t=eval(t);

    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Temp', t],]);

   // (... more javascript with Google Charts options, display parameters..)

</script>

最后,即使它没有被列为主要问题,请务必在您的 apache 上启用 *mod_headers* 并将Header 设置添加到apache2.conf文件(在我的情况下:/etc/apache2/apache2.conf

1)启用模块:

a2enmod 标头

2)在配置文件中添加该行

标头集 Access-Control-Allow-Origin "*"

3)重启apache 2

4)如果以上3个步骤都不起作用,请按照说明进入本网站或重新安装apache2。

于 2013-09-16T11:31:42.323 回答