Gör din telefon/tablet/skrivbord en fjärrkontroll med en Raspberry Pi (30 / 30 steg)
Steg 30: webbsidans design
Det är inte i en anda av Instructables att säga här är en webbsida, det fungerar, använda den. Jag har placerat en massa kommentarer i kod. Anse dem ytterligare steg för att Instructable. Också i en anda av saker är här en diskussion om webbsidans design.
Den grundläggande tanken med webbsidan är att använda stora ikoner för att göra det lätt att använda för pekskärmsenheten; i synnerhet smarta telefoner. Observera jag har använt lite CSS skalning trick. Egenskapen teckenstorlek för kroppen väljaren styr omfattningen av sidan (allt definieras i enheter av em). Jag har storlek sidan för att passa bekvämt på min tavlan. Man kan ändra teckenstorlek att skala för sin enhet.
Layouten är en tabell, när man klickar på en inmatningsenhet, javascript skickar den nyckel koden att välja enheten. Javascript också flyttar elementet TV till rätt kolumn och drar rutan runt två ikoner.
Jag använder en http GET eftersom den använder en inbäddad i url-frågesträng. Detta gör att man kan ange en url i adressfältet i webbläsaren för att skicka nyckel koder. Cgi-fil är ett bash script som extraherar den nyckel koden från frågesträngen och använder kommandot "irsend" med den nyckel koden. HDMI-växeln kan styra insatsvaror till två TV-apparater. Jag kan växla mellan dessa TV-apparater med stora knappar. Namnet ändras för att ange för vilken TV ingångarna styrs. Kommandona lagras i javascript dubbelt indexerade arrayer. Den föregående och nästa knappen Ändra första index för att matcha TV kontrolleras. 2. index går till rätt nyckelkod för att utföra en viss funktion.
Jag har skapat en video som visar systemet i drift.