Kategori Programmering

(Ytterligare en) Karusell i jQuery

Jag tänkte dela med mig av en karusell i jQuery, eller kanske en ”infinite slider” som det så fint heter. Jag utgick ifrån en väldigt enkel slider som jag hittade, de allra flesta ”färdiga” jag hittade var alldeles för stora, klumpiga och bloatade.

Krav:

  • Pilar för att navigera höger och vänster
  • En manuell navigering för att hoppa till valfri ”slide”

Demo

Finns i min Dropbox.

Markup

Läs först igenom jQuery Infinite Carousel och se till att du är med på grundkonceptet, alltså hur den visar respektive slide. Det jag lagt till är att du placerar pilarna i lista som detta:

<ul>
	<li><a class="back" href="#" title="Previous">&lt;</a></li>
	<li><a class="forward" href="#" title="Next">&gt;</a></li>
</ul>

Samt den manuella navigeringen lägger du bara in en placeholder för:

<div id="splash-manual-nav-container"></div>

Källkod

Allting finns samlat i en Gist på Github.

HTML

CSS

JavaScript

Kommentarer?

Jag försökte hålla det så enkelt som möjligt, samt att jag ville ha en ”ren” version som jag själv kan gå tillbaka till och återanvända i andra projekt. Har ni förslag på förbättringar så tar jag gärna emot dem!

Runestone 2011: WALL-E

Uppdaterad 2011-03-31 med källkod och lite mer information

Vi har under de senaste 7 veckorna arbetat med ett projekt i en kurs som heter ”Distribuerade system med projekt”. Vår projektbeskrivning var i korta drag detta:

”You are to design and implement a complete software system that provides Internet access to semi-autonomous soft-realtime robot.”

Då hälsar vi WALL-E välkommen!


WALL-E med orginalet

Introduktion

WALL-E är konstruerad i Lego, den är ifrån Lego Mindstorms NXJ och omflashad med LeJOS för att vi ska kunna köra Java på den.

Vårt projekt krävde att vi skulle kunna styra roboten från vilken klient som helst, därför valde vi att köra Java RMI mellan våra olika system.


System diagram

Klienten


Windowsklienten

Klienten är skriven som en Java-applet och kan därför köras ifrån alla möjliga operativsystem, de vi har testat är Linux, Mac OS X samt Windows 7. Den ansluter till ett externt ip som ”robotservern” körs på.

 


Dataflöde – Manuellt läge

Ovan ser ni även hur flödet ser ut när vi skickar enskilda kommandon ifrån det manuella läget i klienten.

Autopiloten

I projektet ingick även att vi ska samarbeta med en annan robot i Sverige och söka av ett rum. Vi satte därför upp ytterligare en service som sköter kartan, den körs via RMI och använder sig av en MySQL-databas som robotarna sedan kommunicerar med via interfaces. Kartan genereras sedan med hjälp av GD och PHP och skickas sedan till klienten.

Denna del är den som tagit överlägset längst tid, vår autopilot gör väldigt komplicerade beslut på egen hand. Bra jobbat Julius, Erik och Henrik!

 


Dataflöde – Autopilot

När roboten körs i autopilot-läget så gör den inga beslut själv, alla beslut sker genom robotservern och den i sin tur kontrollerar hela tiden med kartservern vilka ytor som är lediga/upptagna.

Kartläggningsalgoritm

  • Allting baseras på en ”tile map” för att förenkla algoritmen.
  • Den använder en egenkomponerad Dijkstra-algoritm med viktbaserad beslutshantering för all kartläggning.
  • Den använder även ett poängsystem för att bestämma vilken del av kartan den ska besöka härnäst.
  • Varje gång den kollar något så kollar den detta tre gånger, med små vinkelskiftningar, för att förbättra avläsningen.

Demonstration

Detta är en 40 sekunder lång demonstration, där WALL-E har kört igenom en hinderbana och håller på att slutföra kartan. Håll koll på den övre högra delen på kartan på laptopen där den monterar ut väggarna allt eftersom den flyttar på sig (jag ber om ursäkt att ljudet hackar i videon).

Källkod

Finns i Runestone2011 på Github.

Tyvärr verkar den ha tappat all commit-historik när jag flyttade över det, det var lite trist. För en fullständig historik av commitsen så har jag en lokal kopia lagrad med all information.

Så här i efterhand så är vi väl inte särskilt nöjda med kodresultatet, vi hade nog gjort om det mesta på ett ”bättre” sätt.

Virtuell utvecklingsmiljö med VirtualBox

Ett av problemen jag haft under längre tid har varit att jag trivs alldeles för bra att utveckla med min MacBook. Detta för att det är så mycket enklare att manövrera i operativsystemet mha terminalen, samt att det är så smidigt att använda Git, Ruby, Sass etc. you name it.

Jag försökte för någon månad sedan att åstadkomma en liknande miljö med VirtualBox och Ubuntu, det gick åt pipan. Igår kväll så började jag nysta i det igen och fick faktiskt fart på det hela!

Mitt mål

  • Sätta upp VirtualBox
  • Installera Ubuntu
  • Använda Ubuntu som utvecklingsserver och dela kataloger mha Samba
  • Kunna SSH:a till denna genom att denna får ett internt ip samt att den ska ha internetåtkomst
  • Sätta upp Git tillsammans med mitt Github-konto
  • Installera RVM och Rails, Padrino etc.

Sätta upp VirtualBox och installera Ubuntu

Ladda ner VirtualBox och installera Ubuntu (jag valde desktop edition). Jag har en trådad uppkoppling så jag sätter min trådade anslutning som delad och noterar vilket IP denna får (192.168.56.1). Det bör även finnas en ”VirtualBox Host-Only Network”-adapter i dina nätverksanslutningar, det är denna som ska ha fått ett IP som ex. 192.168.56.1.

Gå in i inställningarna för VirtualBox och Ubuntu och sätt upp två anslutningar, en för NAT och en för ”Endast värd-kort” (host-only-adapter). Ändra i din fil /etc/network/interfaces till detta:

auto lo
iface lo inet loopback
 
auto eth0
iface eth0 inet dhcp
 
auto eth1
iface eth1 inet dhcp

Kör ifconfig -a och kontrollera så att du har två olika IP:n på din eth0 (min är 10.0.2.15) och eth1 (min är 192.168.56.101).

Har du fått till detta så kan du förhoppningsvis SSH:a till maskinen (förutsatt att du installerat en ssh-daemon)!

Sätta upp delning av kataloger

(Källa: Ubuntu Forums – HOWTO: Mounting SMB Shares)
Härligt, du har en fungerande Ubuntu som du nu kan starta upp och gömma i bakgrunden och sköta genom ex Putty. Eftersom jag fortfarande kommer sköta själva programmeringen i Windows-miljön så kommer jag vilja ha en katalog som är delad mellan Ubuntu och Windows. Jag skapade en katalog på Windows-datorn som jag kallade för VirtualUbuntu som jag satte som delad, sedan skapade jag en katalog på Ubuntu som jag planerar att montera denna nätverkskatalog i.

sudo mount -t cifs //192.168.56.1/VirtualUbuntu /home/mittusername/VirtualWin -o iocharset=utf8,username=mittanvandarnamn,password=mittlosenord,file_mode=0777,dir_mode=0777

Detta monterar katalogen, nu vill jag att den ska monteras varje gång jag startar upp min virtuella Ubuntu. Så gå in i /etc/fstab och ange något liknande i slutet:

//192.168.56.1/VirtualUbuntu /home/mittusername/VirtualWin   smbfs  auto,credentials=/root/.credentials,uid=1000,umask=000,user   0 0

Jag har även skapat en fil i /root/.credentials för att hålla mina uppgifter med följande innehåll:

username=your_smb_username
password=your_smb_password

Sätt sedan rättigheterna på den filen med:

sudo chmod 600 /root/.credentials

När du sedan startar om Ubuntu kan du enkelt montera med:

sudo mount -a

Sätt upp Git + Github

Installera Git med

sudo apt-get install git-core

Följ sedan guiden på Githubs hemsida om Linux-installationen.

Installera Ruby med RVM

För att kunna ha möjligheten att köra flera olika Ruby-versioner (väldigt behändigt!) och framförallt hålla dessa separerade så använder jag RVM – http://rvm.beginrescueend.com. Detta kan du installera genom att följa instruktionerna på http://rvm.beginrescueend.com/rvm/install/.

Några vettiga kommandon med exempel är:

  • rvm install ruby-1.9.2-p0 (installera 1.9.2 via RVM)
  • rvm list (listar Ruby-variationer, indikerar även vilken som är aktiv)
  • rvm use ruby-1.9.2-p0 (välj den specifika Ruby)
  • rvm package install zlib (mer om detta i nästa stycke)

Installera Rails

Jag valde att köra Ruby 1.9.2 via RVM och då stötte jag på patrull i form av gnäll på att jag inte hade zlib och openssl, en snabb sökning gav följande resultat:

Följer du dessa instruktioner så borde det gå bra att få in Rails.

Summan av kardemumman

Detta är skrivet som en liten ”kom ihåg”-post till mig själv inför nästa gång jag ska genomföra detta, förhoppningsvis har någon annan nytta av det också! Lycka till!

© Copyright 2002 - 2012 Anders Hassis

Byggt på Notes Blog Core