Izbornik harmonika: 4 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:34

Napravite izbornik harmonika na više razina koristeći samo HTML i CSS.

Dok za svoje projekte koristim Raspberry Pi, ovo se može izvoditi na bilo kojem web poslužitelju.

Umjesto pružanja primjera kako stvoriti određeni web element, cilj je imati predložak koji uključuje radne primjere svakog elementa koji se koristi u mojim projektima. Lakše je izmijeniti nešto što funkcionira, a zatim pokušati to učiniti.

Izbornik harmonike može se koristiti kao sučelje za uređaj Raspberry Pi putem računala, podloge ili mobilnog telefona. Dok koristim Raspberry Pi sa lighttpdom, može se koristiti bilo koji hardver i web poslužitelj.

Svaki projekt Raspberry Pi trebao bi imati sučelje. Zbog relativno male veličine zaslona, mobiteli su najrestriktivniji. Izbornik harmonike zaobilazi ograničenja telefona proširivanjem (+) i skupljanjem (-) okomito dopuštajući onoliko stavki izbornika koliko je potrebno.

Na webu postoji mnogo primjera menija za harmoniku. Budući da mi se sviđa izgled i osjećaj OpenHAB-a ili OpenSprinklera, želio sam nešto slično.

Do sada su izbornici mog projekta Raspberry Pi bili vrlo jednostavni. Nisam potrošio puno vremena na izgled i dojam. Većina mojih sučelja napisana je samo u HTML -u i nije koristila CSS. Nisam dizajner korisničkog sučelja i rad na izgledu je izvan moje zone udobnosti. Budući da ne radim često na web stranicama, više sam puta naučio i zaboravio CSS. Htio sam jednom napraviti izgled i osjećaj jelovnika, ispraviti ga, a zatim ga ponovno upotrijebiti.

U svojim aplikacijama meni je potreban izbornik za podršku:

• veze na druge web stranice ili uređaje,
• prikaz vrijednosti ili statusa i
• dopustiti ažuriranje vrijednosti.

Posljednja dva zahtijevaju više od HTML -a i CSS -a.

Budući da ne znam unaprijed, koliko će mi stavki izbornika trebati, meni za harmoniku omogućuje fleksibilnost za proširenje izbornika prema potrebi.

Moji komentari u CSS-u i HTML-u možda su malo prekomjerni, ali mogu pogledati komentare i znati promijeniti izbornik kako bih zadovoljio svoje potrebe bez ponovnog učenja CSS-a. Komentari mi također olakšavaju razumijevanje kako CSS utječe na HTML bez prevrtanja naprijed-natrag između njih.

Imao sam još nekoliko zahtjeva:

• Ponekad mi kuća izgubi pristup internetu. Dakle, ne mogu imati sustav izbornika koji ovisi o vezama na vanjske web stranice, što uključuje vanjske fontove, API -je ili javascript
• Moja obitelj ima eklektičan računalni ukus i koristi iPhone, android, MAC, PC i iPad, tablete, kao i, chrome, firefox, safari i IE. Izbornik mora raditi na svim ovim

Proveo sam nekoliko tjedana isprobavajući različite implementacije jelovnika. Uređujući ih, prilagođavajući ih i odustajući od njih. Web stranica, CSS Scripts, ima izbornik na više razina koji je zadovoljio sve moje zahtjeve i čini osnovu ovog uputstva.

Korak 1: Instalacija korak po korak

Otvorite prozor terminala na MacBook -u ili računalu i pokrenite sljedeće naredbe:

Zamijenite stavke u ♣ s stvarnim vrijednostima.

Prijavite se na Raspberry Pi

$ ssh pi@♣ adresa maline-pi-ip ♣

Promijenite u glavni direktorij

$ cd /var /www

Preuzmite index.html i promijenite dopuštenja i vlasnika datoteke

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/index.html"

$ sudo chmod 774 index.html $ sudo chown pi index.html

Napravite direktorij za slike i premjestite se u taj direktorij

$ mkdir img

$ cd img

Preuzmite slike i promijenite vlasnika.

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/tv.png"

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/menu-icon.png" $ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/ malina-pi-p.webp

Napravite sigurnosnu kopiju u glavnom direktoriju i stvorite css direktorij i premjestite se u njega

$ cd..

$ mkdir css $ cd css

Preuzmite stilsku tablicu i promijenite dopuštenja i vlasnika datoteke

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/style.css"

$ sudo chmod 744 style.css $ sudo chown pi style.css

Ako nemate maline pi, možete preuzeti ove datoteke na Mac ili PC. Za pokretanje izbornika s Mac -a ili PC -a

• dvaput kliknite na index.html ili
• odaberite index.html, desnom tipkom miša kliknite i otvorite s preglednikom po vašem izboru.

Ako koristite Raspberry Pi, mora imati pokrenut web poslužitelj. Otvorite preglednik na računalu ili Macu, a u prozoru URL unesite:

♣ adresa maline-pi-ip ♣/index.html

Moj poslužitelj zahtijeva sigurnu vezu (uklonite razmake oko dvotočke):

♣raspberry-pi-ip-address♣/index.html

I radi!

Korak 2: Dodatak: Reference

• CSS skripta Izbornik harmonika na više razina koji koristi samo HTML i CSS
• W3Schools meni za harmoniku
• W3Schools CSS
• W3Schools HTML

Korak 3: Dodatak: Ažuriranja

Korak 4: Dodatak: Rješavanje problema

Evo nekoliko ideja koje bi mogle pomoći:

• Za oblikovanje HTML -a u izrazima php echo, dodajte "\ r" na kraju da biste unijeli povratni znak
• ID grupe za podizbornik mora biti jedinstven. Ako id-podizbornika nije jedinstven, njegove stavke pod-izbornika bit će uključene u prvu instancu group-id-a