Jon00 HSTile (Touchscreen Interface) for HS3 & HS4

[Stubborn]

Question, is there any difference in capability between a Tile and a Label?
Other than 3rows vs 5? Unused rows are either non existent or take up a pixel.

I started by making display only objects Labels, and actions Tiles. But to preserve my sanity I think I will just convert to using all Tiles for everything.

[jon00]

Nope.

[jon00]

Version 1.0.44 is now available:

Added more output formatting options to the [devicetime] tag.
Added additional advanced options to the Chart Database settings.
Added new formatting [div] [/div] and [nl] tags.

Fo those without/limited HTML coding knowledge, the formatting tags allow alignment for multiple tags/text in a single row/column and/or multi-line use.

For example, this is a label using Row 2 only. You could construct a table as shown below:



Or a more practical example:

[Stubborn]

Both of these are absolutely Fantastic additions!

[Stubborn]

Crib notes:

[devicetime {dvref or dvaddress,{optional output formatting number}]

{optional formatting number} – See below:
xx = number of days (always 2 digit), yy = number of hours (always 2 digit), zz = number of minutes (always 2 digit):
x = number of days (1 or 2 digit), y = number of hours (1 or 2 digit), z = number of minutes (1or 2 digit):
1 = format: xx d yy h zz
2 = format: xx days yy hrs zz mins
3 = format: xx days yy hours zz minutes
4 = format: xx:yy:zz
5 = format: x d y h z
6 = format: x days y hrs z mins
7 = format: x days y hours z minutes
8 = format: x:y:z


[Database]

Advanced Database Settings
1MonitorRef = 1234
2MonitorRef = 5678
3MonitorRef = 345
Etc.

By default, the database will update when there is a change in value with any device defined in the Ref entry.
Using the MonitorRef entry allows the database to only update when there is a change in the value with this device only.
This could be used to manually update the database by saving different values (so it sees a change) to a user created virtual device via an event.
How? Just run this immediate script command in your event to update your own virtual device (shown here as reference number 1234):
&nhs.SetDeviceValueByRef(1234,DateTime.Now.ToString("ddHH mms s"), True)

Note: Only the values defined in the Ref entry are updated. Therefore, if you want to record the metrics of the MonitorRef entry, this needs to be
added to the Ref entry as well.

1WriteMode = 0
2WriteMode = 1
3WriteMode = 0
Etc

By default, any writes to the database are checked against its previous reading. If these are the same, they are discarded.
Setting the WriteMode to 1 will force the data to be recorded to the database regardless of the previous reading. This setting would only normally
be used when the MonitorRef option is in operation to manually update the database.


[div] [/div]

Description:
Allows you to format tag/text within a single row/column of a tile/label.
Can be used to add multiple values correctly spaced and multiple lines when used in conjunction with the [nl] tag.

Parameters:
[div {text align letter},{width},{height},{border thickness},{background color},{inline style}]

Parameter details:
text align letter – how the contents is aligned in the block:
L=left
R=right
C=center
width – numerical width of the block in %, px, em etc (defaults to 100%).
height – optional numerical height of the block in %, px, em etc.
border thickness – thickness of the border in pixels - 0 upwards (defaults to 0). Note: color is the same as the text color.
background-color – optional color of the block’s background (defaults to transparent).
Inline style – optional additional inline style.

The [div] tag must be used with the corresponding end [/div] tag around the text/tags you wish to format.

[nl]
Description:
Allows you to place text/tags on a new line within a tile/label row/column.

[DLONG2]

Would you please offer an example of the tile using the new DIV tags and 3 columns? I'm trying to understand how the 3 columns separate and line up.

Update: Aha! See it in the document!

[div L,33.33%,,1,red]Hello[/div][div C,33.33%,,1,green]Cruel[/div][div R,33.33%,,1,blue]World[/div]

[DLONG2]

I used these DIV tags:

[div L,15%,,0,][/div][div L,35%,,0,][devicetext 781][/div][div R,35%,,0,][deviceimage 781][/div][div L,15%,,0,][/div]
[div L,15%,,0,][/div][div L,35%,,0,][devicetext 782][/div][div R,35%,,0,][deviceimage 782][/div][div L,15%,,0,][/div]
[div L,15%,,0,][/div][div L,35%,,0,][devicetext 783][/div][div R,35%,,0,][deviceimage 783][/div][div L,15%,,0,][/div]

to render this tile:

[DLONG2]

These tags . . .

[div L,5%,,0,][/div][div L,35%,,0,]Security[/div][div C,20%,,0,][deviceimage 781][/div][div L,35%,,0,][devicetext 781][/div][div L,5%,,0,][/div]
[div L,5%,,0,][/div][div L,35%,,0,]Temperature[/div][div C,20%,,0,][deviceimage 782][/div][div L,35%,,0,][devicetext 782][/div][div L,5%,,0,][/div]
[div L,5%,,0,][/div][div L,35%,,0,]Luminance[/div][div C,20%,,0,][deviceimage 783][/div][div L,35%,,0,][devicetext 783][/div][div L,5%,,0,][/div]

. . . for this tile:

[jon00]

Both of these are absolutely Fantastic additions!

👍

[jon00]

These tags . . .

[div L,5%,,0,][/div][div L,35%,,0,]Security[/div][div C,20%,,0,][deviceimage 781][/div][div L,35%,,0,][devicetext 781][/div][div L,5%,,0,][/div]
[div L,5%,,0,][/div][div L,35%,,0,]Temperature[/div][div C,20%,,0,][deviceimage 782][/div][div L,35%,,0,][devicetext 782][/div][div L,5%,,0,][/div]
[div L,5%,,0,][/div][div L,35%,,0,]Luminance[/div][div C,20%,,0,][deviceimage 783][/div][div L,35%,,0,][devicetext 783][/div][div L,5%,,0,][/div]

. . . for this tile:

Good to see you are getting the hang of things!

Tip 1 - As the default border setting is 0, you can reduce a div tag configuration from [div C,20%,,0,] to just [div C,20%]

Tip 2 - There is no need to make the full width total 100% by adding the div L,5%,,0,][/div] to each end. Just set the Text Align for that row to 'Center' (on the setup page) and then add [nl] (new line) to the end of the first 2 rows.

Tip1 and 2 together:

[div L,35%]Security[/div][div C,20%][deviceimage 781][/div][div L,35%][devicetext 781][/div][nl]
[div L,35%]Temperature[/div][div C,20%][deviceimage 782][/div][div L,35%][devicetext 782][/div][nl]
[div L,35%]Luminance[/div][div C,20%][deviceimage 783][/div][div L,35%][devicetext 783][/div]

[DLONG2]

Is there a simple sample for having a single tile which turns on or off a lamp, and where the current status shows? I'm thinking the need is to use 2 separate tiles and to somehow show or hide the other?

[jon00]

Tile Preset - "Toggle On/Off with Status"

[DLONG2]

Thanks, Jon. Embarrassed that I had that tile type already working on another page.

[jon00]

No Problem.

Remember, you can change a toggle to 3,4 and 5 way by just changing a single tag i.e for 3 way.

[tiletogglebylabel 1234,off,on]

becomes

[tiletogglebylabel3way 1234,off,dim 50%,on]

[SmartyPants]

Jon,

I'm hoping to make a json call from a tile, is this possible?
I looked through the manual which talks about various url calls but none I've tried work.
I tried the tilestore option hoping it would call the url but it's a no go.

My url to call would be like:

http://x.x.x.x:xx/json.htm?type=command&param=switchlight&idx=35&switchcmd=Toggle

This calls on my Evohome heating in Domoticz. I'm trying to avoid as many scripts and virtual devices as possible, because I can't use Homeseer for my Evohome heating in the way I want, so I have virtual devices in Domoticz to control the heating, and when the heating turns on it sends a JSON call to Homeseer to update my HSTile heating button status.It all works great and very fast, but I also want to be able to, directly if possible, have the button in HSTiles json call the heating boost VD in Domoticz.

Thanks