Flask fullchallender.js ajax クリックした日付に対応した情報をFlask側に送る
これも全然難しい話ではなかったのだが、凡ミスでつまずいた。
//callender.js const my_cal = function(){ $(document).ready(function() { $('#calender').fullCalendar({ dayClick: function(date, jsEvent, view) { const send_date = JSON.stringify(date.format('YYYY-MM-DD')); $.ajax({ type:'POST', url:'/fetchday', dataType:'json', data:send_date, contentType:'application/json', success:function(success_data){ console.log(success_data); }, error: function(error) { console.log("error"); console.log(error); } }); return false; } }); }); }
#app.py @app.route('/fetchday', methods=['POST']) def fetch_day_data(): get_json = request.json print(get_json) return_json = { "hello":"world" } return Response(json.dumps(return_json))
これで動くかな。ところどころ端折ってい待っているので動かないかも。
Flaskでlist状のdictをhtml上に展開する。
やってみれば簡単なんだけど
やりたいこと:
長さの同じ配列が二つある。一つの値をoptionのvalueに、もう一つを表示される値に使いたい。
@app.route('/action', methods=['POST']) def arrange_form_nums(): title = "yeah!" option_value = [0, 1] option_text = ["option1", "hya"] options = [{"value":v, "text":t} for (v, t) in zip(option_value, option_text)] print(options) return render_template('forms.html', title=title, options=options)
<select name="test-select"> {% for o in options %} <option value="{{o.value}}">{{o.text}}</option> {% endfor %} </select>
form作成できるやつ使った方が楽な気がしてきた。
python osc openframeworks keyboardinput pythonでoscを受信しながらキーボード入力を受け付ける。
openframeworksからキーボード入力を送れば解決なのでは？という声が聞こえてきそう…。
import argparse import math import re import threading import sys from pythonosc import dispatcher from pythonosc import osc_server import config import osc def keys(): while True: input_word = input(">") if input_word == "s": sys.exit() def osc_loop(): parser = argparse.ArgumentParser() parser.add_argument("--ip", default="localhost", help="The ip to listen on") parser.add_argument("--port", type=int, default=1111, help="The port to listen on") args = parser.parse_args() _dispatcher = dispatcher.Dispatcher() _dispatcher.map("/found", osc.set_found) _dispatcher.map("/raw", osc.print_raws) server = osc_server.ThreadingOSCUDPServer( (args.ip, args.port), _dispatcher) print("Serving on {}".format(server.server_address)) server.serve_forever() dual_loop = threading.Thread(target=osc_loop,name="dual_loop",args=()) dual_loop.setDaemon(True) dual_loop.start() if __name__ == "__main__": keys()
threadingのtargetを逆にすると正しく動作しない。これで本当に正しく動いているのだろうか。
dispatcher = dispatcher.Dispatcher()
とするとうまく動かないので注意。_から始めるべきでないのはわかっている。
Openframeworks windows ofxfacetracker ofxcv
いろいろつまった。けど、思ったよりはスムーズにできたかな。
最初から動くはずのないwindows x ofxfacetracker
でもちゃんと読めばできた。
- windows10
- visual studio 2015
- openframeworks 0.9.8
要約すると
- ofxCvはoFのバージョンに対応するものを入れる
- オブジェクトファイル名のパスを変更する
- モデルをいれる
まずはまったのは
ofxCv
github.com
exampleを動かせど動かず。
それも当然。なにも読まずにmasterを入れていたからだ。ちゃんと読めば書いてある。
OF stable (0.9.8): use ofxCv/stable
さて、それでは動かしましょう、と思っても動かない。
taka-say.hateblo.jp
エラー内容は違えど、やってみるか！と思ってやってみる。
動かない。
最後はほんとばかばかしくて
Then, you need to make a copy of the /libs/FaceTracker/model/ directory in bin/data/model/ of each example. You can do this by hand, or python copy-model.py will take care of this for you.
要はモデルをコピーしてない、と。そりゃ動かないわけです。
というわけで
flask, python, fullcalendar.jsでflaskから送った特定の日付の背景色を変える。
あんまりスマートじゃない気がするんだけど、とりあえずできたので忘備録的に記載しておく
dates = ["2017-06-15", "2017-06-16", "2017-06-18"] reasons = ["", "ppo", "pupp"] cal_data = { "date_answer" : [dates, reasons] } #dictにする必要はないんだけど、今後使うので return render_template("test.html", CalSet=json.dumps(cal_data))
<canvas id="chart2"></canvas> <div id="calender"></div> <script src="{{ url_for('static', filename='js/test.js') }}"></script> <script> my_cal({{ CalSet|tojson }}) </script>
const my_cal = function(data){ const d = JSON.parse(data); const d_a = d.date_answer $(document).ready(function() { $('#calender').fullCalendar({ dayClick: function(date, jsEvent, view) { $(this).css('background-color', 'red'); }, dayRender: function (date, cell) { for(var i = 0; i < d_a[1].length; i++){ if(d_a[0][i] == date.format('YYYY-MM-DD')){ cell.css("background-color", "yellow"); } } } }); }); }
ポイントは下で
date.format('YYYY-MM-DD')
これをしないとstringでこの形にならないらしい。
ちなみにforで回しているけど汚い気がしてならない。
さらに言うと
`isSame("2017-06-18")`
みたく動く関数があるみたいなんだけど、使えませんでした。
Fullcalendar event cell background color - Stack Overflow
これを参考にした。
Flask Admin Chart.js flaskでjson形式でフロント側にデータを投げた上で、それをhtmlファイルとは分離したjsファイルで読み込ませる
いろいろ調べたのですが、調べ方が悪いのか、全然出てこないので自分でまとめておこうと思います。
実は簡単だった。
まず基本形
return render_template('index.html', message="message", title="popopopoooon")
`render_template`
で指定したhtmlファイルを、レンダリングできます。その際引数をしていできます。
その変数はhtmlファイル上で
<p>{{ message }}</p>
などとすることで見ることができます。
配列上のものを送るときは
return render_template('index.html', a=[1, 2, 3])
{% for c in a %}
{{c}}
{% endfor %}
//再度配列に変換したい場合
[{% for c in a %}
{{c}},
{% endfor %}]
で扱えます。この時注意するのは、`{{c}}`をhtmlタグ内以外で(組み込みのjsコードで使う場合には)`"{c}"`として、明示的に文字列であると示す必要があります。
で、ここから、jsonとしてどう送るのか。
return_data = {
"title":"直近の結果",
"username":user_name,
"labels":labels,
"values":values,
"reasons":reasons,
"colors":colors
}
return render_template('graph.html', ResultSet=json.dumps(return_data))
なんで苦戦したんだろうというくらい簡単。じつはここからはまった。
html上では読み込めるがどう外部のjsファイルに読み込もうという話。
またちょっとバグではまることがあったのでチェック。
静的ファイルを読みだすときは昔のファイルを参照してしまうときがある。具体的に
a.js
alert("a");を
console.log("a");とした場合に、やり直してもアラートが出続ける。
FlaskでCSSのキャッシュを効かせなくする方法 - Life is Really Short, Have Your Life!!
これを参照して加えた。
そうすると「.js?=時間」みたくなるので、新しく読み込んでくれる。いいね！
FullCalendar.jsでcssが読み込まれていない問題を解決する。
cssが反映されていない。中途半端にcssが適応されている。
なぜか
dayClick
イベントも着火しない
javascript - FullCalendar dayClick not working (does nothing) - Stack Overflow
ここをみれば解決する。要は
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" /> <link rel="stylesheet" media="print" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" />
media="print"
が入っていないという問題らしい。
こういうトラップ殺したくなりますね。
