የአኮርዲዮን ምናሌ 4 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:30

ኤችቲኤምኤል እና ሲኤስኤስን ብቻ በመጠቀም ባለብዙ ደረጃ አኮርዲዮን ምናሌ ይፍጠሩ።

ለፕሮጄክቶቼ Raspberry Pi ን በምጠቀምበት ጊዜ ይህ በማንኛውም የድር አገልጋይ ላይ ሊሠራ ይችላል።

አንድ የተወሰነ የድር አካል እንዴት እንደሚፈጥሩ ምሳሌዎችን ከመስጠት ይልቅ ግቡ በፕሮጄክቶቼ ውስጥ ጥቅም ላይ የዋለውን የእያንዳንዱን ንጥረ ነገር የሥራ ምሳሌዎችን የሚያካትት አብነት መኖር ነው። የሚሠራውን ነገር ማሻሻል ይቀላል ፣ ከዚያ ወደ ሥራ ለመግባት ይሞክራል።

የአኮርዲዮ ምናሌ በኮምፒተር ፣ በፓድ ወይም በሞባይል ስልክ በኩል ለ Raspberry Pi መሣሪያ እንደ በይነገጽ ሊያገለግል ይችላል። እኔ lighttpd ን የሚያሄድ Raspberry Pi ን በምጠቀምበት ጊዜ ማንኛውም ሃርድዌር እና የድር አገልጋይ መጠቀም ይቻላል።

እያንዳንዱ Raspberry Pi ፕሮጀክት በይነገጽ ሊኖረው ይገባል። በአንጻራዊ ሁኔታ ሲታይ አነስተኛ የማሳያ መጠን ስላለው የሞባይል ስልኮች በጣም ገዳቢ ናቸው። እንደአስፈላጊነቱ ብዙ የምናሌ ንጥሎችን በማስፋፋት (+) እና በመውደቅ (-) በአቀማመጥ ምናሌ የአኮርድዮን ምናሌ ይዘጋል።

በድር ላይ ብዙ የአኮርዲዮን ምናሌዎች ምሳሌዎች አሉ። የ OpenHAB ወይም OpenSprinkler መልክ እና ስሜት ስለሚወደኝ ፣ ተመሳሳይ ነገር ፈልጌ ነበር።

እስካሁን ድረስ የእኔ Raspberry Pi ፕሮጀክት ምናሌዎች በጣም ቀላል ነበሩ። በመልክ እና በስሜቱ ላይ ብዙ ጊዜ አላጠፋሁም። አብዛኛዎቹ የእኔ በይነገጾች በኤችቲኤምኤል ብቻ የተፃፉ እና ምንም ሲኤስኤስ አልተጠቀሙም። እኔ በይነገጽ ዲዛይነር አይደለሁም እና በመልክ እና በስሜት ላይ መስራት ከምቾቴ ቀጠና ውጭ ነው። በድር ጣቢያዎች ላይ ብዙ ጊዜ ስላልሠራሁ ፣ ብዙ ጊዜ CSS ተማርኩ እና ረሳሁ። የምናሌውን መልክ እና ስሜት አንድ ጊዜ ለማድረግ ፣ በትክክል ለማስተካከል እና ከዚያ እንደገና ለመጠቀም ፈልጌ ነበር።

በመተግበሪያዎቼ ውስጥ እኔ ለመደገፍ ምናሌው ያስፈልገኛል-

• ወደ ሌሎች ድር ጣቢያዎች ወይም መሣሪያዎች አገናኞች ፣
• የማሳያ እሴቶች ወይም ሁኔታ እና
• ለእሴቶች ዝመናዎችን ይፍቀዱ።

የመጨረሻዎቹ ሁለቱ ከኤችቲኤምኤል እና ከሲ.ኤስ.ኤስ.

አስቀድሜ ስለማላውቅ ፣ ምን ያህል የምናሌ ንጥሎች እንደሚያስፈልጉኝ ፣ የአኮርዲዮ ምናሌ ተፈላጊውን እንደ አስፈላጊነቱ ምናሌውን ለማስፋት ያስችላል።

በሲኤስኤስ እና በኤችቲኤምኤል ውስጥ የሰጡኝ አስተያየቶች ትንሽ ከፍ ሊሉ ይችላሉ ፣ ግን እኔ አስተያየቶቹን ማየት እና CSS ን እንደገና ሳላውቅ ፍላጎቶቼን ለማሟላት ምናሌውን እንዴት መለወጥ እንደሚቻል ማወቅ እችላለሁ። አስተያየቶቹ እንዲሁ በሁለቱ መካከል ወደ ኋላ እና ወደ ፊት ሳይገለብጡ ሲኤስኤምኤስ በኤችቲኤምኤል ላይ እንዴት እንደሚጎዳ ለመረዳት ቀላል ያደርግልኛል።

ሌሎች ጥቂት መስፈርቶች ነበሩኝ

• አንዳንድ ጊዜ ቤቴ የበይነመረብ መዳረሻን ያጣል። ስለዚህ ፣ የምናሌ ስርዓቱ ውጫዊ ቅርጸ -ቁምፊዎችን ፣ ኤፒአይዎችን ወይም ጃቫስክሪፕትን በሚያካትት ወደ ውጫዊ ድር ጣቢያዎች አገናኞች ላይ እንዲመሠረት አልችልም
• ቤተሰቦቼ ልዩ ልዩ የኮምፒውተር ጣዕም አላቸው እና iPhone ፣ android ፣ MACs ፣ PC እና iPads ፣ ጡባዊዎች ፣ እንዲሁም ፣ chrome ፣ firefox ፣ safari እና IE ን ይጠቀማሉ። ምናሌው በእነዚህ ሁሉ ላይ ማሄድ አለበት

የተለያዩ የአኮርዲዮ ምናሌ አተገባበርን በመሞከር ለሁለት ሳምንታት አሳልፌያለሁ። እነሱን ማረም ፣ እነሱን ማላመድ እና በእነሱ ላይ ተስፋ መቁረጥ። ድር ጣቢያው ፣ CSS እስክሪፕቶች ፣ ሁሉንም መስፈርቶቼን ያሟላ እና የዚህን አስተማሪ መሠረት መሠረት ያደረገ ባለብዙ ደረጃ ምናሌ አለው።

ደረጃ 1-ደረጃ በደረጃ ጫን

በማክቡክ ወይም በፒሲ ላይ የተርሚናል መስኮት ይክፈቱ እና የሚከተሉትን ትዕዛዞች ያሂዱ

በ in ዎች ውስጥ ያሉትን ዕቃዎች በእውነተኛ እሴቶች ይተኩ።

ወደ Raspberry Pi ይግቡ

$ ssh pi@♣ raspberry-pi-ip-address ♣

ወደ ዋናው ማውጫ ይለውጡ

$ cd /var /www

Index.html ን ያውርዱ ፣ እና ፈቃዶችን እና የፋይሉን ባለቤት ይለውጡ

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

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

ለምስሎች ማውጫ ያዘጋጁ እና ወደዚያ ማውጫ ይሂዱ

$ mkdir img

imd

ምስሎቹን ያውርዱ እና ባለቤቱን ይለውጡ።

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

ወደ ዋናው ማውጫ ምትኬ ያስቀምጡ እና የ css ማውጫውን ይፍጠሩ እና ወደ ውስጥ ይግቡ

ሲዲ ዶላር..

$ mkdir css $ cd css

የቅጥ ሉህ ያውርዱ እና ፈቃዶችን እና የፋይሉን ባለቤት ይለውጡ

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

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

የራስበሪ ፓይ ከሌለዎት እነዚህን ፋይሎች ወደ ማክ ወይም ፒሲ ማውረድ ይችላሉ። ምናሌውን ከማክ ወይም ከፒሲ ለማሄድ ፣ ወይ

• በ index.html ላይ ሁለቴ ጠቅ ያድርጉ ፣ ወይም
• index.html ን ይምረጡ ፣ በቀኝ ጠቅ ያድርጉ እና በመረጡት አሳሽ ይክፈቱ።

Raspberry Pi ን የሚጠቀም ከሆነ የድር አገልጋይ ማሄድ አለበት። በእርስዎ ፒሲ ወይም ማክ ላይ አሳሽ ይክፈቱ ፣ እና በዩአርኤል መስኮት ውስጥ ያስገቡት

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

የእኔ አገልጋይ ደህንነቱ የተጠበቀ ግንኙነት ይፈልጋል (በኮሎን ዙሪያ ያሉ ቦታዎችን ያስወግዱ)

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

እና ይሠራል!

ደረጃ 2 - አባሪ - ማጣቀሻዎች

• ኤችቲኤምኤል እና ሲኤስኤስን ብቻ በመጠቀም የ CSS ስክሪፕት ባለብዙ ክፍል አኮርዲዮ ምናሌ
• W3Schools አኮርዲዮን ምናሌ
• W3 ትምህርት ቤቶች CSS
• W3Schools HTML

ደረጃ 3 ፦ አባሪ - ዝማኔዎች

ደረጃ 4 ፦ አባሪ - መላ መፈለግ

ሊረዱዎት የሚችሉ አንዳንድ ሀሳቦች እዚህ አሉ

• በኤች.ፒ.ኤል. አስተጋባ መግለጫዎች ውስጥ ኤችቲኤምኤልን ለመቅረጽ ፣ የመመለሻ ገጸ -ባህሪን ለማስገባት በመጨረሻው ላይ / r ን ያክሉ
• ለንዑስ ምናሌ የቡድን መታወቂያ ልዩ መሆን አለበት። አንድ ንዑስ ምናሌ የቡድን መታወቂያ ልዩ ካልሆነ ንዑስ ምናሌ ንጥሎቹ በቡድን መታወቂያ የመጀመሪያ ደረጃ ውስጥ ይካተታሉ