Serverweb.docx

Controlul unui intel galileo sau arduino de pe un site web. Necesitati: Varianta 1 (Daca siteul se hosteaza pe o placa de dezvoltare ca si intel galileo, raspberry pi sau altceva, este necesar sa aibe compilatorul python cel putin versiunea 2.7 sau mai noua.):  Libraria mraa sau gpio ( libraria care acceseaza pini placi de dezvoltare)  Libraria Flask care poate fi instalata cu: o pip install flask si se instaleaza automat asta daca nu folositi proxy o In cazul in care sunteti pe o retea cu proxy atunci trebuie downloadat pachetul de aici https://pypi.org/project/Flask/1.0.2/#files si downloadati arhiva Dupa ce ati dezarhivat arhiva intrati cu cmd sau terminalul in interiorul folderului unde au fost extrase fisierele si scrieti python setup.py install daca primiti o eroare ca nu poate downloada librariile trebuie sa mergeti sa instalati manual fiecare librarie auxiliara folosind linkul din eroare ca sa o downloadati, dezarhivati si intrati in folder dezarhivat si scrieti comanda python setup.py install. Varianta 2 (Daca aveti la indemana un laptop sau desktop si un arduino):  Trebuie sa aveti instalat versiunea de python 2.7 sau mai noua  Trebuie sa aveti Arduino IDE instalat  Trebuie sa aveti libraria pyfirmata instalata fie cu pip install pyfirmata fie manual de pe site: https://pypi.org/project/pyFirmata/  Inainte sa puteti programa arduino-ul din python trebuie sa uploadati un program ca sa-l faca slave si sa poate primi comenzi din python:

Implementare.

Creati un folder unde o sa aveti codul in python si paginile html, imagini sau alte fisiere necesare site-ului web. Exemplul de mai jos.

In folderul templates acolo o sa tineti toate fisierele html(trebuie sa aibe denumirea templates) In folderul static acolo veti stoca fisiere care doriti sa le partajati sau folosi in pagina web cum ar fi imagini din interiorul pagini sau fisiere pdf, excel sau altele. from flask import Flask, render_template, request app = Flask(__name__) app.config['TEMPLATES_AUTO_RELOAD'] = True Flask=aplicatia serverului nostru render_template= returneaza templateul html request= aceasta cere informatia dintr-un formular. app.config['TEMPLATES_AUTO_RELOAD'] = True aceasta configuratie ne face refresh automat la pagina web daca aceasta este modificata in timp ce serverul ruleaza. In continuare o sa prezint partea generala a unui server web. @app.route("/") def main(): return render_template('main.html') @app.route("/submit",methods=['GET','POST']) def submit(): range=int(request.form['Range']) buttonvalue=request.form.get('Button') if buttonvalue=="on": buttonvalue="checked" else: buttonvalue=None return render_template('main.html',buttonvalue=buttonvalue, value=range) if __name__=="__main__": app.run(debug=True, host='0.0.0.0') @app.route("/") – app.route aici este ceea ce vedeti in la adresa siteului www.site.ro/ si apeleaza functia imediat urmatoare scrisa sub app.route care in cazul de fata returneaza pagina web. @app.route("/submit",methods=['GET','POST']) – metodat GET reprezinta atunci serverul returneaza pagina web spre utilizator si metoda POST este atunci cand utilizatorul trimite informatie spre server(submit) In functia submit avem citirea valori unui obiect din pagina web de tip range si un checkbox cu ajutorul request.form care ne da valoarea unui tag din interiorul unui formular cu numele de Range respectiv Button, pentru a invata mai multe despre html si CSS folositi siteul https://www.w3schools.com/

return render_template('main.html',buttonvalue=buttonvalue, value=range) aici creem variabilele care le vom folosi in interiorul pagini noastre web. Codul pagini html

<span class="slider round">

onchange="this.form.submit()" aceasta setare va trimite tot timpul la server valorile mai sus mentionate de fiecare data cand apare o modificare. {{ intre aceste acolade se scriu numele variabilele pe care noi le-am trimis de la server la pagina cum sunt buttonvalue sau value }}

in interiorul acestui tag vom pune toate inputurile pe care noi le vrem de la utilizator. form action="{{ url_for('submit') }}" aceasta descrie ce actiune sa faca cand informatia este trimisa (in cazul de fata apeleaza functia submit din codul python de mai sus). Mai multe informatii despre cum puteti folosi python in interiorul html-ului gasiti aici https://www.tutorialspoint.com/flask/flask_templates.htm Revenind la codul din python: if __name__=="__main__": app.run(debug=True, host='0.0.0.0') Aceasta portiune face ca atunci cand este rulat fisierul nostru app.py sa dea start la server cu debugging Daca nu se prefera un anumit ip hostul se pune 0.0.0.0 si se ia ipul calculatorului/placi de dezvoltare, aceasta setare host este folosita atunci cand se doreste ca serverul sa fie vazut si de pe alt calculator, daca nu se doreste acest lucru atunci se sterge host. Ca sa accesati siteul trebuie scrieti in browser ip:5000 Bun acuma ca avem interfata cu userul adaugam codul necesar pentru a controla doua LED-uri. Varianta 1 folosind mraa: Pentru codul complet vizualizati sfarsitul pagini. import mraa Comenzile folosite pentru a comuta un LED on/off LED1 = mraa.Gpio(9) LED1.dir(mraa.DIR_OUT) LED1.write(1) LED1.write(0) Comenzile pentru a comanda un led in PWM

LED2 = mraa.Pwm(3) LED2.period_us(700) LED2.enable(True) LED2.write(valoare) Pentru mai multe detalii https://epe.utcluj.ro/SCTR/SCTR_8_10_2018/PDF/SCTR_LAB_4.pdf Varianta 2 folosind pyfirmata: board=Arduino('COM4') Alegem usb pe care este conectat arduino la calculator LED1=board.get_pin('d:9:o') LED1 este setat ca si output deci putem scrie 1 sau 0 LED2 =board.get_pin('d:10:p') LED2 este setat ca si pwm si acesta il vom folosi pentru range slider Mai multe informati puteti gasi aici https://media.readthedocs.org/pdf/pyfirmata/latest/pyfirmata.pdf

Varianta 1 mraa from flask import Flask,render_template,request import mraa app = Flask(__name__) app.config['TEMPLATES_AUTO_RELOAD'] = True LED1 = mraa.Gpio(9) LED1.dir(mraa.DIR_OUT) LED2 = mraa.Pwm(3) LED2.period_us(700) LED2.enable(True) @app.route("/") def main(): return render_template('main.html') @app.route("/submit",methods=['GET','POST']) def submit(): range=int(request.form['Range']) LED2.write(range/100.0) buttonvalue=request.form.get('Button') if buttonvalue=="on": buttonvalue="checked" LED1.write(1) else: buttonvalue=None LED1.write(0) return render_template('main.html',buttonvalue=buttonvalue, value=range) if __name__=="__main__": app.run(debug=True,host='0.0.0.0') Impartim variabila range la 100 deuarece in html am setat la range slider valoarea maxima de 100 si mraa poate scrie doar valori intre 0 si 1.

Varianta 2 pyfirmata from flask import Flask,render_template,request from pyfirmata import Arduino, util app = Flask(__name__) app.config['TEMPLATES_AUTO_RELOAD'] = True board=Arduino('COM4') LED1 =board.get_pin('d:10:o') LED2 =board.get_pin('d:10:p') @app.route("/") def main(): return render_template('main.html') @app.route("/submit",methods=['GET','POST']) def submit(): range=int(request.form['Range']) LED2.write(range/100) buttonvalue=request.form.get('Button') if buttonvalue=="on": buttonvalue="checked" LED1.write(1) else: buttonvalue=None LED1.write(0) return render_template('main.html',buttonvalue=buttonvalue, value=range) if __name__=="__main__": app.run(debug=True,host='0.0.0.0')