Az első probléma ami felmerült, az a jelentős háttérzaj kérdése. Az infravörös tartományban a nap és a legtöbb mesterséges fényforrás is sugároz, ráadásul sokkal erősebben, mint egy ilyen alkalmazásban szóba jöhető infra-led. A háttérzaj és az infra-led jelét szétválasztani csak úgy lehet, ha modulált jelet sugározunk a térbe, és ezt a modulált jelet keressük a mért értékekben is. Léteznek olyan infra-vevők, melyek hardveresen támogatják a modulált jel érzékelését (pl. TSOP), de hasonló alkatrészt tucatnyi boltot körbejárva sem találtam (ha tud valaki olyan boltot, ahol vásárolható ilyen, kérem írjon). Ilyen célezköz hiányában a modulációt szoftveresen oldottam meg.

A szoftveres moduláció miatt a hardver rendkívül egyszerű lett, a következő alkatrészekre volt szükségem:

• Pic16F690
• 1db infra led
• 1db fotodióda
• 1db npn tranzisztor
• 4db 1kOhm ellenállás
• 2db vörös led (egy a bekapcsolt állapotot jelzi – folyton világít, egy pedig a végeredményt adja meg, hogy érzékel-e jelenlétet az eszköz)

A munkát minimalizálandó felhasználtam a programozóhoz adott próbapanelt, amin beépített ledek állnak rendelkezésre, ezeket felhasználtam az állapotjelzések számára, így csak a fotódiódát és az infraledet kell hozzákötni, ami egy breadboard segítségével könnyedén kivitelezhető. Az infra-ledet a PIC rc0 kimenete fogja meghajtani, egy ellenállással bekötve ez a rész készen van. A kimenetet jelző led az rc1, a power-led az rc2-re van kötve hasonló módon. A fotódiódát a tranzisztorral erősítve kötjük a beépített A/D konverter bemenetére, hogy erősebb jelet kapjunk, ezzel megnövelve az érzékelés felbontását. A további félreértések rövidre zárásához felraktam egy kapcsolási rajzot:

A szoftver ezzel a következő módon tud együttműködni: az alapötlet az, hogy kikapcsolt infra-leddel lemérjük a bejövő fény mennyiségét, majd bekapcsoljuk az infrát, és újra mérünk. A bekapcsolt illetve kikapcsolt infra-led melletti mérések különbsége adja meg az infra-led által leadott és visszavert fény mennyiségét. Ha ez a különbség több iteráció után is meghaladja a küszöbértéket, akkor a kimeneten jelezzük az érzékelt jelenlétet. Azaz két paraméter a küszöbérték (mekkora különbséget várunk el kikapcsolt és bekapcsolt infra-led melletti mérések között), és a kitartás (hány iteráción át kell tartani ezt a különbséget).

És íme, a kód. A dolog nehézségét jelzi, hogy a legtöbb időt két érték összehasonlítása vette el. A kódban szereplő makrót a Microchip MPasm leírásából vettem, én egy kétszer olyan hosszú megoldást csináltam elötte.


#include __config (_INTRC_OSC_NOCLKOUT & _WDT_OFF & _PWRTE_OFF & _MCLRE_OFF & _CP_OFF & _BOR_OFF &
_IESO_OFF & _FCMEN_OFF)

;presence detector code.
;assumed peripheres:
; infra-led on RC0
; photo-diode connected to AN0
; detected proximity output on RC1
; power led on RC2
;
;we measure input on photo diode, while infra-led is turned off.
;then we measure again with turned on infra-led.
;if the infra-ray is reflected from anything, the second measurement
;should return a higher value

;=================================================
;========VARIABLES================================
;=================================================

cblock 0×20
offmeasure ;stores measurement without infra led
onmeasure ;stores measurement with infra led
output ;output bits
waitcount ;wait count
surecount ;make sure that something is there and not moves
endc

OUT_ILED EQU H’0000′ ;bit for infra led
OUT_RES EQU H’0001′ ;bit for output
OUT_POWER EQU H’0002′ ;power led

THRESHOLD EQU H’0002′ ;threshold for measurment gain

SURENESS EQU H’000C’ ;number of measurements before we’re sure in the result

;===================================================
;==============macros for selecting banks
;====================================================
SELECT_BANK0 macro
bcf STATUS,RP0
bcf STATUS,RP1
endm

SELECT_BANK1 macro
bsf STATUS,RP0
bcf STATUS,RP1
endm

SELECT_BANK2 macro
bcf STATUS,RP0
bsf STATUS,RP1
endm

SELECT_BANK3 macro
bsf STATUS,RP0
bsf STATUS,RP1
endm

;==============================================
;=====MACRO TO WAIT=============================
;==============================================

WAIT macro us
local a = 0
while a < us
nop
a += 1
endw
endm

;============================================
;========EXECUTE A MEASUREMENT===============
;============================================

MEASURE macro
WAIT 5
bsf ADCON0,GO ; start conversion
btfsc ADCON0,GO ; this bit will change to zero when the conversion is complete
goto $-1

movf ADRESH,w

btfsc output,OUT_ILED
goto $+3
movwf onmeasure
goto $+2
movwf offmeasure
nop
endm

;========================================
;=======SWITCH output led================
;========================================

SWITCH_ILED macro
movlw 0×01
xorwf output,F
endm

;========================================
;========REFRESH OUTPUT==================
;========================================

REFRESH_OUTPUT macro
movfw output
movwf PORTC
endm

;======================================================
; compare file to constant and jump if file
; >= constant.
;======================================================
cfl_jge macro file, con, jump_to
movlw con & 0xff
subwf file, w
btfsc STATUS, C
goto jump_to
endm

;===============================================
;==============MAIN PROGRAM=====================
;===============================================
org 0
Init:
;set variables to zero
movlw 0×00
movwf output
movwf onmeasure
movwf offmeasure

;set powerled on
bsf output,OUT_POWER

;initialize devices
SELECT_BANK1
movlw 0xFF
movwf TRISA ; Make PortA all input
clrf TRISC ; Make PortC all output
movlw 0×10 ; A2D Clock Fosc/8
movwf ADCON1
SELECT_BANK2
movlw 0xFF ; we want all Port A pins Analoge
movwf ANSEL
SELECT_BANK0
movlw 0×01
movwf ADCON0 ; configure A2D for Channel 0 (RA0), Left justified, and turn on the A2D module

Loop:
MEASURE ;measure with light off
SWITCH_ILED ;turn light on
REFRESH_OUTPUT
call SubWait ;wait a bit

MEASURE ;measure with light on
SWITCH_ILED ;turn light off
call DecideOutput ;decide output
REFRESH_OUTPUT
call SubWait ;wait a bit
goto Loop

;==============================================
;=====Decide output============================
;==============================================
DecideOutput:
;onmeasure-offmeasure >= threshold
movfw offmeasure
subwf onmeasure,F
cfl_jge onmeasure,THRESHOLD,DecideYes
goto DecideNo
DecideYes:
;bsf output,OUT_RES
incf surecount,F
goto DecideOutputReturn
DecideNo:
clrf surecount
bcf output,OUT_RES
DecideOutputReturn:
cfl_jge surecount,SURENESS, SwitchOn
goto SwitchOff
SwitchOn:
bsf output, OUT_RES
return
SwitchOff:
bcf output, OUT_RES
return

;===========================================
;===========Subroutine for long wait========
;===========================================
SubWait:
movlw 0xFF
movwf waitcount
StartWait:
WAIT 100
decfsz waitcount,F
goto StartWait
return

;===============================================
;=====PROGRAM END===============================
;===============================================
end

A kütyüt felprogramoztam, a perifériákat megépítettem, és pár iteratív hibajavítás/paraméterfinomítás után eljutottam arra az állapotra, amit elégségesnek neveztem a koncepció működésének a bizonyítására.

A fenti köntörfalas megfogalmazás nem költői önkifejezés, és nem is véletlen. Az eszköz működik, de épp hogy. A környezet által kifejtett fényerő fehérzajként adódik a rendszerhez, és csak magas “kitartás” és “küszöbérték” paraméter mellett lehet kiszűrni a téves jelzéseket. Ennek az az eredménye, hogy kb. két másodperc után jelzi ha 5cm-nél közelebb teszem a kezemet az infra-led+fotódióda pároshoz. 10cm-nél már bizonytalan a mérés, és akkor is előfordul egy-egy téves jelzés, ha nincs semmi a közelben.

Ezen problémák orvoslására több ötletem is van, egy részük azonnal megoldódna, ha találnék egy rendes infra adó-vevőt. Persze ötleteket, javaslatokat, hasonló problémákban szerzett tapasztalatokat szívesen fogadok.

Az eredeti cikk 2003. november 7. óta elérhető itt.

A „DHTML” legördülő menük maguk után vonták az otromba, böngészőspecifikus hackelésekkel teletömött Javascript kódokat, amik az egyébként elegáns, szemantikus HTML kódot meglehetősen hozzáférhetetlenné A hozzáférhető/hozzáférhetetlen fogalmakon a webtervezői szókincsben megfelelő accessibility kifejezést értem. teszik. Ó, azok a pehelykönnyű, hozzáférhető, szabványos, böngészőfüggetlen módszerek! Tekintsd meg a Suckerfish Suckerfish: Brehm és Wikipedia alapján rövidszárnyú bojtorjánhal. Ez a hal a Gályatartóhal-félék családjába tartozik. Ezek a halak már az ókorban is ismertek voltak a Földközi-tenger vidékén, a halak különlegessége, hogy más halakhoz, esetenként hajókhoz kapcsolódtak, velük vitették magukat. Konkrétan a bojtorjánhalról Brehm ezt írja: „Elterjedésének határa valószínűen egybeesik a kardoshalakéval, mivel többedmagával ezekre tapadva viteti magát. (Brehm: Az állatok világa) menüket!

Először a HTML

Először is, válasszuk a legjobb módszert a menü leírásához — egy listát. Példánkban egy egyszerű HTML sorszámozás nélküli listát használunk.

<ul>
  <li>Sunfishes

    <ul>
      <li><a href="">Blackbanded sunfish</a></li>
      <li><a href="">Shadow bass</a></li>
      <li><a href="">Ozark bass</a></li>
      <li><a href="">White crappie</a></li>
    </ul>

  </li>

  <li>Grunts

    <ul>
      <li><a href="">Smallmouth grunt</a></li>
      <li><a href="">Burrito</a></li>
      <li><a href="">Pigfish</a></li>
    </ul>

  </li>

  <li>Remoras

    <ul>
      <li><a href="">Whalesucker</a></li>
      <li><a href="">Marlinsucker</a></li>
      <li><a href="">Ceylonese remora</a></li>
      <li><a href="">Spearfish remora</a></li>
      <li><a href="">Slender suckerfish</a></li>
    </ul>

  </li>
</ul>

Tényleg eléggé magától értetődő — tiszta és elegáns HTML, ami a hozzáférhetőséget biztosítja. De ezt most átalakítjuk egy dinamikus listává — a listaelemek első szintje egy vízszintes menüsávot fog alkotni, ebből fognak legördülni a második szintű listák.

Formázzuk meg!

Kezdésként minden listaelemet piszkáljunk meg egy kicsit — nevezetesen a margót és kitöltést nullára állítjuk, a listaelemek jelzését pedig kikapcsoljuk:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }

A következő lépésben a lista első szintjét átalakítjuk egy vízszintes menüsávvá. Többféle technika van erre, amiket máshol részletesebben kifejtenek. Megjelölhetnénk az elemeket a display: inline; jellemzővel, de ebben a példában inkább balra lebegtetjük őket.

li {
  float: left;
  position: relative;
  width: 10em;
  }

Az elemek helye position: relative;-ra lett állítva, mivel a beágyazott listákat az első szinthez képest relatívan helyezzük majd el, a fix (!) szélességmegadás meg azért szükséges, hogy elérjünk bizonyos méreteket. A legördülő menü lassan összeáll.

Ezek után nézzük a lista második szintjét, ami a tényleges legördülő menü lesz:

li ul {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
  }

Ez a listák második szintjét abszolút módon helyezi el (kiemeli a HTML folyamból, és külön kezeli őket), és alapértelmezetten meg nem jelenítettekké állítja. Abban az esetben, ha a display: none; részt display: block;-ra cserélnénk, akkor látjuk szükségét a top és a left értékek beállításának az Internet Explorerben, mert ezek nélkül az IE a második szintű listákat az ősük jobb felső sarkába helyezi a bal alsó helyett. Sajnos ez az IE megoldás elkavarja a dolgokat az Opera-hoz hasonló böngészőkben, így ezekben a következő CSS kódra van szükség a top és left paraméterek beállításához:

li > ul {
  top: auto;
  left: auto;
  }

És most rakjuk hozzá az összekapcsolást! Ahhoz, hogy a második listaszintet megjelenítsük, amikor az első szinten a pontok „kiválasztódnak”, egyszerűen a következő kódot kell hozzáadni:

li:hover ul { display: block; }

Ami annyit jelent, hogy bármely elem, ami egy olyan pont alatti listában szerepel, amire az egérkurzor rámutat, megjelenítendő.

Végül, mert a listaelemek balra vannak lebegtetve, a tartalmat alattuk függetleníteni kell a lebegtetéstől a clear: left formázás kijelölésével.

Várjunk egy pillanatot!

”Ez a legördülő halandzsa nem működik!” – hallom az olvasók 102,6 százalékát (vagy a legfrissebb, éppen csökkenő hányadukat) kiabálni. Igen, mint kitalálható, az Internet Explorer felhasználóiról beszélek. Minél többet használod egyszerű szörfözőként, vagy webfejlesztőként a Mozillához hasonló böngészőket, annál feltűnőbb, hogy mennyire nevetséges az Internet Explorer, ha a webes szabványokról esik szó. A :hover pszeudoosztálynak elvben minden elemre működnie kellene, de az Internet Explorerben csak a linkekre működik. Pont. Mi a haszna a legördülő menünek, ha csak a böngészők -2,6 százalékán működik? Hogy őszinték legyünk, nem sok. Egy kicsit többet kell még varázsolnunk.

A mentőöv: DOM-szkriptelés

Ugyan megállapítottuk, hogy az IE ugyan nem támogatja a :hover pszeudo-osztályt, de a Document Object Model használatával egyszerűen kapcsolhatunk egéreseményeket (mouseover, mouseout) bármilyen elemhez. Ez jó hír számunkra, mert azt jelenti, hogy egy rövid JavaScript kódocskával hatékonyan orvosolhatjuk az IE :hover gondjait.

Mivel az IE vak, ahhoz, hogy azonosítsuk a :hover pszeudoosztály tulajdonságait, más módszert kell találni. A JavaScript segítségével manipulálhatuk a className tulajdonságát egy elemnek, így először egy kicsit a CSS-t kell megváltoztatnunk:

li:hover ul{ display: block; }

helyett a következő kód használható:

li:hover ul, li.over ul{ display: block; }

Ezután meghívhatjuk a :hover CSS szabályokat a kívánt elemre, ha hozzáadjuk az over osztályt a kívánt elemhez. Szükségünk lehet továbbá arra, hogy megmondjuk az IE-nek, hogy mely UL elemek szolgálnak az oldalon legördülő menüként. Ez egy id hozzáadásával tesszük meg a listánk gyökér ul elemére:

Ezáltal a

<ul>

kódból a következő lesz:

<ul id="nav">

Most, hogy tudjuk azonosítani a gyökér ul elemét a legördülő listánknak, kiemelhetjük ezt az elemet, és végigmehetünk az összes gyerekelemén, hozzáadva a mouseover és mouseout eseményeket az összes li elemhez a belsejében. Ezt így tehetjük meg:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

A lap betöltésekor a startList függvény meghívódik. Ez meghatározza, hogy a böngésző IE 5 vagy újabb a document.all objektum és a document.getElementById függvény létezésének vizsgálatával. Ez egy picit nyers megoldás, de rövid és egyszerű, és mivel mi egy kompakt megoldást szeretnénk, ez is megteszi. Ezután végiglépked a listákon, engedélyezve a mouseover és a mouseout eseményeket, amik hozzáadják/eltávolítják a over osztályt a className tulajdonságához az elemnek.

Így már működik. Probléma esetén érdemes megnézni a megjegyzésekkel ellátott példa vázat működés közben.

Kopoltyúk, uszonyok, pikkelyek…

Eddig amit csináltunk, egy kicsit meztelennek tűnik. Ez a cikk csak az ötlet alapjait mutatja be, de CSS segítségével sokkal szebben meg lehet valósítani. Egy nyilvánvaló kiindulópont lehet háttérszín hozzárendelése a második listaszinthez.

Miután visszaállítottuk a top és left tulajdonságokat, ahogy korábban leírtuk, a legördölő menük a szép példában közvetlenül a feliratok alatt jelennek meg a legtöbb modern böngészőben, de sajnos nem mindben. A Safari 1.0-ban még mindig a képernyő bal felső sarkából gördülnek le.

További használhatósági és hozzáférhetőségi gondolatok

Ha az első listaszint elemeiből hivatkozásokat csinálunk, megengedjük a tabstop használatát azon olvasók számára, akik nem használnak mutatóeszközöket. Ha sikerül olyan oldalakra mutatnunk, amik magasabb szinten vannak, mint az almenü elemei, az még jobb eredményt ad.

A szerzőkről

Patrick Griffiths egy szabadúszó londoni webtervező, aki kedveli, tiszteli a soul-t, az evolúciót és a kedves weboldalát (megjegyzés: az eredeti pet kedvencet és háziállatot egyaránt jelent), a HTML Dog-ot. Időnként becézgeti a PTG-t a hangulatától függően.

Dan Webb egy webtervező és DJ-nek is tanul. A korábbi munkái között szerepel szabványkövető, hozzáférhető oldalak és webalkalmazások megvalósítása az Egyesült Királyság kormányzati hivatalainak és emberek táncra penderítése London homályos szórakozóhelyein.

Az eredeti cikk elérhető itt.