IFTTT Integration (Action)¶
Written for ≥ v0.3.25
Introduction¶
Using the calendar serves as a bridge, we can put the data generated by any service on IFTTT into the layout required by Display, and then fill the layout into the Description of the calendar to display the services data on the screen.
For example, in the weather station, we set the specified time in IFTTT to trigger the weather information of Weather Underground. After obtaining the information, IFTTT realizes the action of creating a calendar event. After the event is created successfully, the event information will be displayed on Display.
Setup¶
The following example only demonstrates Google Calendar. The prerequisites for successfully performing the following operations and displaying the acquired weather information on the Display are:
Sign in to IFTTT with your Google account.
Authorize the Google Calendar service with the same Google account in the SyncSign App.
Bind Display to Google Calendar under the Google account in the SyncSign APP.
Steps to create an IFTTT applet¶
Login to IFTTT: https://ifttt.com
Go to the create IFTTT applet page: https://ifttt.com/create
If [ + ] This Then That¶
Click the [ + ] of { If [ + ] This Then That } to enter the Choose a service page.
Enter Weather Underground in the [ Search services ] box.
Click the [ Weather Underground ] card to enter the Choose trigger page.
Click the [ Today’s weather report ] card to enter the Complete trigger fields page.
Set the time to get the weather in the [ Time of day ] column.
Set the location in the [ Location ] column.
Click [ Create trigger ].
If This Then [ + ] That¶
Click the [ + ] of { If This Then [ + ] That } to enter the Choose a service page.
Enter Google Calendar in the [ Search services ] box.
Click the [ Google Calendar ] card to enter the Choose action page.
Click the [ Create a detailed event ] card to enter the Complete action fields page.
Select the calendar bound by Display in the [ Which calendar ] column.
Fill in the time to start displaying the weather on the Display in the [ Start time ] column.
Fill in the time to end displaying the weather on the Display in the [ End time ] column.
Select no in the [ All day ] column.
No need to change [ Title ], [ Location ], [ Attendees ] column.
Fill in the Fahrenheit Layout or Celsius Layout under the [ Description ] column.
Click [ Create action ] to enter the Review and finish the page.
Click [ Finish ].
Fahrenheit Layout:
{
"LAYOUT":{
"background": {
"enableButtonZone": false,
"rectangle": {
"fillColor":"BLACK",
"block": { "x_percent": 0, "y_percent": 0, "w_percent": 100, "h_percent": 35 }
}
},
"items": [
{ "type": "TEXT",
"data": {
"id": "WEATHER_TYPE",
"text": "{{TodaysCondition}}",
"font": "ICON_WEATHER",
"block": { "x": 40, "y": 150, "w": 60, "h": 72 }
}
},
{ "type": "TEXT",
"data": {
"text": "{{LowTempFahrenheit}} - {{HighTempFahrenheit}}",
"id": "TEMPERATURE",
"font": "DDIN_64",
"textAlign": "CENTER",
"block": { "x": 101, "y": 150 , "w": 230, "h": 80 }
}
},
{ "type": "TEXT",
"data": {
"id": "UNIT_ICON",
"text": "\uF045",
"font": "ICON_WEATHER",
"block": { "x": 330, "y": 150, "w": 50, "h": 72 }
}
},
{ "type": "RECTANGLE",
"data": {
"id": "LINE",
"fillColor": "WHITE",
"strokeColor": "BLACK",
"strokeThickness": 3,
"block": { "x": 200, "y": 0, "w": 8, "h": 105 }
}
},
{ "type": "TEXT",
"data": {
"id": "HUMIDITY_ICON",
"text": "\uf07a",
"font": "ICON_WEATHER",
"color": "WHITE",
"backgroundColor": "BLACK",
"block": { "x": 30, "y": 25, "w": 60, "h": 72 }
}
},
{ "type": "TEXT",
"data": {
"id": "HUMIDITY",
"text": "{{Humidity}}%",
"backgroundColor": "BLACK",
"textColor": "WHITE",
"font": "DDIN_CONDENSED_48",
"textAlign": "CENTER",
"block": { "x": 76, "y": 30 , "w": 110, "h": 70 }
}
},
{ "type": "TEXT",
"data": {
"id": "UV_ICON",
"text": "\uf055",
"font": "ICON_WEATHER",
"color": "WHITE",
"backgroundColor": "BLACK",
"block": { "x": 230, "y": 25, "w": 60, "h": 72 }
}
},
{ "type": "TEXT",
"data": {
"text": " UV {{UvIndex}}",
"id": "UV",
"backgroundColor": "BLACK",
"textColor": "WHITE",
"font": "DDIN_CONDENSED_48",
"textAlign": "CENTER",
"block": { "x": 256, "y": 30 , "w": 100, "h": 70 }
}
},
{ "type": "TEXT",
"data": {
"text": "{{TodaysCondition}} ",
"id": "CONDITION",
"font": "SRIRACHA_24",
"textAlign": "RIGHT",
"block": { "x": 50, "y": 250 , "w": 340, "h": 50 }
}
}
]
}
}
Celsius Layout:
{
"LAYOUT":{
"background": {
"enableButtonZone": false,
"rectangle": {
"fillColor":"BLACK",
"block": { "x_percent": 0, "y_percent": 0, "w_percent": 100, "h_percent": 35 }
}
},
"items": [
{ "type": "TEXT",
"data": {
"id": "WEATHER_TYPE",
"text": "{{TodaysCondition}}",
"font": "ICON_WEATHER",
"block": { "x": 40, "y": 150, "w": 60, "h": 72 }
}
},
{ "type": "TEXT",
"data": {
"text": "{{LowTempCelsius}} - {{HighTempCelsius}}",
"id": "TEMPERATURE",
"font": "DDIN_64",
"textAlign": "CENTER",
"block": { "x": 101, "y": 150 , "w": 230, "h": 80 }
}
},
{ "type": "TEXT",
"data": {
"id": "UNIT_ICON",
"text": "\uf03c",
"font": "ICON_WEATHER",
"block": { "x": 330, "y": 150, "w": 50, "h": 72 }
}
},
{ "type": "RECTANGLE",
"data": {
"id": "LINE",
"fillColor": "WHITE",
"strokeColor": "BLACK",
"strokeThickness": 3,
"block": { "x": 200, "y": 0, "w": 8, "h": 105 }
}
},
{ "type": "TEXT",
"data": {
"id": "HUMIDITY_ICON",
"text": "\uf07a",
"font": "ICON_WEATHER",
"color": "WHITE",
"backgroundColor": "BLACK",
"block": { "x": 30, "y": 25, "w": 60, "h": 72 }
}
},
{ "type": "TEXT",
"data": {
"id": "HUMIDITY",
"text": "{{Humidity}}%",
"backgroundColor": "BLACK",
"textColor": "WHITE",
"font": "DDIN_CONDENSED_48",
"textAlign": "CENTER",
"block": { "x": 76, "y": 30 , "w": 110, "h": 70 }
}
},
{ "type": "TEXT",
"data": {
"id": "UV_ICON",
"text": "\uf055",
"font": "ICON_WEATHER",
"color": "WHITE",
"backgroundColor": "BLACK",
"block": { "x": 230, "y": 25, "w": 60, "h": 72 }
}
},
{ "type": "TEXT",
"data": {
"text": " UV {{UvIndex}}",
"id": "UV",
"backgroundColor": "BLACK",
"textColor": "WHITE",
"font": "DDIN_CONDENSED_48",
"textAlign": "CENTER",
"block": { "x": 256, "y": 30 , "w": 100, "h": 70 }
}
},
{ "type": "TEXT",
"data": {
"text": "{{TodaysCondition}} ",
"id": "CONDITION",
"font": "SRIRACHA_24",
"textAlign": "RIGHT",
"block": { "x": 50, "y": 250 , "w": 340, "h": 50 }
}
}
]
}
}