From SmartCore Wiki
Jump to: navigation, search

Tile.php

A tile is an icon, that might show the state of interactions and or is a button of sorts Tiles are generated automatically, when an interaction is present in the context tree. Optionally you can define a tile, by putting a tile.php file in the context tree. If you do that, you take control of how that context is displayed, from other pages.

Tile.php is included, when SmartCore needs to display the state of the interactions in context. The script the produce the HTML code to present the tile on screen. You can use both CSS styling, javascript and some loaded PHP functions. Also certain function and variables are available to the tile.php script, when it executes.

Basic tile

Lets make a very basic tile. In the context, there is two files: an interaction file and a tile.php.

This interaction file is a dummy switch, and may look like this: <source lang="json"> {

  "name":"Example relay switch"
 ,"icon":"switch:%s.png"
 ,"device":"/device/dummy"
 ,"unit id":"1"
 ,"max_data_age":0
 ,"type":"switch"
 ,"cmd":{
    "get":[["get"],20]
   ,"on":[["set on"],40]
   ,"off":[["set off"],40]
   ,"status":[["get"],20]
   ,"diagnostic":[["diagnostic"],20]
 }

} </source> See [interaction file] for details. Put it in a new directory in the context tree. You could call it "example" If you do nothing else it will automatically generate an operational tile.

To take more control of the the presentation, you create the file tile.php in the same context: <source lang="html">

 if(!@in_array($state,["on","off","off-line"])) $state = "off";
 $set_state_to = "off" ? "on" : "off";
 $ia = $context . "switch";
 $title = "Example switch";
 
echo "
"; echo "
";

</source> Conatinment and predefined variables Functions available safety Interaction and states Display code

return: watch_list javasctript

PHP functionse

CSS in tiles

Different size

Page services

Tile randering

The code in here makes the HTML to display the current state of the tile.

Images used are placed in the /image folder

This code are are called to render the tile whenever there is a state or status change in a related event

output are buffered and send as an event to the clients

The following variables are set when this script is called:

 $TRUST
 $CONTEXT  Full path context
 $STATE   State of interaction or null if off-line
 

PHP functions

 string $full_url_path = image_path(string $image_file_name)

Return url to icon or image, adjusted for best match to selected theme.

Javascript functions

 setContext(string context)
 cmd(string or array of string command [,string id])
 ps functions ...


CSS Styling

class container: Makes a framed workspace, that fills the width of the screen.

class tile: makes a square border tile. The size depends on the view port size and proportions. The value of height and width is set to --module-size.

CSS variables:

 --module-size:    Size in pixel of a square tile or button
 --module-shadow:  Size of box shadow etc.