0

私が達成しようとしているワークフローは次のとおりです。

  • 一連の範囲スライダー要素を備えたjQueryMobileUIがあります。それぞれが異なる機能を制御するためのものです。
  • ユーザーがこれらのスライダーのいずれかを移動して離すと、AJAX呼び出しを行うjQueryイベントがトリガーされる必要があります（JSON、XML、POSTなどを使用するかどうかは関係ありません-最速が最適です）
  • Ajax呼び出しには、移動されたスライダーとその新しい値に関する情報が含まれています（例：id = slideer1、value = 215）
  • Ajaxは、CGIビンでPythonスクリプトを実行します。このスクリプトは、IDと値を読み取り、シリアル経由でRaspberry Piに接続されているハードウェアを制御します（Raspberry piもWebサーバーを実行しています）。

たくさんのスライダーを備えたJQueryUIがあります。各スライダーコードは次のようになります。

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <div class="rgbw_label"><label for="red_slider">
            Red:
        </label></div>
        <input type="range" id="red_slider" name="red_slider" value="0" min="0" max="255" data-highlight="true" />
    </fieldset>
</div>

次のようなことを行うJQueryが付属している必要があります。

 $(document).ready(function () {
$.ajax({
    type: "POST",
    url: "cgi-bin/command.py",
    success: function (msg)
    {
        alert("Data Saved: " + msg);
    }

    });

});

明らかに、JSについては2つの主要な変更が必要です。まず、スライダーが解放されたときに実行する必要があります（ページの読み込み時ではありません）。次に、スライダーの値を実際にPythonスクリプトに何らかの方法で渡す必要があります。テストのためにこのように設定しました。ページをロードすると、このテスターpythonスクリプトが正しく実行され、RaspberryPiに接続されている一部のハードウェアが適切に制御されます。スライドストップイベントを使用する必要があることはわかっていますが、機能させることができません。また、Pythonスクリプトにいくつかの変数を送信するための最良の方法が何であるかもわかりません。

私のPythonスクリプトは、今のところ次のようになっています：＃！/ usr / bin / python

import cgi

import serial
ser = serial.Serial('/dev/ttyUSB0', 57600)
ser.write("Hello, this is a command!\n")      # write a string
ser.close()

したがって、受信データの種類を探すのではなく、呼び出されてシリアルデータを書き込むだけです。AJAX呼び出しからデータを受信し、受信した情報に基づいてシリアル書き込みコマンドを調整できる必要があります。その情報を操作可能な変数に取り込むのに助けが必要です。また、ある種の「完了しました」というメッセージをJavaScript呼び出し関数に返す必要があると思います。

私は、人々が高レベルの問題、または私がここにリストしたより具体的な問題を解決する方法のいずれかについて持っているかもしれない洞察を楽しみにしています。

ありがとう！

4

1 に答える 1

1

以下はどうでしょう。

...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
...
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <div class="rgbw_label"><label for="red_slider">
            Red:
        </label></div>
        <input type="range" id="red_slider" name="red_slider" class="posting-slider" data-slider-id="1" value="0" min="0" max="255" data-highlight="true" />
    </fieldset>
</div>

次の Javascript を使用します。

$(document).ready(function() {
    $('.posting-slider').on('slidestop', function(e) {
        $.post('/server/script.py', { id: $(this).data('slider-id'), value: e.target.value }, function(data, textStatus, jqXHR) {
            console.log('POSTed: ' + textStatus);
        });
    });
});

そして最後に、python:

import cgi
form = cgi.FieldStorage()

import json

import serial
ser = serial.Serial('/dev/ttyUSB0', 57600)
ser.write("Hello, this is a command for value %s from slider id %s!\n" % (form["id"], form["value"]))      # write a string
ser.close()

print "Content-type: application/json"
print
print(json.JSONEncoder().encode({"status":"ok"}))
于 2013-02-21T23:35:36.693 に答える