Прост интерактивен потребителски интерфейс за преподаване и оценяване .: 11 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:54

Този проект е разработен като част от университетски клас, целта е била да се направи интерактивна система за преподаване и оценка на определена тема. За него използвахме Processing на компютър за интерфейс и Arduino NANO за аркадния бутон и светодиодите, така че е доста просто. За да преподава, той предлага интерфейс, където се показва модел и потребителят може да щракне върху всеки от компонентите за да получите текстово описание на това. Въпреки това, за да оцени потребителя, той предлага проблем, подобен на пъзел, при който потребителят трябва да плъзга и пуска всяка част, за да изгради съответния модел, и да натисне бутон, за да потвърди отговора си, след което светодиодите на бутона ще кажат на потребителя дали отговорът е верен или не.

Най -често срещаният проблем, с който се сблъскахме при създаването на този проект, беше комуникацията между Processing и Arduino, тъй като латентността на връзката може да варира между компютрите, което възпрепятства преносимостта на устройството. Също така трябва да дефинирате порта, към който се свързва Arduino всеки път, тъй като всяко свързано USB устройство се брои, така че трябва да проверите коя COM е.

Стъпка 1: Програмиране на интерфейса при обработка (настройка)

Настройваме променливите, които ще се използват, позицията на всички части като масиви от x и y кординати, както и масиви за изображенията на всяка от частите за менютата Teach (imgA) и Evaluate (img), масив за проверка дали отговорите са верни и масиви за боверите и заключените, които ще определят дали мишката е над парчетата и дали се опитва да ги вземе. След това продължете да ги инициализирате и отворете порта, от който интерфейсът ще комуникира с Arduino.

Стъпка 2: Програмиране на интерфейса при обработка (главно меню)

Първо, в главното меню ще се показват два бутона и когато един от тях бъде натиснат, програмата ще зареди или менюто „Обучение“, или менюто „Оценка“.

Така че, когато мишката е натисната и е над един от бутоните, тя изпраща позициите на всички части, от които се нуждае новото меню, и зарежда другото меню.

Стъпка 3: Програмиране на интерфейса при обработка (меню „Обучение“)

Тук, ако мишката се движи над една от частите, тя ще активира съответния курсор, който при натискане на мишката ще активира съответния текст и ще го покаже на екрана.

Стъпка 4: Програмиране на интерфейса за обработка (меню „Оценка“)

Тук е същото, той би активирал бутоните, които при натискане на мишката щяха да активират заключените, но този път вместо да показва текстове, ще плъзга избраната част. (Това се основаваше на „Плъзгане, пускане и задържане с мишката.“От processing.js)

Стъпка 5: Когато мишката е натисната

Както бе посочено по -рано, когато мишката е натисната и курсорът е „вярно“, той ще активира съответното заключено.

Стъпка 6: Когато мишката се влачи

Ако мишката се плъзга, действителното меню е менюто за оценка и едно от заключените е "вярно", то ще плъзне съответната част до мишката.

Стъпка 7: Когато мишката е освободена

Така че, ако мишката е пусната и все още е в менюто "Оценка", тя ще постави частта, която се влачи, на мястото, където трябва да изградите модела, ако е достатъчно близо и ще провери дали отговорът ви е правилен. Тогава той би нулирал всички заключени и текстове на „невярно“.

Стъпка 8: Общуване с Arduino

Така че сега, ако натиснете бутона на Arduino, той проверява дали сте поставили всички правилни части и ви казва дали е правилно или не, след това изпраща "1", ако е правилно, или "2", ако е грешно на Arduino.

Стъпка 9: Настройка на Arduino (Схема)

Това беше схемата, използвана за arduino, но с бутон Arcade, така че зеленият проводник, отиващ към бутона, ще отиде до долния конектор на бутона (COM), а червеният проводник ще отиде до средния (NO). За светодиодите е използван резистор 220Ω, 1kΩ за бутона.

Стъпка 10: Програмиране на Arduino

Сега той конфигурира бутона като INPUT на цифровия щифт 2 и светодиодите като OUTPUT на 4, 6 и 8. След това конфигурира порта и го чете, ако получи "1" (правилен отговор), той ще светне 3 Светодиодите един по един, ако получи "2" (грешен отговор), ще светне само един от тях. Също така, ако бутонът е натиснат, той ще изпрати "e" към интерфейса.

Стъпка 11: Това е всичко, забавлявайте се

Ето кодовете, използвани за този проект: