Fan Switch Example | Understanding Communication between Lightning components

In this article we are going to see a simple FAN switch on/off example. Concept used here are:

1) Parent to child communication using Aura Method

2) Using Static Resource in lightning component 

ChildFan.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:method name="imageMethod" action="{!c.doAction}"	>
    <aura:attribute name="imageinfo" type="Boolean" default="false"/> 
    </aura:method>
    <aura:attribute name="fantype" type="Boolean" default="false"/> 
    <div class="slds-align_absolute-center">
        <aura:if isTrue="{!v.fantype}">
            <img style="border: 8px solid black;" src="{!$Resource.FanOn}"/>
            <aura:set attribute="else">
            <img src="{!$Resource.FanOff}"/>
            </aura:set>
        </aura:if> 
    </div>
</aura:component>

ChildFan.js

({
	doAction : function(component, event, helper) {
		var params = event.getParam('arguments');
        if (params) {
            var param1 = params.imageinfo;
            component.set("v.fantype",param1);
        }
	}
})

ParentFan.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
	<div class="slds-align_absolute-center">
        <button class="buttonclass1" onclick="{!c.FanOn}">ON</button>
        <c:childFan aura:id="childFan"></c:childFan>
        <button class="buttonclass2" onclick="{!c.FanOff}">OFF</button>
    </div>
</aura:component>

ParentFan.js

   ({
	FanOn : function(component, event, helper) {
		var childFanComp = component.find('childFan');
        childFanComp.imageMethod("true");
	},
    FanOff : function(component, event, helper) {
		var childFanComp = component.find('childFan');
        childFanComp.imageMethod("false");
	}
})

Thank you..!!