ÔÚ²»µ½ 30 ·ÖÖÓÄÚ¹¹½¨Ò»¸öÊ÷Ý®Åɼà¿ØÒDZíÅÌ
Äã¿ÉÄÜÐèÒªÒ»¸öÊ÷Ý®ÅɵÄÒDZíÅÌ£¬ÒÔÏàʶÆäÐÔÄÜÇéÐΡ£ÔÚ±¾ÎÄÖУ¬ÎÒ½«ÑÝʾÔõÑù¿ìËÙ¹¹½¨Ò»¸ö°´Ðè¼à¿ØÒDZíÅÌ£¬ÒÔʵʱÉó²éÄãµÄÊ÷Ý®ÅÉµÄ cpu ÐÔÄÜ¡¢ÄÚ´æºÍ´ÅÅÌʹÓÃÇéÐΣ¬²¢Æ¾Ö¤ÐèÒªËæʱÌí¼Ó¸ü¶àÊÓͼºÍ²Ù×÷¡£
ÈôÊÇÄãÒѾʹÓà Appsmith£¬Ä㻹¿ÉÒÔÖ±½Óµ¼Èë ʾÀýÓ¦ÓóÌÐò ²¢×îÏÈʹÓá£
Appsmith
Appsmith ÊÇÒ»¸ö¿ªÔ´µÄ µÍ´úÂë Ó¦Óù¹½¨¹¤¾ß£¬×ÊÖú¿ª·¢Ö°Ô±ÇáËÉ¿ìËٵع¹½¨ÄÚ²¿Ó¦Óã¬ÈçÒDZíÅ̺ÍÖÎÀíÃæ°å¡£ËüÊÇÒ»¸öÓÃÓÚÒDZíÅ̵ĺܺÃÑ¡Ôñ£¬²¢ïÔÌÁ˹Űå±àÂëÒªÁìËùÐèµÄʱ¼äºÍÖØ´óÐÔ¡£
ÔÚ´ËʾÀýµÄÒDZíÅÌÖУ¬ÎÒÏÔʾÒÔÏÂͳ¼ÆÐÅÏ¢£º
CPU
Õ¼ÓðٷֱÈ
ƵÂÊ»òʱÖÓËÙÂÊ
¼ÆÊý
ζÈ
ÄÚ´æ
Õ¼ÓðٷֱÈ
¿ÉÓÃÄÚ´æ°Ù·Ö±È
×ÜÄÚ´æ
¿ÕÏÐÄÚ´æ
´ÅÅÌ
´ÅÅÌʹÓðٷֱÈ
¾ø¶Ô´ÅÅÌ¿Õ¼äʹÓÃÁ¿
¿ÉÓôÅÅÌ¿Õ¼ä
×Ü´ÅÅÌ¿Õ¼ä
½¨ÉèÒ»¸ö¶Ëµã
ÄãÐèÒªÒ»ÖÖ´ÓÊ÷Ý®ÅÉ»ñÈ¡ÕâЩÊý¾Ý²¢×ª´ï¸ø Appsmith µÄÒªÁì¡£psutil ÊÇÒ»¸öÓÃÓÚ¼à¿ØºÍÆÊÎöµÄ Python ¿â£¬¶ø Flask-RESTful ÊÇÒ»¸ö½¨Éè REST API µÄ Flask À©Õ¹¡£
Appsmith ÿ¸ô¼¸ÃëÖÓŲÓà REST API ÒÔ×Ô¶¯Ë¢ÐÂÊý¾Ý£¬²¢ÒÔ JSON ¹¤¾ß×÷ΪÏìÓ¦£¬ÆäÖаüÀ¨ËùÓÐËùÐèµÄͳ¼ÆÐÅÏ¢£¬ÈçÏÂËùʾ£º
{ "cpu_count": 4,"cpu_freq": [600.0,600.0,1200.0 ],"cpu_mem_avail": 463953920,"cpu_mem_free": 115789824,"cpu_mem_total": 971063296,"cpu_mem_used": 436252672,"cpu_percent": 1.8,"disk_usage_free": 24678121472,"disk_usage_percent": 17.7,"disk_usage_total": 31307206656,"disk_usage_used": 5292728320,"sensor_temperatures": 52.616 }
µÇ¼ºó¸´ÖÆ
1¡¢ÉèÖà REST API
ÈôÊÇÄãµÄÊ÷Ý®ÅÉÉÐδװÖà Python£¬ÇëÔÚÊ÷Ý®ÅÉÉÏ·¿ªÖն˲¢ÔËÐдË×°ÖÃÏÂÁ
$ sudo apt install python3
µÇ¼ºó¸´ÖÆ
ÏÖÔÚΪÄãµÄ¿ª·¢ÉèÖÃÒ»¸ö Python ÐéÄâÇéÐΣº
$ python -m venv PiData
µÇ¼ºó¸´ÖÆ
½ÓÏÂÀ´£¬¼¤»î¸ÃÇéÐΡ£Äã±ØÐèÔÚÖØÐÂÆô¶¯Ê÷Ý®ÅɺóÖ´Ðд˲Ù×÷¡£
$ source PiData/bin/activate$ cd PiData
µÇ¼ºó¸´ÖÆ
ΪÁË×°Öà Flask¡¢Flask-RESTful ºÍÒÔºóÐèÒªµÄÒÀÀµÏÇëÔÚÄãµÄ Python ÐéÄâÇéÐÎÖн¨ÉèÒ»¸öÃûΪ requirements.txt µÄÎļþ£¬²¢½«ÒÔÏÂÄÚÈÝÌí¼Óµ½ÆäÖУº
flaskflask-restfulgunicorn
µÇ¼ºó¸´ÖÆ
ÉúÑÄÎļþ£¬È»ºóʹÓà pip Ò»´ÎÐÔ×°ÖÃËüÃÇ¡£Äã±ØÐèÔÚÖØÐÂÆô¶¯Ê÷Ý®ÅɺóÖ´Ðд˲Ù×÷¡£
(PyData)$ python -m pip install -r requirements.txt
µÇ¼ºó¸´ÖÆ
½ÓÏÂÀ´£¬½¨ÉèÒ»¸öÃûΪ pi_stats.py µÄÎļþÀ´´æ·ÅʹÓà psutil ¼ìË÷Ê÷Ý®ÅÉϵһÇмÆÐÅÏ¢µÄÂß¼¡£½«ÒÔÏ´úÂëÕ³Ìùµ½ pi_stats.py ÎļþÖУº
from flask import Flaskfrom flask_restful import Resource, Apiimport psutilapp = Flask(__name__)api = Api(app)class PiData(Resource):def get(self):return "RPI Stat dashboard"api.add_resource(PiData, '/get-stats')if __name__ == '__main__':app.run(debug=True)
µÇ¼ºó¸´ÖÆ
Õâ¶Î´úÂëµÄ×÷ÓÃÈçÏ£º
ʹÓà app = Flask(name) À´½ç˵ǶÌ× API ¹¤¾ßµÄÓ¦ÓóÌÐò¡£
ʹÓà Flask-RESTful µÄ API ÒªÁì À´½ç˵ API ¹¤¾ß¡£
ÔÚ Flask-RESTful Öн« PiData ½ç˵ΪÏêϸµÄ Resource Àà £¬ÒÔ¹ûÕæÿ¸öÖ§³ÖµÄ HTTP ÒªÁì¡£
ʹÓà api.add_resource(PiData, ‘/get-stats’) ½«×ÊÔ´ PiData ¸½¼Óµ½ API ¹¤¾ß api¡£
ÿµ±Äã»á¼û URL /get-stats ʱ£¬½«·µ»Ø PiData ×÷ΪÏìÓ¦¡£
2¡¢Ê¹Óà psutil ¶Áȡͳ¼ÆÐÅÏ¢
Òª´ÓÄãµÄÊ÷Ý®ÅÉ»ñȡͳ¼ÆÐÅÏ¢£¬Äã¿ÉÒÔʹÓà psutil ÌṩµÄÕâЩÄÚÖú¯Êý£º
cpu_percentage¡¢cpu_count¡¢cpu_freq ºÍ sensors_temperatures º¯Êý»®·ÖÓÃÓÚ»ñÈ¡ CPU µÄÕ¼Óðٷֱȡ¢¼ÆÊý¡¢Ê±ÖÓËÙÂʺÍζȡ£sensors_temperatures ±¨¸æÁËÓëÊ÷Ý®ÅÉÅþÁ¬µÄËùÓÐ×°±¸µÄζȡ£Òª½ö»ñÈ¡ CPU µÄζȣ¬ÇëʹÓüü cpu-thermal¡£
virtual_memory º¯Êý¿É·µ»Ø×ÜÄÚ´æ¡¢¿ÉÓÃÄÚ´æ¡¢ÒÑʹÓÃÄÚ´æºÍ¿ÕÏÐÄÚ´æµÄͳ¼ÆÐÅÏ¢£¨ÒÔ×Ö½ÚΪµ¥Î»£©¡£
disk_usage º¯Êý¿É·µ»Ø×Ü´ÅÅ̿ռ䡢ÒÑʹÓÿռäºÍ¿ÉÓÿռäµÄͳ¼ÆÐÅÏ¢£¨ÒÔ×Ö½ÚΪµ¥Î»£©¡£
½«ËùÓк¯Êý×éºÏµ½Ò»¸ö Python ×ÖµäÖеÄʾÀýÈçÏ£º
system_info_data = {'cpu_percent': psutil.cpu_percent(1),'cpu_count': psutil.cpu_count(),'cpu_freq': psutil.cpu_freq(),'cpu_mem_total': memory.total,'cpu_mem_avail': memory.available,'cpu_mem_used': memory.used,'cpu_mem_free': memory.free,'disk_usage_total': disk.total,'disk_usage_used': disk.used,'disk_usage_free': disk.free,'disk_usage_percent': disk.percent,'sensor_temperatures': psutil.sensors_temperatures()['cpu-thermal'][0].current,}
µÇ¼ºó¸´ÖÆ
ÏÂÒ»½Ú½«Ê¹ÓøÃ×ֵ䡣
3¡¢´Ó Flask-RESTful API »ñÈ¡Êý¾Ý
ΪÁËÔÚ API ÏìÓ¦Öп´µ½À´×ÔÊ÷Ý®ÅɵÄÊý¾Ý£¬Çë¸üРpi_stats.py Îļþ£¬½«×Öµä system_info_data °üÀ¨ÔÚ PiData ÀàÖУº
from flask import Flaskfrom flask_restful import Resource, Apiimport psutilapp = Flask(__name__)api = Api(app)class PiData(Resource):def get(self):memory = psutil.virtual_memory()disk = psutil.disk_usage('/')system_info_data = {'cpu_percent': psutil.cpu_percent(1),'cpu_count': psutil.cpu_count(),'cpu_freq': psutil.cpu_freq(),'cpu_mem_total': memory.total,'cpu_mem_avail': memory.available,'cpu_mem_used': memory.used,'cpu_mem_free': memory.free,'disk_usage_total': disk.total,'disk_usage_used': disk.used,'disk_usage_free': disk.free,'disk_usage_percent': disk.percent,'sensor_temperatures': psutil.sensors_temperatures()['cpu-thermal'][0].current, }return system_info_dataapi.add_resource(PiData, '/get-stats')if __name__ == '__main__':app.run(debug=True)
µÇ¼ºó¸´ÖÆ
ÄãµÄ¾ç±¾ÒѾͣµ±£¬ÏÂÃæÔËÐÐ PiData.py£º
$ python PyData.py * Serving Flask app "PiData" (lazy loading) * Environment: production WARNING: This is a development server. Do not run this in a production environment. * Debug mode: on * Running on http://127.0.0.1:5000 (Press CTRL+C to quit) * Restarting with stat * Debugger is active!
µÇ¼ºó¸´ÖÆ
ÄãÓÐÁËÒ»¸ö¿ÉÒÔÊÂÇéµÄ API¡£
4¡¢½« API ÌṩӦ»¥ÁªÍø
Äã¿ÉÒÔÔÚÍâµØÍøÂçÖÐÓë API ¾ÙÐн»»¥¡£È»¶ø£¬ÒªÔÚ»¥ÁªÍøÉÏ»á¼ûËü£¬Äã±ØÐèÔÚ·À»ðǽÖз¿ªÒ»¸ö¶Ë¿Ú£¬²¢½«´«ÈëµÄÁ÷Á¿×ª·¢µ½ÓÉ Flask ÌṩµÄ¶Ë¿Ú¡£È»¶ø£¬ÕýÈçÄãµÄ²âÊÔÊä³ö½¨ÒéµÄÄÇÑù£¬ÔÚ Flask ÖÐÔËÐÐ Flask Ó¦ÓóÌÐò½öÊÊÓÃÓÚ¿ª·¢£¬¶ø²»ÊÊÓÃÓÚÉú²ú¡£ÎªÁËÇå¾²µØ½« API ÌṩӦ»¥ÁªÍø£¬Äã¿ÉÒÔʹÓÃ×°ÖÃÀú³ÌÖÐ×°ÖÃµÄ gunicorn Éú²úЧÀÍÆ÷¡£
ÏÖÔÚ£¬Äã¿ÉÒÔÆô¶¯ Flask API¡£Ã¿´ÎÖØÐÂÆô¶¯Ê÷Ý®ÅÉʱ¶¼ÐèÒªÖ´Ðд˲Ù×÷¡£
$ gunicorn -w 4 'PyData:app'Serving on http://0.0.0.0:8000
µÇ¼ºó¸´ÖÆ
Òª´ÓÍⲿÌìÏ»á¼ûÄãµÄÊ÷Ý®ÅÉ£¬ÇëÔÚÍøÂç·À»ðǽÖз¿ªÒ»¸ö¶Ë¿Ú£¬²¢½«Á÷Á¿¶¨Ïòµ½ÄãÊ÷Ý®ÅÉµÄ IP µØµã£¬¶Ë¿ÚΪ 8000¡£
Ê×ÏÈ£¬»ñÈ¡Ê÷Ý®ÅɵÄÄÚ²¿ IP µØµã£º
$ ip addr show | grep inet
µÇ¼ºó¸´ÖÆ
ÄÚ²¿ IP µØµãͨ³£ÒÔ 10 »ò 192 »ò 172 ¿ªÍ·¡£
½ÓÏÂÀ´£¬Äã±ØÐèÉèÖ÷À»ðǽ¡£Í¨³££¬Äã´Ó»¥ÁªÍøЧÀÍÌṩÉÌ£¨ISP£©»ñÈ¡µÄ·ÓÉÆ÷ÖÐǶÈëÁË·À»ðǽ¡£Í¨³££¬Äã¿ÉÒÔͨ¹ýÍøÂçä¯ÀÀÆ÷»á¼û¼ÒÓ÷ÓÉÆ÷¡£Â·ÓÉÆ÷µÄµØµãÓÐʱ»á´òÓ¡ÔÚ·ÓÉÆ÷µÄµ×²¿£¬ËüÒÔ 192.168 »ò 10 ¿ªÍ·¡£²»¹ý£¬Ã¿¸ö×°±¸¶¼²î±ð£¬Òò´ËÎÒÎÞ·¨¸æËßÄãÐèÒªµã»÷ÄÄЩѡÏîÀ´µ÷½âÉèÖ᣹ØÓÚÔõÑùÉèÖ÷À»ðǽµÄÍêÕûÐÎò£¬ÇëÔĶÁ Seth Kenlon µÄÎÄÕ ¡¶´òÆðÔ´¿Ú²¢Í¨¹ýÄãµÄ·À»ðǽ·ÓÉÁ÷Á¿¡·¡£
»òÕߣ¬Äã¿ÉÒÔʹÓà localtunnel À´Ê¹Óö¯Ì¬¶Ë¿Úת·¢Ð§ÀÍ¡£
Ò»µ©ÄãµÄÁ÷Á¿µÖ´ïÊ÷Ý®ÅÉ£¬Äã¾Í¿ÉÒÔÅÌÎÊÄãµÄ API£º
$ curl https://example.com/get-stats{ "cpu_count": 4, "cpu_freq": [600.0,600.0,1200.0 ], "cpu_mem_avail": 386273280, ...
µÇ¼ºó¸´ÖÆ
ÈôÊÇÄãÒѾִÐе½ÕâÒ»²½£¬ÄÇô×îÄÑÌâµÄ²¿·ÖÒѾÒÑÍùÁË¡£
5¡¢Öظ´°ì·¨
ÈôÊÇÄãÖØÐÂÆô¶¯ÁËÊ÷Ý®ÅÉ£¬Äã±ØÐèƾ֤ÒÔÏ°취¾ÙÐвÙ×÷£º
ʹÓà source ÖØ줻î Python ÇéÐÎ
ʹÓà pip Ë¢ÐÂÓ¦ÓóÌÐòµÄÒÀÀµÏî
ʹÓà gunicorn Æô¶¯ Flask Ó¦ÓóÌÐò
ÄãµÄ·À»ðǽÉèÖÃÊdz¤Æڵģ¬µ«ÈôÊÇÄãʹÓÃÁË localtunnel£¬Ôò±ØÐèÔÚÖØÐÂÆô¶¯ºóÆô¶¯ÐµÄËíµÀ¡£
ÈôÊÇÄãÔ¸Ò⣬¿ÉÒÔ×Ô¶¯»¯ÕâЩʹÃü£¬µ«ÄÇÊÇÁíÒ»¸ö½Ì³ÌµÄÄÚÈÝ¡£±¾½Ì³ÌµÄ×îºóÒ»²¿·ÖÊÇÔÚ Appsmith ÉϹ¹½¨Ò»¸öÓû§½çÃ棬ʹÓÃÍÏ·ÅʽС²¿¼þºÍһЩ JavaScript£¬½«ÄãµÄÊ÷Ý®ÅÉÊý¾Ý°ó¶¨µ½Óû§½çÃæ¡£ÐÅÍÐÎÒ£¬´ÓÏÖÔÚ×îÏȺÜÈÝÒ×£¡
ÔÚ Appsmith ÉϹ¹½¨ÒDZíÅÌ
Ó²¼þ¼à¿ØÒDZíÅÌ
ÒªÖÆ×÷Ò»¸öÏñÕâÑùµÄÒDZíÅÌ£¬ÄãÐèÒª½«¹ûÕæµÄ API ¶ËµãÅþÁ¬µ½ Appsmith£¬Ê¹Óà Appsmith µÄС²¿¼þ¿â¹¹½¨Óû§½çÃ棬²¢½« API µÄÏìÓ¦°ó¶¨µ½Ð¡²¿¼þÉÏ¡£ÈôÊÇÄãÒѾʹÓà Appsmith£¬Äã¿ÉÒÔÖ±½Óµ¼Èë ʾÀýÓ¦ÓóÌÐò ²¢×îÏÈʹÓá£
ÈôÊÇÄ㻹ûÓУ¬Çë ×¢²á Ò»¸öÃâ·ÑµÄ Appsmith ÕÊ»§¡£»òÕߣ¬Äã¿ÉÒÔÑ¡Ôñ ×ÔÍÐ¹Ü Appsmith¡£
½« API ×÷Ϊ Appsmith Êý¾ÝÔ´ÅþÁ¬
µÇ¼µ½ÄãµÄ Appsmith ÕÊ»§¡£
ÔÚ×ó²àµ¼º½À¸ÖÐÕÒµ½²¢µã»÷ ¡°ÅÌÎÊ»ò JSQUERIES/JS¡± ÅÔ±ßµÄ ¡°+¡± °´Å¥¡£
µã»÷ ¡°½¨ÉèÒ»¸ö¿Õȱ APICreate a blank API¡±¡£
ÔÚÒ³Ã涥²¿£¬½«ÄãµÄÏîÄ¿ÃüÃûΪ ¡°PiData¡±¡£
»ñÈ¡ÄãµÄ API µÄ URL¡£ÈôÊÇÄãʹÓõÄÊÇ localtunnel£¬ÔòÊÇÒ»¸ö localtunnel.me µØµã£¬×ÜÊÇÔÚĩβÌí¼Ó /get-stats ÒÔ»ñȡͳ¼ÆÊý¾Ý¡£½«ÆäÕ³Ìùµ½Ò³ÃæµÄµÚÒ»¸ö¿Õȱ×Ö¶ÎÖУ¬È»ºóµã»÷ ¡°RUN¡± °´Å¥¡£
È·±£ÔÚ ¡°ÏìÓ¦Response¡± Ãæ°åÖп´µ½ÀֳɵÄÏìÓ¦¡£
Appsmith ½çÃæ
¹¹½¨Óû§½çÃæ
Appsmith µÄ½çÃæºÜÊÇÖ±¹Û£¬µ«ÈôÊÇÄã¸ÐÓ¦ÃÔʧ£¬ÎÒ½¨ÒéÄãÉó²é ÔÚ Appsmith ÉϹ¹½¨ÄãµÄµÚÒ»¸öÓ¦ÓóÌÐò ½Ì³Ì¡£
ÔÚ»²¼ÉÏÍ϶¯”Îı¾Text”¡¢”ͼÏñImage”ºÍ”ÍÑÀëÏßDivider”С²¿¼þ×÷ΪÎÊÌâ¡£½«ËüÃÇÅÅÁÐÈçÏ£º
ÉèÖÃÏîÄ¿µÄÌâ
¡°Îı¾Text¡± С²¿¼þ°üÀ¨ÄãÒ³ÃæµÄÏÖʵÎÊÌâ¡£¼üÈë±È¡°Raspberry Pi Stats¡±¸ü¿áµÄÄÚÈÝ¡£
¡°Í¼ÏñImage¡± С²¿¼þÓÃÓÚչʾÒDZíÅ̵ÄÆæÒì±ê¼Ç¡£Äã¿ÉÒÔʹÓÃÄãϲ»¶µÄÈκαê¼Ç¡£
ʹÓà ¡°¿ª¹ØSwitch¡± С²¿¼þÀÍÆÈ´»ÊµÊ±Êý¾Ýģʽ¡£´ÓÄã¹¹½¨µÄ API »ñÈ¡Êý¾Ý£¬ÐèÒªÔÚ “ÊôÐÔProperty” Ãæ°å¾ÙÐÐÉèÖá£
¹ØÓÚÖ÷Ì岿·Ö£¬Ê¹ÓÃÀ´×Ô×ó²àµÄС²¿¼þ¿âµÄÒÔÏÂС²¿¼þ½¨ÉèÒ»¸ö CPU ͳ¼ÆÐÅÏ¢ÇøÓò£¬Ê¹ÓÃÒÔÏÂС²¿¼þ£º
½ø¶ÈÌõProgress Bar
ͳ¼Æ¿òStat Box
ͼ±íChart
¹ØÓÚÄÚ´æºÍ´ÅÅÌͳ¼ÆÐÅÏ¢²¿·Ö£¬Öظ´ÏàͬµÄ°ì·¨¡£´ÅÅÌͳ¼ÆÐÅÏ¢²¿·Ö²»ÐèҪͼ±í£¬µ«ÈôÊÇÄãÄÜÕÒµ½ÓÃ;£¬ÄÇÒ²¿ÉÒÔʹÓÃËü¡£
ÄãµÄ×îÖÕС²¿¼þ½á¹¹Ó¦¸ÃÀàËÆÓÚÒÔÏ£º
Appsmith ÖеÄÊôÐÔÉèÖÃ
×îºóÒ»²½Êǽ« API µÄÊý¾Ý°ó¶¨µ½ÄãµÄС²¿¼þÉÏ¡£
½«Êý¾Ý°ó¶¨µ½Ð¡²¿¼þÉÏ
·µ»Øµ½»²¼£¬²¢ÔÚÈý¸öÀà±ðµÄ²¿·ÖÖÐÕÒµ½ÄãµÄС²¿¼þ¡£Ê×ÏÈÉèÖà CPU ͳ¼ÆÐÅÏ¢¡£
Òª½«Êý¾Ý°ó¶¨µ½ ¡°½ø¶ÈÌõProgress Bar¡± С²¿¼þ£º
µ¥»÷ ¡°½ø¶ÈÌõProgress Bar¡± С²¿¼þ£¬ÒÔ·¿ªÓÒ²àµÄ ¡°ÊôÐÔProperty¡± Ãæ°å¡£
²éÕÒ ¡°½ø¶ÈProgress¡± ÊôÐÔ¡£
µ¥»÷ ¡°JS¡± °´Å¥ÒÔ¼¤»î JavaScript¡£
ÔÚ ¡°½ø¶ÈProgress¡± ×Ö¶ÎÖÐÕ³Ìù {{PiData.data.cpu_percent ?? 0}}¡£´Ë´úÂëÒýÓÃÁËÄãµÄ API µÄÊý¾ÝÁ÷£¬ÃûΪ PiData¡£Appsmith ½«ÏìÓ¦Êý¾Ý»º±£´æ PiData µÄ .data ÔËËã·ûÄÚ¡£¼ü cpu_percent °üÀ¨ÁË Appsmith ÓÃÀ´ÏÔʾ CPU ʹÓÃÂʰٷֱȵÄÊý¾Ý¡£
ÔÚ ¡°½ø¶ÈÌõProgress Bar¡± С²¿¼þÏ·½Ìí¼ÓÒ»¸ö ¡°Îı¾Text¡± С²¿¼þ×÷Ϊ±êÇ©¡£
ÔÚÉèÖÃÆÁÄ»Öаó¶¨Ãü¾Ý
ÔÚ CPU ²¿·ÖÓÐÈý¸ö ¡°Í³¼Æ¿òStat Box¡± С²¿¼þ¡£½«Êý¾Ý°ó¶¨µ½Ã¿¸öС²¿¼þµÄ°ì·¨Óë°ó¶¨ ¡°½ø¶ÈÌõProgress Bar¡± С²¿¼þµÄ°ì·¨ÍêÈ«Ïàͬ£¬Ö»ÊÇÄãÐèÒª´Ó .data ÔËËã·ûÖа󶨲î±ðµÄÊý¾ÝÊôÐÔ¡£Æ¾Ö¤ÏàͬµÄ°ì·¨¾ÙÐвÙ×÷£¬µ«ÓÐÒÔÏÂÆÆÀý£º
ʹÓà {{${PiData.data.cpu_freq[0]} ?? 0 }} À´ÏÔʾʱÖÓËÙÂÊ¡£
ʹÓà {{${PiData.data.cpu_count} ?? 0 }} À´ÏÔʾ CPU ¼ÆÊý¡£
ʹÓà {{${(PiData.data.sensor_temperatures).toPrecision(3)} ?? 0 }} À´ÏÔʾ CPU ζÈÊý¾Ý¡£
ÈôÊÇÒ»ÇÐ˳Ë죬Ä㽫»ñµÃÒ»¸öƯÁÁµÄÒDZíÅÌ£¬ÈçÏÂËùʾ£º
Ê÷Ý®ÅɵÄÒDZíÅÌ
CPU ʹÓÃÂÊÇ÷ÊÆͼ
Äã¿ÉÒÔʹÓà ¡°Í¼±íChart¡± С²¿¼þ½« CPU ʹÓÃÂÊÏÔʾΪÇ÷ÊÆÏߣ¬²¢Ê¹ÆäËæʱ¼ä×Ô¶¯¸üС£
Ê×ÏÈ£¬µ¥»÷С²¿¼þ£¬ÔÚÓÒ²àÕÒµ½ ¡°Í¼±íÀàÐÍChart Type¡± ÊôÐÔ£¬²¢½«Æä¸ü¸ÄΪ ¡°ÕÛÏßͼLINE CHART¡±¡£ÎªÁËÏÔʾÇ÷ÊÆÏߣ¬ÐèÒª½« cpu_percent ´æ´¢ÔÚÊý¾ÝµãÊý×éÖС£ÄãµÄ API ÏÖÔÚ½«Æä×÷Ϊµ¥¸öʱ¼äÊý¾Ýµã·µ»Ø£¬Òò´Ë¿ÉÒÔʹÓà Appsmith µÄ storeValue º¯Êý£¨Appsmith ÄÚÖÃµÄ setItem ÒªÁìµÄÒ»¸öÔÉúʵÏÖ£©À´»ñÈ¡Ò»¸öÊý×é¡£
ÔÚ ¡°ÅÌÎÊ»ò JSQUERIES/JS¡± ÅԱߵ¥»÷ ¡°+¡± °´Å¥£¬²¢½«ÆäÃüÃûΪ ¡°utils¡±¡£
½«ÒÔÏ JavaScript ´úÂëÕ³Ìùµ½ ¡°´úÂëCode¡± ×Ö¶ÎÖУº
export default {getLiveData: () => {//When switch is on:if (Switch1.isSwitchedOn) {setInterval(() => {let utilData = appsmith.store.cpu_util_data;PiData.run()storeValue("cpu_util_data", [...utilData, {x: PiData.data.cpu_percent,y: PiData.data.cpu_percent}]); }, 1500, 'timerId')} else {clearInterval('timerId');}},initialOnPageLoad: () => {storeValue("cpu_util_data", []);}}
µÇ¼ºó¸´ÖÆ
ΪÁ˳õʼ»¯ Store£¬ÄãÔÚ initialOnPageLoad ¹¤¾ßÖн¨ÉèÁËÒ»¸ö JavaScript º¯Êý£¬²¢½« storeValue º¯Êý·ÅÔÚÆäÖС£
ÄãʹÓà storeValue(“cpu_util_data”, []); ½« cpu_util_data ÖеÄÖµ´æ´¢µ½ storeValue º¯ÊýÖС£´Ëº¯ÊýÔÚÒ³Ãæ¼ÓÔØʱÔËÐС£
µ½ÏÖÔÚΪֹ£¬Ã¿´ÎË¢ÐÂÒ³Ãæʱ£¬´úÂ붼»á½« cpu_util_data ÖеÄÒ»¸öÊý¾Ýµã´æ´¢µ½ Store ÖС£ÎªÁË´æ´¢Ò»¸öÊý×飬ÄãʹÓÃÁË x ºÍ y µÄϱê±äÁ¿£¬Á½Õ߶¼´æ´¢ÁËÀ´×Ô cpu_percent Êý¾ÝÊôÐÔµÄÖµ¡£
Ä㻹ϣÍûͨ¹ýÉ趨´æ´¢ÖµÖ®¼äµÄÀο¿Ê±¼ä¾àÀëÀ´×Ô¶¯´æ´¢ÕâЩÊý¾Ý¡£µ±Ö´ÐÐ setInterval º¯Êýʱ£º
»ñÈ¡´æ´¢ÔÚ cpu_util_data ÖеÄÖµ¡£
ŲÓà API PiData¡£
ʹÓ÷µ»ØµÄ×îРcpu_percent Êý¾Ý½« cpu_util_data ¸üÐÂΪ x ºÍ y ±äÁ¿¡£
½« cpu_util_data µÄÖµ´æ´¢ÔÚ¼ü utilData ÖС£
½öµ±ÉèÖÃΪ×Ô¶¯Ö´Ðк¯Êýʱ£¬²ÅÖظ´Ö´Ðа취 1 µ½ 4¡£ÄãʹÓà Switch С²¿¼þ½«ÆäÉèÖÃΪ×Ô¶¯Ö´ÐУ¬Õâ¾ÍÚ¹ÊÍÁËΪʲôÓÐÒ»¸ö getLiveData ¸¸º¯Êý¡£
ÔÚ ¡°ÉèÖÃSettings¡± Ñ¡ÏÖУ¬ÕÒµ½¹¤¾ßÖеÄËùÓи¸º¯Êý£¬²¢ÔÚ ¡°Ò³Ãæ¼ÓÔØʱÔËÐÐRUN ON PAGE LOAD¡± Ñ¡ÏîÖн« initialOnPageLoad ÉèÖÃΪ ¡°Yes£¨ÊÇ£©¡±¡£
ÉèÖÃÒ³Ãæ¼ÓÔØʱҪִÐеĺ¯Êý
ÏÖÔÚË¢ÐÂÒ³Ãæ¾ÙÐÐÈ·ÈÏ¡£
·µ»Øµ½»²¼¡£µ¥»÷ ¡°Í¼±íChart¡± С²¿¼þ£¬²¢ÕÒµ½ ¡°Í¼±íÊý¾ÝChart Data¡± ÊôÐÔ¡£½«°ó¶¨ {{ appsmith.store.disk_util_data }} Õ³Ìùµ½ÆäÖС£ÕâÑù£¬ÈôÊÇÄã×Ô¼º¶à´ÎÔËÐй¤¾ß utils£¬¾Í¿ÉÒÔ»ñµÃͼ±íÊý¾Ý¡£Òª×Ô¶¯ÔËÐд˲Ù×÷£º
²éÕÒ²¢µ¥»÷ÒDZíÅÌÎÊÌâÖÐµÄ ¡°ÊµÊ±Êý¾Ý¿ª¹ØLive Data Switch¡± С²¿¼þ¡£
²éÕÒ onChange ÊÂÎñ¡£
½«Æä°ó¶¨µ½ {{ utils.getLiveData() }}¡£JavaScript ¹¤¾ßÊÇ utils£¬¶ø getLiveData ÊÇÔÚÄãÇл»¿ª¹Øʱ¼¤»îµÄº¯Êý£¬Ëü»á´ÓÄãµÄÊ÷Ý®ÅÉ»ñȡʵʱÊý¾Ý¡£¿ÉÊÇÉÐÓÐÆäËûʵʱÊý¾Ý£¬Òò´Ëͳһ¿ª¹ØÒ²ÊÊÓÃÓÚËüÃÇ¡£¼ÌÐøÔĶÁÒÔÏàʶÏêÇé¡£
½«Êý¾Ý°ó¶¨µ½ÄÚ´æºÍ´ÅÅ̲¿·ÖµÄС²¿¼þÓëÄãÔÚ CPU ͳ¼ÆÐÅÏ¢²¿·ÖËù×öµÄ·½·¨ÀàËÆ¡£
¹ØÓÚÄڴ沿·Ö£¬°ó¶¨ÈçÏÂËùʾ£º
½ø¶ÈÌõÖеİó¶¨Îª£º{{( PiData.data.cpu_mem_avail/1000000000).toPrecision(2) * 100 ?? 0 }}¡£
Èý¸öͳ¼Æ¿òС²¿¼þµÄ°ó¶¨»®·ÖΪ£º{{ ${(PiData.data.cpu_mem_used/1000000000).toPrecision(2)} ?? 0 }} GB¡¢{{ ${(PiData.data.cpu_mem_free/1000000000).toPrecision(2)} ?? 0}} GB ºÍ {{ ${(PiData.data.cpu_mem_total/1000000000).toPrecision(2)} ?? 0 }} GB¡£
¹ØÓÚ´ÅÅ̲¿·Ö£¬½ø¶ÈÌõºÍͳ¼Æ¿òС²¿¼þµÄ°ó¶¨»®·Ö±äΪ£º
½ø¶ÈÌõµÄ°ó¶¨Îª£º{{ PiData.data.disk_usage_percent ?? 0 }}¡£
Èý¸öͳ¼Æ¿òС²¿¼þµÄ°ó¶¨»®·ÖΪ£º{{ ${(PiData.data.disk_usage_used/1000000000).toPrecision(2)} ?? 0 }} GB¡¢{{ ${(PiData.data.disk_usage_free/1000000000).toPrecision(2)} ?? 0 }} GB ºÍ {{ ${(PiData.data.disk_usage_total/1000000000).toPrecision(2)} ?? 0 }} GB¡£
ÕâÀïµÄͼ±íÐèÒª¸üÐÂÄãΪ CPU ͳ¼ÆÐÅÏ¢½¨ÉèµÄ utils ¹¤¾ß£¬Ê¹Óà storeValue ¼üÃûΪ disk_util_data£¬Ç¶Ì×ÔÚ getLiveData ÏÂÃ棬ÆäÂß¼Óë cpu_util_data ÀàËÆ¡£¹ØÓÚ´ÅÅÌʹÓÃÂÊͼ±í£¬ÎÒÃÇ´æ´¢µÄ disk_util_data µÄÂß¼Óë CPU ʹÓÃÂÊÇ÷ÊÆͼµÄÂß¼Ïàͬ¡£
export default {getLiveData: () => {//When switch is on:if (Switch1.isSwitchedOn) {setInterval(() => { const cpuUtilData = appsmith.store.cpu_util_data; const diskUtilData = appsmith.store.disk_util_data; PiData.run(); storeValue("cpu_util_data", [...cpuUtilData, { x: PiData.data.cpu_percent,y: PiData.data.cpu_percent }]); storeValue("disk_util_data", [...diskUtilData, { x: PiData.data.disk_usage_percent,y: PiData.data.disk_usage_percent }]);}, 1500, 'timerId')} else {clearInterval('timerId');}},initialOnPageLoad: () => {storeValue("cpu_util_data", []);storeValue("disk_util_data", []);}}
µÇ¼ºó¸´ÖÆ
ͨ¹ýʹÓà utils JavaScript ¹¤¾ßÔÚ·¿ªºÍ¹Ø±ÕÕæʵÊý¾Ý¿ª¹Øʱ´¥·¢µÄÊý¾ÝÁ÷¿ÉÊÓ»¯ÈçÏÂËùʾ£º
Çл»
ÔÚ·¿ªÊµÊ±Êý¾Ý¿ª¹Øʱ£¬Í¼±í»áÄð³ÉÕâÑù£º
ÏÔʾʵʱÊý¾Ý
ÕûÌåÉÏ£¬Ëü¼ÈƯÁÁ£¬ÓÖ¼òÔ¼£¬²¢ÇÒºÜÊÇÓÐÓá£
×£ÄãʹÓÃÓä¿ì£¡
µ±Äã¶Ô psutils¡¢JavaScript ºÍ Appsmith Ô½·¢ÊìϤʱ£¬ÎÒÐÅÍÐÄã»á·¢Ã÷¿ÉÒÔÇáËÉÎÞÏ޵ص÷½âÄãµÄÒDZí°å£¬ÊµÏַdz£¿áµÄ¹¦Ð§£¬ÀýÈ磺
Éó²éÏÈÇ°Ò»ÖÜ¡¢Ò»¸öÔ¡¢Ò»¸ö¼¾¶È¡¢Ò»Äê»òƾ֤ÄãµÄÊ÷Ý®ÅÉÊý¾ÝÔÊÐíµÄÈκÎ×Ô½ç˵¹æÄ£µÄÇ÷ÊÆ
ΪÈκÎͳ¼ÆÊý¾ÝµÄãÐֵΥ¹æ¹¹½¨±¨¾¯»úÖÆ
¼à¿ØÅþÁ¬µ½ÄãµÄÊ÷Ý®ÅɵÄÆäËû×°±¸
½« psutils À©Õ¹µ½Áíһ̨װÖÃÓÐ Python µÄÅÌËã»úÉÏ
ʹÓÃÆäËû¿â¼à¿ØÄã¼ÒÍ¥»ò°ì¹«ÊÒµÄÍøÂç
¼à¿ØÄãµÄ»¨Ô°
¸ú×ÙÄã×Ô¼ºµÄÉúÑÄÏ°¹ß
ÔÚÏÂÒ»¸öÁîÈËÐ˷ܵÄÏîÄ¿ÖУ¬×£ÄãÍæµÃÓä¿ì£¡
ÒÔÉϾÍÊÇÔÚ²»µ½ 30 ·ÖÖÓÄÚ¹¹½¨Ò»¸öÊ÷Ý®Åɼà¿ØÒDZíÅ̵ÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡