WITEFRAME is a mockup of a webpage or an app. It only shows basic building blocks. To see this site in WIREFRAME mode, flick the switch.
EL SAMPO Digital.

Javascript and CSS projects.

Projects done during the years. Almost all available at TheSamp@Github.

sampLapse 360

[BETA] sampLapse 360°

Javascript object for viewing 360° images with timelapse functionality. Script uses THREE.js, jQuery, and FontAwesome libraries.

Premise

Bought myself a Ricoh Theta V 360 degree camera recently. Pretty much after taking the first pictures with it I started to look for a Javascript 360 viewer. Couldn't find suitable for my purposes so wrote one myself. Well, kind of. I found this. The whole thing is based on it.

Emanuele Feronato , Mr. Doob and Cedric Pinson are top three Javascript heroes out there. Only my humble (and official) 15 year professional career opinion.

Work

Pretty soon after I started I realised that having a timelapse functionality would be very useful. IMHO, Ricoh Theta V's, or any other 360 camera I've seen, video quality is not really quite up there yet where it needs to be. So, why not try timelapse...

4K images are pretty heavy so I knew that memory and processor usage will become an issue. First needed to restrict the image dimensions to 2048x1024 pixels and limit images to 60 per timelapse, preferably less than that, say 30 images. Also the interval between images can't be too small. Maybe one second, maybe 750 milliseconds. The longer the better clearly in this case. I added a method to nullify already viewed images' data from the main object. Temporary variables are also cleared throughout the script. There is a preloader with user definable amount to preload files in chunks in advance while playing timelapse or clicking through images. I am thinking about making this automated by checking total amount of images divided by average file size. That might need a way to detect the average connection speed too and might not turn out not to be that accurate. We'll see.

I am not too happy about how clickable timeline works. It rewrites elements on every image change, so it very likely uses too much memory. Earlier I had much simpler solution that checked the position on timeline mouse event and calculated the correct image accordingly. BUT it just didn't work intuitive enough for my liking. I am not sure which hogs more processor; rewriting elements or detecting mouseX constantly. Current system at least shows user clearly the timeline position. Also this constant rewriting limits partly the max amount of images per gallery.

TODO:

  • Responsiveness (Requires lot of computing power so might not be reasonable. TECH NOTE: Needs a resize event timer that is quite infrequent eg same amount as interval between images*2.)

Result

It still a work in progress to find perfect combination between timelapse interval setting in camera and interval during playback. I guess it depends on how much spatial movement and details there are in the images themselves.

Have a look, what do you think?

SAMPLAPSE 360

sampSlider

jQuery plug-in, with a nifty little controller dot. Optimised for touch devices and is fully responsive. If you ask me, all the sliders in the internet should be like this one :). Cool controller indicator which won't be hidden under the finger when using the controller dot.

Default settings:

autosize: true,
width: 900,
height: 600, (Quite pointless setting as it height is calculated from width with aspectratio)
aspectratio: false, (Overrides autosize. If false it is calculated.)
autoplay: 0, (0 for no autoplay or delay in milliseconds)
dragonbar:false, (true to show drag-navigation)
arrows:true, (Show arrows)
loop: true, //Boolean, infinite loop
slidespeed: 500,
startslide: 1,// 1 and up
gototop: false, //boolean, if automatically scroll to top of slider
afterinit: call back function

Example configuration

Running example below.

var slida = jQuery('#ss-projects').sampSlider({
    aspectratio:1.8,
    autosize: true,
    autoplay: 4000,
    slidespeed: 500,
    dragonbar: true,
    startslide: 1
});
  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5
  • Image 6

sampGallery

jQuery plug-in. Not really a gallery, simply an image viewer.

Default settings:

scrolltoitem: true, (Scroll page to opened image)
scrolloffset: {top:0}, (if needed to add top offset for example when having a fixed header)
animationspeed: 1000, (Scroll speed)
thumbscaled: true, (Use thumbs as background-images and scale them.)
afterinit: callback function after gallery is built.

Example configuration

Running example below.

jQuery('#sg-projects').sampGallery();
Image 1 Image 2 Image 3 Image 4 Image 5 Image 6 Image 7 Image 8

sampIcons

CSS/PNG icon system. Using a sprite.

  • CSS
  • SCSS
  • HTML
  • Adobe Illustrator
  • Git
  • PNG
  • Sprite

sampGrid

Ever needed just a simple CSS grid, something that doesn't include margins and paddings and other bloated stuff? Here you go. Just a grid without bells and whistles..

  • Grid
  • CSS
  • SCSS
  • HTML
  • CSS
  • SCSS
  • HTML
  • Adobe Illustrator
  • Git
  • PNG
  • Sprite
  • Grid
  • CSS
  • SCSS
  • HTML

sampCookie

Customisable cookie consent script.

  • Cookie
  • Consent
  • CSS
  • SCSS
  • HTML
  • Javascript
  • Git

sampElements

Prestyled CSS element collection for easy prototyping in browser.

  • CSS
  • SCSS
  • HTML
  • Git
  • Cookie
  • Consent
  • CSS
  • SCSS
  • HTML
  • Javascript
  • Git
  • CSS
  • SCSS
  • HTML
  • Git