Hosting a website
I have scoured the forum looking for code that will host a website that has folders, css, html, javascript, images, video, compressed archives and many other filetypes. I want to put the files for my website on my microSD card. I tried the code located here: http://forums.parallax.com/showthread.php?127340-Basic-GET-and-POST-Object-Updated-1-1-2011 but it did not work unless I removed all css and javascript files and I need both css and javascript to power my site. Is there any code already written that I may have overlooked in the forum? Is there any code available to do this?
Thanks in advance
Thanks in advance

Comments
You must add the appropriate content type to the WriteResponseHeader for example "content-type text/css". This working fine in IE. I had trouble in Firefox. I have not spent the time to figure out the issue with Firefox. Maybe you can?
BTW, there's a newer object on
http://forums.parallax.com/showthread.php?128445-Dynamic-Spinneret-with-HttpRequest-Object-and-EEPROM-Configuration-Page
Edit: scratch that Firefox, IE, Safari, and Chrome all work using a relative link to a css file or JavaScript file. IE will sniff out the content type returned from the server while Firefox, Safari, and Chrome want the appropriate header sent from the server. You can see the resource requests in the log file. http://spinneret.servebeer.com:5000/index.htm
PRI WriteResponseHeader StringSend(0, string("HTTP/1.1 200 OK")) StringSend(0, string(Request#CR, Request#LF)) StringSend(0, string("Server: Spinneret/1.0")) StringSend(0, string(Request#CR, Request#LF)) StringSend(0, string("Connection: close")) StringSend(0, string(Request#CR, Request#LF)) StringSend(0, string("Cache-Control: public")) StringSend(0, string(Request#CR, Request#LF)) 'StringSend(0, string("Vary: Accept-Encoding")) 'StringSend(0, string(Request#CR, Request#LF)) ' pick a type base on the file extension if strcomp(Request.FileExtension, string("htm")) StringSend(0, string("Content-Type: text/html")) elseif strcomp(Request.FileExtension, string("xml")) StringSend(0, string("Content-Type: text/xml")) elseif strcomp(Request.FileExtension, string("xsl")) StringSend(0, string("Content-Type: text/xml")) elseif strcomp(Request.FileExtension, string("shp")) StringSend(0, string("Content-Type: text/html")) elseif strcomp(Request.FileExtension, string("txt")) StringSend(0, string("Content-Type: text/plain; charset=utf-8")) elseif strcomp(Request.FileExtension, string("pdf")) StringSend(0, string("Content-Type: application/pdf")) 'StringSend(0, string("Content-Transfer-Encoding: binary")) elseif strcomp(Request.FileExtension, string("zip")) StringSend(0, string("Content-Type: application/zip")) elseif strcomp(Request.FileExtension, string("jpg")) StringSend(0, string("Content-Type: image/jpeg")) elseif strcomp(Request.FileExtension, string("png")) StringSend(0, string("Content-Type: image/png")) elseif strcomp(Request.FileExtension, string("gif")) StringSend(0, string("Content-Type: image/gif")) elseif strcomp(Request.FileExtension, string("ico")) StringSend(0, string("Content-Type: image/vnd.microsoft.icon")) elseif strcomp(Request.FileExtension, string("css")) StringSend(0, string("Content-Type: text/css")) elseif strcomp(Request.FileExtension, string("js")) StringSend(0, string("Content-Type: text/javascript")) else StringSend(0, string("Content-Type: text/html")) ' Empty line StringSend(0, string(Request#CR, Request#LF)) StringSend(0, string(Request#CR, Request#LF)) returnThe same thing goes for video, you need a the appropriate header. Here's an WMV from my trip to San Diego served up by the spinneret. http://spinneret.servebeer.com:5000/video/gwhale.wmv Kinda' weird that IE poops out but Firefox, Chrome download and play the file no problem.
Post your code if you're still having problems.
As far as, I know the HttpRequest object works fine. There's not much to it, just an HttpRequest parser.
Post your code if you want help. Otherwise there's not much we can do.
You're going to have to do some troubleshooting to see if you can get your multimedia site up and running on the Spinneret. I would start with removing all the dynamic content stuff I wrote and focus on just the static content. Start by opening the Parallax Serial Terminal and loading the index page. You should see the header requests on the terminal and the request that causes the lock. Finally , add this to the HttpServer.
repeat while !W5100.SocketTCPestablished(0) W5100.readIND(W5100#_S0_SR, @S0_SR, 1) ifnot((S0_SR == $14) OR (S0_SR == $16) OR (S0_SR == $17)) PST.Str(string("Status Code 2: ")) PST.Hex(S0_SR, 2) ResetSocket quitHappy programming
The content type for a tiff is image/tiff or image/tff.
repeat while !W5100.SocketTCPestablished(0) W5100.readIND(W5100#_S0_SR, @S0_SR, 1) ifnot((S0_SR == $14) OR (S0_SR == $16) OR (S0_SR == $17)) PST.Str(string("Status Code 2: ")) PST.Hex(S0_SR, 2) ResetSocket quitAnd those <!--/Controls-->" and "<!--/Content Inner-->" are just html comments
I will check the JS
Source code:
http://www.agaverobotics.com/spinneret/source/
I made some changes to the vidcontr.js file. Do you still get errors?
var video; var controls; var playControl; var rewindControl; var fastForwardControl; var playSpeed; var progressControl; var playProgress; var playProgressBar; var playHead; var loadProgress; var playProgressInterval; var currentTimeDisplay; var durationDisplay; var volumeControl; var volumeDisplay; var fullScreen; var t; var videoWasPlaying; var videoIsFullScreen; var videoOrigWidth; var videoOrigHeight; var bodyLoaded = function(){ video = document.getElementById("video"); videobox = document.getElementById("video_box"); controls = document.getElementById("controls"); playControl = document.getElementById("play"); rewindControl = document.getElementById("rewind"); fastForwardControl = document.getElementById("fastForward"); playSpeed = document.getElementById("speed"); progressControl = document.getElementById("progress"); playProgress = document.getElementById("progress_box"); playProgressBar = document.getElementById("play_progress"); playHead = document.getElementById("playhead"); loadProgress = document.getElementById("loader"); currentTimeDisplay = document.getElementById("current_time_display"); durationDisplay = document.getElementById("duration_display"); volumeControl = document.getElementById("volume"); volumeDisplay = document.getElementById("volume_display"); fullScreen = document.getElementById("fullScreen"); window.onkeydown = function(e) { return !(e.keyCode == 32); }; document.onkeyup = KeyCheck; sizeProgressBar(); browserDetect(); myAddListener(); playVideo(); t=setTimeout("startControlFade();",2500); playControl.addEventListener("click", function(){ if (video.paused) { playVideo(); } else if (video.playbackRate != 1.0) { playVideo(); } else { pauseVideo(); } }, true); playProgress.addEventListener("mousedown", function(){ playHead.className = "playHead-active"; if (video.paused) { videoWasPlaying = false; } else { videoWasPlaying = true; pauseVideo(); } blockTextSelection(); document.onmousemove = function(e) { clearTimeout(t); setPlayProgress(e.pageX); } document.onmouseup = function() { playHead.className = "playHead"; document.onmousemove = null; document.onmouseup = null; if (videoWasPlaying) { trackPlayProgress(); playVideo(); } } }, true); function KeyCheck() { if(event.keyCode == 32) { if (video.paused) { playVideo(); } else if (video.playbackRate != 1.0) { playVideo(); } else { pauseVideo(); } } if(event.keyCode == 37) { if (video.paused) { video.play(); document.getElementById("video").playbackRate = -2.0; trackPlayProgress(); playSpeed.className = "twox"; } else { document.getElementById("video").playbackRate = -2.0; trackPlayProgress(); playSpeed.className = "twox"; } } if(event.keyCode == 39) { if (video.paused) { video.play(); document.getElementById("video").playbackRate = 2.0; trackPlayProgress(); playSpeed.className = "twox"; } else { document.getElementById("video").playbackRate = 2.0; trackPlayProgress(); playSpeed.className = "twox"; } } } playProgress.addEventListener("mouseup", function(e) { trackPlayProgress(); setPlayProgress(e.pageX); clearTimeout(t); t=setTimeout("startControlFade();",2500); }, true); video.addEventListener("mousemove", function() { showController(); clearTimeout(t); t=setTimeout("startControlFade();",2500); }, true); video.addEventListener("mouseout", function() { clearTimeout(t); t=setTimeout("startControlFade();",1); }, true); video.addEventListener("mouseover", function() { clearTimeout(t); t=setTimeout("startControlFade();",2500); }, true); controls.addEventListener("mouseover", function() { clearTimeout(t); }, true); playProgress.addEventListener("mousedown", function() { clearTimeout(t); }, true); } function browserDetect() { if (navigator.userAgent.indexOf("MSIE") != -1) { document.getElementById("rewind").setAttribute("class", "hide"); document.getElementById("fastForward").setAttribute("class", "hide"); } else if (navigator.userAgent.indexOf("Firefox") != -1) { document.getElementById("rewind").setAttribute("class", "hide"); document.getElementById("fastForward").setAttribute("class", "hide"); } else if (navigator.userAgent.indexOf('iPad') != -1) { var controls = document.getElementById("controlsParent"); controls.parentNode.removeChild(controls); var main = document.getElementById('video'); var attr = document.createAttribute('controls'); main.setAttributeNode(attr); var output = main.getAttribute('controls'); } else if (navigator.userAgent.indexOf("Opera") != -1 ) { document.getElementById("rewind").setAttribute("class", "hide"); document.getElementById("fastForward").setAttribute("class", "hide"); } } function playVideo() { video.play(); playControl.className = "play control"; playSpeed.className = "onex"; trackPlayProgress(); } function pauseVideo() { video.pause(); playControl.className = "pause control"; playSpeed.className = "onex"; stopTrackingPlayProgress(); } function playPauseVideoActive() { if (video.paused) { playControl.className = "pauseActive control"; } else if (video.playing) { playControl.className = "playActive control"; } else if (video.playbackRate != 1.0) { playControl.className = "pauseActive control"; } else { playControl.className = "playActive control"; } } function playInactive() { if (video.paused) { playControl.className = "pause control"; } else { playControl.className = "play control"; } } function swapPlayPause() { playControl.className = "pause control"; } function rewind2x() { if (video.paused) { video.play(); document.getElementById("video").playbackRate = -2.0; trackPlayProgress(); playSpeed.className = "twox"; } else { document.getElementById("video").playbackRate = -2.0; trackPlayProgress(); playSpeed.className = "twox"; } } function rewind4x() { if (video.paused) { video.play(); document.getElementById("video").playbackRate = -4.0; trackPlayProgress(); playSpeed.className = "fourx"; } else { document.getElementById("video").playbackRate = -4.0; trackPlayProgress(); playSpeed.className = "fourx"; } } function fastForward2x() { if (video.paused) { video.play(); document.getElementById("video").playbackRate = 2.0; trackPlayProgress(); playSpeed.className = "twox"; } else { document.getElementById("video").playbackRate = 2.0; trackPlayProgress(); playSpeed.className = "twox"; } } function fastForward4x() { if (video.paused) { video.play(); document.getElementById("video").playbackRate = 4.0; trackPlayProgress(); playSpeed.className = "fourx"; } else { document.getElementById("video").playbackRate = 4.0; trackPlayProgress(); playSpeed.className = "fourx"; } } function rewindActive() { rewindControl.className = "rewindActive"; } function rewindInactive() { rewindControl.className = "rewind"; } function fastForwardActive() { fastForwardControl.className = "fastForwardActive"; } function fastForwardInactive() { fastForwardControl.className = "fastForward"; } function enterFullScreen() { video.webkitEnterFullScreen(); fullScreen.className = "enterFullScreen"; } function enterFullScreenActive() { fullScreen.className = "enterFullScreenMousedown"; } function enterFullScreenInactive() { fullScreen.className = "enterFullScreen"; } function checkFullScreenSupport() { if (document.getElementById("video").webkitSupportsFullscreen) { document.getElementById("fullScreen").setAttribute("class", "show"); } else { document.getElementById("fullScreen").setAttribute("class", "hide"); } } function showController() { var controls = document.querySelector("#controls"); controls.className = "on"; document.getElementById('controls').style.display='block'; } function hideController() { controls.style.display = "none"; playHead.className = "playhead"; rewindInactive(); fastForwardInactive(); enterFullScreenInactive(); playInactive(); } function startControlFade() { var controls = document.querySelector("#controls"); controls.className = "off"; } function sizeProgressBar() { playProgress.style.width = "309px"; loadProgress.style.width = "317px"; updatePlayProgress(); updatePlayHead(); } function showLoad() { var soFar = parseInt(((video.buffered.end(0) / video.duration) * 100), 10); loadProgress.style.width=(soFar + '%'); } function myAddListener() { video.addEventListener('progress',showLoad,false); } function trackPlayProgress() { playProgressInterval = setInterval(updatePlayProgress, 100); playHeadInterval = setInterval(updatePlayHead, 100); } function stopTrackingPlayProgress() { clearInterval(playProgressInterval); clearInterval(playHeadInterval); } function updatePlayProgress() { playProgressBar.style.width = (video.currentTime / video.duration) * (playProgress.offsetWidth) + 3 + "px"; updateTimeDisplay(); } function updatePlayHead() { playHead.style.left = (video.currentTime / video.duration) * (playProgress.offsetWidth) + "px"; updateTimeDisplay(); } function setPlayProgress(clickX) { var newPercent = Math.max(0, Math.min(1, (clickX - findPosX(playProgress)) / playProgress.offsetWidth)); video.currentTime = newPercent * video.duration playProgressBar.style.width = newPercent * (playProgress.offsetWidth) + 3 + "px"; playHead.style.left = newPercent * (playProgress.offsetWidth) + "px"; updateTimeDisplay(); } function updateTimeDisplay() { currentTimeDisplay.innerHTML = formatTime(video.currentTime); durationDisplay.innerHTML = formatTimeLeft(video.duration - video.currentTime); } function blockTextSelection(){ document.body.focus(); document.onselectstart = function () { return false; }; } function unblockTextSelection(){ document.onselectstart = function () { return true; }; } // Return seconds as MM:SS function formatTime(seconds) { seconds = Math.round(seconds); minutes = Math.floor(seconds / 60); minutes = (minutes >= 10) ? minutes : "0" + minutes; seconds = Math.floor(seconds % 60); seconds = (seconds >= 10) ? seconds : "0" + seconds; return minutes + ":" + seconds; } // Return seconds as MM:SS function formatTimeLeft(seconds) { seconds = Math.round(seconds); minutes = Math.floor(seconds / 60); minutes = (minutes >= 10) ? minutes : "0" + minutes; seconds = Math.floor(seconds % 60); seconds = (seconds >= 10) ? seconds : "0" + seconds; return "-" + minutes + ":" + seconds; } // Get objects position on the page function findPosX(obj) { var curleft = obj.offsetLeft; while(obj == obj.offsetParent) { curleft += obj.offsetLeft; } return curleft; }I tested you web app in IIS first to make sure it worked before dropping it on my Spinneret rig. I thought you should fix those errors before messing with the SPIN code. I'm sorry; I just don't have the time to verify your web application. Let us know how it goes.
StringSend(0, string("Cache-Control: private"))
PRI WriteResponseHeader | fileSize StringSend(0, string("HTTP/1.1 200 OK")) StringSend(0, string(Request#CR, Request#LF)) StringSend(0, string("Server: Spinneret/1.0")) StringSend(0, string(Request#CR, Request#LF)) StringSend(0, string("Connection: close")) StringSend(0, string(Request#CR, Request#LF)) StringSend(0, string("Cache-Control: private")) StringSend(0, string(Request#CR, Request#LF)) 'StringSend(0, string("Vary: Accept-Encoding")) 'StringSend(0, string(Request#CR, Request#LF)) ' pick a type base on the file extension if strcomp(Request.FileExtension, string("htm")) StringSend(0, string("Content-Type: text/html")) elseif strcomp(Request.FileExtension, string("xml")) StringSend(0, string("Content-Type: text/xml")) elseif strcomp(Request.FileExtension, string("xsl")) StringSend(0, string("Content-Type: text/xml")) elseif strcomp(Request.FileExtension, string("shp")) StringSend(0, string("Content-Type: text/html")) elseif strcomp(Request.FileExtension, string("txt")) StringSend(0, string("Content-Type: text/plain; charset=utf-8")) 'StringSend(0, string("Content-disposition: attachment")) elseif strcomp(Request.FileExtension, string("pdf")) StringSend(0, string("Content-Type: application/pdf")) 'StringSend(0, string("Content-Transfer-Encoding: binary")) elseif strcomp(Request.FileExtension, string("zip")) StringSend(0, string("Content-Type: application/zip")) elseif strcomp(Request.FileExtension, string("jpg")) StringSend(0, string("Content-Type: image/jpeg")) elseif strcomp(Request.FileExtension, string("png")) StringSend(0, string("Content-Type: image/png")) elseif strcomp(Request.FileExtension, string("gif")) StringSend(0, string("Expires: Wed, 01 Feb 2012 01:00:00 GMT", Request#CR, Request#LF)) StringSend(0, string("Content-Type: image/gif")) elseif strcomp(Request.FileExtension, string("ico")) StringSend(0, string("Expires: Wed, 01 Feb 2012 01:00:00 GMT", Request#CR, Request#LF)) StringSend(0, string("Content-Type: image/vnd.microsoft.icon")) elseif strcomp(Request.FileExtension, string("css")) StringSend(0, string("Content-Type: text/css")) elseif strcomp(Request.FileExtension, string("js")) StringSend(0, string("Expires: Wed, 01 Feb 2012 01:00:00 GMT", Request#CR, Request#LF)) StringSend(0, string("Content-Type: text/javascript")) elseif strcomp(Request.FileExtension, string("wmv")) StringSend(0, string("Content-Type: video/x-ms-wmv")) StringSend(0, string("Content-disposition: attachment; filename=video/gwhale.wmv")) StringSend(0, string("Content-length: 637605")) else StringSend(0, string("Content-Type: text/html")) ' Empty line StringSend(0, string(Request#CR, Request#LF)) StringSend(0, string(Request#CR, Request#LF)) returnThe header line "Expires: Wed, 01 Feb 2012 01:00:00 GMT" tells the browser to use the file in cache until 2/1/2012. Obviously, this is not the best method. But it should work for now. Just remember to update this method if your CSS, js, or ico file changes.
Configuration!
Have you tried another port just to be sure? Configure your router to forward port 5000 traffic to the Spinneret on port 80. What is your IP?
Don't know.... What you're saying does not make sense or you did not supply enough information.
Is the Spinneret listening on port 80?
Did you forward port 5000 to 80?
What is your IP?
Someone on the forum can check connective if you at least supply the address to hit!
If you're trying to hit the Spinneret from your local network and the Spinneret is listening on port 80, your router is going to resolve that address internally to the default port 80 if a port was not specified.
What kind of file? A web page? image? video??? What happens when you try to serve up the file? Do you get an error? If so what error? What browser are you using? Safari?