Trekklavier -spyskaart: 4 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:25

Skep 'n trekklavierkieslys met meer vlakke met slegs HTML en CSS.

Terwyl ek 'n Raspberry Pi vir my projekte gebruik, kan dit op enige webbediener werk.

In plaas daarvan om voorbeelde te gee van hoe om 'n spesifieke webelement te skep, is die doel om 'n sjabloon te hê wat werkvoorbeelde bevat van elke element wat in my projekte gebruik word. Dit is makliker om iets wat werk, aan te pas, om dit dan aan die werk te kry.

'N Trekklavierkieslys kan via 'n rekenaar, pad of selfoon gebruik word as 'n koppelvlak van 'n Raspberry Pi -toestel. Terwyl ek 'n Raspberry Pi met lighttpd gebruik, kan enige hardeware en webbediener gebruik word.

Elke Raspberry Pi -projek moet 'n koppelvlak hê. Vanweë die relatief klein skermgrootte is selfone die beperkendste. 'N Trekklavier-spyskaart bereik die perke van 'n telefoon deur (+) uit te brei en vertikaal in te val (-), sodat soveel spyskaartitems moontlik is.

Daar is baie voorbeelde van trekklavierspyskaarte op die internet. Omdat ek van die voorkoms en gevoel van OpenHAB of OpenSprinkler hou, wou ek iets soortgelyks hê.

Tot dusver was die spyskaarte van my Raspberry Pi -projek baie eenvoudig. Ek het nie baie tyd spandeer aan die kyk-en-voel nie. Die meeste van my koppelvlakke is slegs in HTML geskryf en het geen CSS gebruik nie. Ek is nie 'n UI-ontwerper nie en werk aan kyk-en-voel is buite my gemaksone. Omdat ek nie gereeld op webwerwe werk nie, het ek CSS verskeie kere geleer en vergeet. Ek wou die spyskaart een keer laat lyk en voel, dit regkry en dit dan weer gebruik.

In my toepassings het ek die spyskaart nodig om te ondersteun:

• skakels na ander webwerwe of toestelle,
• vertoon waardes of status en
• laat opdaterings van waardes toe.

Die laaste twee benodig meer as HTML en CSS.

Aangesien ek nie vooraf weet hoeveel spyskaarte ek benodig nie, kan 'n trekklavierkieslys die buigsaamheid moontlik maak om die spyskaart uit te brei soos benodig.

My opmerkings in die CSS en HTML is miskien 'n bietjie te hoog, maar ek kan na die opmerkings kyk en weet hoe ek die spyskaart kan verander om aan my behoeftes te voldoen sonder om CSS weer te leer. Die kommentaar maak dit ook vir my maklik om te verstaan hoe die CSS die HTML beïnvloed, sonder om heen en weer tussen die twee te draai.

Ek het 'n paar ander vereistes gehad:

• Soms verloor my huis internettoegang. Die spyskaartstelsel kan dus nie afhang van skakels na eksterne webwerwe nie, wat eksterne lettertipes, API's of javascript insluit
• My gesin het 'n eklektiese rekenaarsmak en gebruik iPhone, Android, MAC's, PC's en iPads, tablette, sowel as Chrome, Firefox, Safari en IE. Die spyskaart moet op al hierdie dinge werk

Ek het 'n paar weke probeer om verskillende trekklavierspyskaartimplementasies uit te probeer. Hulle redigeer, pas dit aan en gee op. Die webwerf, CSS Scripts, het 'n spyskaart op meer vlakke wat aan al my vereistes voldoen en die basis vorm vir hierdie instruksies.

Stap 1: Stap-vir-stap installasie

Maak die terminale venster op 'n MacBook of rekenaar oop en voer die volgende opdragte uit:

Vervang items in ♣'s met werklike waardes.

Meld aan by Raspberry Pi

$ ssh pi@♣ framboos-pi-ip-adres ♣

Skakel oor na die hoofgids

$ cd /var /www

Laai index.html af en verander die regte en eienaar van die lêer

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

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

Maak 'n gids vir beelde en gaan na die gids

$ mkdir img

$ cd img

Laai die beelde af en verander die eienaar.

$ 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/ framboos-pi-p.webp

Maak 'n rugsteun van die hoofgids en skep die css -gids en gaan daarin

$ cd..

$ mkdir css $ cd css

Laai die stylblad af en verander die regte en eienaar van die lêer

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

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

As u nie 'n framboos -pi het nie, kan u hierdie lêers aflaai na 'n Mac of 'n rekenaar. Om die spyskaart ook vanaf 'n Mac of 'n rekenaar te laat loop

• dubbelklik op index.html, of
• kies index.html, klik met die rechtermuisknop en maak oop met die blaaier van u keuse.

As u 'n Raspberry Pi gebruik, moet dit 'n webbediener hê. Maak 'n blaaier op u rekenaar of Mac oop, en voer in die URL -venster in:

♣ framboos-pi-ip-adres ♣/index.html

My bediener benodig 'n veilige verbinding (verwyder spasies rondom die dubbelpunt):

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

En dit werk!

Stap 2: Bylaag: Verwysings

• CSS -script Multilevel trekklavierkieslys met slegs HTML en CSS
• W3Schools trekklavier spyskaart
• W3Schools CSS
• W3Schools HTML

Stap 3: Bylaag: Opdaterings

Stap 4: Bylaag: probleemoplossing

Hier is 'n paar idees wat kan help:

• Om HTML in php echo -stellings te formateer, voeg "\ r" aan die einde by om 'n retourkarakter in te voer
• Die groep-ID vir 'n subkieslys moet uniek wees. As die groep-ID van 'n subkieslys nie uniek is nie, word die subkieslysitems in die eerste instansie van die groep-ID ingesluit