Video: Habr admin console. Binibigyang-daan kang ayusin ang karma, rating, at i-ban ang mga user.
TL; DR: Sa artikulong ito susubukan kong lumikha ng comic Habr control panel gamit ang Webaccess/HMI Designer industrial interface development environment at ang WebOP terminal.
Ang human-machine interface (HMI) ay isang hanay ng mga system para sa pakikipag-ugnayan ng tao sa mga kinokontrol na makina. Karaniwang ginagamit ang terminong ito sa mga sistemang pang-industriya na mayroong operator at control panel.
WebOP — isang autonomous na terminal ng industriya para sa paglikha ng mga interface ng tao-machine. Ginagamit para gumawa ng mga control panel ng produksyon, monitoring system, control room, smart home controllers, atbp. Sinusuportahan ang direktang koneksyon sa pang-industriyang kagamitan at maaaring gumana bilang bahagi ng isang SCADA system.
WebOP terminal - hardware
Ang WebOP terminal ay isang mababang-power na computer batay sa isang ARM processor, sa isang solong kaso na may monitor at touchscreen, na idinisenyo upang magpatakbo ng isang program na may graphical na interface na ginawa sa HMI Designer. Depende sa modelo, ang mga terminal ay may iba't ibang pang-industriya na interface sa board: RS-232/422/485, CAN bus para sa pagkonekta sa mga automotive system, USB Host port para sa pagkonekta ng mga karagdagang peripheral, USB Client port para sa pagkonekta sa terminal sa isang computer, audio input at audio output , MicroSD card reader para sa non-volatile memory at paglilipat ng mga setting.
Ang mga device ay nakaposisyon bilang kapalit ng badyet para sa mga all-in-one na PC, para sa mga gawain na hindi nangangailangan ng malalakas na processor at mga mapagkukunan ng isang ganap na desktop computer. Maaaring gumana ang WebOP bilang isang standalone na terminal para sa kontrol at data input/output, ipinares sa iba pang mga WebOP, o bilang bahagi ng isang SCADA system.
Maaaring direktang kumonekta ang terminal ng WebOP sa mga pang-industriyang device
Passive cooling at proteksyon ng IP66
Dahil sa mababang pag-aalis ng init, ang ilang mga modelo ng WebOP ay ganap na idinisenyo nang walang aktibong paglamig ng hangin. Nagbibigay-daan ito sa mga device na mai-mount sa mga lugar na sensitibo sa antas ng ingay at binabawasan ang dami ng alikabok na nakapasok sa loob ng housing.
Ang front panel ay ginawa nang walang mga gaps o joints, may antas ng proteksyon na IP66, at nagbibigay-daan sa direktang pagpasok ng tubig sa ilalim ng pressure.
Rear panel ng WOP-3100T terminal
Non-volatile memory
Upang maiwasan ang pagkawala ng data, ang WebOP ay may 128KB na hindi pabagu-bago ng memorya, na maaaring gamitin sa parehong paraan tulad ng sa RAM. Maaari itong mag-imbak ng mga pagbabasa ng metro at iba pang kritikal na data. Kung sakaling mawalan ng kuryente, maise-save at maibabalik ang data pagkatapos ng pag-reboot.
Remote update
Ang program na tumatakbo sa terminal ay maaaring i-update nang malayuan sa pamamagitan ng isang Ethernet network o sa pamamagitan ng RS-232/485 serial interface. Pinapasimple nito ang pagpapanatili, dahil inaalis nito ang pangangailangan na pumunta sa lahat ng mga terminal upang i-update ang software.
Mga Modelo ng WebOP
- ang pinaka-abot-kayang mga device na binuo batay sa HMI RTOS real-time na operating system. Ang serye ay kinakatawan ng WebOP-///, na may mga diagonal ng screen na 4,3 pulgada, 7 pulgada, 8 pulgada at 10.1 pulgada, ayon sa pagkakabanggit.
— mas advanced na mga modelo batay sa operating system ng Windows CE. Naiiba sila sa serye ng 2000T sa malaking bilang ng mga interface ng hardware at may nakasakay na CAN interface. Gumagana ang mga device sa pinahabang hanay ng temperatura (-20~60°C) at may antistatic na proteksyon (Air: 15KV/Contact: 8KV). Ang linya ay ganap na nakakatugon sa mga kinakailangan ng pamantayan ng IEC-61000, na nagpapahintulot sa mga aparato na magamit sa paggawa ng semiconductor kung saan ang static discharge ay isang problema. Ang serye ay kinakatawan ng WebOP-//, na may mga diagonal ng screen na 7 pulgada, 10.1 pulgada at 12.1 pulgada, ayon sa pagkakabanggit.
WebAccess/HMI Designer development environment
Sa labas ng kahon, ang WebOP terminal ay isang mababang-power ARM computer lamang kung saan maaari kang magpatakbo ng anumang software, ngunit ang buong punto ng solusyon na ito ay ang pagmamay-ari na WebAcess/HMI industrial interface development environment. Ang sistema ay binubuo ng dalawang bahagi:
- Designer ng HMI — kapaligiran para sa pagbuo ng mga interface at logic ng programming. Gumagana sa ilalim ng Windows sa computer ng programmer. Ang huling programa ay pinagsama-sama sa isang file at inilipat sa terminal para sa pagpapatupad sa runtime. Ang programa ay magagamit sa Russian.
- HMI Runtime — runtime para sa pagpapatakbo ng pinagsama-samang programa sa huling terminal. Maaari itong gumana hindi lamang sa mga terminal ng WebOP, kundi pati na rin sa Advantech UNO, MIC, at mga regular na desktop computer. Mayroong mga bersyon ng runtime para sa Linux, Windows, Windows CE.
Kamusta mundo - paglikha ng isang proyekto
Simulan natin ang paggawa ng pansubok na interface para sa ating Habr control panel. Tatakbuhin ko ang programa sa terminal pagpapatakbo ng WinCE. Una, gumawa tayo ng bagong proyekto sa HMI Designer. Upang magpatakbo ng isang programa sa WebOP, mahalagang piliin ang tamang modelo; ang format ng panghuling file ay nakasalalay dito. Sa hakbang na ito, maaari mo ring piliin ang arkitektura ng desktop, pagkatapos ay isasama ang huling file para sa X86 runtime.
Paglikha ng isang bagong proyekto at pagpili ng isang arkitektura
Pagpili ng protocol ng komunikasyon kung saan mailo-load ang pinagsama-samang programa sa WebOP. Sa hakbang na ito, maaari kang pumili ng serial interface, o tukuyin ang IP address ng terminal.
Interface ng paglikha ng proyekto. Sa kaliwang bahagi mayroong isang tree diagram ng mga bahagi ng hinaharap na programa. Sa ngayon, interesado lang kami sa item na Mga Screen, ito ay direkta sa mga screen na may mga elemento ng graphical na interface na ipapakita sa terminal.
Una, gumawa tayo ng dalawang screen na may text na "Hello World" at ang kakayahang lumipat sa pagitan ng mga ito gamit ang mga button. Upang gawin ito, magdagdag ng bagong screen, Screen #2, at sa bawat screen magdagdag ng elemento ng text at dalawang button para sa paglipat sa pagitan ng mga screen (Mga Screen Button). I-configure natin ang bawat button para lumipat sa susunod na screen.
Interface para sa pagtatakda ng pindutan upang lumipat sa pagitan ng mga screen
Handa na ang programang Hello World, maaari mo na itong i-compile at patakbuhin. Sa yugto ng compilation ay maaaring may mga error sa kaso ng mga maling tinukoy na variable o address. Ang anumang error ay itinuturing na nakamamatay; ang programa ay isasama lamang kung walang mga error.
Nagbibigay ang kapaligiran ng kakayahang gayahin ang isang terminal upang ma-debug mo ang program sa iyong computer nang lokal. Mayroong dalawang uri ng simulation:
- Online na simulation — lahat ng panlabas na pinagmumulan ng data na tinukoy sa programa ay gagamitin. Ang mga ito ay maaaring mga USO o device na konektado sa pamamagitan ng mga serial interface o Modbus TCP.
- Offline na simulation — simulation nang walang paggamit ng mga panlabas na device.
Bagama't wala kaming panlabas na data, gumagamit kami ng offline na simulation, na dati nang naipon ang programa. Ang huling programa ay matatagpuan sa folder ng proyekto, na may pangalan ProjectName_ProgramName.px3
Ang program na tumatakbo sa simulation ay maaaring kontrolin gamit ang mouse cursor sa parehong paraan kung paano ito makikita sa touchscreen ng isang WebOP terminal. Nakikita namin na gumagana ang lahat ayon sa nilalayon. Malaki.
Upang i-download ang programa sa isang pisikal na terminal, i-click lamang ang pindutang I-download. Ngunit dahil hindi ko na-configure ang koneksyon ng terminal sa kapaligiran ng pag-unlad, maaari mo lamang ilipat ang file gamit ang USB flash drive o MicroSD memory card.
Ang interface ng programa ay madaling maunawaan, hindi ako dumaan sa bawat graphic block. Ang paglikha ng mga background, hugis, at teksto ay magiging malinaw sa sinumang gumamit ng mga program na katulad ng Word. Upang lumikha ng isang graphical na interface, walang mga kasanayan sa programming ang kinakailangan; ang lahat ng mga elemento ay idinagdag sa pamamagitan ng pag-drag ng mouse papunta sa form.
Paggawa gamit ang memorya
Ngayong alam na natin kung paano gumawa ng mga graphic na elemento, alamin natin kung paano gumawa ng dynamic na content at isang scripting language. Gumawa tayo ng bar chart na nagpapakita ng data mula sa isang variable U $ 100. Sa mga setting ng chart, piliin ang uri ng data: 16-bit integer, at ang hanay ng mga value ng chart: mula 0 hanggang 10.
Sinusuportahan ng programa ang pagsulat ng mga script sa tatlong wika: VBScript, JavaScript at sarili nitong wika. Gagamitin ko ang pangatlong opsyon dahil may mga halimbawa para dito sa dokumentasyon at awtomatikong syntax na tulong sa editor mismo.
Magdagdag tayo ng bagong macro:
Sumulat tayo ng ilang simpleng code upang unti-unting baguhin ang data sa isang variable na maaaring masubaybayan sa isang chart. Magdaragdag kami ng 10 sa variable, at i-reset ito sa zero kapag mas malaki ito sa 100.
$U100=$U100+10
IF $U100>100
$U100=0
ENDIF
Upang maisagawa ang script sa isang loop, itakda ito sa mga setting ng Pangkalahatang Setup bilang Pangunahing Macro, na may pagitan ng pagpapatupad na 250ms.
I-compile at patakbuhin natin ang programa sa simulator:
Sa yugtong ito, natutunan nating manipulahin ang data sa memorya at ipakita ito nang biswal. Ito ay sapat na upang lumikha ng isang simpleng sistema ng pagsubaybay, pagtanggap ng data mula sa mga panlabas na device (sensors, controllers) at i-record ang mga ito sa memorya. Available ang iba't ibang mga bloke ng pagpapakita ng data sa HMI Designer: sa anyo ng mga circular dial na may mga arrow, iba't ibang chart, at graph. Gamit ang mga script ng JavaScript, maaari kang mag-download ng data mula sa mga panlabas na mapagkukunan sa pamamagitan ng HTTP.
Habr control panel
Gamit ang mga nakuhang kasanayan, gagawa kami ng comic interface para sa Habr admin console.
Ang aming remote control ay dapat na:
- Lumipat ng mga profile ng user
- Mag-imbak ng data ng karma at rating
- Baguhin ang karma at mga halaga ng rating gamit ang mga slider
- Kapag na-click mo ang "ban" na buton, ang profile ay dapat mamarkahan bilang pinagbawalan, ang avatar ay dapat baguhin upang i-cross out
Ipapakita namin ang bawat profile sa isang hiwalay na pahina, kaya gagawa kami ng isang pahina para sa bawat profile. Iimbak namin ang karma at rating sa mga lokal na variable sa memorya, na pasisimulan gamit ang Setup Macro kapag nagsimula ang programa.
Naki-click ang larawan
Pagsasaayos ng karma at rating
Upang ayusin ang karma gagamitin namin ang slider (Slide Switch). Tinukoy namin ang variable na nasimulan sa Setup Macro bilang address ng pag-record. Limitahan natin ang hanay ng mga halaga ng slider mula 0 hanggang 1500. Ngayon, kapag gumagalaw ang slider, ang bagong data ay isusulat sa memorya. Sa kasong ito, ang paunang estado ng slider ay tumutugma sa mga halaga ng variable sa memorya.
Para ipakita ang mga numerical value ng karma at rating, gagamitin namin ang Numeric display element. Ang prinsipyo ng pagpapatakbo nito ay katulad ng diagram mula sa halimbawang "Hello World" na programa; ipinapahiwatig lamang namin ang address ng variable sa Monitor Address.
Pindutan ng pagbabawal
Ipinapatupad ang button na "ban" gamit ang elemento ng Toggle Switch. Ang prinsipyo ng pag-iimbak ng data ay katulad ng mga halimbawa sa itaas. Sa mga setting, maaari kang pumili ng ibang text, kulay o imahe, depende sa estado ng button.
Kapag pinindot ang pindutan, ang avatar ay dapat na i-cross out sa pula. Ito ay madaling ipatupad gamit ang Picture Display block. Binibigyang-daan ka nitong magtakda ng maraming larawang nauugnay sa estado ng pindutan ng Toggle Switch. Upang gawin ito, ang block ay binibigyan ng parehong address tulad ng block na may pindutan at ang bilang ng mga estado. Ang larawan na may mga nameplate sa ilalim ng avatar ay naka-set up sa katulad na paraan.
Konklusyon
Sa pangkalahatan, nagustuhan ko ang produkto. Dati, nagkaroon ako ng karanasan sa paggamit ng isang Android tablet para sa mga katulad na gawain, ngunit ang pagbuo ng isang interface para dito ay mas mahirap, at hindi pinapayagan ng mga browser API ang ganap na pag-access sa mga peripheral. Maaaring palitan ng isang WebOP terminal ang kumbinasyon ng Android tablet, computer at controller.
Ang HMI Designer, sa kabila ng archaic na disenyo nito, ay medyo advanced. Nang walang mga espesyal na kasanayan sa programming, maaari mong mabilis na mag-sketch ng isang gumaganang interface. Hindi tinatalakay ng artikulo ang lahat ng mga graphic na bloke, kung saan marami: mga animated na tubo, cylinder, graph, toggle switch. Sinusuportahan nito ang maraming sikat na pang-industriya na controllers sa labas ng kahon at naglalaman ng mga konektor ng database.
sanggunian
Maaaring ma-download ang WebAccess/HMI Designer at Runtime development environment
→
Pinagmulan: www.habr.com