Adrian Tomic http://www.adriantomic.se Art director & web designer Sun, 22 Jan 2012 17:20:45 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Klas Christmas Tale http://www.adriantomic.se/design/klas-christmas-tale/?utm_source=rss&utm_medium=rss&utm_campaign=klas-christmas-tale http://www.adriantomic.se/design/klas-christmas-tale/#comments Tue, 13 Dec 2011 08:48:17 +0000 adriantomic http://www.adriantomic.se/?p=362006227

My friend Klas has had an animated Christmas tale on the internet since 1996! It’s now available as an iPad app in the app store. Check it out! :)

]]> http://www.adriantomic.se/design/klas-christmas-tale/feed/ 0 Print 3D objects at home! http://www.adriantomic.se/design/print-3d-objects-at-home/?utm_source=rss&utm_medium=rss&utm_campaign=print-3d-objects-at-home http://www.adriantomic.se/design/print-3d-objects-at-home/#comments Sat, 19 Nov 2011 22:59:45 +0000 adriantomic http://www.adriantomic.se/?p=362006220 Continue reading →]]>

There’s a new home 3D printer in town: Printrbot. It’s simple to build and easy to use. I want want one. I’ve been checking the Makerbot and Ultimaker, but they’re both a bit to pricey for me.

Here are some videos of the Printrbot.

]]> http://www.adriantomic.se/design/print-3d-objects-at-home/feed/ 0 Arduino Temperature Sensor – Winter is Coming http://www.adriantomic.se/development/arduino-temperature-sensor-winter-is-coming/?utm_source=rss&utm_medium=rss&utm_campaign=arduino-temperature-sensor-winter-is-coming http://www.adriantomic.se/development/arduino-temperature-sensor-winter-is-coming/#comments Mon, 07 Nov 2011 15:46:04 +0000 adriantomic http://www.adriantomic.se/?p=362006208 Continue reading →]]>

I’ve started tinkering with Arduino. My first real project was to connect a DS18B20 temperature sensor to Arduino. I have an ethernet shield on the arduino that uploads data to pachube.com.

The temperature sensor is protected by an old film case and is right outside my window. I wanted to have a web site where I can check the outside temperature so I found a small jQuery script that takes JSON data from my Pachube feed and outputs it on a small web site.

Here’s the pachube feed, and here’s the mobile web site. Get the code here.

]]> http://www.adriantomic.se/development/arduino-temperature-sensor-winter-is-coming/feed/ 4 Photos by my friend Emil http://www.adriantomic.se/personal/photos-by-my-friend-emil/?utm_source=rss&utm_medium=rss&utm_campaign=photos-by-my-friend-emil http://www.adriantomic.se/personal/photos-by-my-friend-emil/#comments Mon, 07 Nov 2011 15:37:14 +0000 adriantomic http://www.adriantomic.se/?p=362006204

My friend Emil studies at the Oslo national academy of the arts. If you like photography be sure to check out his portfolio.

]]> http://www.adriantomic.se/personal/photos-by-my-friend-emil/feed/ 0 WordPress Snippets! http://www.adriantomic.se/development/wordpress-snippets/?utm_source=rss&utm_medium=rss&utm_campaign=wordpress-snippets http://www.adriantomic.se/development/wordpress-snippets/#comments Sat, 06 Aug 2011 10:18:06 +0000 adriantomic http://www.adriantomic.se/?p=362006178 I found a great web site the other day. WP-Snippets collects a bunch of useful snippets for WordPress devs. Check it out!

]]> http://www.adriantomic.se/development/wordpress-snippets/feed/ 0 Prototype of my text based adventure released http://www.adriantomic.se/design/prototype-of-my-text-based-adventure-released/?utm_source=rss&utm_medium=rss&utm_campaign=prototype-of-my-text-based-adventure-released http://www.adriantomic.se/design/prototype-of-my-text-based-adventure-released/#comments Wed, 09 Feb 2011 14:42:40 +0000 Adrian Tomic http://www.adriantomic.se/?p=362006105 Continue reading →]]> Text Adventure Time!

The past months I’ve been wanting to learn a bit more about web programming, so I set out to make some sort of game. What I thought would be easy was to make a text based adventure game. It didn’t turn out to be easy, but I’ve learnt a lot.

The game is very similar to the old text based adventure games, but the difference is that you don’t do any typing while playing. You click and drag items to interact. It makes it easier to play the game (people have less patience nowadays) and it is easier to play it on mobile devices.

My plan is to develop the game a bit more with feedback from the internets and also make a website with a WYSIWYG editor so people can create their own stories and share them with friends.

The game uses regular HTML and CSS for displaying the stories. The functionality is javascript (jQuery). Stories are stored in a mySQL database and are transmitted via JSON. The community web site will be built using CodeIgniter.

Oh, I almost forgot… you can play the game here.

]]> http://www.adriantomic.se/design/prototype-of-my-text-based-adventure-released/feed/ 5 jQuery scrollTo & localscroll Tutorial http://www.adriantomic.se/development/jquery-localscroll-tutorial/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-localscroll-tutorial http://www.adriantomic.se/development/jquery-localscroll-tutorial/#comments Wed, 05 May 2010 00:01:09 +0000 Adrian Tomic http://www.adriantomic.se/?p=293 Continue reading →]]> This is an updated version of the localscroll tutorial I wrote a year ago. I hope you find it helpful. If you have any questions, please write them in the comments below and I’ll try to help you :)

In this tutorial you’ll learn how to make anchor links that scrolls the page smoothly using jQuery, scrollTo and localScroll.

Here’s a demo of what the end result will be.

Start with an empty html file. Give it any name you want, as long as it ends with .html or .htm.

Double click the code window to make the code easier to copy.


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>My jQuery scrollTo & localscroll Demo</title>

</head>

<body>

</body>
</html>

Inside the head tags we will have to load jQuery, scrollTo and localscroll. It’s important to do it in the order I just wrote. Since scrollTo and localscroll are plugins of jQuery, they first need jQuery to be loaded for them to work.

Copy this code into your head tag of your html document.

<!-- Load jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

	<!-- Load ScrollTo --><script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

	<!-- Load LocalScroll -->
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

We’re now loading jQuery and the plugins directly from google. You can also save them to your computer and load them locally. If you want your html file to work offline, this is a must. Now we’re going to set up links and divs to scroll to. Pase the following into the body tag of your html document.

</pre>
<h3>Links to colored boxes</h3>
<pre>

</pre>
<div id="box-links"><a href="#box1">Link to box #1</a> <a href="#box2">Link to box #2</a> <a href="#box3">Link to box #3</a> <a href="#box4">Link to box #4</a></div>
<pre>

</pre>
<div id="box1" class="box">Box #1</div>
<pre>

</pre>
<div id="box2" class="box">Box #2</div>
<pre>

</pre>
<div id="box3" class="box">Box #3</div>
<pre>

</pre>
<div id="box4" class="box">Box #4</div>
<pre>

Let’s set up the actual script that will enable the smooth scrolling. Paste this code inside your head tag at the very bottom (above “</head>”).

	<!-- javascript that will initiate jQuery and the LocalScroll plugin --><script type="text/javascript">// <![CDATA[
	// When the document is loaded...
    $(document).ready(function()
	{
		// Scroll the whole document
		$('#box-links').localScroll({
		   target:'body'
		});

	});

// ]]></script>

Your document probably looks a bit dull now. Only text. We need some CSS! Put this code in your head tag as well:

<style type="text/css">

	/* CSS for the big boxes */

	.box {
		width: 300px;
		height: 300px;

		color: #fff;
		padding: 10px;

		margin: 100px 0 0 0;
	}

	#box1 {
		margin: 300px 0 0 0;
		background: blue;
	}

	#box2 {
		background: red;
	}

	#box3 {
		background: green;
	}

	#box4 {
		background: gray;
	}

	/* CSS for the small boxes that will scroll inside a div */

	#small-box-container {
		border: 1px solid black;
		padding: 20px;
		width: 300px;
		height: 200px;

		overflow: scroll;
	}

	.small-box {

		color: #fff;
		padding: 10px;

		width: 200px;
		height: 200px;
		margin: 0 0 50px 0;
	}

	#small-box1 {
		background: blue;
	}

	#small-box2 {
		background: red;
	}

	#small-box3 {
		background: green;
	}

	</style>

Now, when you click on a link. Your whole document should smoothly scroll down to a colored box.

Here’s the whole code for the html document. I’ve also added a div where you scroll to boxes inside.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>jQuery scrollTo & localscroll Demo</title>

	<!-- Load jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

	<!-- Load ScrollTo -->
	<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

	<!-- Load LocalScroll -->
	<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

	<!-- Some CSS -->
	<style type="text/css">

	/* CSS for the big boxes */

	.box {
		width: 300px;
		height: 300px;

		color: #fff;
		padding: 10px;

		margin: 100px 0 0 0;
	}

	#box1 {
		margin: 300px 0 0 0;
		background: blue;
	}

	#box2 {
		background: red;
	}

	#box3 {
		background: green;
	}

	#box4 {
		background: gray;
	}

	/* CSS for the small boxes that will scroll inside a div */

	#small-box-container {
		border: 1px solid black;
		padding: 20px;
		width: 300px;
		height: 200px;

		overflow: scroll;
	}

	.small-box {

		color: #fff;
		padding: 10px;

		width: 200px;
		height: 200px;
		margin: 0 0 50px 0;
	}

	#small-box1 {
		background: blue;
	}

	#small-box2 {
		background: red;
	}

	#small-box3 {
		background: green;
	}

	</style>

	<!-- javascript that will initiate jQuery and the LocalScroll plugin -->
	<script>

	// When the document is loaded...
    $(document).ready(function()
	{
		// Scroll the whole document
		$('#box-links').localScroll({
		   target:'body'
		});

		// Scroll the content inside the #scroll-container div
		$('#small-box-links').localScroll({
		   target:'#small-box-container'
		});

	});
    </script>

</head>

<body>

<h1>A very simple jQuery LocalScroll Demo</h1>

<h3>Scroll inside a div</h3>

<div id="small-box-links">

	<a href="#small-box1">Link to small-box #1</a>
	<a href="#small-box2">Link to small-box #2</a>
	<a href="#small-box3">Link to small-box #3</a>

</div>

<div id="small-box-container">
	<div id="small-box1" class="small-box">Small-Box #1</div>
	<div id="small-box2" class="small-box">Small-Box #2</div>
	<div id="small-box3" class="small-box">Small-Box #3</div>
</div>

<hr>

<h3>Links to colored boxes</h3>

<div id="box-links">

	<a href="#box1">Link to box #1</a>
	<a href="#box2">Link to box #2</a>
	<a href="#box3">Link to box #3</a>
	<a href="#box4">Link to box #4</a>

</div>

<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
<div id="box3" class="box">Box #3</div>
<div id="box4" class="box">Box #4</div>

</body>
</html>

I hope you found this tutorial useful. If you have trouble getting it to work, please write your questions in the comments below. Cheers!

]]> http://www.adriantomic.se/development/jquery-localscroll-tutorial/feed/ 53 mySQL dump path and MAMP http://www.adriantomic.se/development/mysql-dump-path-and-mamp/?utm_source=rss&utm_medium=rss&utm_campaign=mysql-dump-path-and-mamp http://www.adriantomic.se/development/mysql-dump-path-and-mamp/#comments Wed, 10 Mar 2010 21:28:29 +0000 Adrian Tomic http://localhost:8888/adriantomic/?p=38 Continue reading →]]> When moving this site, I used WordPress DBmanager plugin to back up my database. I had trouble finding the path to mySQL and the mysqldump.

The path to the “files” are as follows.

To mysqldump: /Applications/MAMP/Library/bin/mysqldump
To mysql: /Applications/MAMP/Library/bin/mysql

Hope it will help someone :)

]]> http://www.adriantomic.se/development/mysql-dump-path-and-mamp/feed/ 15 iNSTANT KÖKSBORD http://www.adriantomic.se/personal/362006038/?utm_source=rss&utm_medium=rss&utm_campaign=362006038 http://www.adriantomic.se/personal/362006038/#comments Sat, 30 Jan 2010 22:21:00 +0000 Adrian Tomic http://adriantomic.tumblr.com/post/362006038

En must have app.

http://www.mittegetjavlanarnia.se/?p=2034

]]> http://www.adriantomic.se/personal/362006038/feed/ 0 Guest from Tokyo! http://www.adriantomic.se/personal/359488831/?utm_source=rss&utm_medium=rss&utm_campaign=359488831 http://www.adriantomic.se/personal/359488831/#comments Fri, 29 Jan 2010 11:11:51 +0000 Adrian Tomic http://adriantomic.tumblr.com/post/359488831

My friend (and former boss) Soichiro and Karin are making Swedish meatballs. Soichiro visited my home town of Hudiksvall last weekend. We had a great time :)

]]> http://www.adriantomic.se/personal/359488831/feed/ 0