{"id":2559,"date":"2022-01-15T21:38:53","date_gmt":"2022-01-15T13:38:53","guid":{"rendered":"https:\/\/blog.iyatt.com\/?p=2559"},"modified":"2024-05-05T14:19:26","modified_gmt":"2024-05-05T06:19:26","slug":"%e5%9f%ba%e4%ba%8e-remi-%e5%ae%9e%e7%8e%b0%e6%b5%8f%e8%a7%88%e5%99%a8%e5%ae%9e%e6%97%b6%e9%a2%84%e8%a7%88%e6%91%84%e5%83%8f%e5%a4%b4","status":"publish","type":"post","link":"https:\/\/blog.iyatt.com\/?p=2559","title":{"rendered":"\u57fa\u4e8e Python \u7f16\u5199 Web \u5e94\u7528\u7a0b\u5e8f"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">\u76ee\u5f55<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83\" >\u6d4b\u8bd5\u73af\u5883<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E5%90%8E%E9%9D%A2%E5%BC%80%E5%A7%8B%E5%B0%B1%E6%98%AF%E7%A4%BA%E4%BE%8B%EF%BC%9A\" >\u540e\u9762\u5f00\u59cb\u5c31\u662f\u793a\u4f8b\uff1a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E5%85%A5%E9%97%A8%E7%A8%8B%E5%BA%8F_%E2%80%93_Hello_Wolrd\" >\u5165\u95e8\u7a0b\u5e8f &#8211; Hello Wolrd<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E5%A2%9E%E5%87%8F%E6%8E%A7%E4%BB%B6\" >\u589e\u51cf\u63a7\u4ef6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E6%93%8D%E4%BD%9C%E5%85%B3%E9%97%AD%E6%9C%8D%E5%8A%A1%E5%99%A8\" >\u7528\u6237\u754c\u9762\u64cd\u4f5c\u5173\u95ed\u670d\u52a1\u5668<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E9%80%9A%E7%9F%A5%E6%B6%88%E6%81%AF\" >\u901a\u77e5\u6d88\u606f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E9%80%89%E6%8B%A9%E8%BE%93%E5%85%A5%E9%83%A8%E4%BB%B6\" >\u9009\u62e9\u8f93\u5165\u90e8\u4ef6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E5%88%87%E6%8D%A2%E6%A0%B9%E5%AE%B9%E5%99%A8\" >\u5207\u6362\u6839\u5bb9\u5668<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E5%A4%9A%E9%A1%B5%E9%9D%A2%E5%AE%B9%E5%99%A8\" >\u591a\u9875\u9762\u5bb9\u5668<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E5%9F%BA%E4%BA%8E_js_%E6%A3%80%E6%B5%8B%E9%A1%B5%E9%9D%A2%E5%85%B3%E9%97%AD%E6%88%96%E5%88%B7%E6%96%B0\" >\u57fa\u4e8e js \u68c0\u6d4b\u9875\u9762\u5173\u95ed\u6216\u5237\u65b0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80\" >\u7f51\u683c\u5e03\u5c40<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E6%B0%B4%E5%B9%B3%E5%B8%83%E5%B1%80%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B8%83%E5%B1%80\" >\u6c34\u5e73\u5e03\u5c40\u548c\u5782\u76f4\u5e03\u5c40<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#idle_%E6%96%B9%E6%B3%95%E7%9A%84%E4%BD%BF%E7%94%A8\" >idle \u65b9\u6cd5\u7684\u4f7f\u7528<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E5%83%8F%E5%88%9B%E5%BB%BA%E7%BA%BF%E7%A8%8B%E4%B8%80%E6%A0%B7%E5%88%9B%E5%BB%BA%E6%9C%8D%E5%8A%A1\" >\u50cf\u521b\u5efa\u7ebf\u7a0b\u4e00\u6837\u521b\u5efa\u670d\u52a1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#API_%E6%8E%A5%E5%8F%A3\" >API \u63a5\u53e3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E6%91%84%E5%83%8F%E5%A4%B4%E9%A2%84%E8%A7%88\" >\u6444\u50cf\u5934\u9884\u89c8<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/blog.iyatt.com\/?p=2559\/#%E6%8B%96%E6%94%BE%E5%BC%8F_GUI_%E7%BC%96%E8%BE%91%E5%99%A8\" >\u62d6\u653e\u5f0f GUI \u7f16\u8f91\u5668<\/a><\/li><\/ul><\/nav><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"\u6d4b\u8bd5\u73af\u5883\"><span class=\"ez-toc-section\" id=\"%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83\"><\/span>\u6d4b\u8bd5\u73af\u5883<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ubuntu 20.04 x86_64<\/p>\n\n\n\n<p>Windows 11 \u4e13\u4e1a\u5de5\u4f5c\u7ad9\u7248 21H2<\/p>\n\n\n\n<p>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014<\/p>\n\n\n\n<p>Python 3.9.10<\/p>\n\n\n\n<p>Matplotlib<\/p>\n\n\n\n<p>NumPy<\/p>\n\n\n\n<p>OpenCV 4.5.5<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">pip3 install opencv-python==4.5.5.62<\/pre>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/dddomodossola\/remi\" data-type=\"URL\" data-id=\"https:\/\/github.com\/dddomodossola\/remi\" target=\"_blank\">remi 2021.3.2<\/a><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">pip3 install -i https:\/\/pypi.org\/simple\/ remi==2021.3.2<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"786\" height=\"533\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-15-21-24-01-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2560 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-15-21-24-01-\u7684\u5c4f\u5e55\u622a\u56fe.png 786w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-15-21-24-01-\u7684\u5c4f\u5e55\u622a\u56fe-300x203.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-15-21-24-01-\u7684\u5c4f\u5e55\u622a\u56fe-768x521.png 768w\" data-sizes=\"(max-width: 786px) 100vw, 786px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 786px; --smush-placeholder-aspect-ratio: 786\/533;\" \/><\/figure>\n\n\n\n<p>\uff08\u89c1\u540e\u9762\u7b2c\u4e00\u4e2a\u6848\u4f8b\u7a0b\u5e8f\uff09\u5982\u679c\u8c03\u7528 start() \u65b9\u6cd5\u65f6\uff0c\u6307\u5b9a\u4e86\u53c2\u6570 standalone=True\uff0c\u90a3\u4e48\u8fd0\u884c\u7684\u7a0b\u5e8f\u5c06\u4e0d\u518d\u4f9d\u8d56\u4e8e\u6d4f\u89c8\u5668\u6253\u5f00\u7f51\u9875\uff0c\u800c\u662f\u76f4\u63a5\u521b\u5efa\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u754c\u9762\u3002\u5e76\u4e14\u6307\u5b9a\u8be5\u53c2\u6570\u540e\uff0c\u5c31\u4e0d\u5f97\u518d\u6307\u5b9a\u76d1\u542c\u5730\u5740\u3001\u7aef\u53e3\u3001\u7f13\u5b58&#8230;&#8230;\uff0cdebug \u548c title \u53ef\u4ee5\u4f7f\u7528\u3002<\/p>\n\n\n\n<p>\u5e76\u4e14\u9700\u8981\u5b89\u88c5\u4e0b\u9762\u7684\u4f9d\u8d56\u5e93\u624d\u80fd\u4f7f\u7528 standalone=True\u3002<\/p>\n\n\n\n<p>pywebview<\/p>\n\n\n\n<p>\u6ce8\u610f\u4e0b\u9762\u4e09\u4e2a\u7248\u672c\u8981\u7edf\u4e00<\/p>\n\n\n\n<p>pyqt5<\/p>\n\n\n\n<p>pyqt5-tools<\/p>\n\n\n\n<p>pyqtwebengine<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"820\" height=\"655\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-17-56-08-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2664 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-17-56-08-\u7684\u5c4f\u5e55\u622a\u56fe.png 820w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-17-56-08-\u7684\u5c4f\u5e55\u622a\u56fe-300x240.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-17-56-08-\u7684\u5c4f\u5e55\u622a\u56fe-768x613.png 768w\" data-sizes=\"(max-width: 820px) 100vw, 820px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 820px; --smush-placeholder-aspect-ratio: 820\/655;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u540e\u9762\u5f00\u59cb\u5c31\u662f\u793a\u4f8b\"><span class=\"ez-toc-section\" id=\"%E5%90%8E%E9%9D%A2%E5%BC%80%E5%A7%8B%E5%B0%B1%E6%98%AF%E7%A4%BA%E4%BE%8B%EF%BC%9A\"><\/span>\u540e\u9762\u5f00\u59cb\u5c31\u662f\u793a\u4f8b\uff1a<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u5b98\u65b9\u6848\u4f8b\u4ee3\u7801\uff1a<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/dddomodossola\/remi\/tree\/master\/examples\" target=\"_blank\">https:\/\/github.com\/dddomodossola\/remi\/tree\/master\/examples<\/a><\/p>\n\n\n\n<p>\u8fd9\u4e2a\u9879\u76ee\u7684\u6587\u6863\u53ea\u6709\u5f15\u5165\u7684\u7a0b\u5ea6\uff0c\u8981\u5b66\u4e60\u8fd8\u662f\u5f97\u9605\u8bfb\u6848\u4f8b\u4ee3\u7801\u3002<\/p>\n\n\n\n<p>\u540e\u9762\u7684\u793a\u4f8b\u4ee3\u7801\u6709\u90e8\u5206\u5c31\u662f\u76f4\u63a5\u5728\u6848\u4f8b\u4ee3\u7801\u7684\u57fa\u7840\u4e0a\u505a\u4fee\u6539\u7684\uff0c\u53e6\u5916\u90e8\u5206\u662f\u6839\u636e\u81ea\u5df1\u7684\u60f3\u6cd5\u5199\u7684\u3002\u539f\u9879\u76ee\u7684\u5f00\u6e90\u534f\u8bae\u4e3a Apache 2.0\uff0c\u8981\u6c42\u5728\u4fee\u6539\u8fc7\u7684\u6587\u4ef6\u4e2d\u4fdd\u7559\u539f\u58f0\u660e\uff08\u7248\u6743\u3001\u4e13\u5229\u3001\u8bb8\u53ef\u8bc1&#8230;&#8230;)\u4ee5\u53ca\u8bf4\u660e\u6539\u4e86\u54ea\u3002<\/p>\n\n\n\n<p>\u5bf9\u4e8e\u793a\u4f8b\u4ee3\u7801\u7684\u4fee\u6539\uff0c\u4e3b\u8981\u662f\u5728\u7528\u4e2d\u6587\u91cd\u5199\u4ee3\u7801\u4e2d\u82f1\u6587\u5b57\u6bb5\u3001\u6ce8\u91ca\u4ee5\u53ca\u6dfb\u52a0\u4e86\u4e00\u4e9b\u66f4\u8be6\u7ec6\u7684\u4e2d\u6587\u6ce8\u91ca\uff0c\u53e6\u5916\u53ef\u80fd\u90e8\u5206\u7ec6\u8282\u529f\u80fd\u8c03\u6574\uff0c\u529f\u80fd\u6027\u4fee\u6539\u5728\u4ee3\u7801\u6ce8\u91ca\u4e2d\u8bf4\u660e\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u5165\u95e8\u7a0b\u5e8f-hello-wolrd\"><span class=\"ez-toc-section\" id=\"%E5%85%A5%E9%97%A8%E7%A8%8B%E5%BA%8F_%E2%80%93_Hello_Wolrd\"><\/span>\u5165\u95e8\u7a0b\u5e8f &#8211; Hello Wolrd<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \u5165\u95e8\u4f53\u9a8c\u7a0b\u5e8f - Hello World\n\"\"\"\n\nfrom remi import start, App, gui\n\n\nclass MyApp(App):\n    # def __init__(self, *args):\n    #     super(MyApp, self).__init__(*args)\n\n    def main(self):\n        wid = gui.VBox(width=300, height=200)  # \u521b\u5efa\u4e00\u4e2a\u5782\u76f4\u5e03\u5c40\u7684\u9876\u5c42\u5bb9\u5668\n        self.lbl = gui.Label('Hello World\\n\u7b2c\u4e00\u4e2a remi \u5165\u95e8\u7a0b\u5e8f', style={\"white-space\":\"pre\"})  # \u521b\u5efa\u4e00\u4e2a\u6807\u7b7e\n        bt = gui.Button('\u70b9\u51fb\u6211')  # \u521b\u5efa\u4e00\u4e2a\u6309\u94ae\n        bt.onclick.do(self.call_button)  # \u76d1\u542c\u70b9\u51fb\u4e8b\u4ef6\n        # \u5c06\u6807\u7b7e\u548c\u6309\u94ae\u4e24\u4e2a\u90e8\u4ef6\u6dfb\u52a0\u5230\u9876\u5c42\u5bb9\u5668\u4e2d\n        wid.append(self.lbl)\n        wid.append(bt)\n        # \u8fd4\u56de\u6839\u5bb9\u5668\u5bf9\u8c61\n        return wid\n\n    def call_button(self, emitter):\n        self.lbl.set_text('\u6d4b\u8bd5\u6210\u529f!')\n        \n\nif __name__ == \"__main__\":\n    start(MyApp,\n        address='0.0.0.0',  # \u76d1\u542c\u5730\u5740\u3002\u76d1\u542c 127.0.0.1 \u65f6\u53ea\u6709\u672c\u673a\u53ef\u4ee5\u8bbf\u95ee;\u76d1\u542c 0.0.0.0 \u65f6\uff0c\u672c\u673a\u548c\u5916\u90e8\u8bbf\u95ee\uff08\u5c40\u57df\u7f51\u6216\u8005\u516c\u7f51\uff09\u3002\u4e0d\u8bbe\u7f6e\u8be5\u53c2\u6570\u5219\u9ed8\u8ba4\u53ea\u76d1\u542c\u672c\u673a\u3002\n        port=9999,  # \u76d1\u542c\u7aef\u53e3\u3002\u8bbe\u7f6e 0 \u5c31\u662f\u5e94\u7528\u968f\u673a\u9009\u62e9\u4e00\u4e2a\u53ef\u7528\u7684\u7aef\u53e3\uff0c1024 \u4ee5\u4e0b\u7aef\u53e3\u9700\u8981 root \u8fd0\u884c\uff0c\u5f80\u4e0a\u81f3 65535 \u662f\u666e\u901a\u7528\u6237\u53ef\u4ee5\u4f7f\u7528\u7684\u3002\u4e0d\u8bbe\u7f6e\u8be5\u53c2\u6570\u5219\u9ed8\u8ba4\u968f\u673a\u3002\n        # \u6bcf\u4e2a\u5ba2\u6237\u7aef\u90fd\u8bbf\u95ee\u4e00\u4e2a\u72ec\u7acb\u7684\u5bf9\u8c61\uff0c\u4ee5 cookie \u533a\u5206\n        # \u5f53\u8bbe\u7f6e\u4e3a True \u65f6\uff0c\u591a\u4e2a\u6d4f\u89c8\u5668\u8bbf\u95ee\uff0c\u6bcf\u4e2a\u6d4f\u89c8\u5668\u8bbf\u95ee\u7684\u5bf9\u8c61\u90fd\u662f\u72ec\u7acb\u7684\uff0c\u4e92\u4e0d\u5f71\u54cd\n        # \u5f53\u8bbe\u7f6e\u4e3a False \u65f6\uff0c\u591a\u4e2a\u6d4f\u89c8\u5668\u8bbf\u95ee\u540c\u4e00\u4e2a\u5bf9\u8c61\uff0c\u67d0\u4e2a\u6d4f\u89c8\u5668\u5bf9\u9875\u9762\u8fdb\u884c\u4e86\u64cd\u4f5c\uff0c\u5176\u5b83\u6d4f\u89c8\u5668\u770b\u5230\u7684\u9875\u9762\u4e5f\u540c\u6b65\u53d8\u5316\n        multiple_instance=True,\n        enable_file_cache=False,  # \u542f\u7528\u8d44\u6e90\u7f13\u5b58\n        update_interval=0,  # \u5982\u679c\u5b9a\u4e49\u4e86 App.idle \u65b9\u6cd5\uff0c\u90a3\u4e48\u6267\u884c\u7684\u95f4\u9694\u65f6\u95f4\u7531\u8be5\u53c2\u6570\u6307\u5b9a\uff0c\u5355\u4f4d\u4e3a\u79d2\u3002\u8bbe\u7f6e\u4e3a 0 \u65f6\uff0cidle \u65b9\u6cd5\u4e0d\u4f1a\u88ab\u8c03\u7528\u3002\n        start_browser=True,  # \u662f\u5426\u5728\u542f\u52a8\u7a0b\u5e8f\u65f6\u81ea\u52a8\u6253\u5f00\u672c\u673a\u7684\u6d4f\u89c8\u5668\u8bbf\u95ee\u9875\u9762\n        debug=True,  # \u6253\u5370\u8c03\u8bd5\u4fe1\u606f\n        username='123',  # \u7528\u6237\u540d - \u6253\u5f00\u9875\u9762\u662f\u65f6\u767b\u5f55\u624d\u53ef\u4ee5\u8bbf\u95ee\uff0c\u4e0d\u8bbe\u7f6e\u5c31\u4e0d\u5199 username \u548c password \u6216\u8005\u4f20\u53c2 None\uff0c\u7528\u6237\u540d\u548c\u5bc6\u7801\u9700\u8981\u540c\u65f6\u5b58\u5728\uff0c\u5426\u5219\u65e0\u6548\u3002\n        password='123',  # \u7528\u6237\u5bc6\u7801\n        title='\u7b2c\u4e00\u4e2a\u793a\u4f8b\u7a0b\u5e8f'  # \u7f51\u9875\u6807\u9898\n    )<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"457\" height=\"267\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-46-17-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2656 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-46-17-\u7684\u5c4f\u5e55\u622a\u56fe.png 457w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-46-17-\u7684\u5c4f\u5e55\u622a\u56fe-300x175.png 300w\" data-sizes=\"(max-width: 457px) 100vw, 457px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 457px; --smush-placeholder-aspect-ratio: 457\/267;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"294\" height=\"211\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-21-03-51-\u7684\u5c4f\u5e55\u622a\u56fe-2.png\" alt=\"\" class=\"wp-image-2640 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 294px; --smush-placeholder-aspect-ratio: 294\/211;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"313\" height=\"212\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-21-03-56-\u7684\u5c4f\u5e55\u622a\u56fe-1.png\" alt=\"\" class=\"wp-image-2641 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-21-03-56-\u7684\u5c4f\u5e55\u622a\u56fe-1.png 313w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-21-03-56-\u7684\u5c4f\u5e55\u622a\u56fe-1-300x203.png 300w\" data-sizes=\"(max-width: 313px) 100vw, 313px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 313px; --smush-placeholder-aspect-ratio: 313\/212;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u589e\u51cf\u63a7\u4ef6\"><span class=\"ez-toc-section\" id=\"%E5%A2%9E%E5%87%8F%E6%8E%A7%E4%BB%B6\"><\/span>\u589e\u51cf\u63a7\u4ef6<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \u8fd9\u4e2a\u8303\u4f8b\u4e3b\u8981\u6f14\u793a\u4e0b\u9762\u63a7\u4ef6\u7684\u7528\u6cd5\uff1a\n    Widget.append(widget, key): \u6dfb\u52a0\u5c0f\u90e8\u4ef6\u5230\u5bb9\u5668\u90e8\u4ef6\u4e2d\n    Widget.remove_child(widget): \u4ece\u5bb9\u5668\u90e8\u4ef6\u4e2d\u79fb\u9664\u5c0f\u90e8\u4ef6\n    Widget.empty(): \u6e05\u7a7a\u5bb9\u5668\u90e8\u4ef6\u4e2d\u7684\u6240\u6709\u5c0f\u90e8\u4ef6\n\"\"\"\n\nfrom remi import start, App, gui\n\n\nclass MyApp(App):\n    def call_add_label(self, emitter):\n        \"\"\" \u6dfb\u52a0\u6807\u7b7e\n        \"\"\"\n        key = str(len(self.lbls_container.children))\n        lbl = gui.Label('\u6807\u7b7e' + key + ' ')\n        self.lbls_container.append(lbl, key)\n\n    def call_remove_label(self, emitter):\n        \"\"\" \u79fb\u9664\u6807\u7b7e\n        \"\"\"\n        if len(self.lbls_container.children) &lt; 1:\n            return\n        key = str(len(self.lbls_container.children) - 1)\n        self.lbls_container.remove_child(self.lbls_container.children[key])\n\n    def call_empty_label(self, emitter):\n        \"\"\" \u6e05\u7a7a\u6807\u7b7e\n        \"\"\"\n        self.lbls_container.empty()\n\n    def main(self):\n        main_container = gui.VBox()  # \u521b\u5efa\u5782\u76f4\u65b9\u5411\u5206\u5e03\u7684\u5bb9\u5668 - \u9876\u7ea7\u5bb9\u5668\n        lbl = gui.Label('\u70b9\u51fb\u6309\u94ae\u6dfb\u52a0\u6216\u79fb\u9664\u6807\u7b7e')\n        \n        bt_add = gui.Button('\u6dfb\u52a0\u6807\u7b7e')\n        bt_add.onclick.do(self.call_add_label)\n\n        bt_remove = gui.Button('\u79fb\u9664\u6807\u7b7e')\n        bt_remove.onclick.do(self.call_remove_label)\n\n        bt_empty = gui.Button('\u6e05\u7a7a\u6807\u7b7e')\n        bt_empty.onclick.do(self.call_empty_label)\n\n        self.lbls_container = gui.HBox()  # \u521b\u5efa\u6c34\u5e73\u5206\u5e03\u7684\u5bb9\u5668 - \u7528\u4e8e\u76db\u653e\u6dfb\u52a0\u7684\u6807\u7b7e\n\n        main_container.append([lbl, bt_add, bt_remove, bt_empty, self.lbls_container])\n\n        return main_container\n\n\nif __name__ == '__main__':\n    start(MyApp, port=9999, start_browser=True)<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"418\" height=\"113\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-15-38-19-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2626 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-15-38-19-\u7684\u5c4f\u5e55\u622a\u56fe.png 418w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-15-38-19-\u7684\u5c4f\u5e55\u622a\u56fe-300x81.png 300w\" data-sizes=\"(max-width: 418px) 100vw, 418px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 418px; --smush-placeholder-aspect-ratio: 418\/113;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"203\" height=\"99\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-15-38-27-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2627 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 203px; --smush-placeholder-aspect-ratio: 203\/99;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u7528\u6237\u754c\u9762\u64cd\u4f5c\u5173\u95ed\u670d\u52a1\u5668\"><span class=\"ez-toc-section\" id=\"%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E6%93%8D%E4%BD%9C%E5%85%B3%E9%97%AD%E6%9C%8D%E5%8A%A1%E5%99%A8\"><\/span>\u7528\u6237\u754c\u9762\u64cd\u4f5c\u5173\u95ed\u670d\u52a1\u5668<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \u4e3a\u7528\u6237\u63d0\u4f9b\u4e00\u4e2a\u505c\u6b62\u670d\u52a1\u5668\u8fd0\u884c\u7684\u5f00\u5173\n    \u7528\u6237\u70b9\u51fb\u505c\u6b62\u6309\u94ae\uff0c\u4f1a\u7ec8\u6b62\u670d\u52a1\u5668\u8fd0\u884c\n\"\"\"\n\nfrom remi import start, App, gui\n\n\nclass MyApp(App):\n    def main(self):\n        wid = gui.VBox(width=300, height=200, margin='0px auto')\n\n        bt = gui.Button('\u5173\u95ed\u5e94\u7528', width=200, height=30)\n        bt.style['margin'] = 'auto 50px'  # \u8fb9\u5bbd\n        bt.style['background-color'] = 'red'  # \u80cc\u666f\u8272\n\n        bt.onclick.do(self.call_close_app)\n\n        wid.append(bt)\n        return wid\n\n    def call_close_app(self, _):\n        \"\"\" \u6267\u884c\u5173\u95ed\u670d\u52a1\u5668\u64cd\u4f5c\n        \"\"\"\n        self.close()\n\n    def on_close(self):\n        \"\"\" \u5173\u95ed\u670d\u52a1\u5668\u7aef\u524d\u6267\u884c\n            \u7c7b\u4f3c\u4e8e\u6790\u6784\u51fd\u6570\uff0c\u91ca\u653e\u5bf9\u8c61\u524d\u8fdb\u884c\u5584\u540e\u5de5\u4f5c\n        \"\"\"\n        super(MyApp, self).on_close()\n\n\nif __name__ == \"__main__\":\n    start(MyApp, port=9999)<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u901a\u77e5\u6d88\u606f\"><span class=\"ez-toc-section\" id=\"%E9%80%9A%E7%9F%A5%E6%B6%88%E6%81%AF\"><\/span>\u901a\u77e5\u6d88\u606f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \n    \u901a\u77e5\u6d88\u606f\n\"\"\"\n\nfrom remi import start, App, gui\n\n\nclass MyApp(App):\n    def main(self):\n        wid = gui.VBox(width=300, height=200, margin='0px auto')\n        self.lbl = gui.Label('\u8bf7\u70b9\u51fb\u6309\u94ae', width='80%', height='50%')\n        self.lbl.style['margin'] = 'auto'\n        self.bt = gui.Button('\u6309\u94ae', width=200, height=30)\n        self.bt.style['margin'] = 'auto 50px'\n\n        self.bt.onclick.do(self.call_button_pressed)\n\n        wid.append(self.lbl)\n        wid.append(self.bt)\n\n        return wid\n\n    def call_button_pressed(self, widget):\n        self.lbl.set_text('\u6d4f\u89c8\u5668\u6388\u6743\u63d0\u9192\uff0c\u70b9\u51fb\u5141\u8bb8\u5c06\u51fa\u73b0\u6d88\u606f')\n        self.bt.set_text('\u55e8')\n        self.notification_message('title', 'I\\'m a message')  # \u4f3c\u4e4e\u901a\u77e5\u5185\u5bb9\u548c\u6d88\u606f\u5185\u5bb9\u4e0d\u652f\u6301\u4e2d\u6587\n\n\nif __name__ == \"__main__\":\n    start(MyApp, debug=True, port=9999)<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"539\" height=\"402\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-08-28-\u7684\u5c4f\u5e55\u622a\u56fe-1.png\" alt=\"\" class=\"wp-image-2649 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-08-28-\u7684\u5c4f\u5e55\u622a\u56fe-1.png 539w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-08-28-\u7684\u5c4f\u5e55\u622a\u56fe-1-300x224.png 300w\" data-sizes=\"(max-width: 539px) 100vw, 539px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 539px; --smush-placeholder-aspect-ratio: 539\/402;\" \/><\/figure>\n\n\n\n<p>\u8c37\u6b4c\u6d4f\u89c8\u5668\u901a\u77e5\u8bbe\u7f6e<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-10-17-\u7684\u5c4f\u5e55\u622a\u56fe-1024x576.png\" alt=\"\" class=\"wp-image-2650 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-10-17-\u7684\u5c4f\u5e55\u622a\u56fe-1024x576.png 1024w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-10-17-\u7684\u5c4f\u5e55\u622a\u56fe-300x169.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-10-17-\u7684\u5c4f\u5e55\u622a\u56fe-768x432.png 768w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-10-17-\u7684\u5c4f\u5e55\u622a\u56fe-1536x864.png 1536w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-10-17-\u7684\u5c4f\u5e55\u622a\u56fe.png 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/576;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u9009\u62e9\u8f93\u5165\u90e8\u4ef6\"><span class=\"ez-toc-section\" id=\"%E9%80%89%E6%8B%A9%E8%BE%93%E5%85%A5%E9%83%A8%E4%BB%B6\"><\/span>\u9009\u62e9\u8f93\u5165\u90e8\u4ef6<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \n    \u9009\u62e9\u8f93\u5165\n\"\"\"\n\nimport remi.gui as gui\nfrom remi import start, App\nimport os\n\n\nclass MyApp(App):\n    def main(self):\n        main_container = gui.VBox(width=300, height=200, style={'margin': '0px auto'})\n\n        label = gui.Label(\"\u9009\u62e9\u4e00\u79cd\u6c34\u679c\")\n\n        # \u7b2c\u4e00\u4e2a\u53c2\u6570\uff1a\u5f53\u8f93\u5165\u7684\u5185\u5bb9\u5b58\u5728\u4e8e\u8fd9\u4e2a\u53c2\u6570\u5217\u8868\u4e2d\u65f6\uff0c\u4f1a\u4f5c\u4e3a\u9884\u6d4b\u7ed3\u679c\u663e\u793a\n        # \u7b2c\u4e8c\u4e2a\u53c2\u6570\uff1a\u9ed8\u8ba4\u503c\n        # \u7b2c\u4e09\u4e2a\u53c2\u6570\uff1a\u8f93\u5165\u7c7b\u578b\uff08\u6587\u672c\uff09\n        selection_input = gui.SelectionInputWidget(['apple', 'banana', '\u6a59\u5b50', '\u8349\u8393', '\u69b4\u83b2'], 'apple', 'text')\n        selection_input.oninput.do(lambda emitter, value: label.set_text(\"\u8f93\u5165\u5185\u5bb9\u4e3a: %s\" %value))\n        main_container.append([label, selection_input])\n\n        return main_container\n\n\nif __name__ == \"__main__\":\n    start(MyApp, port=9999)<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"311\" height=\"261\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-17-01-58-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2658 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-17-01-58-\u7684\u5c4f\u5e55\u622a\u56fe.png 311w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-17-01-58-\u7684\u5c4f\u5e55\u622a\u56fe-300x252.png 300w\" data-sizes=\"(max-width: 311px) 100vw, 311px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 311px; --smush-placeholder-aspect-ratio: 311\/261;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"318\" height=\"222\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-17-02-25-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2659 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-17-02-25-\u7684\u5c4f\u5e55\u622a\u56fe.png 318w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-17-02-25-\u7684\u5c4f\u5e55\u622a\u56fe-300x209.png 300w\" data-sizes=\"(max-width: 318px) 100vw, 318px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 318px; --smush-placeholder-aspect-ratio: 318\/222;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u5207\u6362\u6839\u5bb9\u5668\"><span class=\"ez-toc-section\" id=\"%E5%88%87%E6%8D%A2%E6%A0%B9%E5%AE%B9%E5%99%A8\"><\/span>\u5207\u6362\u6839\u5bb9\u5668<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \n    \u4fee\u6539\u9876\u5c42\u5bb9\u5668\n\"\"\"\n\nfrom remi import start, App, gui\nimport os\n\n\nclass MyApp(App):\n    def main(self):\n        lbl = gui.Label(\"\u8fd9\u662f\u9875\u97622 \u70b9\u51fb\u6309\u94ae\u5207\u6362\u5230\u9875\u97621\u3002\", style={'font-size': '20px'})\n        bt2 = gui.Button(\"\u5207\u6362\u5230\u9875\u97621\")\n        page2 = gui.HBox(children=[lbl, bt2], style={'margin': '0px auto', 'background-color': 'lightgray'})\n\n        lbl = gui.Label(\"\u8fd9\u662f\u9875\u97621 \u70b9\u51fb\u6309\u94ae\u5207\u6362\u5230\u9875\u97622\u3002\", style={'font-size': '20px'})\n        bt1 = gui.Button(\"\u5207\u6362\u5230\u9875\u97622\")\n        page1 = gui.VBox(children=[lbl, bt1],\n                         style={'width': '300px', 'height': '200px', 'margin': '0px auto', 'background-color': 'white'})\n\n        bt1.onclick.do(self.call_change_root, page2)\n        bt2.onclick.do(self.call_change_root, page1)\n\n        return page1\n\n    def call_change_root(self, emitter, page_to_be_shown):\n        self.set_root_widget(page_to_be_shown)\n\n\nif __name__ == \"__main__\":\n    start(MyApp, port=9999, start_browser=True)<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-51-\u7684\u5c4f\u5e55\u622a\u56fe-1024x576.png\" alt=\"\" class=\"wp-image-2654 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-51-\u7684\u5c4f\u5e55\u622a\u56fe-1024x576.png 1024w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-51-\u7684\u5c4f\u5e55\u622a\u56fe-300x169.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-51-\u7684\u5c4f\u5e55\u622a\u56fe-768x432.png 768w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-51-\u7684\u5c4f\u5e55\u622a\u56fe-1536x864.png 1536w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-51-\u7684\u5c4f\u5e55\u622a\u56fe.png 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/576;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-56-\u7684\u5c4f\u5e55\u622a\u56fe-1024x576.png\" alt=\"\" class=\"wp-image-2655 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-56-\u7684\u5c4f\u5e55\u622a\u56fe-1024x576.png 1024w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-56-\u7684\u5c4f\u5e55\u622a\u56fe-300x169.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-56-\u7684\u5c4f\u5e55\u622a\u56fe-768x432.png 768w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-56-\u7684\u5c4f\u5e55\u622a\u56fe-1536x864.png 1536w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-16-41-56-\u7684\u5c4f\u5e55\u622a\u56fe.png 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/576;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u591a\u9875\u9762\u5bb9\u5668\"><span class=\"ez-toc-section\" id=\"%E5%A4%9A%E9%A1%B5%E9%9D%A2%E5%AE%B9%E5%99%A8\"><\/span>\u591a\u9875\u9762\u5bb9\u5668<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \n    \u591a\u9875\u9762\u5bb9\u5668\n\"\"\"\n\nfrom remi import start, App, gui\n\n\nclass MyApp(App):\n    def call_bt1_pressed(self, widget, tabbox, refWidgetTab):\n        tabbox.select_by_widget(refWidgetTab)  # \u901a\u8fc7\u6807\u7b7e\u5bf9\u8c61\u9009\u62e9\n\n    def call_bt2_pressed(self, widget, tabbox, refWidgetTabName):\n        tabbox.select_by_name(refWidgetTabName)  # \u901a\u8fc7\u6807\u7b7e\u540d\u5b57\u9009\u62e9\n    \n    def call_bt3_pressed(self, widget, tabbox, tabIndex):\n        tabbox.select_by_index(tabIndex)  # \u901a\u8fc7\u6807\u7b7e\u5e8f\u53f7\u9009\u62e9\n\n    def main(self):\n        tb = gui.TabBox(width='80%')\n\n        b1 = gui.Button('\u5207\u6362\u5230\u7b2c2\u4e2a\u6807\u7b7e', width=200, height=30)\n        tb.append(b1, '\u7b2c\u4e00\u4e2a\u6807\u7b7e')\n\n        b2 = gui.Button('\u5207\u6362\u5230\u7b2c3\u4e2a\u6807\u7b7e', width=200, height=30)\n        tb.add_tab(b2, '\u7b2c\u4e8c\u4e2a\u6807\u7b7e', None)\n\n        b3 = gui.Button('\u5207\u6362\u5230\u7b2c1\u4e2a\u6807\u7b7e', width=200, height=30)\n        tb.add_tab(b3, '\u7b2c\u4e09\u4e2a\u6807\u7b7e', None)\n        \n        b1.onclick.do(self.on_bt1_pressed, tb, b2)\n        b2.onclick.do(self.on_bt2_pressed, tb, '\u7b2c\u4e09\u4e2a\u6807\u7b7e')\n        b3.onclick.do(self.on_bt3_pressed, tb, 0)\n\n        return tb\n\n\nif __name__ == \"__main__\":\n    start(MyApp, title=\"Tab Demo\", standalone=False)\n<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-18-57-32-\u7684\u5c4f\u5e55\u622a\u56fe-1024x576.png\" alt=\"\" class=\"wp-image-2667 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-18-57-32-\u7684\u5c4f\u5e55\u622a\u56fe-1024x576.png 1024w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-18-57-32-\u7684\u5c4f\u5e55\u622a\u56fe-300x169.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-18-57-32-\u7684\u5c4f\u5e55\u622a\u56fe-768x432.png 768w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-18-57-32-\u7684\u5c4f\u5e55\u622a\u56fe-1536x864.png 1536w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-18-57-32-\u7684\u5c4f\u5e55\u622a\u56fe.png 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/576;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u57fa\u4e8e-js-\u68c0\u6d4b\u9875\u9762\u5173\u95ed\u6216\u5237\u65b0\"><span class=\"ez-toc-section\" id=\"%E5%9F%BA%E4%BA%8E_js_%E6%A3%80%E6%B5%8B%E9%A1%B5%E9%9D%A2%E5%85%B3%E9%97%AD%E6%88%96%E5%88%B7%E6%96%B0\"><\/span>\u57fa\u4e8e js \u68c0\u6d4b\u9875\u9762\u5173\u95ed\u6216\u5237\u65b0<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \n    \u57fa\u4e8e js \u68c0\u6d4b\u9875\u9762\u5173\u95ed\n\n    \u539f\u6848\u4f8b\u4ee3\u7801\u662f\uff1a\u5173\u95ed\u9875\u9762\u6216\u8005\u5237\u65b0\u9875\u9762\u5c06\u4f1a\u5173\u95ed\u5ba2\u6237\u7aef\u7a0b\u5e8f\u3002\n    \u8fd9\u91cc\u6211\u6539\u4e3a\u4e86\u4e00\u4e2a\u8ba1\u6570\u663e\u793a\uff0c\u6bcf\u6b21\u64cd\u4f5c\u4f1a\u52a0\u4e00\u3002\n    \u539f\u4ee3\u7801\u89c1\u672b\u5c3e\n\"\"\"\n\nfrom remi import start, App, gui\n\n\ncounter = 0\n\n\nclass MyApp(App):\n    def main(self, name='world'):\n        wid = gui.VBox(width=300, height=200, margin='0px auto')\n\n        lbl = gui.Label(\"\u5173\u95ed\u6216\u8005\u5237\u65b0\u9875\u9762\uff0c\u8ba1\u6570\u4f1a\u52a0\u4e00\")\n        wid.append(lbl)\n\n        self.bt = gui.Button('\u5237\u65b0\u6216\u5173\u95ed\u6b21\u6570\uff1a0')  # \u7528\u4e8e\u663e\u793a\u8ba1\u6570\n        wid.append(self.bt)\n\n        # \u672c\u4eba\u6ca1\u5b66\u8fc7 js\uff0c\u4e0b\u9762\u8c03\u7528 js \u4ee3\u7801\u662f\u6cbf\u7528\u7684\u793a\u4f8b\u7a0b\u5e8f\uff0c\u6211\u4e5f\u4e0d\u61c2\u5177\u4f53\u539f\u7406\n        tag = gui.Tag(_type='script')\n        tag.add_child(\"javascript\", \"\"\"window.onunload=function(e){remi.sendCallback('%s','%s');return \"close?\";};\"\"\" % (\n            str(id(self)), \"call_add\"))\n        wid.add_child(\"onunloadevent\", tag)\n\n        return wid\n\n    def call_add(self):\n        global counter\n        counter = counter + 1\n        self.bt.set_text('\u5237\u65b0\u6216\u5173\u95ed\u6b21\u6570\uff1a{}'.format(counter))\n\n\nif __name__ == \"__main__\":\n    start(MyApp)\n\n\n#\u539f\u4ee3\u7801\u5185\u5bb9\n#import remi.gui as gui\n#from remi import start, App\n\n\n#class MyApp(App):\n#    def main(self, name='world'):\n#        # margin 0px auto allows to center the app to the screen\n#        wid = gui.VBox(width=300, height=200, margin='0px auto')\n\n#        lbl = gui.Label(\"Close or reload the page, the console thread will stop automatically.\")\n#        wid.append(lbl)\n\n#        # add the following 3 lines to your app and the on_window_close method to make the console close automatically\n#        tag = gui.Tag(_type='script')\n#        tag.add_child(\"javascript\", \"\"\"window.onunload=function(e){remi.sendCallback('%s','%s');return \"close?\";};\"\"\" % (\n#            str(id(self)), \"on_window_close\"))\n#        wid.add_child(\"onunloadevent\", tag)\n\n#        # returning the root widget\n#        return wid\n\n#    def on_window_close(self):\n#        # here you can handle the unload\n#        print(\"app closing\")\n#        self.close()\n\n\n#if __name__ == \"__main__\":\n#    start(MyApp)\n#<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"339\" height=\"227\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-33-02-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2652 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-33-02-\u7684\u5c4f\u5e55\u622a\u56fe.png 339w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-13-33-02-\u7684\u5c4f\u5e55\u622a\u56fe-300x201.png 300w\" data-sizes=\"(max-width: 339px) 100vw, 339px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 339px; --smush-placeholder-aspect-ratio: 339\/227;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u7f51\u683c\u5e03\u5c40\"><span class=\"ez-toc-section\" id=\"%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80\"><\/span>\u7f51\u683c\u5e03\u5c40<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \u7f51\u683c\u5e03\u5c40\u5f00\u53d1\u793a\u4f8b\n    \u5411\u7f51\u683c\u5e03\u5c40\u5bb9\u5668\u4e2d\u6dfb\u52a0\u90e8\u4ef6\u5bf9\u8c61\u65f6\u91c7\u7528\u7684\u683c\u5f0f\u662f\u5b57\u5178\uff0ckey \u6620\u5c04\u5230 value \u6240\u4ee3\u8868\u7684\u90e8\u4ef6\u5bf9\u8c61\uff0c\n    \u8bbe\u7f6e\u5e03\u5c40\u65f6\u5728\u4e00\u4e2a\u77e9\u9635\u4e2d\u6307\u5b9a\u4f4d\u7f6e\u653e\u7f6e key\uff0c\u7ed8\u5236\u7528\u6237\u754c\u9762\u65f6\u5219\u662f\u6620\u5c04\u7684\u8fd9\u4e2a\u77e9\u9635\uff0c\n    \u90e8\u4ef6\u7684\u4f4d\u7f6e\u5bf9\u5e94 key \u5728\u8fd9\u4e2a\u77e9\u9635\u4e2d\u7684\u4f4d\u7f6e\u3002\n\"\"\"\n\nfrom remi import start, App, gui\n\n\nclass MyApp(App):\n    def main(self):\n        main_container = gui.GridBox(width='100%', height='100%', style={'margin':'0px auto'})  # \u521b\u5efa\u7f51\u683c\u5e03\u5c40\u5bb9\u5668\n        \n        label = gui.Label('\u8fd9\u662f\u4e00\u4e2a\u6807\u7b7e')\n        label.style['background-color'] = 'lightgreen'\n        \n        button = gui.Button('\u4fee\u6539\u5e03\u5c40', height='100%')\n        button.onclick.do(self.call_redefine_grid, main_container)  # \u540e\u4e00\u4e2a\u53c2\u6570\u662f\u4f20\u7ed9\u56de\u8c03\u51fd\u6570\u7684\n        \n        text = gui.TextInput()\n\n        \"\"\" | \u7528\u4e8e\u5217\u5206\u9694\uff0c\u884c\u4e4b\u95f4\u7a7a\u683c\u5206\u5f00\n            \u540e\u9762\u4e24\u4e2a\u53c2\u6570\u5206\u522b\u4e3a\uff1acolumn_gap \u548c row_gap,\n            \u4ee3\u8868\u90e8\u4ef6\u4e4b\u95f4\u7684\u5217\u95f4\u8ddd\u548c\u884c\u95f4\u8ddd(\u767e\u5206\u6bd4\u4f8b)\n        \"\"\"\n        main_container.set_from_asciiart(\"\"\"\n            |label|button|.|\n            |label|text|text|\n            \"\"\", 10, 10)\n\n        main_container.append({'label':label, 'button':button, 'text':text})  # \u5c06\u90e8\u4ef6\u6dfb\u52a0\u5230\u5bb9\u5668\u4e2d\n\n        return main_container\n    \n    def call_redefine_grid(self, emitter, container):\n        \"\"\" \u91cd\u5b9a\u4e49\u5e03\u5c40\n            emmiter \u6307\u5411\u8c03\u7528\u672c\u51fd\u6570\u7684\u5bf9\u8c61 - \u8fd9\u91cc\u4e3a button\n            container \u4e3a\u8c03\u7528\u672c\u51fd\u6570\u4f20\u5165\u7684\u53c2\u6570 - \u8fd9\u91cc\u662f main\u2014\u2014container\n        \"\"\"\n        # \u548c\u4e0a\u9762\u7684\u5e03\u5c40\u8bbe\u7f6e\u5f62\u5f0f\u4e0d\u540c\uff0c\u8fd9\u4e2a\u5e03\u5c40\u662f\u4e00\u4e2a\u4e8c\u7ef4\u7684\u5217\u8868\n        container.define_grid([\n            ['text','label','button'],\n            ['text','.','.']\n        ])\n        container.style.update({'grid-template-columns':'33% 33% 33%', 'grid-template-rows':'50% 50%'})  # \u884c\u5217\u5c3a\u5bf8\u7684\u6bd4\u4f8b - \u8fd9\u5217 3 \u5217 2 \u884c\u5e73\u5747\u5206\u5e03\u7684\n        container.set_column_gap(\"0%\")  # \u90e8\u4ef6\u5217\u95f4\u8ddd\n        container.set_row_gap(\"0%\")  # \u90e8\u4ef6\u884c\u95f4\u8ddd\n        emitter.set_text(\"\u5df2\u4fee\u6539\u5e03\u5c40\uff01\")\n\n\nif __name__ == \"__main__\":\n    start(MyApp, port=9999, debug=True)<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"584\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-40-\u7684\u5c4f\u5e55\u622a\u56fe-1024x584.png\" alt=\"\" class=\"wp-image-2632 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-40-\u7684\u5c4f\u5e55\u622a\u56fe-1024x584.png 1024w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-40-\u7684\u5c4f\u5e55\u622a\u56fe-300x171.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-40-\u7684\u5c4f\u5e55\u622a\u56fe-768x438.png 768w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-40-\u7684\u5c4f\u5e55\u622a\u56fe-1536x876.png 1536w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-40-\u7684\u5c4f\u5e55\u622a\u56fe.png 1850w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/584;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"584\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-46-\u7684\u5c4f\u5e55\u622a\u56fe-1024x584.png\" alt=\"\" class=\"wp-image-2633 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-46-\u7684\u5c4f\u5e55\u622a\u56fe-1024x584.png 1024w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-46-\u7684\u5c4f\u5e55\u622a\u56fe-300x171.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-46-\u7684\u5c4f\u5e55\u622a\u56fe-768x438.png 768w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-46-\u7684\u5c4f\u5e55\u622a\u56fe-1536x876.png 1536w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-17-20-20-46-\u7684\u5c4f\u5e55\u622a\u56fe.png 1850w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/584;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u6c34\u5e73\u5e03\u5c40\u548c\u5782\u76f4\u5e03\u5c40\"><span class=\"ez-toc-section\" id=\"%E6%B0%B4%E5%B9%B3%E5%B8%83%E5%B1%80%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B8%83%E5%B1%80\"><\/span>\u6c34\u5e73\u5e03\u5c40\u548c\u5782\u76f4\u5e03\u5c40<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \u6c34\u5e73\u5e03\u5c40\u548c\u5782\u76f4\u5e03\u5c40\u7684\u4f7f\u7528\n\"\"\"\n\nfrom cgitb import enable\nimport remi.gui as gui\nfrom remi.gui import *\nfrom remi import start, App\n\n\nclass MyApp(App):\n    def main(self):\n        mainContainer = Container(width=706, height=445, margin='0px auto', style=\"position: relative\")  # \u521b\u5efa\u9876\u5c42\u5bb9\u5668\n        subContainer = HBox(width=630, height=277, style='position: absolute; left: 40px; top: 150px; background-color: #b6b6b6')  # \u6c34\u5e73\u5e03\u5c40\u5bb9\u5668 - \u4e8c\u7ea7\u5bb9\u5668\n        mainContainer.append(subContainer,'subContainer')\n        vbox = VBox(width=300, height=250)  # \u5782\u76f4\u5e03\u5c40\u5bb9\u5668 - \u4e09\u7ea7\u5bb9\u5668\n\n        bt1 = Button('bt1', width=100, height=30)\n        vbox.append(bt1,'bt1')\n        bt3 = Button('bt3', width=100, height=30)\n        vbox.append(bt3,'bt3')\n        bt2 = Button('bt2', width=100, height=30)\n        vbox.append(bt2,'bt2')\n        subContainer.append(vbox,'vbox')\n\n        hbox = HBox(width=300, height=250)  # \u6c34\u5e73\u5e03\u5c40\u5bb9\u5668 - \u4e09\u7ea7\u5bb9\u5668\n        lbl1 = Label('lbl1', width=50, height=50, style='background-color: #ffb509')\n        hbox.append(lbl1,'lbl1')\n        lbl2 = Label('lbl2', width=50, height=50, style='background-color: #40ff2b')\n        hbox.append(lbl2,'lbl2')\n        lbl3 = Label('lbl3', width=50, height=50, style='background-color: #e706ff')\n        hbox.append(lbl3,'lbl3')\n        subContainer.append(hbox,'hbox')\n        \n        # \u4e0b\u62c9\u83dc\u53551 - \u8bbe\u7f6e\u5bb9\u5668\u987a\u65b9\u5411\u5e03\u5c40\n        comboJustifyContent = gui.DropDown.new_from_list(('flex-start','flex-end','center','space-between','space-around'),\n                                    style='left: 160px; position: absolute; top: 60px; width: 148px; height: 30px')\n        mainContainer.append(comboJustifyContent,'comboJustifyContent')\n        lblJustifyContent = Label('\u987a\u5411\u5e03\u5c40', style='left: 40px; position: absolute; top: 60px; width: 100px; height: 30px')\n        mainContainer.append(lblJustifyContent,'lblJustifyContent')\n\n        # \u4e0b\u62c9\u83dc\u53552 - \u8bbe\u7f6e\u5bb9\u5668\u5782\u76f4\u65b9\u5411\u5e03\u5c40\n        comboAlignItems = gui.DropDown.new_from_list(('stretch','center','flex-start','flex-end','baseline'),\n                                    style='left:160px; position:absolute; top:100px; width:152px; height: 30px')\n        mainContainer.append(comboAlignItems,'comboAlignItems')\n        lblAlignItems = Label('\u5782\u76f4\u65b9\u5411\u5e03\u5c40', style='left:40px; position:absolute; top:100px; width:100px; height:30px')\n        mainContainer.append(lblAlignItems,'lblAlignItems')\n\n        # \u6ce8\u518c\u4e0b\u62c9\u83dc\u5355\u70b9\u51fb\u9009\u62e9\u4e8b\u4ef6\n        mainContainer.children['comboJustifyContent'].onchange.do(self.call_change_JustifyContent,vbox,hbox)\n        mainContainer.children['comboAlignItems'].onchange.do(self.call_change_AlignItems,vbox,hbox)\n\n        lblTitle = gui.Label(\"\u4e0b\u9762\u7684\u4f8b\u5b50\u4f1a\u6f14\u793a\u5782\u76f4\u5bb9\u5668\u548c\u6c34\u5e73\u5bb9\u5668\u5e03\u5c40\u7684\u4f7f\u7528\uff0c\u5de6\u53f3\u5206\u522b\u4e3a\u5782\u76f4\u548c\u6c34\u5e73\u5bb9\u5668\u3002\",\n                                    style='position:absolute; left:0px; top:0px')\n        mainContainer.append(lblTitle)\n\n        return mainContainer\n    \n    def call_change_JustifyContent(self,emitter,new_value,vbox,hbox):\n        \"\"\" \u4fee\u6539\u5bb9\u5668\u987a\u5411\u5e03\u5c40\n            \u6bd4\u5982\u5782\u76f4\u5bb9\u5668\u987a\u5411\u5c31\u662f\u5782\u76f4\u65b9\u5411\uff08\u4e0a->\u4e0b\uff09\n            \u6c34\u5e73\u5bb9\u5668\u987a\u5411\u5c31\u662f\u6c34\u5e73\u65b9\u5411\uff08\u5de6->\u53f3\uff09\n\n            \u7b2c\u4e09\u4e2a\u53c2\u6570\u7684\u503c\u4e3a\u4e0b\u62c9\u83dc\u5355\u9009\u4e2d\u7684\u9009\u9879\u503c\n        \"\"\"\n        vbox.style['justify-content'] = new_value\n        hbox.style['justify-content'] = new_value\n\n    def call_change_AlignItems(self,emitter,new_value,vbox,hbox):\n        \"\"\" \u4fee\u6539\u5bb9\u5668\u5782\u76f4\u65b9\u5411\u5e03\u5c40\n        \"\"\"\n        vbox.style['align-items'] = new_value\n        hbox.style['align-items'] = new_value\n\n\nif __name__ == \"__main__\":\n    start(MyApp, address='0.0.0.0', port=9999, multiple_instance=False, enable_file_cache=True, update_interval=0.1, start_browser=True, debug=True)<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"726\" height=\"459\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-09-38-31-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2645 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-09-38-31-\u7684\u5c4f\u5e55\u622a\u56fe.png 726w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-09-38-31-\u7684\u5c4f\u5e55\u622a\u56fe-300x190.png 300w\" data-sizes=\"(max-width: 726px) 100vw, 726px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 726px; --smush-placeholder-aspect-ratio: 726\/459;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"idle-\u65b9\u6cd5\u7684\u4f7f\u7528\"><span class=\"ez-toc-section\" id=\"idle_%E6%96%B9%E6%B3%95%E7%9A%84%E4%BD%BF%E7%94%A8\"><\/span>idle \u65b9\u6cd5\u7684\u4f7f\u7528<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" idle \u65b9\u6cd5\u7684\u4f7f\u7528\n    \u8be5\u65b9\u6cd5\u7531 remi \u5e93\u81ea\u52a8\u5faa\u73af\u6267\u884c\uff0c\u53ef\u6307\u5b9a\u95f4\u9694\u65f6\u95f4\n\"\"\"\n\nimport remi.gui as gui\nfrom remi import start, App\nimport threading\n\n\nclass MyApp(App):\n    def idle(self):\n        \"\"\" \u5b9a\u4e49\u4e86\u8be5\u65b9\u6cd5\u540d\u4f1a\u88ab\u81ea\u52a8\u5faa\u73af\u8c03\u7528\n            \u95f4\u9694\u65f6\u95f4\u7531 start(update_interval=) \u6307\u5b9a\uff0c\u5355\u4f4d\u4e3a\u79d2\uff0c\u8bbe\u7f6e\u4e3a 0 \uff0c\u5219\u4e0d\u4f1a\u8c03\u7528\u672c\u65b9\u6cd5\n        \"\"\"\n        self.lbl.set_text('\u8ba1\u6570:' + str(self.counter))\n\n    def main(self):\n        wid = gui.VBox(width=300, height=200, margin='0px auto')\n        self.lbl = gui.Label('\u8ba1\u6570:', width='80%', height='50%')\n        self.lbl.style['margin'] = 'auto'\n\n        bt = gui.Button('\u505c\u6b62\u8ba1\u6570', width=200, height=30)\n        bt.style['margin'] = 'auto 50px'\n        bt.style['background-color'] = 'red'\n\n        wid.append(self.lbl)\n        wid.append(bt)\n\n        self.thread_alive_flag = True\n        self.counter = 0\n\n        # \u521b\u5efa\u4e00\u4e2a\u7ebf\u7a0b\u6267\u884c\u8ba1\u6570\n        t = threading.Thread(target=self.my_intensive_long_time_algorithm)\n        t.start()\n\n        bt.onclick.do(self.on_button_pressed)\n\n        return wid\n\n    def my_intensive_long_time_algorithm(self):\n        while self.thread_alive_flag:\n            self.counter = self.counter + 1\n\n    def on_button_pressed(self, emitter):\n        self.thread_alive_flag = False\n\n\nif __name__ == \"__main__\":\n    start(MyApp, debug=True, port=9999, update_interval=0.1)<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"314\" height=\"229\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-20-35-14-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2671 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-20-35-14-\u7684\u5c4f\u5e55\u622a\u56fe.png 314w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-20-35-14-\u7684\u5c4f\u5e55\u622a\u56fe-300x219.png 300w\" data-sizes=\"(max-width: 314px) 100vw, 314px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 314px; --smush-placeholder-aspect-ratio: 314\/229;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u50cf\u521b\u5efa\u7ebf\u7a0b\u4e00\u6837\u521b\u5efa\u670d\u52a1\"><span class=\"ez-toc-section\" id=\"%E5%83%8F%E5%88%9B%E5%BB%BA%E7%BA%BF%E7%A8%8B%E4%B8%80%E6%A0%B7%E5%88%9B%E5%BB%BA%E6%9C%8D%E5%8A%A1\"><\/span>\u50cf\u521b\u5efa\u7ebf\u7a0b\u4e00\u6837\u521b\u5efa\u670d\u52a1<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\"\n    \u8fd9\u4e2a\u6848\u4f8b\u6f14\u793a\u50cf\u7ebf\u7a0b\u4e00\u6837\u542f\u52a8\u5e94\u7528\uff0c\n    \u542f\u52a8\u5e94\u7528\u540e\uff0c\u4e0d\u4f1a\u963b\u585e\u4e3b\u7ebf\u7a0b\uff0c\u4e3b\u7ebf\u7a0b\u80fd\u7ee7\u7eed\u72ec\u7acb\u7684\u6267\u884c\u5176\u5b83\u4efb\u52a1\u3002\n\"\"\"\n\nfrom remi import App, Server, gui\nimport time\n\n\n# \u7528\u4e8e\u50a8\u5b58 App \u5b9e\u4f8b\u5bf9\u8c61\nglobal_app_instance = None \n\nclass MyApp(App):\n    label = None\n\n    def main(self):\n        global global_app_instance\n        global_app_instance = self\n\n        main_container = gui.VBox(width=300, height=200, style={'margin': '0px auto'})\n        self.label = gui.Label(\"\u6807\u7b7e\")\n\n        main_container.append(self.label)\n\n        return main_container\n\n\nif __name__ == \"__main__\":\n    # \u521b\u5efa\u4e00\u4e2a start=False \u7684\u670d\u52a1\uff0c\u518d\u624b\u52a8\u8fd0\u884c\n    server = Server(MyApp, start=False, port=9999, start_browser=False, multiple_instance=False)\n    server.start()  # \u542f\u52a8\u670d\u52a1\n\n    index = 0\n    # \u4e3b\u7ebf\u7a0b\u6267\u884c\u5faa\u73af\n    while True:\n        if not global_app_instance is None:  # \u786e\u8ba4 App \u5b9e\u4f8b\u5df2\u7ecf\u521b\u5efa\n            with global_app_instance.update_lock:  # \u7ebf\u7a0b\u540c\u6b65\n                global_app_instance.label.set_text(\"%s\" %index)\n                index = index + 1\n        time.sleep(1)<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"322\" height=\"216\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-22-48-06-\u7684\u5c4f\u5e55\u622a\u56fe.png\" alt=\"\" class=\"wp-image-2672 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-22-48-06-\u7684\u5c4f\u5e55\u622a\u56fe.png 322w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-22-48-06-\u7684\u5c4f\u5e55\u622a\u56fe-300x201.png 300w\" data-sizes=\"(max-width: 322px) 100vw, 322px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 322px; --smush-placeholder-aspect-ratio: 322\/216;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"api-\u63a5\u53e3\"><span class=\"ez-toc-section\" id=\"API_%E6%8E%A5%E5%8F%A3\"><\/span>API \u63a5\u53e3<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http:\/\/www.apache.org\/licenses\/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n\"\"\"\n\n\"\"\" \n    \u521b\u5efa API \u63a5\u53e3\n\"\"\"\n\nfrom remi import start, App, gui\n\n\nclass RemoteLabel(gui.Label):\n    def api_set_label(self, value1, value2):\n        \"\"\"\n            \u65b9\u6cd5\u540d\u5bf9\u5e94 API \u94fe\u63a5 http:\/\/127.0.0.1:9999\/label\/api_set_label?\n            \u53c2\u6570 value1 \u548c value2 \u5bf9\u5e94\u94fe\u63a5 value1= &amp; value2= \u4f20\u5165\u7684\u503c\n        \"\"\"\n        self.set_text('value1: %s - value2: %s' % (value1, value2))\n        headers = {'Content-type': 'text\/plain'}\n        return ['OK', headers]\n\n\nclass MyApp(App):\n    def main(self):\n        wid = gui.VBox()\n\n        # {'id': 'label'} \u5bf9\u5e94\u5230 API \u94fe\u63a5\u4e2d http:\/\/127.0.0.1:9999\/label\n        self.lbl = RemoteLabel(\n            '\u8bf7\u53e6\u5916\u65b0\u5efa\u4e00\u4e2a\u7f51\u9875\u6807\u7b7e\u6253\u5f00\u94fe\u63a5\u8bf7\u6c42\u8bbf\u95ee API\uff08\u4f20\u5165\u8bf7\u6c42\u4e3a value1 \u548c value2 \u7684\u503c\uff09: http:\/\/127.0.0.1:9999\/label\/api_set_label?value1=text1&amp;value2=text2',\n            width='80%', height='50%', attributes={'id': 'label'})  \n        self.lbl.style['margin'] = 'auto'\n\n        wid.append(self.lbl)\n\n        return wid\n\n\nif __name__ == \"__main__\":\n    start(MyApp, debug=True, port=9999)<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"339\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-23-36-56-\u7684\u5c4f\u5e55\u622a\u56fe-1024x339.png\" alt=\"\" class=\"wp-image-2674 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-23-36-56-\u7684\u5c4f\u5e55\u622a\u56fe-1024x339.png 1024w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-23-36-56-\u7684\u5c4f\u5e55\u622a\u56fe-300x99.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-23-36-56-\u7684\u5c4f\u5e55\u622a\u56fe-768x254.png 768w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/2022-01-18-23-36-56-\u7684\u5c4f\u5e55\u622a\u56fe.png 1051w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/339;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u6444\u50cf\u5934\u9884\u89c8\"><span class=\"ez-toc-section\" id=\"%E6%91%84%E5%83%8F%E5%A4%B4%E9%A2%84%E8%A7%88\"><\/span>\u6444\u50cf\u5934\u9884\u89c8<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u5b98\u65b9\u7684\u6848\u4f8b\u4e2d\u6709\u63d0\u4f9b\u4e00\u4e2a\u6444\u50cf\u5934\u9884\u89c8\u7684\u7a0b\u5e8f\uff0c\u6211\u770b\u4e86\u4e00\u4e0b\uff0c\u4e3b\u8981\u529f\u80fd\u90fd\u662f\u8c03\u7528 js \u5b9e\u73b0\u7684\uff0c\u6211\u6ca1\u5b66\u8fc7 js\uff0c\u6682\u65f6\u4e5f\u770b\u4e0d\u660e\u767d\u3002\u8f6c\u800c\u81ea\u5df1\u5199\u4e86\u4e00\u4e2a\uff0c\u57fa\u4e8e OpenCV \u83b7\u53d6\u6444\u50cf\u5934\u89c6\u9891\u6d41\uff0c\u6570\u636e\u5904\u7406\u540e\u518d\u4f20\u7ed9 remi \u521b\u5efa\u670d\u52a1\u5668\uff0c\u5b9e\u73b0\u6d4f\u89c8\u5668\u9875\u9762\u5b9e\u65f6\u9884\u89c8\uff0c\u652f\u6301\u5bf9 cv \u56fe\u50cf\u4fee\u6539\u518d\u663e\u793a\u5230\u7f51\u9875\u4e0a\uff08\u4f5c\u4e3a\u793a\u4f8b\u6211\u6dfb\u52a0\u4e86\u4e00\u4e2a\u5e27\u7387\u663e\u793a\uff09\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"\"\"\nCopyright (C) 2022 IYATT-yx iyatt@iyatt.com\nEveryone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.\nThis program is free software: you can redistribute it and\/or modify\nit under the terms of the GNU Affero General Public License as published\nby the Free Software Foundation, either version 3 of the License, or\n(at your option) any later version.\nThis program is distributed in the hope that it will be useful,\nbut WITHOUT ANY WARRANTY; without even the implied warranty of\nMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\nGNU Affero General Public License for more details.\nYou should have received a copy of the GNU Affero General Public License\nalong with this program.  If not, see &lt;https:\/\/www.gnu.org\/licenses\/>.\n\"\"\"\n\n\"\"\"\n    \u6444\u50cf\u5934\u9884\u89c8\n    \u901a\u8fc7 OpenCV \u83b7\u53d6\u89c6\u9891\u6d41\uff0c\u6570\u636e\u7ecf\u8fc7\u5904\u7406\u540e\u4f20\u7ed9 remi \u521b\u5efa\u7f51\u9875\u5b9e\u65f6\u9884\u89c8\n    \u53ef\u770b\u4f5c\u4e00\u4e2a\u7b80\u6613\u7684\u76d1\u63a7\u7a0b\u5e8f\uff0c\u5982\u679c\u90e8\u7f72\u5230\u516c\u7f51\uff0c\u5219\u968f\u65f6\u53ef\u8bbf\u95ee\u6444\u50cf\u5934\uff0cremi \u4e5f\u652f\u6301\u6dfb\u52a0\u8bbf\u95ee\u8d26\u6237\u5bc6\u7801\u3002\n\"\"\"\n\nimport cv2\nfrom remi import gui, start, App\nimport base64\n\n\n\"\"\"\n    \u5728\u56fe\u50cf\u5904\u7406\u65b9\u6cd5\u4e2d\u6dfb\u52a0\u5e27\u7387\n\"\"\"\nlast = cv2.getTickCount()  # \u542f\u52a8\u65f6\u95f4\nfrequency = cv2.getTickFrequency()  # CPU \u9891\u7387\n\ndef img_process(img):\n    \"\"\" \u56fe\u50cf\u5904\u7406\n        \u53ef\u5728\u8fd9\u91cc\u5bf9 OpenCV \u56fe\u50cf\u8fdb\u884c\u4fee\u6539\uff0c\u56fe\u50cf\u7c7b\u578b\u4e3a np.array()\n    \"\"\"\n    \n    ############################### \u5e27\u7387\n    global last\n    now = cv2.getTickCount()\n    fps = int(frequency \/ (now - last))\n    cv2.putText(img, 'Fps:' + str(fps), (30, 30), cv2.FONT_HERSHEY_COMPLEX, 1, (0, 0, 255))\n    last = now\n    ###############################\n\n    return img\n\n\ndef cv_img_to_base64(cv_img):\n    \"\"\"\n        OpenCV \u7684\u56fe\u50cf\u8f6c\u4e3a base64\n    \"\"\"\n    img = img_process(cv_img)\n    img = cv2.imencode('.jpg', img)[1]\n    img = 'data:image\/png;base64,' + str(base64.b64encode(img))[2:-1:]\n    return img\n\n\nclass MyAPP(App):\n    def idle(self):\n        ret, self.frame = self.cam.read()\n        self.frame = cv_img_to_base64(self.frame)\n        self.img.set_image(self.frame)\n\n    def main(self):\n        self.cam = cv2.VideoCapture(0)\n        ret, self.frame = self.cam.read()\n        self.frame = cv_img_to_base64(self.frame)\n\n        root = gui.VBox()\n        self.img = gui.Image(self.frame)\n        root.append(self.img)\n        return root\n\n\nif __name__ == '__main__':\n    start(MyAPP, port=9999, update_interval=0.01, start_browser=True, debug=True)  # update_interval \u7684\u503c\u5f71\u54cd idle \u6267\u884c\u7684\u9891\u7387\uff0c\u95f4\u63a5\u5f71\u54cd\u56fe\u50cf\u5e27\u7387<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"514\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/image-82-1024x514.png\" alt=\"\" class=\"wp-image-3040 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/image-82-1024x514.png 1024w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/image-82-300x151.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/image-82-768x385.png 768w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/01\/image-82.png 1357w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/514;\" \/><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">'''\nCopyright (C) 2022 IYATT-yx iyatt@iyatt.com\nEveryone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.\nThis program is free software: you can redistribute it and\/or modify\nit under the terms of the GNU Affero General Public License as published\nby the Free Software Foundation, either version 3 of the License, or\n(at your option) any later version.\nThis program is distributed in the hope that it will be useful,\nbut WITHOUT ANY WARRANTY; without even the implied warranty of\nMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\nGNU Affero General Public License for more details.\nYou should have received a copy of the GNU Affero General Public License\nalong with this program.  If not, see &lt;https:\/\/www.gnu.org\/licenses\/>.\n'''\n\n'''\nUbuntu  20.04 x86_64\nPython  3.9.10\nOpenCV  4.5.5\nremi    2021.3.2\n'''\n\nimport cv2\nfrom remi import start, App, gui\nimport os\nimport base64\nimport time\n\n\ndef cv_img_to_base64(cv_img):\n    \"\"\" OpenCV \u7684\u56fe\u50cf\u8f6c\u4e3a base64\n        Web \u9875\u9762\u663e\u793a\u56fe\u50cf\u9700\u8981\u683c\u5f0f\u4e3a base64\n    \"\"\"\n    img = cv2.imencode('.jpg', cv_img)[1]\n    img = 'data:image\/png;base64,' + str(base64.b64encode(img))[2:-1:]\n    return img\n\n\nclass Main(App):\n    def idle(self):\n        ''' remi \u5185\u7f6e\u81ea\u52a8\u5faa\u73af\u65b9\u6cd5\n        '''\n        ret, bgr_img = self.cap.read()\n        if not ret:\n            return\n        base64_img = cv_img_to_base64(bgr_img)\n        self.video_show.set_image(base64_img)\n\n    def switch_camera(self, emitter, option):\n        ''' \u5207\u6362\u6444\u50cf\u5934\n        '''\n        self.cap.release()\n        self.cap = cv2.VideoCapture(option)\n        self.video_width = self.cap.get(cv2.CAP_PROP_FRAME_WIDTH)\n        self.video_height = self.cap.get(cv2.CAP_PROP_XI_HEIGHT)\n        self.video_show.set_size(self.video_width, self.video_height)  # \u91cd\u65b0\u8bbe\u7f6e\u89c6\u9891\u7a97\u53e3\u5927\u5c0f\n\n    def setup_page(self, emitter):\n        ''' \u8bbe\u7f6e\u9875\u9762\n        '''\n        ###############################\n        # \u8bfb\u53d6\u914d\u7f6e\u4fe1\u606f\u6587\u4ef6\n        ###############################\n        setup = cv2.FileStorage(setup_file_path, cv2.FileStorage_READ)\n        port = int(setup.getNode('port').real())\n        setup.release()\n        \n        ##############################\n        # \u521b\u5efa\u8bbe\u7f6e\u9875\u9762\n        ##############################\n        page = gui.GenericDialog('\u8bbe\u7f6e', width=800)\n        port_label = gui.Label('\u7aef\u53e3')\n        page.append(port_label)\n        self.port_input = gui.Input(input_type='int', default_value=port)\n        page.append(self.port_input)\n        page.confirm_dialog.do(self.setup_confirm)\n        page.show(self)\n\n    def setup_confirm(self, emitter):\n        ''' \u4fdd\u5b58\u8bbe\u7f6e\n        '''\n        setup = cv2.FileStorage(setup_file_path, cv2.FileStorage_WRITE)\n        port = int(self.port_input.get_value())\n        setup.write('port', port)\n        setup.release()\n\n    def main(self):\n        ############################################################################\n        # \u68c0\u67e5\u6444\u50cf\u5934\u8bbe\u5907\n        # \u63a5\u5165 1 \u4e2a\u6444\u50cf\u5934\u65f6\u4f1a\u6709 \/dev\/video0 \u548c \/dev\/video1 \u4e24\u4e2a\u6587\u4ef6\n        # \u63a5\u5165\u7b2c 2 \u4e2a\u6444\u50cf\u5934\u65f6\u4f1a\u6709 \/dev\/video2 \u548c \/dev\/video3 \u4e24\u4e2a\u6587\u4ef6\n        # \u5176\u4e2d\u5076\u6570\u8bbe\u5907\u662f\u53ef\u4ee5\u8bfb\u53d6\u89c6\u9891\u6d41\u7684\n        # \u6ce8\uff1a\u5177\u4f53\u6211\u4e5f\u4e0d\u6e05\u695a\u4e3a\u5565\uff0c\u53cd\u6b63\u53ea\u77e5\u9053\u4e00\u4e2a\u6444\u50cf\u5934\u4f1a\u6709\u4e24\u4e2a\u8bbe\u5907\u6587\u4ef6\uff0c\u53ea\u6709\u7b2c\u4e00\u4e2a\u53ef\u4ee5\u8bfb\u53d6\n        #############################################################################\n        camera_devices = []\n        for i in range(0, 20, 2):\n            if os.path.exists('\/dev\/video{}'.format(i)):\n                camera_devices.append(i)\n\n        if len(camera_devices) == 0:\n            print('\u8bf7\u63d2\u5165\u6444\u50cf\u5934\u540e\u91cd\u65b0\u8fd0\u884c\u672c\u7a0b\u5e8f\uff01')\n            self.on_close()\n\n        self.cap = cv2.VideoCapture(camera_devices[0])\n        if not self.cap.isOpened():\n            print('\u6253\u5f00\u6444\u50cf\u5934\u8bbe\u5907\u5931\u8d25')\n            self.on_close()\n\n        self.video_width = self.cap.get(cv2.CAP_PROP_FRAME_WIDTH)\n        self.video_height = self.cap.get(cv2.CAP_PROP_XI_HEIGHT)\n\n        #############\n        # \u7a97\u53e3\u754c\u9762\n        #############\n        root = gui.VBox()  # \u9876\u5c42\u5bb9\u5668\n        self.video_show = gui.Image(width=self.video_width, height=self.video_height)  # \u89c6\u9891\u7a97\u53e3\n        root.append(self.video_show)\n\n        row2 = gui.HBox()\n        root.append(row2)\n        for i in camera_devices:  # \u76f8\u673a\u9009\u9879\u6309\u94ae\n            switch_camera_btn = gui.Button('\u76f8\u673a{}'.format(i), width=60, height=30)\n            switch_camera_btn.onclick.do(self.switch_camera, i)\n            row2.append(switch_camera_btn)\n\n        row3 = gui.HBox()\n        root.append(row3)\n        setup_btn = gui.Button('\u8bbe\u7f6e', width=60, height=30) # \u8bbe\u7f6e\u6309\u94ae\n        row3.append(setup_btn)\n        setup_btn.onclick.do(self.setup_page)\n\n        return root\n\n\nif __name__ == '__main__':\n    abs_path = os.path.dirname(os.path.abspath(__file__))  # \u7a0b\u5e8f\u7edd\u5bf9\u8def\u5f84\n    setup_file_path = os.sep.join([abs_path,'setup.xml'])  # \u8bbe\u7f6e\u6587\u4ef6\u8def\u5f84\n    \n    #####################################################\n    # \u521d\u59cb\u8bbe\u7f6e\n    # \u9996\u6b21\u8fd0\u884c\u4f1a\u521b\u5efa\u8bbe\u7f6e\u4fe1\u606f\u6587\u4ef6\n    # \u5982\u679c\u9700\u8981\u91cd\u7f6e\uff0c\u53ef\u4ee5\u5220\u9664 setup.xml\uff0c\u518d\u6b21\u8fd0\u884c\u4f1a\u91cd\u65b0\u521b\u5efa    \n    #####################################################\n    if not os.path.exists(setup_file_path):\n        setup = cv2.FileStorage(setup_file_path, cv2.FileStorage_WRITE)\n        setup.write('port', 8080)  # \u7aef\u53e3\u53f7\n        setup.release()\n\n    ###################\n    # \u8bfb\u53d6\u8bbe\u7f6e\u4fe1\u606f\u6587\u4ef6\n    ###################\n    setup = cv2.FileStorage(setup_file_path, cv2.FileStorage_READ)\n    port = int(setup.getNode('port').real())\n    setup.release()\n\n    start(  # \u542f\u52a8\u670d\u52a1\n        Main,\n        address='0.0.0.0',\n        port=port,\n        title='\u76d1\u63a7',\n        update_interval=0.01,\n        debug=False\n    )<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"727\" height=\"631\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/03\/image-307.png\" alt=\"\" class=\"wp-image-4241 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/03\/image-307.png 727w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/03\/image-307-300x260.png 300w\" data-sizes=\"(max-width: 727px) 100vw, 727px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 727px; --smush-placeholder-aspect-ratio: 727\/631;\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u62d6\u653e\u5f0f-gui-\u7f16\u8f91\u5668\"><span class=\"ez-toc-section\" id=\"%E6%8B%96%E6%94%BE%E5%BC%8F_GUI_%E7%BC%96%E8%BE%91%E5%99%A8\"><\/span>\u62d6\u653e\u5f0f GUI \u7f16\u8f91\u5668<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u7a0b\u5e8f\u7b80\u5355\u7684\u65f6\u5019\u4ee3\u7801\u8fd8\u597d\u5199\uff0c\u4f46\u662f\u6d89\u53ca\u5230\u590d\u6742\u7684\u7a0b\u5e8f\u65f6\u5c31\u5341\u5206\u607c\u706b\u3002remi \u4e5f\u63d0\u4f9b\u4e86\u62d6\u653e\u5f0f\u7f16\u8f91\u5668\uff0c\u8def\u5f84\u4f4d\u4e8e <a href=\"https:\/\/github.com\/dddomodossola\/remi\/tree\/master\/editor\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/dddomodossola\/remi\/tree\/master\/editor<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"584\" data-src=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/02\/2022-02-14-11-18-41-\u7684\u5c4f\u5e55\u622a\u56fe-1024x584.png\" alt=\"\" class=\"wp-image-3187 lazyload\" data-srcset=\"https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/02\/2022-02-14-11-18-41-\u7684\u5c4f\u5e55\u622a\u56fe-1024x584.png 1024w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/02\/2022-02-14-11-18-41-\u7684\u5c4f\u5e55\u622a\u56fe-300x171.png 300w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/02\/2022-02-14-11-18-41-\u7684\u5c4f\u5e55\u622a\u56fe-768x438.png 768w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/02\/2022-02-14-11-18-41-\u7684\u5c4f\u5e55\u622a\u56fe-1536x876.png 1536w, https:\/\/blog.iyatt.com\/wp-content\/uploads\/2022\/02\/2022-02-14-11-18-41-\u7684\u5c4f\u5e55\u622a\u56fe.png 1850w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/584;\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u6d4b\u8bd5\u73af\u5883 Ubuntu 20.04 x86_64 Windows 11 \u4e13\u4e1a\u5de5\u4f5c\u7ad9\u7248 21H2 \u2014\u2014\u2014\u2014\u2014\u2014\u2014 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"zakra_page_container_layout":"customizer","zakra_page_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":"","zakra_menu_item_hover_color":"","zakra_menu_item_active_color":"","zakra_menu_active_style":"","zakra_page_header":true,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-2559","post","type-post","status-publish","format-standard","hentry","category-all"],"modified_by":"IYATT-yx","_links":{"self":[{"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=\/wp\/v2\/posts\/2559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2559"}],"version-history":[{"count":0,"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=\/wp\/v2\/posts\/2559\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.iyatt.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}