SterBox. Przygotowanie Strony Użytkownika

Wielkość: px

Rozpocząć pokaz od strony:

Download "SterBox. Przygotowanie Strony Użytkownika"

Zuzanna Wróbel
8 lat temu
Przeglądów:

1 Przygotowanie Strony Użytkownika Sterbox od wersji obsługuje dwie strony użytkownika umożliwiające sterowanie z kontrolą stanów. Rozpoczynając tworzenie strony potrzebujemy programu do tworzenia stron HTML, ale dla wprawionych wystarczy zwykły notatnik dostępny w każdym systemie Windows. Stronę należy najpierw odpowiednio przygotować, a następnie wgrać ją do Sterbox a. Stronę zaczynamy od wprowadzenia Klawiszy Sterboxa oraz Stanów wejść/wyjąć 1. Klawisze Aby wyświetlić na naszej stronie Klawisz 1 należy umieścić ~010 na stronie, adekwatnie Klawisz 2 to ~011 Całość ma wyglądać tak: <form method="get" action="u1"> ~010 ~011 ~012 ~013 ~014 ~015 ~016 ~017 ~018 ~019 ~01A ~01B ~01C ~01D ~01E ~01F ~0B0 ~0B1 ~0B2 ~0B3 ~0B4 ~0B5 ~0B6 ~0B7 ~0B8 ~0B9 ~0BA ~0BB ~0BC ~0BD ~0BE ~0BF </form> W naszej stronie u1.cgi ważne jest action= u1 które odpowiada za wyświetlenie strony po wykonaniu polecenia, czyli kliknięciu w klawisz. 2. Stany Wejść / Wyjść (żaróweczki) Aby wyświetlić żaróweczki umieszczamy taki kod: <img style="width: 24px; height: 22px;" alt="" src=" ~0FF~050.gif"> stan portu ww0 1

Stronę należy najpierw odpowiednio przygotować, a następnie wgrać ją do Sterbox a. Stronę zaczynamy od wprowadzenia Klawiszy Sterboxa oraz Stanów wejść/wyjąć 1.

2 <img style="width: 24px; height: 22px;" alt="" src=" ~0FF~051.gif"> stan portu ww1. <img style="width: 24px; height: 22px;" alt="" src=" ~0FF~059.gif"> stan portu ww9 <img style="width: 24px; height: 22px;" alt="" src="~0ff~05a.gif"> stan portu wwa <img style="width: 24px; height: 22px;" alt="" src="~0ff~06f.gif"> stan portu wwn Stany portów odzwierciedlają polecenia od ~050 do ~05F i od ~068 do ~06F. Aby nasza strona wyglądała tak jak chcemy możemy oczywiście umieścić naszą żaróweczkę w określonym miejscu na stronie, do tego celu możemy zastosować określenie pozycji poprzez podanie odpowiednich parametrów określających miejsce na stronie (Left, Bootom) <img style="position: relative; left: 110px; bottom: 119px; width: 24px; height: 22px;" alt="" src="~0ff~05a.gif" align="top"> Lub <div style= float: left; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; >~010</div><div style= float: left; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; >~011</div> 3. Wygląd Klawiszy Jeśli chcemy edytować klawisze, to w części <head> należy dopisać: <style type="text/css"> input{ width: 230px; height: 60px; border: 0; color: #000000; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; font-weight: bold; margin: 10.5px; font-family:"helvetica Neue", Tahoma; font-size: 17px;.button_off{ background-color: #c8c8c8; 2

gif"> stan portu wwn Stany portów odzwierciedlają polecenia od ~050 do ~05F i od ~068 do ~06F.

3 .button_on{ background-color: #156dab; color: #fff; </style> W tych <style> input{. Aby zmienić rozmiar klawisza należy edytować wartości width i heigh. Wartość color odpowiada za kolor tekstu (napisu) - Wartości border-radius, -moz-border-radius, -webkit-border-radius odpowiadają za zaokrąglenie klawiszy. Jeśli chcemy mieć kwadrat, to musimy ustawić: width i height na takie same (czyli np. po 300px). Jeśli chcemy mieć kółko, to wtedy WSYZSTKIE border-radius musimy zmienić na taką samą wartości co width. Wartość margin odpowiada za odstępy pomiędzy klawiszami. Wartość font-size odpowiada za rozmiar napisu. Pozycje.button_off{ i.button_on{. Odpowiadają za wyświetlenie się klawisza w zależności od stanu klawisza (on lub off). Kolory dobieramy tak samo jak do czcionki. 4. Ikona skrótu iphone Aby w iphone po share -> add to homescreen pojawiła się ikonka skrótu, trzeba dodać do części <head> (przed/po stylach): <link rel="apple-touch-icon-precomposed" sizes="144x144" href=" rel="apple-touch-iconprecomposed" sizes="114x114" href=" rel="apple-touch-icon-precomposed" sizes="72x72" href=" rel="apple-touch-iconprecomposed" href=" 5. Tło strony Aby zrobić sobie obrazek w tle, w <style> musimy dodać przed input{ coś takiego: body{ background-image:url(' lub background-position:center top; background-repeat:no-repeat; background-color:#fff; 3

Jeśli chcemy mieć kwadrat, to musimy ustawić: width i height na takie same (czyli np. po 300px).

4 Jeżeli chcemy wyświetlić nasz obrazek wgrany wraz ze stroną, nasz obrazek będzie się nazywał s1.gif, drugi s2.gif, itd. <body style="background-repeat: no-repeat; background-image: url(/s1.gif); margin-top: 414px; height: 47px; margin-left: 74px; width: 739px;"> 6. Odświeżanie W część <head> musimy dopisać na początku: <meta http-equiv="refresh" content="15;url=u1.cgi"> Przy wartości content cyferka oznacza czas w sekundach po ilu strona ma się odświeżyć, a url= adres do jakiego ma się odświeżyć strona. Uwaga: Należy pamiętać iż url=u1.cgi odnosić się będzie do strony u1, zatem jeżeli tworzymy stronę u2 należy odświeżać u2.cgi. 7. Parametry możliwe do wyświetlenia na stronie użytkownika zestawienie. Kod ~010 do~01f ~0B0 do ~0BF ~050 do ~05F i od ~068 do ~06F ~090 do ~09B ~040 do ~04F i od ~060 do ~067 ~070 do ~07B Funkcja Klawisze ekranowe dla klawiszy od kl0 do klv. Wartości występujące po tyldzie są w zapisie szesnastkowym. Np klawisz kla reprezentowany jest: ~01A Graficzny (żarowki) stan wyjść. Obrazek z ww0 to 050.gif i tak po kolei (licząc szesnastkowo). Uwaga: musimy poprzedzić wpisy konstrukcją: ~0FF np. ~0FF~050.gif (i jak widać dodajemy.gif). Opis portów. ~080 do ~087 Komunikaty na ekran. W Ustawieniach tekstów, Nadaj tekst jako odbiorca ustawiony jest ekran od E#1 do E#8. ~0F8 Wstawiony pomiędzy <head> a </head> powoduje że strona będzie się odświeżała co ustawiony w konfiguracji sterobx a czas. ~B10 aktualna data i godzina ~B11 informacje o zasilaniu systemu 4

cgi"> Przy wartości content cyferka oznacza czas w sekundach po ilu strona ma się odświeżyć, a url= adres do jakiego ma się odświeżyć strona. Uwaga: Należy pamiętać iż url=u1.

5 ~B13 i ~B14 Informacje o dołączeniu rozszerzeń portów ~B15 Wersja i numer seryjny ~B16 Nazwa Sterboxa ~B17 Aktualne IP ~B18 do ~B1A Wejścia analogowe Wgranie strony do Sterownika Przygotowaliśmy już stronę pierwszą stronę u1.html, obrazek będący tłem s1.gif, możemy zatem przystąpić do wgrania jej do urządzenia. 1. Wyłączamy Sterbox z zasilania 2. Wsadzamy zworę pozwalającą na modyfikację ( Pionowe Piny najbliższe 16 stykowego zielonego złącza) 3. Włączamy Sterbox do zasilania 4. Uruchamiamy program Sterbox PC 5. Zakładka Moje Strony 6. Podajemy adres IP sterboxa 7. Wskazujemy Strona 1 - u1.html 8. Wskazujemy Grafika1 s1.gif 9. Klikamy w Załaduj strony 10. Czekamy aż Obok przycisku załaduj strony pojawi się komunikat, że strony zostały załadowane. Otwieramy stronę użytkownika 5

Wsadzamy zworę pozwalającą na modyfikację ( Pionowe Piny najbliższe 16 stykowego zielonego złącza) 3. Włączamy Sterbox do zasilania 4. Uruchamiamy program Sterbox PC 5. Zakładka Moje Strony 6.

6 Odniesienie do strony użytkownika to adres ip sterboxa/u1.cgi np. adekwatnie strona u2 to adres Przykład gotowej strony do załadowania Strona u1 - Obrazek tła - 6

cgi Przykład gotowej strony do załadowania Strona u1 - http://sterbox.

Podobne dokumenty

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce