{"id":346750,"date":"2023-03-15T03:00:39","date_gmt":"2023-03-15T03:00:39","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=346750"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=346750","title":{"rendered":"<span>\u041f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a eframe (egui)<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u0437\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435. \u041d\u0438\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f <a href=\"https:\/\/en.wikipedia.org\/wiki\/Progressive_web_app\" rel=\"noopener noreferrer nofollow\">PWA<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u0430\u043a \u0438 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0441 \u041e\u0421 Windows. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f Rust \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a eframe (<a href=\"https:\/\/github.com\/emilk\/egui#quick-start\" rel=\"noopener noreferrer nofollow\">egui<\/a>). \u0413\u043e\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u041e\u0421 Windows, \u0438 \u043a\u0430\u043a \u0444\u0430\u0439\u043b Webassembly. \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c GitHub Action \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f (\u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Webassembly) \u043a\u0430\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 (GitHub Pages).<\/p>\n<figure class=\"bordered full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/72d\/d5d\/5be\/72dd5d5be08f0220faf17fb7cf54d7be.png\" width=\"1141\" height=\"998\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/72d\/d5d\/5be\/72dd5d5be08f0220faf17fb7cf54d7be.png\"\/><\/figure>\n<details class=\"spoiler\">\n<summary>\u041c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u0430\u0432\u0442\u043e\u0440\u0430<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043e\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0440\u0435\u043c\u044f, \u0438\u043d\u043e\u0433\u0434\u0430, \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0442\u0435\u043c, \u0447\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u044e \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0440\u0430\u0437\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0438\u0445 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f, \u0432 \u043c\u043e\u0439 \u0444\u043e\u043a\u0443\u0441 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u043e\u043f\u0430\u043b \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f Rust. \u0418 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044f \u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 RUST, \u044f \u043f\u043e\u0434\u043e\u0448\u0435\u043b \u043a \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.  \u041d\u0443\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044f \u0431\u044b\u043b \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0434\u0438\u0432\u043b\u0435\u043d. \u0423\u0434\u0438\u0432\u043b\u0435\u043d \u043a\u0430\u043a \u0432 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043a\u043b\u044e\u0447\u0435, \u0442\u0430\u043a \u0438 \u0432 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c.<\/p>\n<p>\u0427\u0442\u043e \u043f\u043e\u0440\u0430\u0434\u043e\u0432\u0430\u043b\u043e:<\/p>\n<ul>\n<li>\n<p>\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043e\u0447\u0435\u043d\u044c <a href=\"https:\/\/www.areweguiyet.com\/\" rel=\"noopener noreferrer nofollow\">\u043c\u043d\u043e\u0433\u043e<\/a> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f GUI, \u043a\u0430\u043a \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 rust, \u0442\u0430\u043a \u0438 \u043e\u0431\u0435\u0440\u0442\u043e\u043a \u0432\u043e\u043a\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u044f\u0437\u044b\u043a\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p>\u043c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" rel=\"noopener noreferrer nofollow\">WASM<\/a>\u00a0\u0438 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e \u0440\u0430\u0441\u0441\u0442\u0440\u043e\u0438\u043b\u043e:<\/p>\n<ul>\n<li>\n<p>\u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f GUI \u0438 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u0447\u0442\u043e \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u044b \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043d\u043e\u0441\u044f\u0442 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440 (\u043f\u0440\u0438\u043c\u0435\u0440 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442 <a href=\"https:\/\/github.com\/linebender\/druid\" rel=\"noopener noreferrer nofollow\">Druid<\/a>, \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0442\u0438\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u043d\u0438\u043c \u0438 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043b\u0430\u0441\u044c \u043d\u0430\u0434 \u043d\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c <a href=\"https:\/\/github.com\/linebender\/xilem\" rel=\"noopener noreferrer nofollow\">Xilem<\/a>). \u0414\u0430, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0442\u043e\u0436\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u0435\u043d.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0430\u043c\u043e\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u043b\u043e \u043c\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 &#8212; \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" rel=\"noopener noreferrer nofollow\">WASM<\/a>\u00a0\u0438 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. &#171;\u0422\u0440\u0435\u043d\u0434 \u0437\u0430\u0432\u0442\u0440\u0430\u0448\u043d\u0435\u0433\u043e \u0438\u043b\u0438 \u0432\u0447\u0435\u0440\u0430\u0448\u043d\u0435\u0433\u043e \u0434\u043d\u044f&#187; &#8212; \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u044f, \u0442\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u044d\u0442\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 (\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043b\u0443\u043a\u0430\u0432\u043b\u044e, \u0442\u0430\u043a \u043a\u0430\u043a \u0433\u043e\u0434 \u0438\u043b\u0438 \u0434\u0432\u0430 \u043d\u0430\u0437\u0430\u0434 \u044f \u0442\u0440\u043e\u0433\u0430\u043b rust + <a href=\"https:\/\/github.com\/yewstack\/yew\" rel=\"noopener noreferrer nofollow\">Yew<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0433\u0440\u0443 <a href=\"https:\/\/mae664128.github.io\/sea_battle\/\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0440\u0441\u043a\u043e\u0439 \u0431\u043e\u0439<\/a> \u043d\u0430 Webassembly).<\/p>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e, \u043c\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 <a href=\"https:\/\/github.com\/emilk\/egui#quick-start\" rel=\"noopener noreferrer nofollow\">EGUI<\/a>.  \u041d\u0435\u0442 \u043d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044f \u043f\u0440\u043e\u0432\u0435\u043b \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0443, \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u043b \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044f \u043a\u0443\u043f\u0438\u043b\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u0442 <a href=\"https:\/\/www.egui.rs\/#demo\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u043c\u0435\u0440<\/a>.<\/p>\n<\/div>\n<\/details>\n<h3>\u041f\u043b\u0430\u043d \u0440\u0430\u0431\u043e\u0442<\/h3>\n<ol>\n<li>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 (\u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c).<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c github actions, \u0447\u0442\u043e\u0431\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u0435\u0448\u0430\u0442\u0435\u043b\u044c \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<\/li>\n<\/ol>\n<h3>\u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443<\/h3>\n<p>\u041f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044e \u0432\u0441\u0435\u0445 \u0440\u0430\u0431\u043e\u0442 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u0432\u0438\u0434\u0435 web \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (PWA) \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u041e\u0421 Windows.<\/p>\n<p><em>\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440?<\/em><br \/><em>\u0421\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e \u043e\u0431 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0441\u043a\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438, \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435. \u0418 \u0440\u0430\u0437, \u0445\u0443\u0434\u043e-\u0431\u0435\u0434\u043d\u043e, 2 + 2 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u044f \u0443\u0436\u0435 \u0443\u043c\u0435\u044e, \u0442\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430 \u0442\u0443\u0436\u0435 \u0442\u0435\u043c\u0443.<\/em><\/p>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0433\u043b\u0430\u0432\u043d\u043e\u043c &#8212; \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u0438 \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c (\u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e) CI\/CD \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c GitHub Action \u0438 GitHub Pages.<\/p>\n<h3>1 \u041f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d<\/h3>\n<h4>1.1 \u0418\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h4>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/8bf53a4d8ea85a83fc8b533a464e70e746027d8e\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d rust.<\/p>\n<pre><code class=\"bash\">$ rustup --version rustup 1.25.2 (17db695f1 2023-02-01) info: This is the version for the rustup toolchain manager, not the rustc compiler. info: The currently active `rustc` version is `rustc 1.67.1 (d5a82bbd2 2023-02-07)`<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>cargo new &lt;\u0438\u043c\u044f-\u043f\u0440\u043e\u0435\u043a\u0442\u0430><\/code>:<\/p>\n<pre><code class=\"bash\">$ cargo new calculator-wasm-rust-pwa --bin      Created binary (application) `calculator-wasm-rust-pwa` package<\/code><\/pre>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b, \u0430 \u043d\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043a\u043b\u044e\u0447 <code>--bin<\/code>.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0449\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0444\u0430\u0439\u043b <code>src\/lib.rs<\/code>:<\/p>\n<pre><code class=\"bash\">$ touch calculator-wasm-rust-pwa\/src\/lib.rs<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e Cargo \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u0434\u043b\u044f \u043d\u0430\u0441:<\/p>\n<pre><code class=\"bash\">$ cd calculator-wasm-rust-pwa\/ $ tree . H:. \u2502   .gitignore \u2502   Cargo.toml \u2514\u2500\u2500\u2500src\\         main.rs<\/code><\/pre>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>Cargo.toml<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u0432\u0441\u0435\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 (\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439) \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u043f\u0430\u043f\u043a\u0435 <code>src\\<\/code> \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434.<\/p>\n<h4>1.2 \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442<\/h4>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/4c8b9a8bccfd7f1d63fe82b6a753aa2e346b98b3\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448 \u0432\u044b\u0431\u043e\u0440 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u043d\u0430 <a href=\"https:\/\/github.com\/emilk\/egui#quick-start\" rel=\"noopener noreferrer nofollow\">EGUI<\/a> \u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f &#171;\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430&#187; \u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c <code>eframe<\/code> &#8212; \u044d\u0442\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c egui.<\/p>\n<pre><code class=\"bash\">$ cargo add eframe --no-default-features -F default_fonts -F glow -F persistence<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e eframe:<br \/> &#8212; <code>default_fonts<\/code> &#8212; \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0448\u0440\u0438\u0444\u0442\u044b egui \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<br \/> &#8212; <code>glow<\/code> &#8212; \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c egui, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c glow \u043a\u0430\u043a \u0431\u044d\u043a\u044d\u043d\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430: &#171;wgpu&#187;.<br \/> &#8212; <code>persistence<\/code> &#8212; \u041f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u043e\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 Cargo.toml:<\/p>\n<pre><code># .\/Cargo.toml  [package]   version = \"0.1.0\"   name = \"calculator-wasm-rust-pwa\"   description = \"A simple calculator created to demonstrate how to work with web gui on rust.\"   authors = [\"Matkin Alexandr &lt;mae664128@gmail.com>\"]   edition = \"2021\"   rust-version = \"1.67.1\"      [dependencies]   eframe = { version = \"0.21.3\", default-features = false, features = [\"default_fonts\", \"glow\", \"persistence\"] }        [profile.release]   opt-level = 2 # fast and small wasm   codegen-units = 1   lto = true   panic = \"abort\"      # Optimize all dependencies even in debug builds:   [profile.dev.package.\"*\"]   opt-level = 2<\/code><\/pre>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u044b\u0442\u044c \u0443 \u0432\u0430\u0441. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435 \u043d\u0430 \u0447\u0442\u043e \u043e\u043d\u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u0438 \u043d\u0443\u0436\u043d\u044b \u043b\u0438 \u043e\u043d\u0438 \u0432\u0430\u043c, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u043e\u0431 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0432 <a href=\"https:\/\/doc.rust-lang.org\/cargo\/reference\/manifest.html\" rel=\"noopener noreferrer nofollow\">The Manifest Format &#8212; The Cargo Book<\/a>.<\/p>\n<h4>1.3 \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h4>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/f6fdca36a5da55466f64047f7f7c7b82c5a6f298\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p>\u041f\u043e\u043b\u044c\u0437\u0443\u044f\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0438\u0437 <a href=\"https:\/\/docs.rs\/eframe\/latest\/eframe\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 eframe<\/a>, \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u0435\u0433\u043e, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0441 \u043d\u0430\u0448\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b <code>.\/src\/main.rs<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs #![cfg_attr(not(debug_assertions), windows_subsystem = \"windows\")] \/\/ hide console window on Windows in release  use eframe::egui;      fn main() -> eframe::Result&lt;()>  {       eframe::run_native(           \"calculator-wasm-rust-pwa\",           eframe::NativeOptions::default(),           Box::new(|cc| Box::new(CalcApp::new(cc))),       )   }      struct CalcApp {}      impl CalcApp {       fn new(_cc: &amp;eframe::CreationContext&lt;'_>) -> Self {           CalcApp {}       }   }      impl eframe::App for CalcApp {       fn update(&amp;mut self, ctx: &amp;egui::Context, _frame: &amp;mut eframe::Frame) {           egui::CentralPanel::default().show(ctx, |ui| {               ui.label(r#\"               \u042d\u0442\u043e \u0432\u044b\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0432.               \u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c.            \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0442\u0435 \u0441\u0435\u0431\u0435 \u043b\u044e\u0431\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043d\u0430\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043d\u0435\u043c \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 '='.               \u0423\u0432\u0438\u0434\u0435\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0414\u0430? - \u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u0430\u0448 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e.               \"#);           });       }   }<\/code><\/pre>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u0432\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e.<br \/> \u0421\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>main()<\/code>.<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs \/\/ ...  fn main() -> eframe::Result&lt;()>  {       eframe::run_native(           \"calculator-wasm-rust-pwa\",           eframe::NativeOptions::default(),           Box::new(|cc| Box::new(CalcApp::new(cc))),       )   }   \/\/ ...<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>eframe::run_native<\/code> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 (\u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u043e\u0435) \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p><code>app_name<\/code> (\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430) \u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f  \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430.<\/p>\n<\/li>\n<li>\n<p><code>native_options<\/code> (\u0412\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430) &#8212; \u044d\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 NativeOptions,  \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430.  \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0435\u0449\u0435 \u043f\u0440\u0438\u043a\u043e\u0441\u043d\u0435\u043c\u0441\u044f \u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u043f\u043e\u043a\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 <code>eframe::NativeOptions::default()<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>app_creator<\/code> (\u0422\u0440\u0435\u0442\u044c\u044f \u0441\u0442\u043e\u043a\u0430) &#8212; \u0437\u0434\u0435\u0441\u044c \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 app_creator \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u043d\u0430\u043c\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 <code>CalcApp::new(cc)<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0442\u0438\u043f\u0430\u0436 (\u0442\u0440\u0435\u0439\u0442\/\u0447\u0435\u0440\u0442\u0430) <code>eframe::App<\/code>.<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs \/\/ ...  struct CalcApp {}      impl CalcApp {       fn new(_cc: &amp;eframe::CreationContext&lt;'_>) -> Self {           CalcApp {}       }   }      impl eframe::App for CalcApp {       fn update(&amp;mut self, ctx: &amp;egui::Context, _frame: &amp;mut eframe::Frame) {           egui::CentralPanel::default().show(ctx, |ui| {               ui.label(r#\"               \u042d\u0442\u043e \u0432\u044b\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440.              \u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435 \u0441\u0435\u0431\u0435 \u043b\u044e\u0431\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043d\u0430\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043d\u0435\u043c \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 '='. \u0423\u0432\u0438\u0434\u0435\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0434\u0430? - \u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u0430\u0448 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e.             \"#);           });       }   }<\/code><\/pre>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0443\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 <code>CalcApp<\/code> \u0438 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043a \u043d\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>new()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0432\u044b\u043c \u043a\u0430\u0434\u0440\u043e\u043c. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<br \/>\u0421\u0430\u043c\u0430\u044f \u0432\u0430\u0436\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u043d\u0430\u0448\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>update<\/code> \u0438\u0437 \u0442\u0438\u043f\u0430\u0436\u0430 (\u0442\u0440\u0435\u0439\u0442\u0430\/\u0447\u0435\u0440\u0442\u044b) <code>eframe::App<\/code>. \u0414\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0435, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u0412\u043d\u0443\u0442\u0440\u0438 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432 <code>SidePanel<\/code>, <code>TopPanel<\/code>, <code>CentralPanel<\/code>, <code>Window<\/code> \u0438\u043b\u0438 <code>Area<\/code>.<\/p>\n<p>\u041f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">$ cargo run<\/code><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e. \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0433\u043e\u0442\u043e\u0432. \u0420\u0430\u0441\u0445\u043e\u0434\u0438\u043c\u0441\u044f.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bd5\/bb2\/c13\/bd5bb2c13f6edb4092a75f00027d58e7.png\" width=\"365\" height=\"219\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bd5\/bb2\/c13\/bd5bb2c13f6edb4092a75f00027d58e7.png\"\/><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b \u0435\u0441\u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c:<\/p>\n<pre><code class=\"bash\">$ cargo build --release<\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b, \u043c\u044b \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0446\u0435\u043b\u0438. \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u043a \u043d\u0430\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u043e\u0432 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435. \u041d\u0443\u0436\u043d\u043e \u0437\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c.<\/p>\n<h4>1.4 \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u0434, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 WASM<\/h4>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/0d8f1571990485c2684ff85e7d513c520cf554c9\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<h3>1.4.1 \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Trunk<\/h3>\n<p>\u0421\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 WASM \u0444\u0430\u0439\u043b, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <a href=\"https:\/\/trunkrs.dev\/\" rel=\"noopener noreferrer nofollow\">Trunk<\/a>.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Trunk \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e<\/p>\n<pre><code class=\"bash\">$ cargo install --locked trunk<\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442\u0435 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u0435\u0433\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c dev \u0441\u0435\u0440\u0432\u0435\u0440\u0430:<\/p>\n<pre><code class=\"bash\">$ trunk serve<\/code><\/pre>\n<p>\u0412\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u0442\u0435\u0441\u044c \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043d\u0430\u043c, \u0447\u0442\u043e \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0435\u0449\u0435 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e.<\/p>\n<h3>1.4.2 \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b index.html \u0438 \u0434\u0440\u0443\u0433\u0438\u0435<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b <code>index.html<\/code>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0444\u0430\u0439\u043b\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d \u0432 \u044d\u0442\u043e\u043c <a href=\"https:\/\/github.com\/emilk\/eframe_template\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/a> \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0435\u0433\u043e \u043f\u043e\u0434 \u0441\u0435\u0431\u044f.<br \/>\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c <code>index.html<\/code> \u0438 \u043f\u0430\u043f\u043a\u0443 <code>assets\\<\/code>, \u0442\u0430\u043a, \u0447\u0442\u043e \u0431\u044b \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 :<\/p>\n<pre><code class=\"bash\">$ cd calculator-wasm-rust-pwa\/ $ tree . H:. \u2502   .gitignore \u2502   Cargo.toml \u2502   index.html \u251c\u2500\u2500\u2500assets\\ \u2502       favicon.ico \u2502       icon-1024.png \u2502       icon-256.png \u2502       icon_ios_touch_192.png \u2502       manifest.json \u2502       maskable_icon_x512.png \u2502       sw.js \u2514\u2500\u2500\u2500src\\         main.rs<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 <code>index.html<\/code> \u0438 <code>sw.js<\/code> \u044f \u043d\u0435 \u0431\u0443\u0434\u0443, \u043d\u043e \u043f\u0440\u043e\u0448\u0443, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u0432\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 <a href=\"https:\/\/trunkrs.dev\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 Trunk<\/a> \u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Service Workers.<\/p>\n<h3>1.4.3 \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c favicon.ico<\/h3>\n<p>\u0422\u0443\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u0411\u0435\u0436\u0438\u043c \u0432 <a href=\"https:\/\/stablediffusionweb.com\/#demo\" rel=\"noopener noreferrer nofollow\">stable diffusion web<\/a> \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443 &#8212; favicon.ico.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ea5\/56d\/1e6\/ea556d1e6890c21a69a9fb50473f1c6c.png\" width=\"1363\" height=\"775\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ea5\/56d\/1e6\/ea556d1e6890c21a69a9fb50473f1c6c.png\"\/><\/figure>\n<h3>1.4.4 \u041c\u0435\u043d\u044f\u0435\u043c \u043a\u043e\u0434 \u0432 main.rs, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043b\u0430\u0434\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0432 wasm<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 WASM \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443<\/p>\n<pre><code class=\"bash\">$ trunk build<\/code><\/pre>\n<p>\u0442\u043e \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u043c\u0441\u044f \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438:<\/p>\n<pre><code class=\"bash\">error[E0433]: failed to resolve: could not find `NativeOptions` in `eframe`                                                     --> src\\main.rs:8:17    |  8 |         eframe::NativeOptions::default(),    |                 ^^^^^^^^^^^^^ could not find `NativeOptions` in `eframe`  error[E0425]: cannot find function `run_native` in crate `eframe`   --> src\\main.rs:6:13    |  6 |     eframe::run_native(    |             ^^^^^^^^^^ not found in `eframe`  Some errors have detailed explanations: E0425, E0433.<\/code><\/pre>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043d\u0430\u043c, \u0447\u0442\u043e \u0432 <code>eframe<\/code> \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 <code>run_native()<\/code>. \u041d\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u043c\u044b \u0443\u0436\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434, \u043a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>cargo run<\/code> \u0438 \u0432 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e.<\/p>\n<p>\u0412\u0441\u0435 \u0434\u0435\u043b\u043e \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0435:<\/p>\n<pre><code class=\"rust\">#[cfg(not(target_arch = \"wasm32\"))]<\/code><\/pre>\n<p>\u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0434 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>run_native()<\/code>.  \u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0441\u043e \u0441\u043c\u044b\u0441\u043b\u043e\u043c \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0438, \u043a\u0430\u043a \u0438 \u0441 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0432 WASM \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432 rust \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <a href=\"https:\/\/rustwasm.github.io\/docs\/book\/reference\/add-wasm-support-to-crate.html#maybe-your-crate-already-supports-webassembly\" rel=\"noopener noreferrer nofollow\">Rust ? and WebAssembly &#8212; How to Add WebAssembly Support to a General-Purpose Crate<\/a><\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043d\u0430\u0448 \u0444\u0430\u0439\u043b <code>.\/src\/main.rs<\/code>.<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs \/\/ ...   \/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u0435\u0440\u0435\u0434 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 #[cfg(not(target_arch = \"wasm32\"))]   fn main() -> eframe::Result&lt;()>  { ... }    \/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u043c main() \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c trunk. #[cfg(target_arch = \"wasm32\")] fn main() {       \/\/ \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043f\u0430\u043d\u0438\u043a\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e `console.error`.       console_error_panic_hook::set_once();       wasm_bindgen_futures::spawn_local(async {           eframe::start_web(               \"calculator-wasm-rust-pwa\",               eframe::WebOptions::default(),               Box::new(|cc| Box::new(CalcApp::new(cc))),           )               .await               .expect(\"failed to start calculator-wasm-rust-pwa\");       });   } \/\/ ...<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <code>CalcApp::new()<\/code> \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0431\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434, \u043a\u0430\u043a \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0442\u0430\u043a \u0438 \u0432 web.<br \/>\u0412\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u0434. \u0421\u0443\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>eframe::start_web()<\/code> \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430 <code>eframe::run_native()<\/code>.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u044b\u0437\u043e\u0432\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043d\u043e\u0432\u044b\u0445 \u0434\u043b\u044f \u043d\u0430\u0441 \u043a\u0440\u0435\u0439\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><code>console_error_panic_hook<\/code> &#8212; \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u0430\u043d\u0438\u043a\u0438\u00a0<code>wasm32-unknown-unknown<\/code>, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a \u043f\u0430\u043d\u0438\u043a\u0438. <code>console_error_panic_hook::set_once()<\/code> \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u0430\u043d\u0438\u043a\u0438 \u0432\u00a0<code>console.error<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>wasm_bindgen_futures<\/code> &#8212;  \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043e\u0441\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0Promise \u0442\u0438\u043f\u0430\u043c\u0438 JavaScript \u043a\u0430\u043a \u0441 Rust\u00a0Future. \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>spawn_local<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 Rust\u00a0Future \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043f\u043e\u0442\u043e\u043a\u0435<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0448 \u043a\u043e\u0434 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u043d\u0430\u0448 \u0444\u0430\u0439\u043b <code>.\/Cargo.toml<\/code>:<\/p>\n<pre><code># ... # web:   [target.'cfg(target_arch = \"wasm32\")'.dependencies]   console_error_panic_hook = \"0.1.7\"   tracing-wasm = \"0.2\"   wasm-bindgen-futures = \"0.4\" # ...<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c dev \u0441\u0435\u0440\u0432\u0435\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c trunk:<\/p>\n<pre><code class=\"bash\">$ trunk serve<\/code><\/pre>\n<p>\u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u044f \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/127.0.0.1:8080\" rel=\"noopener noreferrer nofollow\">http:\/\/127.0.0.1:8080<\/a>:<\/p>\n<pre><code class=\"bash\">$ trunk serve  Compiling calculator-wasm-rust-pwa v0.1.0 (H:\\GOOGLE_20220408\\DEVELOPER\\calculator-wasm-rust-pwa)     Finished dev [unoptimized + debuginfo] target(s) in 3.61s                                                                                     2023-02-25T13:11:15.732104Z  INFO fetching cargo artifacts 2023-02-25T13:11:16.009440Z  INFO processing WASM for calculator-wasm-rust-pwa 2023-02-25T13:11:16.210436Z  INFO calling wasm-bindgen for calculator-wasm-rust-pwa 2023-02-25T13:11:16.542757Z  INFO copying generated wasm-bindgen artifacts 2023-02-25T13:11:16.578580Z  INFO applying new distribution 2023-02-25T13:11:16.582748Z  INFO  success 2023-02-25T13:11:16.587400Z  INFO  serving static assets at -> \/ 2023-02-25T13:11:16.588514Z  INFO  server listening at http:\/\/127.0.0.1:8080<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0448 trunk dev server \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u0430\u043f\u043a\u0430 <code>dist\/<\/code> \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<h3>2 \u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c GitHub Action<\/h3>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/a9d954335e13778a00c55d5bacd03ba3151a8c15\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u044b\u0442\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0438\u043c\u0435\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>cagro build --release<\/code> \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>trunk build --release<\/code> \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043d\u0430\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432\u043a\u043b\u044e\u0447\u0430\u044f <code>index.html<\/code> \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f web \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 Github Pages. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f Github Actions.<\/p>\n<p>Github \u0443\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 yml \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u044f\u0437\u044b\u043a\u0430 Rust, \u043d\u043e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0438. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0442\u0435\u043c \u0436\u0435 <a href=\"https:\/\/github.com\/emilk\/eframe_template\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c<\/a> \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0440\u0430\u043b\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u0444\u0430\u0439\u043b <code>index.html<\/code>.<\/p>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441 \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 <code>.github\/workflows\/<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043d\u0435\u0439 \u0442\u0440\u0438 \u0444\u0430\u0439\u043b:<\/p>\n<ul>\n<li>\n<p><code>rust.yml<\/code> &#8212; \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043d\u0430\u0448 CI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0431\u043e\u0442: <\/p>\n<ul>\n<li>\n<p>jobs: check: &#8212; \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>cargo check<\/code> \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 \u0438 \u0432\u0441\u0435 \u0435\u0433\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<\/li>\n<li>\n<p>jobs: check_wasm: \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>cargo check --all-features --lib --target wasm32-unknown-unknown<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e \u0441\u0443\u0442\u0438 \u0441\u0432\u043e\u0435\u0439 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439, \u043d\u043e \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u0442\u0440\u043e\u0439\u043a\u0438 (\u0446\u0435\u043f\u044c) wasm32-unknown-unknown.<\/p>\n<\/li>\n<li>\n<p>jobs: test: &#8212; \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>cargo test --lib<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u043a\u043e\u043c-\u043b\u0438\u0431\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>jobs: clippy: &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 Rust \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u043e\u0434\u0430 \u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0438 &#8212; <a href=\"https:\/\/github.com\/rust-lang\/rust-clippy\" rel=\"noopener noreferrer nofollow\">clippy<\/a>. \u0412\u043d\u0443\u0442\u0440\u0438 \u0434\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 <code>cargo clippy<\/code>.<\/p>\n<\/li>\n<li>\n<p>jobs: trunk: &#8212; \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0434 \u0446\u0435\u043f\u044c wasm32-unknown-unknown, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>pages.yml<\/code> &#8212; \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043c\u044b \u0432\u043d\u043e\u0432\u044c \u043f\u0440\u0438\u0431\u0435\u0433\u043d\u0435\u043c \u043a trunk, \u043d\u043e \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>trunk build --release --public-url \"${GITHUB_REPOSITORY#*\/}\"<\/code> \u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0438\u0445 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0442\u043a\u0435 <code>gh-pages<\/code> \u043d\u0430\u0448\u0435\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><code>build_binaries.yml<\/code> &#8212; \u0411\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u0441\u0431\u043e\u0440\u043a\u0443 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043f\u043e\u0434 \u041e\u0421 Windows. \u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d \u043a \u0441\u0431\u043e\u0440\u043a\u0435 \u043a\u0430\u043a \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442.<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 rust.yml:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code># .github\/workflows\/rust.yml  on: [push, pull_request]      name: CI      env:     # This is required to enable the web_sys clipboard API which egui_web uses     # https:\/\/rustwasm.github.io\/wasm-bindgen\/api\/web_sys\/struct.Clipboard.html  # https:\/\/rustwasm.github.io\/docs\/wasm-bindgen\/web-sys\/unstable-apis.html  RUSTFLAGS: --cfg=web_sys_unstable_apis      jobs:     check:       name: Check       runs-on: ubuntu-latest       steps:         - uses: actions\/checkout@v3         - uses: actions-rs\/toolchain@v1           with:             profile: minimal             toolchain: stable             override: true         - uses: actions-rs\/cargo@v1           with:             command: check             args: --all-features        check_wasm:       name: Check wasm32       runs-on: ubuntu-latest       steps:         - uses: actions\/checkout@v3         - uses: actions-rs\/toolchain@v1           with:             profile: minimal             toolchain: stable             target: wasm32-unknown-unknown             override: true         - uses: actions-rs\/cargo@v1           with:             command: check             args: --all-features --lib --target wasm32-unknown-unknown        test:       name: Test       runs-on: ubuntu-latest       steps:         - uses: actions\/checkout@v3         - uses: actions-rs\/toolchain@v1           with:             profile: minimal             toolchain: stable             override: true         - run: sudo apt-get install libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxkbcommon-dev libssl-dev         - uses: actions-rs\/cargo@v1           with:             command: test             args: --lib           clippy:       name: Clippy       runs-on: ubuntu-latest       steps:         - uses: actions\/checkout@v3         - uses: actions-rs\/toolchain@v1           with:             profile: minimal             toolchain: stable             override: true             components: clippy         - uses: actions-rs\/cargo@v1           with:             command: clippy             args: -- -D warnings        trunk:       name: trunk       runs-on: ubuntu-latest       steps:         - uses: actions\/checkout@v3         - uses: actions-rs\/toolchain@v1           with:             profile: minimal             toolchain: stable             target: wasm32-unknown-unknown             override: true         - name: Rust Cache # cache the rust build artefacts           uses: Swatinem\/rust-cache@v1         - name: Download and install Trunk binary           run: wget -qO- https:\/\/github.com\/thedodd\/trunk\/releases\/latest\/download\/trunk-x86_64-unknown-linux-gnu.tar.gz | tar -xzf-         - name: Build           run: .\/trunk build<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 pages.yml:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code># .github\/workflows\/pages.yml  name: Github Pages      # By default, runs if you push to master. keeps your deployed app in sync with master branch.   on:     push:       branches:         - master   # to only run when you do a new github release, comment out above part and uncomment the below trigger.   # on:   #   release:   #     types:   #       - published      permissions:     contents: write # for committing to gh-pages branch.      jobs:     build-github-pages:       runs-on: ubuntu-latest       steps:         - uses: actions\/checkout@v3 # repo checkout         - uses: actions-rs\/toolchain@v1 # get rust toolchain for wasm           with:             profile: minimal             toolchain: stable             target: wasm32-unknown-unknown             override: true         - name: Rust Cache # cache the rust build artefacts           uses: Swatinem\/rust-cache@v1         - name: Download and install Trunk binary           run: wget -qO- https:\/\/github.com\/thedodd\/trunk\/releases\/latest\/download\/trunk-x86_64-unknown-linux-gnu.tar.gz | tar -xzf-         - name: Build # build           # \"${GITHUB_REPOSITORY#*\/}\" evaluates into the name of the repository        # using --public-url something will allow trunk to modify all the href paths like from favicon.ico to repo_name\/favicon.ico .        # this is necessary for github pages where the site is deployed to username.github.io\/repo_name and all files must be requested        # relatively as eframe_template\/favicon.ico. if we skip public-url option, the href paths will instead request username.github.io\/favicon.ico which        # will obviously return error 404 not found.        run: .\/trunk build --release --public-url \"${GITHUB_REPOSITORY#*\/}\"         - name: Deploy           uses: JamesIves\/github-pages-deploy-action@v4           with:             folder: dist             # this option will not maintain any history of your previous pages deployment             # set to false if you want all page build to be committed to your gh-pages branch history          single-commit: true<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 build_binaries.yml:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>  # .github\/workflows\/build_binaries.yml   name: Build binaries          on:       push:         branches:           - master          jobs:       windows-msvc-release:         name: release windows msvc         runs-on: windows-latest         steps:           - uses: actions\/checkout@master           - name: Build             run: |               cargo build --release           - name: Upload artifact             uses: actions\/upload-artifact@v3             with:               name: windows-msvc.calculator-wasm-rust-pwa.archive.tar.gz               path: .\/target\/release\/calculator-wasm-rust-pwa.exe  <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u0441\u0435 \u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430, \u0442\u043e \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043c\u0438\u0442\u0430 \u0432 \u0432\u0435\u0442\u043a\u0443 master, \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Actions \u0432 \u0432\u0430\u0448\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0447\u0442\u043e \u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e50\/1b3\/849\/e501b3849b5f1390f3d7da2c2b2882f8.png\" width=\"1243\" height=\"656\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e50\/1b3\/849\/e501b3849b5f1390f3d7da2c2b2882f8.png\"\/><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442 \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b Github Pages, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0442\u0435 \u0432\u0430\u0448\u0438 \u0432\u0435\u0442\u043a\u0438 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438. \u0421\u0440\u0435\u0434\u0438 \u043d\u0438\u0445 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0432\u0435\u0442\u043a\u0430 <code>gh-pages<\/code> \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u0436\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u0432\u0435\u0441\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Github Pages \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/github.com\/\" rel=\"noopener noreferrer nofollow\">Github<\/a>. \u0415\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0434\u0435\u043b\u0430\u043b \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u043d\u0435\u0435, \u0442\u043e \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Github Pages \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f (Settings) \u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;Code and automation&#187; \u0431\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c &#171;Pages&#187;.  \u0412 \u043e\u0442\u043a\u0440\u044b\u0432\u0448\u0435\u0439\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 &#171;Branch&#187; \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u043d\u0430\u0448\u0443 \u0432\u0435\u0442\u043a\u0443 <code>gh-pages<\/code> (\u043d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0432\u0435\u0442\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u043e\u0440\u043a\u0435\u0440\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>build_binaries.yml<\/code>). \u041f\u0443\u0442\u044c \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c <code>\/(root)<\/code>. \u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c (Save).<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u043e \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>username.github.io\/repo_name<\/code>.<\/p>\n<h3>3 \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430<\/h3>\n<h4>3.1 \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0443<\/h4>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/b25485593da4bf81053ceb6ae9d03a6e29b74d26\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0432\u0430\u0441 \u0432\u0438\u0434\u0435\u043b \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043e\u043a \u0434\u043b\u044f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0432\u0430\u0441 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u0442\u0443 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u043c\u0443.<\/p>\n<p>\u042f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439:<\/p>\n<pre><code> \u221a   C   (   )   &lt;=   sin  7   8   9   *   cos  4   5   6   \/    tg  1   2   3   -   ctg  .   0   =   +<\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043b\u0438\u0448\u044c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0435 \u0432 \u043a\u043e\u0434\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 EGUI.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043f\u0440\u043e \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u043d\u0430\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>update(...)<\/code>:<\/p>\n<pre><code class=\"rust\">impl eframe::App for CalcApp {       fn update(&amp;mut self, ctx: &amp;egui::Context, _frame: &amp;mut eframe::Frame) {           egui::CentralPanel::default().show(ctx, |ui| {               ui.label(r#\"                 \u042d\u0442\u043e \u0432\u044b\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440.                  \u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c.\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u0435\u0431\u0435 \u043b\u044e\u0431\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u0438 \u043d\u0430\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043d\u0435\u043c \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043d\u0430\u0436\u043c\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 '='.                     \u0423\u0432\u0438\u0434\u0435\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0434\u0430? - \u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u0430\u0448 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e.               \"#);           });       }   }<\/code><\/pre>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0432 \u043d\u0435\u0439 \u0443 \u043d\u0430\u0441 \u043e\u043f\u0438\u0441\u0430\u043d \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>label<\/code> \u0441 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0435\u0433\u043e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438, \u043d\u043e \u0441\u043f\u0435\u0440\u0432\u0430 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u0447\u0435\u0433\u043e \u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0434\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f.<\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>update(...)<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0432 \u0442\u0438\u043f\u0430\u0436\u0435 (\u0442\u0440\u0435\u0439\u0442\u0435\/\u0447\u0435\u0440\u0442\u0435) <code>eframe::App<\/code> \u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044e:<\/p>\n<pre><code>\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0435,  \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443.    \u041f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u0441\u0432\u043e\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432 [`egui::SidePanel`], [`egui::TopBottomPanel`],  [`egui::CentralPanel`], [`egui::Window`] or [`egui::Area`].    [`egui::Context`] \u043c\u043e\u0436\u043d\u043e \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435.  \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u0432\u044b\u0437\u043e\u0432\u0438\u0442\u0435 [`egui::Context::request_repaint`]  \u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430).<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p><code>&amp;mut self<\/code> &#8212; \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 <code>CalcApp<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>ctx: &amp;egui::Context<\/code> &#8212; \u041f\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0443\u0442\u0438, \u043d\u0430\u0448 ctx &#8212; \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 Context \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 \u043e\u0434\u0438\u043d \u043d\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 &#8212; \u043f\u043e\u0442\u043e\u043a\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u0441\u0441\u044b\u043b\u043e\u043a (Arc)<\/p>\n<\/li>\n<li>\n<p><code>frame: &amp;mut Frame<\/code> &#8212; \u044d\u0442\u0430 \u043d\u0430\u0448\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u043d\u0430).<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c, \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u043f\u043e \u043c\u0435\u0440\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u044b \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>update(...)<\/code> \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0437\u0430 \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u043e\u0447\u043a\u0430:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs  \/\/ ... fn update(&amp;mut self, ctx: &amp;egui::Context, _frame: &amp;mut eframe::Frame) {   egui::CentralPanel::default().show(ctx, |ui| {   ui.horizontal(|ui| {       let _ = ui.small_button(\"\u221a\");       let _ = ui.small_button(\"C\");       let _ = ui.small_button(\"(\");       let _ = ui.small_button(\")\");       let _ = ui.small_button(\"&lt;=\");   });   ui.horizontal(|ui| {       let _ = ui.small_button(\"sin\");       let _ = ui.small_button(\"7\");       let _ = ui.small_button(\"8\");       let _ = ui.small_button(\"9\");       let _ = ui.small_button(\"*\");   });   ui.horizontal(|ui| {       let _ = ui.small_button(\"cos\");       let _ = ui.small_button(\"4\");       let _ = ui.small_button(\"5\");       let _ = ui.small_button(\"6\");       let _ = ui.small_button(\"\/\");   });   ui.horizontal(|ui| {       let _ = ui.small_button(\"tg\");       let _ = ui.small_button(\"1\");       let _ = ui.small_button(\"2\");       let _ = ui.small_button(\"3\");       let _ = ui.small_button(\"-\");   });   ui.horizontal(|ui| {       let _ = ui.small_button(\"ctg\");       let _ = ui.small_button(\".\");       let _ = ui.small_button(\"0\");       let _ = ui.small_button(\"=\");       let _ = ui.small_button(\"+\");   }); }   }<\/code><\/pre>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u044f\u0432\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0432\u0441\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u043a\u043e\u0434\u0435, \u043d\u043e \u043f\u0443\u0441\u0442\u044c \u0432\u0430\u0441 \u044d\u0442\u043e \u043d\u0435 \u0441\u043c\u0443\u0449\u0430\u0435\u0442, \u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0434\u0443, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e. \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u0440\u0430: <em>\u041c\u044b \u0441\u043b\u0435\u0434\u0443\u0435\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0443, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430 \u043c\u0435\u043d\u044c\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044e.<\/em> <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>update()<\/code> \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0432\u043e\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u043f\u0430\u043d\u0435\u043b\u044f\u0445: <code>egui::SidePanel<\/code>, <code>egui::TopBottomPanel<\/code>, <code>egui::CentralPanel<\/code>, <code>egui::Window<\/code>, <code>egui::Area<\/code>, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0430\u0448 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"rust\">egui::CentralPanel::default().show(ctx, |ui| {   \/\/ ... }  <\/code><\/pre>\n<p><code>egui::CentralPanel<\/code> \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u044f\u0442\u044c \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043d\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0430 \u043a\u0430\u043a \u0442\u0430\u043a, \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0430\u043d\u0435\u043b\u0435\u0439 \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438, \u0442\u043e \u043d\u0430\u043c\u0438 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u043e \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u044f <code>egui::CentralPanel<\/code> \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>show()<\/code> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><code>ctx: &amp;Context<\/code> &#8212; \u043d\u0430\u0448 \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440.<\/p>\n<\/li>\n<li>\n<p><code>add_contents: impl FnOnce(&amp;mut Ui) -> R<\/code> &#8212; \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442 \u043d\u0430\u0441, \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>show()<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0445\u0432\u0430\u0442\u0438\u0442\u044c <code>Ui<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0432 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e <code>ui<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430, \u043f\u043e\u0432\u0435\u0440\u0445 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0438\u0447\u0435\u043c \u0438\u043d\u044b\u043c \u043a\u0430\u043a \u043d\u0430\u0431\u043e\u0440 \u0438\u0437 \u043f\u044f\u0442\u0438 \u0441\u0442\u0440\u043e\u043a, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043e \u043f\u043e \u043f\u044f\u0442\u044c \u043a\u043d\u043e\u043f\u043e\u043a, \u0442\u043e \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 egui \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438.<br \/> \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f:<\/p>\n<pre><code class=\"rust\">ui.horizontal(|ui| {   \/\/ ... });<\/code><\/pre>\n<p><code>ui.horizontal<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0441\u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: <em>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0441\u0435\u0442\u043a\u0443 \u0438 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <\/em><code>egui::Grid<\/code> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0441\u0445\u0435\u043c\u0443 \u0441\u0435\u0442\u043a\u0438, \u044f\u0447\u0435\u0439\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e, \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437. \u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u043e \u043a\u043e\u0434\u0443 \u043c\u044b \u0435\u0449\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043d\u0430\u0448 \u043a\u043e\u0434 \u043d\u0430 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <code>egui::Grid<\/code>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 <code>cargo run<\/code>, \u0442\u043e \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/670\/f62\/65c\/670f6265c878c5bc7da059081c3f6e2f.png\" width=\"176\" height=\"156\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/670\/f62\/65c\/670f6265c878c5bc7da059081c3f6e2f.png\"\/><\/figure>\n<p>\u0423\u0436\u0435 \u0447\u0442\u043e-\u0442\u043e! \u041d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043a\u043d\u043e\u043f\u043a\u0438, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0441\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u043e\u0434 \u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435. \u042d\u0442\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u043c\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434, \u0437\u0430\u043c\u0435\u043d\u0438\u0432 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<br \/>\u0417\u0430\u043c\u0435\u043d\u0438\u043c:<\/p>\n<pre><code class=\"rust\">ui.small_button(\"\u221a\");<\/code><\/pre>\n<p>\u041d\u0430:<\/p>\n<pre><code class=\"rust\">ui.add_sized(       [58.0, 48.0],       egui::Button::new(\"\u221a\").small(),   )<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u044d\u0442\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043d\u0430\u0448\u0438\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ebd\/dd2\/236\/ebddd2236e23b88678cf08a60c073e86.png\" width=\"590\" height=\"488\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ebd\/dd2\/236\/ebddd2236e23b88678cf08a60c073e86.png\"\/><\/figure>\n<p>\u0423\u0436\u0435 \u043b\u0443\u0447\u0448\u0435. \u041d\u043e, \u043e\u0431\u044b\u0447\u043d\u043e \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0431\u044b\u043b \u043b\u0438 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d \u0449\u0435\u043b\u0447\u043e\u043a \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u043e\u0434 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"rust\">if ui.add_sized(       [58.0, 48.0],       egui::Button::new(\"\u221a\").small(),   ).clicked() {  \/\/ TODO \u0422\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d \u043a\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0449\u0435\u043b\u0447\u043a\u0430. };<\/code><\/pre>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0430\u0443\u0437\u0443 \u0438 \u0437\u0430\u043f\u0443\u0448\u0438\u043c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 github. \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u044d\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u043c, \u0447\u0442\u043e github \u0437\u0430 \u043d\u0430\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0432\u0441\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 (\u043a\u0430\u043a \u0434\u043b\u044f windows, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f Web) \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u0435\u0442\u043a\u0438 <code>gh-pages<\/code>. \u041f\u0440\u043e\u0432\u0435\u0440\u0442\u0438, \u0432\u0441\u0435 \u043b\u0438 \u0443 \u0432\u0430\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u0432\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: <em>\u0415\u0441\u043b\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0443 \u0432\u0430\u0441 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0440\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u0442\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043e\u0447\u0438\u0441\u0442\u043a\u043e\u0439 \u043a\u044d\u0448\u0430 (Ctrl +\u00a0_F5 \u0434\u043b\u044f Chrome)<\/em><\/p>\n<h4>3.2 \u0420\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u043a\u043e\u0434\u0430 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439<\/h4>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/573e879f0675ddceb59f751a1c7c9f6fa4231d3d\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0442\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b, \u043d\u043e \u043d\u0430\u0448 \u043a\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0432\u043d\u044b\u043c \u0438 \u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: <em>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0441\u0440\u0430\u0437\u0443 \u043d\u0435 \u043d\u0430\u0447\u0430\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e? \u0412\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0438\u0447\u0435\u0433\u043e: \u043d\u0438 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043d\u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u044b \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u044c\u0441\u044f \u0438 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430. \u041e\u0434\u043d\u0430\u043a\u043e, \u043c\u044b \u043f\u043e \u0442\u043e\u0439 \u0436\u0435 \u043b\u043e\u0433\u0438\u043a\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u0442\u0430\u0440\u0430\u0442\u044c\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u0437\u0430 \u0440\u0430\u0437 \u0438 \u0443\u0447\u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0447\u0442\u043e \u0438 \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441, \u0442\u043e \u043c\u0435\u043d\u044f\u0439\u0442\u0435. \u0417\u0434\u0435\u0441\u044c, \u044f \u0445\u043e\u0447\u0443 \u043b\u0438\u0448\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u043a\u043e\u0434\u043e\u043c.<\/em><\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043d\u0430\u0448 \u043a\u043e\u0434 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u0434\u0430\u043b\u0435\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0435\u0433\u043e.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b <code>src\/keyboard.rs<\/code>:<\/p>\n<pre><code class=\"bash\">touch .\/src\/keyboard.rs<\/code><\/pre>\n<p>\u0418 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u0444\u0430\u0439\u043b\u0435 <code>src\/lib.rs<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<pre><code class=\"rust\">pub mod keyboard;<\/code><\/pre>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e &#8212; \u0441 \u043a\u043d\u043e\u043f\u043a\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043b <code>src\/keyboard.rs<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/keyboard.rs use eframe::egui;   use eframe::egui::Widget;  pub struct CustomKey {       pub text: String,       pub width: f32,       pub height: f32,   }      impl CustomKey {       \/\/\/ \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442.       pub fn from(text: impl Into&lt;String>) -> Self {           Self {               text: text.into(),               ..Default::default()           }       }       \/\/\/ \u0417\u0430\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043d\u043e\u043f\u043a\u0435.       fn set_size(mut self, width: f32, height: f32) {           self.width = width;           self.height = height;       }   }      impl Default for CustomKey {       fn default() -> Self {           Self {               text: \"\".to_string(),               width: 58.0,               height: 48.0,           }       }   }         impl Widget for CustomKey {       fn ui(self, ui: &amp;mut egui::Ui) -> egui::Response {           let btn = ui.add_sized(               [self.width, self.height],               egui::Button::new(self.text).small(),           );           btn       }   }<\/code><\/pre>\n<p>\u041d\u0430\u0448\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 <code>CustomKey<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442:<\/p>\n<ul>\n<li>\n<p><code>text<\/code> &#8212; \u0441\u0438\u043c\u0432\u043e\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435.<\/p>\n<\/li>\n<li>\n<p><code>width<\/code> \u0438 <code>height<\/code> &#8212; \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>ui<\/code> \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0438\u0437 \u0442\u0438\u043f\u0430\u0436\u0430 (\u0442\u0440\u0435\u0439\u0442\u0430\/\u0447\u0435\u0440\u0442\u044b) <code>egui::Widget<\/code>:<\/p>\n<pre><code class=\"rust\">impl Widget for CustomKey {       fn ui(self, ui: &amp;mut egui::Ui) -> egui::Response {           let btn = ui.add_sized(               [self.width, self.height],               egui::Button::new(self.text).small(),           );           btn       }   }<\/code><\/pre>\n<p>\u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u043f\u0438\u0441\u0430\u043b\u0438 <code>update()<\/code> \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>src\/main<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u043b\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e. \u0412\u044b \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0444\u0430\u0439\u043b\u043e\u043c <code>src\/main<\/code> \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0432 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0439 \u043a\u043e\u0434 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438, \u0437\u0430\u043c\u0435\u043d\u0438\u0432:<\/p>\n<pre><code class=\"rust\">if ui.add_sized(       [58.0, 48.0],       egui::Button::new(\"\u221a\").small(),   ).clicked() {  \/\/ TODO \u0422\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d \u043a\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0449\u0435\u043b\u0447\u043a\u0430. };<\/code><\/pre>\n<p>\u043d\u0430:<\/p>\n<pre><code class=\"rust\">if keyboard::CustomKey::from(\"\u221a\") .set_size([58.0, 48.0]) .ui(ui) .clicked() { };<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0448\u0443 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0443 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u043d\u0430\u043c \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438.<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/keyboard.rs pub struct CalcKeyboard&lt;'a> {       buffer: &amp;'a mut Vec&lt;String>,       pub width: f32,       pub height: f32,   } \/\/ ...<\/code><\/pre>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0443 \u043a\u0430\u043a \u043d\u0435\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u0430\u043a\u0430\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0430 \u0431\u044b\u043b\u0430 \u043d\u0430\u0436\u0430\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u0431\u0443\u0444\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0432\u0435\u043a\u0442\u043e\u0440 \u0441\u0442\u0440\u043e\u043a (\u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u0432\u043d\u043e\u0432\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u043e).<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 Ui \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 <code>.\/src\/keyboard.rs<\/code>:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/keyboard.rs  \/\/ TODO \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u043e \u043d\u0430 Enum   static KEYS: [(&amp;str, &amp;str); 25] = [       (\"\u221a\", \"\u221a(\"), (\"C\", \"\"), (\"(\", \"(\"), (\")\", \")\"), (\"&lt;=\", \"\"),       (\"sin\", \"sin(\"), (\"7\", \"7\"), (\"8\", \"8\"), (\"9\", \"9\"), (\"*\", \"*\"),       (\"cos\", \"cos(\"), (\"4\", \"4\"), (\"5\", \"5\"), (\"6\", \"6\"), (\"\/\", \"\/\"),       (\"tg\", \"tg(\"), (\"1\", \"1\"), (\"2\", \"2\"), (\"3\", \"3\"), (\"-\", \"-\"),       (\"ctg\", \"ctg(\"), (\".\", \".\"), (\"0\", \"0\"), (\"=\", \"\"), (\"+\", \"+\")   ];  pub struct CalcKeyboard&lt;'a> {       \/\/ ... }  impl&lt;'a> CalcKeyboard&lt;'a> {       pub fn from_buffer(buffer: &amp;'a mut Vec&lt;String>) -> Self {           Self {               buffer,               width: 340.0,               height: 320.0,           }       }          pub fn show(mut self, ui: &amp;mut egui::Ui) {           egui::Grid::new(\"keyboard\")               .num_columns(5)               .max_col_width(self.width)               .show(ui, |ui| {                   for (ind, (title, val)) in KEYS.iter().enumerate() {                       if ind % 5 == 0 &amp;&amp; ind != 0 {                           ui.end_row();                       }                       if CustomKey::from(*title).ui(ui).clicked() {                           match *title {                               \"C\" => { self.buffer.clear(); }                               \"&lt;=\" => { self.buffer.pop(); }                               _ => { self.buffer.push(val.to_string()); }                           }                           \/\/ TODO \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u044d\u0442\u043e \u0443\u0434\u0430\u043b\u0438\u043c.                           println!(\"{:?}\", self.buffer)                       };                   }               });       }   }  \/\/ ...<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0438 \u0431\u044b\u043b\u043e \u043e\u0431\u0435\u0449\u0430\u043d\u043e \u0440\u0430\u043d\u0435\u0435, \u043c\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443 \u043a\u043d\u043e\u043f\u043e\u043a \u043d\u0430 \u0441\u0435\u0442\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 <code>egui::Grid<\/code>. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>ui.end_row();<\/code><\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b\u0435  <code>src\/main<\/code>:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs  \/\/ ... struct CalcApp {       math_exp: Vec&lt;String>,   }      impl CalcApp {       fn new(_cc: &amp;eframe::CreationContext&lt;'_>) -> Self {           CalcApp {               math_exp: Vec::new(),           }       }   }      impl eframe::App for CalcApp {       fn update(&amp;mut self, ctx: &amp;egui::Context, _frame: &amp;mut eframe::Frame) {           egui::CentralPanel::default().show(ctx, |ui| {               keyboard::CalcKeyboard::from_buffer(&amp;mut self.math_exp).show(ui)           });       }   }<\/code><\/pre>\n<p>\u041a \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 <code>CalcApp<\/code> \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 <code>math_exp: Vec&lt;String><\/code>. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u0435\u0433\u043e, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448\u0443 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0443.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043c \u043d\u0430\u0448\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u0434\u043e\u043c \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b. \u0414\u0430, \u044f \u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u043d\u0430\u043c \u0435\u0449\u0435 \u043c\u043d\u043e\u0433\u043e\u0435 \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c, \u043d\u043e \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u0435\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c &#8212; \u043c\u044b \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>update()<\/code>.<\/p>\n<h4>3.3 \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u043a\u0440\u0430\u043d<\/h4>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/33f37ff9d69eaf0d537901df6ef0be9dbad4f1be\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u0431\u0438\u0440\u0430\u044f \u0447\u0442\u043e-\u0442\u043e \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435 \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438 \u0432 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u044d\u043a\u0440\u0430\u043d. \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 egui &#8212; \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>egui::Label<\/code>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<p>\u0427\u0443\u0442\u044c \u0440\u0430\u043d\u0435\u0435 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0434\u043d\u0443 \u043c\u0435\u0442\u043a\u0443 \u0434\u043b\u044f \u043d\u0430\u0441 \u0443\u0436\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u0434, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 <code>.\/src\/main.rs<\/code>:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs  \/\/ ... impl eframe::App for CalcApp {       fn update(&amp;mut self, ctx: &amp;egui::Context, _frame: &amp;mut eframe::Frame) {   \/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0438 TopPanel.  \/\/ \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c,  \/\/ \u0447\u0442\u043e \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0435\u0435 \u043f\u0435\u0440\u0435\u0434 CentralPanel.         egui::TopBottomPanel::top(\"screen_panel\").show(ctx, |ui| {           let expression = self.math_exp.join(\"\");             ui.add_sized(                   [330.0, 70.0],                   egui::Label::new(                       egui::RichText::new(expression)                           .font(egui::FontId::monospace(25.0))                   ).wrap(true),               );           });    \/\/ ...     }   }<\/code><\/pre>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u043a\u0430\u043a \u043c\u044b \u044f\u0432\u043d\u043e \u0437\u0430\u0434\u0430\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 25.0, \u043d\u043e \u043d\u0438 \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u0438\u043d\u044b \u0442\u0435\u043a\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u044b\u0432\u0435\u0441\u0442\u0438.<\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 (\u0441\u0430\u043c \u0441\u0435\u0431\u044f \u043d\u0435 \u043f\u043e\u0445\u0432\u0430\u043b\u0438\u0448\u044c&#8230; \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435 \u0432 \u044d\u0442\u043e\u043c \u0434\u0443\u0445\u0435), \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0433\u043e\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043e\u0439 \u0438 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u043a\u0443\u0434\u0430 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/926\/93a\/18b\/92693a18b60e2e8e33d7b68404ceaa54.png\" width=\"1141\" height=\"998\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/926\/93a\/18b\/92693a18b60e2e8e33d7b68404ceaa54.png\"\/><\/figure>\n<h3>4 \u041f\u0438\u0448\u0435\u043c \u0440\u0435\u0448\u0430\u0442\u0435\u043b\u044c<\/h3>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/strong>: \u043a\u0430\u043a \u0430\u0432\u0442\u043e\u0440, \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u0440\u0438\u0432\u043b\u0435\u0447\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u043a \u0442\u0430\u043a\u043e\u043c\u0443 \u043d\u0430\u0431\u043e\u0440\u0443 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f rust, \u043a\u0430\u043a <a href=\"https:\/\/github.com\/emilk\/egui#quick-start\" rel=\"noopener noreferrer nofollow\">EGUI<\/a> \u0438 \u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u043e\u0442\u043e\u0432 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u0430\u043a \u0438 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435. \u0418 \u044d\u0442\u0430 \u0446\u0435\u043b\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430. \u041d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 &#8212; \u043d\u0435 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440, \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043d\u043e \u0434\u0435\u043b\u0430\u043b \u0432\u0441\u0435 \u043d\u0430 \u0441\u043a\u043e\u0440\u0443\u044e \u0440\u0443\u043a\u0443, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c &#171;\u0437\u0440\u0435\u043b\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c&#187;.<\/p>\n<p>\u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0445 \u0432 \u0432\u0438\u0434\u0435\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Reverse_Polish_notation\" rel=\"noopener noreferrer nofollow\">\u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0441\u043a\u043e\u0439 \u043d\u043e\u0442\u0430\u0446\u0438\u0438<\/a> \u0438\u043b\u0438\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Abstract_syntax_tree\" rel=\"noopener noreferrer nofollow\">\u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430<\/a> \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c\u043e\u0439 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0435\u0442\u0430\u043b\u044f\u0445, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 &#8212; \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 (<em>\u043f\u043e \u043c\u043d\u0435\u043d\u0438\u044e \u0430\u0432\u0442\u043e\u0440\u0430 &#8212; \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435 \u0447\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438<\/em>).<\/p>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u043c\u0435\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c. \u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0422\u043e\u043a\u0435\u043d\u044b (\u043e\u043f\u0435\u0440\u0430\u043d\u0434\u044b, \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0434\u0440.). \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u043e \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043d\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b, \u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u043e \u0447\u0435\u043c \u0438\u0434\u0435\u0442 \u0440\u0435\u0447\u044c \u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435, \u0442\u043e \u044f \u0442\u043e\u0436\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e, \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 &#171;\u0442\u043e\u043a\u0435\u043d\u0438\u0437\u0430\u0442\u043e\u0440&#187; (\u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u043b\u044e\u0431\u0438\u043c\u043e\u043c \u0432\u0430\u043c\u0438 \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f).<\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445 \u0436\u0435, \u043a\u0442\u043e \u043e\u0441\u0442\u0430\u043b\u0441\u044f, \u0438\u043b\u0438 \u0432\u0435\u0440\u043d\u0443\u043b\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0432\u043e\u0439 &#171;\u0442\u043e\u043a\u0435\u043d\u0438\u0437\u0430\u0442\u043e\u0440&#187;, \u044f \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0441\u0435\u0440 \u0441\u0442\u0440\u043e\u043a. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\n<p>\u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u043c \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0435 \u0422\u043e\u043a\u0435\u043d.<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0422\u043e\u043a\u0435\u043d\u0430 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c.<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0443\u044e \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0448 \u0432\u0435\u043a\u0442\u043e\u0440 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0441\u043a\u043e\u0439 \u043d\u043e\u0442\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u044d\u043a\u0440\u0430\u043d \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<h4>4.1 \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0422\u043e\u043a\u0435\u043d\u043e\u0432<\/h4>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u043d\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0446\u0435\u043b\u0435\u043d \u043d\u0430\u0448 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 &#8212; \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 (\u0430\u043b\u0433\u0435\u0431\u0440\u0430\u0438\u0447\u0435\u0441\u043a\u0438\u0445) \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u041e\u0431\u044b\u0447\u043d\u043e, \u043f\u043e\u0434 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c \u043d\u0435\u043a\u0443\u044e \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u0438\u0437 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b. \u0414\u0430\u043b\u0435\u0435, \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c <code>\u0422\u043e\u043a\u0435\u043d\u043e\u043c<\/code>. \u041d\u0430\u0448\u0438 \u0431\u0443\u0434\u0443\u0449\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u043e\u0434\u0442\u0438\u043f\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>\u041e\u043f\u0435\u0440\u0430\u043d\u0434 \u2013 \u0447\u0438\u0441\u043b\u043e, \u0432 \u043d\u0430\u0448\u0435\u043c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0438, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u044b\u0435 \u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. <em>\u041e\u0431\u044b\u0447\u043d\u043e, \u043e\u043f\u0435\u0440\u0430\u043d\u0434\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e, \u0442\u0430\u043a \u0438 \u0446\u0435\u043b\u043e\u0435 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043f\u043e\u0434 \u043e\u043f\u0435\u0440\u0430\u043d\u0434\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0438\u0441\u043b\u0430.<\/em><\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0435\u0440\u0430\u0446\u0438\u044f &#8212; \u0437\u043d\u0430\u043a \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u043d\u0430\u043a\u043e\u0432 \u0432 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0438, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043d\u0430\u0434 \u043e\u043f\u0435\u0440\u0430\u043d\u0434\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f &#8212; \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0434\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u0434\u043d\u0430 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0439. <em>\u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435, \u0441\u043a\u0430\u0436\u0435\u043c \u043b\u0438\u0448\u044c, \u0447\u0442\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u043d\u0430\u0440\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438.<\/em><\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u043f\u0438\u0448\u0435\u043c \u044d\u0442\u043e \u0432 \u043a\u043e\u0434\u0435. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u043d\u0430\u0448 \u0431\u0443\u0434\u0443\u0449\u0438\u0439 \u043a\u043e\u0434 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c <code>.\/src\/token.rs<\/code> (\u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 <a href=\"http:\/\/lib.rs\" rel=\"noopener noreferrer nofollow\">lib.rs<\/a>):<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/token.rs pub enum Token {       \/\/\/ \u041e\u0434\u0438\u043d\u0430\u0440\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.       Function,       \/\/\/ \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0434 \u0447\u0438\u0441\u043b\u0430\u043c\u0438.       Operation,       \/\/\/ \u0427\u0438\u0441\u043b\u043e (\u0432\u0435\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435).       Operand,   } <\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>Enum<\/code> (\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435). \u041a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0448\u0435 \u043d\u043e\u0432\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0432 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0438, \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443\u043a\u0430\u0436\u0435\u043c \u0442\u0430\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u0441\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u0435 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0438 \u0447\u0443\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/token.rs    pub enum Func {       Sin,       Cos,       Tg,       Ctg,       Sqrt,   }      pub enum Op {       \/\/\/ \u0421\u043b\u043e\u0436\u0435\u043d\u0438\u0435 - \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0437\u043d\u0430\u043a\u0443 '+'.       Add,       \/\/\/ \u0412\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u0435 - \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0437\u043d\u0430\u043a\u0443 '-'.       Sub,       \/\/\/ \u0423\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0435 - \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0437\u043d\u0430\u043a\u0443 '*'.       Multi,       \/\/\/ \u0414\u0435\u043b\u0435\u043d\u0438\u0435 - \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0437\u043d\u0430\u043a\u0443 '\/'.       Div,       \/\/\/ \u0412\u043e\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0441\u0442\u0435\u043f\u0435\u043d\u044c - \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0437\u043d\u0430\u043a\u0443 '^'.       Exp,       \/\/\/ \u0421\u0438\u043c\u0432\u043e\u043b\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439.       ParenLeft,       ParenRight,   }      pub enum Token {       \/\/\/ \u041e\u0434\u0438\u043d\u0430\u0440\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.       Function(Func),       \/\/\/ \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0434 \u0447\u0438\u0441\u043b\u0430\u043c\u0438.       Operation(Op),       \/\/\/ \u0427\u0438\u0441\u043b\u043e (\u0432\u0435\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435).       Operand(f64),   } <\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c\u0441\u044f, \u043d\u0435 \u0437\u0430\u0431\u044b\u043b\u0438 \u043b\u0438 \u043c\u044b \u0447\u0442\u043e, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u043d\u0430\u0448\u0443 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0443:<\/p>\n<pre><code> \u221a   C   (   )   &lt;=   sin  7   8   9   *   cos  4   5   6   \/    tg  1   2   3   -   ctg  .   0   =   + <\/code><\/pre>\n<p>\u0412\u0440\u043e\u0434\u0435 \u0431\u044b \u0432\u0441\u0435 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u0430\u0448\u0438 \u043d\u043e\u0432\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u043c\u044b \u043b\u0438\u0448\u0438\u043b\u0438 \u0441\u0435\u0431\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 &#171;+&#187;, &#171;-&#187; \u0438 \u0442.\u0434.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0442\u0438\u043f\u0430\u0436 (\u0442\u0440\u0435\u0439\u0442\/\u0447\u0435\u0440\u0442\u0443) <code>TryFrom<\/code>:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/token.rs \/\/ ... impl TryFrom&lt;&amp;str> for Op {       type Error = ();          fn try_from(s: &amp;str) -> Result&lt;Self, Self::Error> {           match s {               \"^\" => Ok(Op::Exp),               \"\/\" => Ok(Op::Div),               \"*\" => Ok(Op::Multi),               \"-\" => Ok(Op::Sub),               \"+\" => Ok(Op::Add),               \")\" => Ok(Op::ParenRight),               \"(\" => Ok(Op::ParenLeft),               _ => Err(())           }       }   } \/\/ ...  impl TryFrom&lt;&amp;str> for Token {       type Error = ();          fn try_from(s: &amp;str) -> Result&lt;Self, Self::Error> {           if let Ok(o) = Op::try_from(s) {               Ok(Token::Operation(o))           } else if let Ok(f) = Func::try_from(s) {               Ok(Token::Function(f))           } else if let Ok(val) = s.parse::&lt;f64>() {               if val.is_infinite() {                   Err(())               } else { Ok(Token::Operand(val)) }           } else { Err(()) }       }   }<\/code><\/pre>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0432 \u0442\u0438\u043f\u0430\u0436 (\u0442\u0440\u0435\u0439\u0442\/\u0447\u0435\u0440\u0442\u0443) <code>TryFrom<\/code>, \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0432\u044b\u0437\u043e\u0432\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>try_into<\/code>, \u0432\u0435\u0434\u044c \u0442\u0438\u043f\u0430\u0436 (\u0442\u0440\u0435\u0439\u0442\/\u0447\u0435\u0440\u0442\u0443) <code>TryFrom<\/code> \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <code>TryInto<\/code> \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043e\u0431\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435. \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c \u0441\u043c. \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0434\u043b\u044f <a href=\"https:\/\/doc.rust-lang.org\/core\/convert\/trait.Into.html\" rel=\"noopener noreferrer nofollow\">Into<\/a>.  \u0421\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b <code>Func<\/code>. <em>\u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u043a\u0443\u0434\u0430 \u043f\u0440\u043e\u0449\u0435, \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0432 \u043a \u043d\u0430\u0448\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0430 \u0441\u0442\u0440\u043e\u043a\u0443, \u043d\u043e \u043c\u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0441 \u0442\u0430\u043a\u0438\u043c \u0442\u0438\u043f\u0430\u0436\u043e\u043c (\u0442\u0440\u0435\u0439\u0442\u043e\u043c\/\u0447\u0435\u0440\u0442\u043e\u0439) <\/em><code>TryFrom<\/code>.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043c\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u0448 <code>Vec&lt;String><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0443\u0444\u0435\u0440\u0430, \u043d\u0430 <code>Vec&lt;Token><\/code>, \u043d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441, \u0442\u043e \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u043c\u0441\u044f \u0441 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>\u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>join<\/code> \u0434\u043b\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b <code>Vec&lt;Token><\/code> \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u043d\u0435\u0435 \u0434\u0435\u043b\u0430\u043b\u0438 \u0434\u043b\u044f <code>Vec&lt;String><\/code>:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs \/\/ ... struct CalcApp {       math_exp: Vec&lt;Token>,  \/\/ \u0417\u0430\u043c\u0435\u043d\u0438\u043b\u0438 String \u043d\u0430 Token \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 } \/\/ ... fn update(&amp;mut self, ctx: &amp;egui::Context, _frame: &amp;mut eframe::Frame) { \/\/ ... let expression = self.math_exp.join(\"\"); \/\/ ...<\/code><\/pre>\n<ul>\n<li>\n<p>\u043c\u044b \u0441 \u043b\u0435\u0433\u043a\u043e\u0441\u0442\u044c\u044e \u0441\u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0432 \u0432\u0435\u043a\u0442\u043e\u0440 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u043d\u043e \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0442\u0430\u043a\u0436\u0435, \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u0446\u0438\u0444\u0440\u0430\u043c\u0438, \u0432\u0435\u0434\u044c \u0432\u0432\u043e\u0434 \u043e\u0434\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u043e\u0442 \u043d\u0430\u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043d\u0430\u0436\u0430\u0442\u0438\u0439 \u043a\u043d\u043e\u043f\u043e\u043a \u0441 \u0446\u0438\u0444\u0440\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0434\u043e\u0431\u0430\u0432\u043e\u043a \u043a \u044d\u0442\u043e\u043c\u0443, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0445\u043e\u0442\u0435\u0442\u044c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430\u0448\u0438 <code>Token<\/code> \u0432 \u0432\u0435\u043a\u0442\u043e\u0440. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0443 \u043f\u043e\u0434\u0440\u044f\u0434 \u0434\u0432\u0443\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0438\u043b\u0438 \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 &#171;.&#187; \u043f\u0440\u0438 \u043d\u0430\u0431\u043e\u0440\u0435 \u0447\u0438\u0441\u043b\u0430 \u0441 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438\u043b\u0438:<\/p>\n<ul>\n<li>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u043e\u044f\u0442\u044c:<br \/>      *   \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u043e\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u043a\u0430 \u043e\u043f\u0435\u0440\u0430\u043d\u0434\u0430<br \/>      *   \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u043e\u044f\u0442\u044c:<br \/>      *   \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u043e\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u043a\u0430 \u043e\u043f\u0435\u0440\u0430\u043d\u0434\u0430<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u043e\u044f\u0442\u044c:<br \/>      *   \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0441\u043a\u043e\u0431\u043a\u0430<br \/>      *   \u043e\u043f\u0435\u0440\u0430\u043d\u0434<br \/>      *   \u0444\u0443\u043d\u043a\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043e\u043f\u0435\u0440\u0430\u043d\u0434\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u043e\u044f\u0442\u044c:<br \/>      *   \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0441\u043a\u043e\u0431\u043a\u0430<br \/>      *   \u0444\u0443\u043d\u043a\u0446\u0438\u044f<br \/>      *   \u043e\u043f\u0435\u0440\u0430\u043d\u0434<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u043e\u044f\u0442\u044c:<br \/>      *   \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0441\u043a\u043e\u0431\u043a\u0430<br \/>      *   \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u043e\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u043a\u0430 \u043e\u043f\u0435\u0440\u0430\u043d\u0434\u0430<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u043e\u044f\u0442\u044c:<br \/>      *   \u043d\u0438\u0447\u0435\u0433\u043e, \u043a\u0440\u043e\u043c\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u0441\u043a\u043e\u0431\u043a\u0438<\/p>\n<\/li>\n<\/ul>\n<h4>4.2 \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 MathExp<\/h4>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c <code>.\/src\/math_exp.rs<\/code> \u0438 \u043e\u043f\u0438\u0448\u0435\u043c \u0432 \u043d\u0435\u043c \u043d\u0430\u0448\u0443 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/math_exp.rs use crate::token;   pub struct MathExp {       tokens: Vec&lt;token::Token>,       buffer: String,       output: String,   } impl Default for MathExp {       fn default() -> Self {           Self::new()       }   }      impl MathExp {       pub fn new() -> Self {           Self {               tokens: Vec::new(),               buffer: String::new(),               output: String::new(),           }       } }<\/code><\/pre>\n<p>\u0412 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 <code>MathExp<\/code>:<\/p>\n<ul>\n<li>\n<p>tokens &#8212; \u0432\u0435\u043a\u0442\u043e\u0440 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0432 \u0442\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0432\u043e\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n<\/li>\n<li>\n<p>buffer &#8212; \u0441\u0442\u0440\u043e\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u0447\u0438\u0441\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0432\u043e\u0434\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0434\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0432\u0432\u043e\u0434, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u044f\u0442\u0430 \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a\u0438 buffer \u0432 \u0422\u043e\u043a\u0435\u043d \u041e\u043f\u0435\u0440\u0430\u043d\u0434.<\/p>\n<\/li>\n<li>\n<p>output &#8212; \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0432 \u043d\u0435\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u0442\u043e\u043a\u0435\u043d\u043e\u0432, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0446\u0438\u0438.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043d\u0435\u0441\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/keyboard.rs use crate::math_exp; \/\/ ... pub struct CalcKeyboard&lt;'a> {   \/\/ \u0417\u0430\u043c\u0435\u043d\u0438\u043b\u0438 buffer: &amp;'a mut Vec&lt;String>, \u043d\u0430 buffer: &amp;'a mut math_exp::MathExp,      buffer: &amp;'a mut math_exp::MathExp,       \/\/ ... }  impl&lt;'a> CalcKeyboard&lt;'a> {   \/\/ \u0417\u0430\u043c\u0435\u043d\u0438\u043b\u0438 pub fn from_buffer(buffer: &amp;'a mut Vec&lt;String>) -> Self {     pub fn from_buffer(buffer: &amp;'a mut math_exp::MathExp) -> Self {           Self {         \/\/ ...         }     \/\/ ...       }    \/\/ ...<\/code><\/pre>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs use crate::math_exp; \/\/ ... struct CalcApp {   \/\/ \u0417\u0430\u043c\u0435\u043d\u0438\u043b\u0438 Vec&lt;String>, \u043d\u0430 math_exp::MathExp,       math_exp: math_exp::MathExp,   }  impl CalcApp {       fn new(_cc: &amp;eframe::CreationContext&lt;'_>) -> Self {           CalcApp {           \/\/ \u0417\u0430\u043c\u0435\u043d\u0438\u043b\u0438 Vec::new(), \u043d\u0430 math_exp::MathExp::default(),              math_exp: math_exp::MathExp::default(),           }       }   }  ```rust  \/\/ .\/src\/main.rs  \/\/ ... impl eframe::App for CalcApp {       fn update(&amp;mut self, ctx: &amp;egui::Context, _frame: &amp;mut eframe::Frame) {   \/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0438 TopPanel.  \/\/ \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c,  \/\/ \u0447\u0442\u043e \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0435\u0435 \u043f\u0435\u0440\u0435\u0434 CentralPanel.         egui::TopBottomPanel::top(\"screen_panel\").show(ctx, |ui| {           \/\/ \u0417\u0430\u043c\u0435\u043d\u0438\u043b\u0438 let expression = self.math_exp.join(\"\");         let expression = self.math_exp.to_string();             \/\/ ...           });       }   }<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0434\u0435\u0441\u044c \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f.  \u0412 <code>.\/src\/main.rs<\/code> \u0444\u0430\u0439\u043b\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438  \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443:<\/p>\n<pre><code class=\"rust\">let expression = self.math_exp.to_string();<\/code><\/pre>\n<p>\u041d\u043e \u0441 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 <code>MathExp<\/code> \u0435\u0449\u0435 \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441 \u0438\u043c\u0435\u043d\u0438\u0435\u043c <code>to_string<\/code>.  \u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u0430\u0436 (\u0442\u0440\u0435\u0439\u0442\/\u0447\u0435\u0440\u0442\u0443) <code>std::fmt::Display<\/code>:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/math_exp.rs \/\/ ... impl std::fmt::Display for MathExp {       fn fmt(&amp;self, f: &amp;mut std::fmt::Formatter&lt;'_>) -> std::fmt::Result {           let mut o = String::new();           for token in &amp;self.tokens {               o.push_str(token.to_string().as_str());               o.push(' ');           }           o.push_str(self.buffer.as_str());           write!(               f,               \"{}\",               o           )       }   } \/\/ ... <\/code><\/pre>\n<p>\u041f\u043e\u043a\u0430 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e\u0431 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430, \u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0430\u043c\u044b\u043c \u0431\u044b\u0441\u0442\u0440\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c <code>cargo build<\/code>, \u0442\u043e \u043c\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043c, \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0431\u0443\u0434\u0435\u0442 \u0440\u0443\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0443 \u043d\u0430\u0448\u0435\u0433\u043e enum <code>Token<\/code> \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430\u0436\u0430 (\u0442\u0440\u0435\u0439\u0442\u0430\/\u0447\u0435\u0440\u0442\u044b) <code>std::fmt::Display<\/code>. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043e\u0442 \u043d\u0430\u0441 \u043f\u0440\u043e\u0441\u0438\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/token.rs \/\/ ... impl std::fmt::Display for Token {       fn fmt(&amp;self, f: &amp;mut std::fmt::Formatter&lt;'_>) -> std::fmt::Result {           write!(               f,               \"{}\",               match self {                   Token::Function(func) => { func.to_string() }                   Token::Operation(op) => { op.to_string() }                   Token::Operand(o) => { o.to_string() }               }           )       }   } impl std::fmt::Display for Op {       fn fmt(&amp;self, f: &amp;mut std::fmt::Formatter&lt;'_>) -> std::fmt::Result {           write!(               f,               \"{}\",               match self {                   Op::Add => { \"+\" }                   Op::Sub => { \"-\" }                   Op::Multi => { \"*\" }                   Op::Div => { \"\/\" }                   Op::Exp => { \"^\" }                   Op::ParenLeft => { \"(\" }                   Op::ParenRight => { \")\" }               }           )       }   } impl std::fmt::Display for Func {       fn fmt(&amp;self, f: &amp;mut std::fmt::Formatter&lt;'_>) -> std::fmt::Result {           write!(               f,               \"{}\",               match self {                   Func::Sin => { \"sin\" }                   Func::Cos => { \"cos\" }                   Func::Tg => { \"tg\" }                   Func::Ctg => { \"ctg\" }                   Func::Sqrt => { \"\u221a\" }               }           )       }   }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>add<\/code>, <code>pop<\/code>, <code>clear<\/code> \u0438 <code>calculate<\/code> \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b <code>MathExp<\/code>.<br \/>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043a\u0430\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043b\u044f \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/keyboard.rs \/\/ ... impl&lt;'a> CalcKeyboard&lt;'a> { \/\/ ... pub fn show(self, ui: &amp;mut egui::Ui) { \/\/ ... for (ind, title) in KEYS.iter().enumerate() { \/\/ ... if CustomKey::from(*title).ui(ui).clicked() { match *title {       \"C\" => { self.buffer.clear(); }     \"&lt;=\" => { self.buffer.pop(); }     \"=\" => { self.buffer.calculate(); }       _ => { self.buffer.add(title); } } \/\/ ..<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438 <code>add<\/code>, <code>pop<\/code>, <code>clear<\/code> \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043e\u0442 \u043d\u0430\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0422\u043e\u043a\u0435\u043d\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0445\u043e\u0442\u0435\u0442\u044c \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0432\u0432\u043e\u0434 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044f \u0435\u0441\u043b\u0438 \u0432\u0435\u043a\u0442\u043e\u0440 \u0441 \u0422\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u0435\u0449\u0435 \u043f\u0443\u0441\u0442, \u0438\u043b\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0443\u044e\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0443 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439\u0441\u044f (\u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044f, \u0447\u0442\u043e \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f).<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 .\/src\/math_exp.rs:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"rust\"> use crate::token;   use crate::token::Weight;     pub struct MathExp {     tokens: Vec&lt;token::Token>,     buffer: String,     output: String,   }    impl Default for MathExp {     fn default() -> Self {         Self::new()     }   }    impl MathExp {     pub fn new() -> Self {         Self {             tokens: Vec::new(),             buffer: String::new(),             output: String::new(),         }     }      pub fn get_output(&amp;self) -> String {         self.output.clone()     }      fn update_output(&amp;mut self, s: &amp;str) {         self.output = s.to_string();     }      \/\/\/ \u0412\u0441\u0442\u0430\u0432\u043a\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043f\u0440\u0430\u0432\u0438\u043b:     \/\/\/    \/\/\/ * \u041f\u043e\u0441\u043b\u0435 \u041e\u043f\u0435\u0440\u0430\u043d\u0434\u0430 (\u0447\u0438\u0441\u043b\u043e) \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u043a \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0437\u043d\u0430\u043a \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0438.    \/\/\/ * \u041f\u043e\u0441\u043b\u0435 \u0437\u043d\u0430\u043a\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0438 \u0438\u043b\u0438 \u041e\u043f\u0435\u0440\u0430\u043d\u0434 (\u0447\u0438\u0441\u043b\u043e).    fn push_to_token(&amp;mut self, t: token::Token) {         fn push(tokens: &amp;mut Vec&lt;token::Token>, t: token::Token) {             if let token::Token::Function(_) = t {                 tokens.push(t);                 tokens.push(token::Token::Operation(token::Op::ParenLeft));             } else { tokens.push(t); }         }         \/\/ \u0417\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0443\u044e\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0443,         \/\/ \u0435\u0441\u043b\u0438 \u0438\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0441\u043b\u0435 \u0432\u0441\u0442\u0430\u0432\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0441\u043a\u043e\u0431\u043e\u043a.        if let token::Token::Operation(token::Op::ParenRight) = t {             let mut count_paren: i32 = -1; \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432 -1, \u0442.\u043a. \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0434\u043d\u0443 \u0441\u043a\u043e\u0431\u043a\u0443.             for token in &amp;self.tokens {                 if let token::Token::Operation(p) = token {                     match p {                         token::Op::ParenLeft => { count_paren += 1 }                         token::Op::ParenRight => { count_paren -= 1 }                         _ => {}                     }                 }             }             if count_paren &lt; 0 { return; }         }           let last_token = self.tokens.last();         if last_token.is_none() {             \/\/ \u041a\u043e\u0433\u0434\u0430 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u043f\u0443\u0441\u0442\u043e\u0439,             \/\/ \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0443 \u043d\u043e\u0432\u044b\u0445 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0442\u043e\u043b\u044c\u043a\u043e            \/\/ \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 (\u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0438).            if !matches!(t,token::Token::Operation(_)) || matches!(t,token::Token::Operation(token::Op::ParenLeft)) {                 push(&amp;mut self.tokens, t);             }             return;         }         let last_token = last_token.unwrap();           let allow_insert = match last_token {             \/\/ \u041f\u043e\u0441\u043b\u0435 \u0447\u0438\u0441\u043b\u0430:             token::Token::Operand(_) => {                 match t {                     \/\/ \u0417\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u0432\u0441\u0442\u0430\u0432\u043a\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0447\u0438\u0441\u0435\u043b \u0438\u043b\u0438 \u043b\u0435\u0432\u043e\u0439 \u0441\u043a\u043e\u0431\u043a\u0438 \u043f\u043e\u0441\u043b\u0435 \u0447\u0438\u0441\u043b\u0430.                     token::Token::Function(_) | token::Token::Operand(_) | token::Token::Operation(token::Op::ParenLeft) => { false }                     _ => { true }                 }             }             \/\/ \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0438:             token::Token::Operation(token::Op::ParenRight) => {                 match t {                     token::Token::Operation(token::Op::ParenLeft) => { false }                     token::Token::Operation(_) => { true }                     _ => { false }                 }             }             \/\/ \u041f\u043e\u0441\u043b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u0440\u043e\u043c\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0438:             token::Token::Operation(_) => {                 match t {                     token::Token::Operation(token::Op::ParenLeft) => { true }                     \/\/ \u0417\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u0432\u0441\u0442\u0430\u0432\u043a\u0443 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 (\u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u0441\u043a\u043e\u0431\u043a\u0430).                     token::Token::Operation(_) => { false }                     _ => { true }                 }             }              _ => { true }         };          if allow_insert {             push(&amp;mut self.tokens, t);         } else {             self.update_output(format!(\"\u0422\u043e\u043a\u0435\u043d {} \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043f\u043e\u0441\u043b\u0435 {}\", t, last_token).as_str());         }         let mut s = String::new();         for token in &amp;self.tokens {             s.push('[');             s.push_str(token.to_string().as_str());             s.push(']');             s.push(',');         }         println!(\"{s}\")     }      \/\/\/ \u0423\u0434\u0430\u043b\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0431\u0443\u0444\u0435\u0440\u0430 \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u043e\u043d\u0435\u0446 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438.     \/\/\/    \/\/\/ \u0411\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u0431\u0443\u0444\u0435\u0440\u0435.    \/\/\/    fn pop_buffer(&amp;mut self) -> bool {         if self.buffer.is_empty() { return true; }         if let Ok(val) = self.buffer.parse::&lt;f64>() {             if val.is_sign_negative() {                 self.tokens.push(token::Token::Operation(token::Op::ParenLeft));                 self.tokens.push(token::Token::Operand(val));                 self.tokens.push(token::Token::Operation(token::Op::ParenRight));                 self.buffer.clear();             } else {                 self.tokens.push(token::Token::Operand(val));                 self.buffer.clear();             }             true         } else { false }     }      \/\/\/ \u0423\u0434\u0430\u043b\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438.     pub fn pop(&amp;mut self) {         if self.buffer.is_empty() {             self.tokens.pop();             \/\/ \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0442\u043e\u043a\u0435\u043d\u0430 \u0441\u0442\u043e\u044f\u043b \u0442\u043e\u043a\u0435\u043d \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0442\u043e \u043c\u044b \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0438 \u0435\u0433\u043e.             if matches!(self.tokens.last(), Some(token::Token::Function(_))) { self.tokens.pop(); }         } else {             \/\/ \u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0431\u0443\u0444\u0435\u0440\u0435, \u0442\u043e \u043c\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u043d\u0435\u0433\u043e.             self.buffer.pop();         }     }      \/\/\/ \u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0431\u0443\u0444\u0435\u0440\u0430 \u0438 \u0432\u0435\u043a\u0442\u043e\u0440 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438.     pub fn clear(&amp;mut self) {         self.buffer.clear();         self.tokens.clear();     }      \/\/\/ \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0442\u043e\u043a\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.     \/\/\/    \/\/\/ \u041f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438    \/\/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u0431\u0443\u0444\u0435\u0440.    \/\/\/ \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f    \/\/\/ \u043a\u0430\u043a \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u0432\u044b\u0434\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435    \/\/\/ \u0438\u0437 \u0431\u0443\u0444\u0435\u0440\u0430 \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.    pub fn add(&amp;mut self, s: &amp;str) -> bool {         let allow_number_input = !matches!(             self.tokens.last(),             Some(token::Token::Operation(token::Op::ParenRight))         );          if s == \".\" &amp;&amp; allow_number_input {             if self.buffer.is_empty() {                 self.buffer = \"0.\".to_string();                 true            } else if self.buffer.contains('.') {                 \/\/ \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0435\u043c \u043e\u0434\u043d\u0443 \u0442\u043e\u0447\u043a\u0443.                 false             } else {                 self.buffer.push('.');                 true            }         } else if s.parse::&lt;u8>().is_ok() &amp;&amp; allow_number_input {             self.buffer.push_str(s);             true        } else if self.buffer.is_empty() &amp;&amp; s == \"-\" &amp;&amp; allow_number_input {             self.buffer = s.to_string();             true        } else if let Ok(t) = token::Token::try_from(s) {             self.pop_buffer();             self.push_to_token(t);             true        } else { false }     }      pub fn calculate(&amp;mut self) {         self.pop_buffer();         let rpn = yard(&amp;self.tokens);         match rpn {             Err(e) => { self.output = e }             Ok(tokens) => {                 let mut stack: Vec&lt;token::Token> = Vec::new();                 for t in tokens {                     if stack.is_empty() {                         stack.push(t);                     } else {                         match t {                             token::Token::Function(f) => {                                 if let Some(token::Token::Operand(val)) = stack.pop() {                                     stack.push(match f {                                         token::Func::Sin => {                                             println!(\"sin({val})={}\", val.sin());                                             token::Token::Operand(val.sin())                                         }                                         token::Func::Cos => {                                             println!(\"cos({val})={}\", val.cos());                                             token::Token::Operand(val.cos())                                         }                                         token::Func::Tg => {                                             println!(\"Tg({val})={}\", val.sin() \/ val.cos());                                             token::Token::Operand(val.sin() \/ val.cos())                                         }                                         token::Func::Ctg => {                                             println!(\"Ctg({val})={}\", val.cos() \/ val.sin());                                             token::Token::Operand(val.cos() \/ val.sin())                                         }                                         token::Func::Sqrt => {                                             println!(\"Sqrt({val})={}\", val.sqrt());                                             token::Token::Operand(val.sqrt())                                         }                                     });                                 } else {                                     self.output = \"\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\".to_string()                                 }                             }                             token::Token::Operation(op) => {                                 if let Some(token::Token::Operand(second_val)) = stack.pop() {                                     if let Some(token::Token::Operand(first_val)) = stack.pop() {                                         if let Some(val) = match op {                                             token::Op::Add => {                                                 println!(\"{first_val}+{second_val}={}\", first_val + second_val);                                                 Some(first_val + second_val)                                             }                                             token::Op::Sub => {                                                 println!(\"{first_val}-{second_val}={}\", first_val - second_val);                                                 Some(first_val - second_val)                                             }                                             token::Op::Multi => {                                                 println!(\"{first_val}*{second_val}={}\", first_val * second_val);                                                 Some(first_val * second_val)                                             }                                             token::Op::Div => {                                                 println!(\"{first_val}\/{second_val}={}\", first_val \/ second_val);                                                 Some(first_val \/ second_val)                                             }                                             token::Op::Exp => {                                                 println!(\"{first_val}^{second_val}={}\", first_val.powf(second_val));                                                 Some(first_val.powf(second_val))                                             }                                             _ => { None }                                         } { stack.push(token::Token::Operand(val)) }                                     } else { self.output = \"\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\".to_string() }                                 } else { self.output = \"\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\".to_string() }                             }                             token::Token::Operand(_) => { stack.push(t); }                         }                     }                 }                 self.output = if let Some(t) = stack.pop() {                     self.buffer.clear();                     self.tokens.clear();                     t.to_string()                 } else { \"\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\".to_string() };                 println!(\"=> {}\", self.output)             }         }     }   }    impl std::fmt::Display for MathExp {     fn fmt(&amp;self, f: &amp;mut std::fmt::Formatter&lt;'_>) -> std::fmt::Result {         let mut o = String::new();         for token in &amp;self.tokens {             o.push_str(token.to_string().as_str());             o.push(' ');         }         o.push_str(self.buffer.as_str());         write!(             f,             \"{}\",             o         )     }   }     \/\/\/ # \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043e\u0447\u043d\u043e\u0439 \u0441\u0442\u0430\u043d\u0446\u0438\u0438   \/\/\/   \/\/\/ [\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0438\u0437 \u0412\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u0438 \u2014 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0439 \u044d\u043d\u0446\u0438\u043a\u043b\u043e\u043f\u0435\u0434\u0438\u0438](https:\/\/en.wikipedia.org\/wiki\/Shunting_yard_algorithm)   \/\/\/   \/\/\/ \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043e\u0447\u043d\u043e\u0439 \u0441\u0442\u0430\u043d\u0446\u0438\u0438 \u2014 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u0431\u043e\u0440\u0430 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439,   \/\/\/ \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 \u0438\u043d\u0444\u0438\u043a\u0441\u043d\u043e\u0439 \u043d\u043e\u0442\u0430\u0446\u0438\u0438. \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 \u0432\u0438\u0434\u0435   \/\/\/ \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0441\u043a\u043e\u0439 \u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430.   \/\/\/ \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d \u042d\u0434\u0441\u0433\u0435\u0440\u043e\u043c \u0414\u0435\u0439\u043a\u0441\u0442\u0440\u043e\u0439 \u0438 \u043d\u0430\u0437\u0432\u0430\u043d \u0438\u043c \u00ab\u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043e\u0447\u043d\u043e\u0439 \u0441\u0442\u0430\u043d\u0446\u0438\u0438\u00bb,   \/\/\/ \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0436\u0435\u043b\u0435\u0437\u043d\u043e\u0434\u043e\u0440\u043e\u0436\u043d\u043e\u0439 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043e\u0447\u043d\u043e\u0439 \u0441\u0442\u0430\u043d\u0446\u0438\u0438.   \/\/\/   \/\/\/ \u0422\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0441\u043a\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438,   \/\/\/ \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0442\u0435\u043a\u0430. \u0418\u043d\u0444\u0438\u043a\u0441\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e   \/\/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043b\u044e\u0434\u044c\u043c\u0438, \u0435\u0451 \u043f\u0440\u0438\u043c\u0435\u0440\u044b: 2+4 \u0438 3+6*(3-2). \u0414\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u043f\u043e\u043b\u044c\u0441\u043a\u0443\u044e   \/\/\/ \u043d\u043e\u0442\u0430\u0446\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f 2 \u0441\u0442\u0440\u043e\u043a\u0438: \u0432\u0445\u043e\u0434\u043d\u0430\u044f \u0438 \u0432\u044b\u0445\u043e\u0434\u043d\u0430\u044f, \u0438 \u0441\u0442\u0435\u043a \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432,   \/\/\/ \u0435\u0449\u0451 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 \u0432\u044b\u0445\u043e\u0434\u043d\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c. \u041f\u0440\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 1 \u0441\u0438\u043c\u0432\u043e\u043b \u0438   \/\/\/ \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u043e\u0442 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430.   fn yard(input: &amp;Vec&lt;token::Token>) -> Result&lt;Vec&lt;token::Token>, String> {     let mut output: Vec&lt;token::Token> = vec![];     let mut stack: Vec&lt;token::Token> = vec![];     for token in input {         match token {             token::Token::Operand(_o) => {                 \/\/ \u0415\u0441\u043b\u0438 \u0442\u043e\u043a\u0435\u043d \u2014 \u0447\u0438\u0441\u043b\u043e, \u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u044b\u0432\u043e\u0434\u0430.                 output.push(token.clone())             }             token::Token::Function(_f) => {                 stack.push(token.clone())             }             token::Token::Operation(token::Op::ParenLeft) => {                 stack.push(token.clone())             }             token::Token::Operation(token::Op::ParenRight) => {                 loop {                     if let Some(last_token_in_stack) = stack.pop() {                         match last_token_in_stack {                             token::Token::Operation(token::Op::ParenLeft) => {                                 break;                             }                             _ => {                                 output.push(last_token_in_stack.clone())                             }                         }                     } else {                         return Err(\"\u0412 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043a\u043e\u0431\u043a\u0430.\".to_string());                     }                 }             }             token::Token::Operation(op1) => {                 if let Some(token::Token::Operation(op2)) = stack.pop() {                     if op2.weight() >= op1.weight() {                         output.push(token::Token::Operation(op2))                     } else {                         stack.push(token::Token::Operation(op2))                     }                }                  stack.push(token.clone())             }         }     }     while let Some(last_token_in_stack) = stack.pop() {         match last_token_in_stack {             token::Token::Operation(token::Op::ParenLeft) => {                 return Err(\"\u0412 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043a\u043e\u0431\u043a\u0430.\".to_string());             }             _ => { output.push(last_token_in_stack) }         }     }     Ok(output)   }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<h4>\u041a\u043e\u043d\u0435\u0446<\/h4>\n<p><a href=\"https:\/\/mae664128.github.io\/calculator-wasm-rust-pwa\/\" rel=\"noopener noreferrer nofollow\">View deployment<\/a><\/p>\n<p>P.S. \u041e\u0441\u043e\u0431\u043e \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435, \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0435\u043f\u0435\u043d\u044c.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/722438\/\"> https:\/\/habr.com\/ru\/post\/722438\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u0437\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435. \u041d\u0438\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f <a href=\"https:\/\/en.wikipedia.org\/wiki\/Progressive_web_app\" rel=\"noopener noreferrer nofollow\">PWA<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u0430\u043a \u0438 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0441 \u041e\u0421 Windows. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f Rust \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a eframe (<a href=\"https:\/\/github.com\/emilk\/egui#quick-start\" rel=\"noopener noreferrer nofollow\">egui<\/a>). \u0413\u043e\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u041e\u0421 Windows, \u0438 \u043a\u0430\u043a \u0444\u0430\u0439\u043b Webassembly. \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c GitHub Action \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f (\u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Webassembly) \u043a\u0430\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 (GitHub Pages).<\/p>\n<figure class=\"bordered full-width\"><\/figure>\n<details class=\"spoiler\">\n<summary>\u041c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u0430\u0432\u0442\u043e\u0440\u0430<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043e\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0440\u0435\u043c\u044f, \u0438\u043d\u043e\u0433\u0434\u0430, \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0442\u0435\u043c, \u0447\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u044e \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0440\u0430\u0437\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0438\u0445 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f, \u0432 \u043c\u043e\u0439 \u0444\u043e\u043a\u0443\u0441 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u043e\u043f\u0430\u043b \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f Rust. \u0418 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044f \u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 RUST, \u044f \u043f\u043e\u0434\u043e\u0448\u0435\u043b \u043a \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.  \u041d\u0443\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044f \u0431\u044b\u043b \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0434\u0438\u0432\u043b\u0435\u043d. \u0423\u0434\u0438\u0432\u043b\u0435\u043d \u043a\u0430\u043a \u0432 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043a\u043b\u044e\u0447\u0435, \u0442\u0430\u043a \u0438 \u0432 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c.<\/p>\n<p>\u0427\u0442\u043e \u043f\u043e\u0440\u0430\u0434\u043e\u0432\u0430\u043b\u043e:<\/p>\n<ul>\n<li>\n<p>\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043e\u0447\u0435\u043d\u044c <a href=\"https:\/\/www.areweguiyet.com\/\" rel=\"noopener noreferrer nofollow\">\u043c\u043d\u043e\u0433\u043e<\/a> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f GUI, \u043a\u0430\u043a \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 rust, \u0442\u0430\u043a \u0438 \u043e\u0431\u0435\u0440\u0442\u043e\u043a \u0432\u043e\u043a\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u044f\u0437\u044b\u043a\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p>\u043c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" rel=\"noopener noreferrer nofollow\">WASM<\/a>\u00a0\u0438 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e \u0440\u0430\u0441\u0441\u0442\u0440\u043e\u0438\u043b\u043e:<\/p>\n<ul>\n<li>\n<p>\u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f GUI \u0438 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u0447\u0442\u043e \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u044b \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043d\u043e\u0441\u044f\u0442 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440 (\u043f\u0440\u0438\u043c\u0435\u0440 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442 <a href=\"https:\/\/github.com\/linebender\/druid\" rel=\"noopener noreferrer nofollow\">Druid<\/a>, \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0442\u0438\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u043d\u0438\u043c \u0438 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043b\u0430\u0441\u044c \u043d\u0430\u0434 \u043d\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c <a href=\"https:\/\/github.com\/linebender\/xilem\" rel=\"noopener noreferrer nofollow\">Xilem<\/a>). \u0414\u0430, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0442\u043e\u0436\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u0435\u043d.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0430\u043c\u043e\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u043b\u043e \u043c\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 &#8212; \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" rel=\"noopener noreferrer nofollow\">WASM<\/a>\u00a0\u0438 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. &#171;\u0422\u0440\u0435\u043d\u0434 \u0437\u0430\u0432\u0442\u0440\u0430\u0448\u043d\u0435\u0433\u043e \u0438\u043b\u0438 \u0432\u0447\u0435\u0440\u0430\u0448\u043d\u0435\u0433\u043e \u0434\u043d\u044f&#187; &#8212; \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u044f, \u0442\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u044d\u0442\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 (\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043b\u0443\u043a\u0430\u0432\u043b\u044e, \u0442\u0430\u043a \u043a\u0430\u043a \u0433\u043e\u0434 \u0438\u043b\u0438 \u0434\u0432\u0430 \u043d\u0430\u0437\u0430\u0434 \u044f \u0442\u0440\u043e\u0433\u0430\u043b rust + <a href=\"https:\/\/github.com\/yewstack\/yew\" rel=\"noopener noreferrer nofollow\">Yew<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0433\u0440\u0443 <a href=\"https:\/\/mae664128.github.io\/sea_battle\/\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0440\u0441\u043a\u043e\u0439 \u0431\u043e\u0439<\/a> \u043d\u0430 Webassembly).<\/p>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e, \u043c\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 <a href=\"https:\/\/github.com\/emilk\/egui#quick-start\" rel=\"noopener noreferrer nofollow\">EGUI<\/a>.  \u041d\u0435\u0442 \u043d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044f \u043f\u0440\u043e\u0432\u0435\u043b \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u0430\u0431\u043b\u0438\u0447\u043a\u0443, \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u043b \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044f \u043a\u0443\u043f\u0438\u043b\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u0442 <a href=\"https:\/\/www.egui.rs\/#demo\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0438\u043c\u0435\u0440<\/a>.<\/p>\n<\/div>\n<\/details>\n<h3>\u041f\u043b\u0430\u043d \u0440\u0430\u0431\u043e\u0442<\/h3>\n<ol>\n<li>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 (\u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c).<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c github actions, \u0447\u0442\u043e\u0431\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0440\u0435\u0448\u0430\u0442\u0435\u043b\u044c \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<\/li>\n<\/ol>\n<h3>\u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443<\/h3>\n<p>\u041f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044e \u0432\u0441\u0435\u0445 \u0440\u0430\u0431\u043e\u0442 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u0432\u0438\u0434\u0435 web \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (PWA) \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u041e\u0421 Windows.<\/p>\n<p><em>\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440?<\/em><br \/><em>\u0421\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e \u043e\u0431 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0441\u043a\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438, \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435. \u0418 \u0440\u0430\u0437, \u0445\u0443\u0434\u043e-\u0431\u0435\u0434\u043d\u043e, 2 + 2 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u044f \u0443\u0436\u0435 \u0443\u043c\u0435\u044e, \u0442\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430 \u0442\u0443\u0436\u0435 \u0442\u0435\u043c\u0443.<\/em><\/p>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0433\u043b\u0430\u0432\u043d\u043e\u043c &#8212; \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u0438 \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c (\u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e) CI\/CD \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c GitHub Action \u0438 GitHub Pages.<\/p>\n<h3>1 \u041f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d<\/h3>\n<h4>1.1 \u0418\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h4>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/8bf53a4d8ea85a83fc8b533a464e70e746027d8e\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d rust.<\/p>\n<pre><code class=\"bash\">$ rustup --version rustup 1.25.2 (17db695f1 2023-02-01) info: This is the version for the rustup toolchain manager, not the rustc compiler. info: The currently active `rustc` version is `rustc 1.67.1 (d5a82bbd2 2023-02-07)`<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>cargo new &lt;\u0438\u043c\u044f-\u043f\u0440\u043e\u0435\u043a\u0442\u0430><\/code>:<\/p>\n<pre><code class=\"bash\">$ cargo new calculator-wasm-rust-pwa --bin      Created binary (application) `calculator-wasm-rust-pwa` package<\/code><\/pre>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b, \u0430 \u043d\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043a\u043b\u044e\u0447 <code>--bin<\/code>.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0435\u0449\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0444\u0430\u0439\u043b <code>src\/lib.rs<\/code>:<\/p>\n<pre><code class=\"bash\">$ touch calculator-wasm-rust-pwa\/src\/lib.rs<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e Cargo \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u0434\u043b\u044f \u043d\u0430\u0441:<\/p>\n<pre><code class=\"bash\">$ cd calculator-wasm-rust-pwa\/ $ tree . H:. \u2502   .gitignore \u2502   Cargo.toml \u2514\u2500\u2500\u2500src\\         main.rs<\/code><\/pre>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>Cargo.toml<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u0432\u0441\u0435\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 (\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439) \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u043f\u0430\u043f\u043a\u0435 <code>src\\<\/code> \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434.<\/p>\n<h4>1.2 \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442<\/h4>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/4c8b9a8bccfd7f1d63fe82b6a753aa2e346b98b3\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448 \u0432\u044b\u0431\u043e\u0440 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u043d\u0430 <a href=\"https:\/\/github.com\/emilk\/egui#quick-start\" rel=\"noopener noreferrer nofollow\">EGUI<\/a> \u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f &#171;\u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430&#187; \u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c <code>eframe<\/code> &#8212; \u044d\u0442\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c egui.<\/p>\n<pre><code class=\"bash\">$ cargo add eframe --no-default-features -F default_fonts -F glow -F persistence<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e eframe:<br \/> &#8212; <code>default_fonts<\/code> &#8212; \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0448\u0440\u0438\u0444\u0442\u044b egui \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<br \/> &#8212; <code>glow<\/code> &#8212; \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c egui, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c glow \u043a\u0430\u043a \u0431\u044d\u043a\u044d\u043d\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430: &#171;wgpu&#187;.<br \/> &#8212; <code>persistence<\/code> &#8212; \u041f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u043e\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 Cargo.toml:<\/p>\n<pre><code># .\/Cargo.toml  [package]   version = \"0.1.0\"   name = \"calculator-wasm-rust-pwa\"   description = \"A simple calculator created to demonstrate how to work with web gui on rust.\"   authors = [\"Matkin Alexandr &lt;mae664128@gmail.com>\"]   edition = \"2021\"   rust-version = \"1.67.1\"      [dependencies]   eframe = { version = \"0.21.3\", default-features = false, features = [\"default_fonts\", \"glow\", \"persistence\"] }        [profile.release]   opt-level = 2 # fast and small wasm   codegen-units = 1   lto = true   panic = \"abort\"      # Optimize all dependencies even in debug builds:   [profile.dev.package.\"*\"]   opt-level = 2<\/code><\/pre>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u044b\u0442\u044c \u0443 \u0432\u0430\u0441. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435 \u043d\u0430 \u0447\u0442\u043e \u043e\u043d\u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u0438 \u043d\u0443\u0436\u043d\u044b \u043b\u0438 \u043e\u043d\u0438 \u0432\u0430\u043c, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u043e\u0431 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0432 <a href=\"https:\/\/doc.rust-lang.org\/cargo\/reference\/manifest.html\" rel=\"noopener noreferrer nofollow\">The Manifest Format &#8212; The Cargo Book<\/a>.<\/p>\n<h4>1.3 \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h4>\n<p><a href=\"https:\/\/github.com\/MAE664128\/calculator-wasm-rust-pwa\/tree\/f6fdca36a5da55466f64047f7f7c7b82c5a6f298\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043c\u043c\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430.<\/a><\/p>\n<p>\u041f\u043e\u043b\u044c\u0437\u0443\u044f\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0438\u0437 <a href=\"https:\/\/docs.rs\/eframe\/latest\/eframe\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 eframe<\/a>, \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u0435\u0433\u043e, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0441 \u043d\u0430\u0448\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b <code>.\/src\/main.rs<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs #![cfg_attr(not(debug_assertions), windows_subsystem = \"windows\")] \/\/ hide console window on Windows in release  use eframe::egui;      fn main() -> eframe::Result&lt;()>  {       eframe::run_native(           \"calculator-wasm-rust-pwa\",           eframe::NativeOptions::default(),           Box::new(|cc| Box::new(CalcApp::new(cc))),       )   }      struct CalcApp {}      impl CalcApp {       fn new(_cc: &amp;eframe::CreationContext&lt;'_>) -> Self {           CalcApp {}       }   }      impl eframe::App for CalcApp {       fn update(&amp;mut self, ctx: &amp;egui::Context, _frame: &amp;mut eframe::Frame) {           egui::CentralPanel::default().show(ctx, |ui| {               ui.label(r#\"               \u042d\u0442\u043e \u0432\u044b\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0432.               \u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c.            \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0442\u0435 \u0441\u0435\u0431\u0435 \u043b\u044e\u0431\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043d\u0430\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043d\u0435\u043c \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 '='.               \u0423\u0432\u0438\u0434\u0435\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0414\u0430? - \u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u0430\u0448 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e.               \"#);           });       }   }<\/code><\/pre>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u0432\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e.<br \/> \u0421\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>main()<\/code>.<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs \/\/ ...  fn main() -> eframe::Result&lt;()>  {       eframe::run_native(           \"calculator-wasm-rust-pwa\",           eframe::NativeOptions::default(),           Box::new(|cc| Box::new(CalcApp::new(cc))),       )   }   \/\/ ...<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>eframe::run_native<\/code> \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 (\u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u043e\u0435) \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b:<\/p>\n<ul>\n<li>\n<p><code>app_name<\/code> (\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430) \u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f  \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430.<\/p>\n<\/li>\n<li>\n<p><code>native_options<\/code> (\u0412\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430) &#8212; \u044d\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 NativeOptions,  \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430.  \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0435\u0449\u0435 \u043f\u0440\u0438\u043a\u043e\u0441\u043d\u0435\u043c\u0441\u044f \u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u043f\u043e\u043a\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 <code>eframe::NativeOptions::default()<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>app_creator<\/code> (\u0422\u0440\u0435\u0442\u044c\u044f \u0441\u0442\u043e\u043a\u0430) &#8212; \u0437\u0434\u0435\u0441\u044c \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 app_creator \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u043d\u0430\u043c\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 <code>CalcApp::new(cc)<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0442\u0438\u043f\u0430\u0436 (\u0442\u0440\u0435\u0439\u0442\/\u0447\u0435\u0440\u0442\u0430) <code>eframe::App<\/code>.<\/p>\n<pre><code class=\"rust\">\/\/ .\/src\/main.rs \/\/ ...  struct CalcApp {}      impl CalcApp {       fn new(_cc: &amp;eframe::CreationContext&lt;'_>) -> Self {           CalcApp {}       }   }      impl eframe::App for CalcApp {       fn update(&amp;mut self, ctx: &amp;egui::Context, _frame: &amp;mut eframe::Frame) {           egui::CentralPanel::default().show(ctx, |ui| {               ui.label(r#\"               \u042d\u0442\u043e \u0432\u044b\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440.              \u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435 \u0441\u0435\u0431\u0435 \u043b\u044e\u0431\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043d\u0430\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043d\u0435\u043c \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 '='. \u0423\u0432\u0438\u0434\u0435\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0434\u0430? - \u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u0430\u0448 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e.             \"#);           });       }   }<\/code><\/pre>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0443\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 <code>CalcApp<\/code> \u0438 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043a \u043d\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>new()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0432\u044b\u043c \u043a\u0430\u0434\u0440\u043e\u043c. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<br \/>\u0421\u0430\u043c\u0430\u044f \u0432\u0430\u0436\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u043d\u0430\u0448\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>update<\/code> \u0438\u0437 \u0442\u0438\u043f\u0430\u0436\u0430 (\u0442\u0440\u0435\u0439\u0442\u0430\/\u0447\u0435\u0440\u0442\u044b) <code>eframe::App<\/code>. \u0414\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0435, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u0412\u043d\u0443\u0442\u0440\u0438 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432 <code>SidePanel<\/code>, <code>TopPanel<\/code>, <code>CentralPanel<\/code>, <code>Window<\/code> \u0438\u043b\u0438 <code>Area<\/code>.<\/p>\n<p>\u041f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">$ cargo run<\/code><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e. \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0433\u043e\u0442\u043e\u0432. \u0420\u0430\u0441\u0445\u043e\u0434\u0438\u043c\u0441\u044f.<\/p>\n<figure class=\"\"><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b \u0435\u0441\u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c:<\/p>\n<pre><code class=\"bash\">$ cargo build --release<\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b, \u043c\u044b<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-346750","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/346750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=346750"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/346750\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=346750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=346750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=346750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}