DSs HUB: listopada 2015

czwartek, 26 listopada 2015

HTML 5 Canvas

HTML 5 introduced many new shiny features into the web design. One of those features is <canvas> element which is quite self descriptive - a canvas on which content is painted using JavaScript (which uses coordinates for the points). Canvas elements can be static or animated, it is even possible to create games with them.

Here is example:

How it is done

The graphics are drawn by script on the canvas element which is accessed in typical JavaScript way:

"var candraw1=document.getElementById('canvas1');"

Then the desired shape is drawn on the canvas from one point to the other, like connecting dots and at last filled out and stroked:

var ct1 = document.getElementById('canvas1').getContext('2d');
ct1.fillStyle = "rgba(255, 255, 255, 1)";
ct1.strokeStyle = "blue";
ct1.beginPath();
ct1.moveTo(300, 25);
ct1.lineTo(366, 25);
ct1.lineTo(416, 67);
ct1.lineTo(416, 133);
ct1.lineTo(366, 175);
ct1.lineTo(300, 175);
ct1.lineTo(250, 133);
ct1.lineTo(250, 67);
ct1.closePath();
ct1.lineWidth=10;
ct1.stroke();
ct1.fill();

NOTE: The first value is the X coordinate (horizontal one) and starts at 0 which is the very left of the canvas, the second value is the Y coordinate (vertical one) and also starts at 0 which is the very top of the canvas.

Some shapes such as circle are drawn slightly different:

var dCircle = document.getElementById('canvas1');
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(125,100,75,0,2*Math.PI);
ctx.fillStyle = "rgba(255, 255, 255, 1)";
ctx.fill();
ctx.fillStyle = 'white';

NOTE:The first two values used in the arc() method are X and Y coordinates of the centre of the circle and the third values is the radius of the circle. The other values are starting and ending angles for drawing arcs, they are given in radians. So in the case of our circle, the arc starts at angle 0r and ends at 2r angle which is 360.

CSS - create moving fog effect

Some time ago I came up with the idea about fog animation that I would include in my website. Of course GIF can not be used for that as it only allows 1/0 transparency and realistic fog consists of many transparency levels.
So I decided that I would create the PNG fog image and stick it on the div as background.. then use CSS animations to gradually move that div, simulating raising fog.

Here is the result:

I am some div element covered by mist

How it is done

There are several divs here - main one for containing all other other divs (it could be replaced by <body> on proper website), box div which is the box in the centre of the screen and fog div which moves creating illusion of fog.

Main div has following properties in CSS:

position: relative;
background-image: url(address-to-pic.png);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 300px;
overflow: hidden;
outline: thin red solid;

Relative position makes sure that the containing div places itself between the rest of the content.
Properties like width, height and background are self descriptive.
Important property is the "overflow: hidden;" it hides any content that goes outside of the main div which is exactly what we want as we are moving the fog div from below the main div but we only want to see the part that is inside of it. Outline is there just for presentational purposes.

Box div has following properties in CSS:

position: absolute;
z-index: 2;
left: 35%;
height: 40%;
width: 30%;
bottom: 20%;
background-color: rgba(100, 198, 255, 0.6);
box-shadow: 2px 2px 10px black;
outline: thin red solid;

Absolute position keeps the box in the place despite other page elements - otherwise it would be pushed over by other divs.
"z-index: 2;" property can be set to anything as long as its value is lower than that of the fog div - so that the fog overlays the box.
Box shadow property sets the nice, smooth shadow under the box so that it appears to be floating.

Fog div has following properties in CSS:

z-index: 10;
animation: fog 10s infinite;
position: relative;
background-image: url(address-to-pic.png);
background-repeat: repeat;
height: 100%;
width: 100%;
outline: thin red solid;

Animation property starts the animation called "fog" for the div which is specified in other part of CSS.

CSS animation used:

@keyframes fog
{
100%{top: 0%;}
0%{top: 100%;}
}

This is the standard way of creating animations in CSS, it consists of steps (from 100% to 0%) and properties that are changed in each step.

środa, 25 listopada 2015

Cross platform file synchronisation programs I use

FreeFileSync

FreeFileSync is cross platform, open source program available in multiple languages that allows person to synchronise files and folders.

I use it together with file sharing (described in this post) to synchronise files between my Linux laptop and Windows PC.

It detects all the folders and files (even with complex directory structure with multiple folders etc.) and scans both ends for changes in size, date and even contents.

There are many options available in it such as various synchronisation types (from left to right, from right to left, both sides or custom set), filters... and tonnes of other things to fiddle with.

If you are person who does not have time to fiddle though - no worries, the program will synchronise your files perfectly on default settings, all you need to do is specify two places that will be synchronised.

Program will compare them and produce a list of files showing which ones are going where.

Synchronisation itself is hassle free - you can start it and then get on with other things, however if you like shiny things and nice looking graphs this this program will not disappoint you, it displays the speed, rate and whatnot during the synchronisation.

On top of things, this program is also very fast - I was usually able to synchronise files with maximum speed (around 2-4Mb) between PC and Laptop on my home network, I was also able to synchronise files remotely (by using VPN) whenever I needed to access/save them from school.

MegaSync

MegaSync program is available on Windows, Linux and OSX which makes it ideal solution to sync files between very broad range of devices.
The program itself is minimalistic but efficient, it has all the necessary options (such as proxy settings, bandwidth limiting and file exclusions), has decent GUI and is (partly as you can see on picture) available in multiple languages.
The advantage it has over the other file hosting services is linked in to Mega file hosting - it offers great security features which (knowing background of Kim Dotcom and his relations with USA) most likely keep us away from all kinds of information spies and thieves and keep our data private.

Linux - Windows file exchange

Following guide uses Linux Mint 17 and Windows 7 as examples, however steps should be easy/almost exactly the same to reproduce on other versions of these OSs such as Win 8,10 or Ubuntu.

There are two types of file exchanges that can happen between Linux and Windows - local (on one computer with dual-boot) and over the network (between different computers).

Local file sharing

This one is the easiest to set-up and (in case of accessing Windows partition) does not require anything extra to be installed.

To access files saved on Windows partition using Linux:

Create new partition in Windows that will be dedicated for storing files to be shared (or alternatively you can just use the one that already exists).
Boot Linux and mount the partition (Linux should detect it automatically and display in file manager, all you need to do is click and open it).

NOTE: If you are using Win 10 and you receive error while trying to access its partition on Linux, reboot back to Win 10 and shut it down normally (without hybrid shut-down) by holding SHIFT key while clicking shut-down in the Start menu.

To access files saved on Linux partition using Windows:

Download and install Ext2Fsd
You should be able to access Linux partitions through file explorer

Network file sharing (different computers)

This method is slightly more complicated however it may be extremely useful. Keep in mind that this method only works for computers that are connected in Local Area Network (LAN) such as typical home network with router.

To set-up file sharing between two computers with Linux and Windows:

Create folder for sharing on both computers such as D:/SharedFiles and home/user/SharedFiles
Share folder on one or both computers
Access shared folder.

To share Windows folder:

Right click on the Windows folder to be shared and chose "Sharing", then in options add user "Everyone" and give him read-only or read/write privileges.

To share Linux folder:

Right click on the Linux folder to be shared and choose "Sharing Options", then tick "Share this folder" and "Allow for users to delete and save files in this folder" if you want users to have read/write privileges.. You can set additional options such as the name of the share, comment that will be displayed when accessing it and guest access.

To access Linux shared folder on Windows:

Open the file explorer and choose "Network" from the panel on the left. You should see various devices connected to your LAN including the Linux computer
Double click on the Linux computer and then the shared folder. You will be asked to provide network password
In the user input field type in the name of the computer followed by backslash and name of user who has access to this shared folder on Linux, example: MINTPC\linuxuser
In the password field type in the password that you use to access selected user account on Linux

To access Windows shared folder on Linux:

Make sure the Windows shared folder is definitely shared for "Everyone" and is available on the network.
Create a folder where mounted share will be placed - either by using mkdir command in terminal or file manager.
If you wish to have write access to the share (without using root privileges), check your user id by invoking: "id -u 'username'" in terminal and save/remember it, you will include it in "uid=''".
Open terminal and mount the share by typing in:

"sudo mount -t cifs //WINPCIPADDRESS/SHARE /home/user/SHAREMOUNT -o username='yourusername' uid='youruserid'"
You should be now be able to access the shared files in specified folder by using file manager.

NOTE: If you do not need write privilege on the share for normal user, dont include the "uid=' ' " part.
Credit for "uid=' ' goes to Timothy Matthews and his blog Microitblog.
If you do not know the IP of the computer, you can check it by invoking ipconfig (in Windows cmd) or ifconfig (in Linux terminal).

czwartek, 26 listopada 2015

HTML 5 Canvas

Here is example:

How it is done

CSS - create moving fog effect

Here is the result:

How it is done

środa, 25 listopada 2015

Cross platform file synchronisation programs I use

FreeFileSync

MegaSync

Linux - Windows file exchange

Local file sharing

Network file sharing (different computers)

CopyMe