Multi-line output in control pages

Gurus:

Is there a way to have variable values display as multi-line output in Control Pages? I have tried embedding \r, \n and \r\n in the values but Indigo just seems to eat the line ending characters.

Richard

[jay (support)]

s there a way to have variable values display as multi-line output in Control Pages? I have tried embedding \r, \n and \r\n in the values but Indigo just seems to eat the line ending characters.

It's not that Indigo is eating it, it's that it's passing it on to the browser as a carriage return. And, of course, HTML doesn't give a rats butt about those. It might be nice if IWS, when it encounters a line break of any type in a variable value, would substitute a <br>. (if you try to add that to the variable value, IWS, very kindly, URL encodes the braces, so that's exactly what you get ).

I'll see how much trouble that would be to do in IWS. Only issue really is also making the change to the graphical renderer in Indigo Touch...

Of course, the clever workaround is to have a variable for each (potential) line of your value and just fill in the appropriate variable with the right value. UGLY, but it would work...

Even better might be to optionally allow embedded HTML. I patched IWS (see earlier post several months ago for details) to suppress entity encoding if the first character in the caption name is "<". This way I can use HTML to format two or three lines any way I want. (It does look a bit strange in the control page editor, though.)

I also use it to embed an href link to a weather image from the web, and to embed a javascript window.location() call to change URLs without causing the iPhone's Safari navigation bar to reappear if it had been suppressed, as happens with an href://...

There's all sorts of useful things you can do with embedded HTML. Patch works fine on v3.x and v4b5, viewed with web browsers. However, I realize this is a problem with Indigo Touch due to bugs in Apple's webkit.

Jeff

...I'll see how much trouble that would be to do in IWS. Only issue really is also making the change to the graphical renderer in Indigo Touch...

Of course, the clever workaround is to have a variable for each (potential) line of your value and just fill in the appropriate variable with the right value. UGLY, but it would work...

I thought of that, but what I want to display is a list of the sprinklers scheduled for the day. I have 8 zones and each zone schedule is independent and many are "every n days" (they are time separated to avoid collisions). So, I could have 8 variables and display them all with valid or null values. But, then the list would always have holes in it, sort of ugly. Also, I want this to display in Indigo Touch and screen real-estate there is limited.

I understand the issues with supporting literal <b> tags so, if you can do it, great, otherwise, well something to look forward to.

Richard

Even better might be to optionally allow embedded HTML. I patched IWS (see earlier post several months ago for details) to suppress entity encoding if the first character in the caption name is "<". ...

Could you send me the change you made. I found the old topic, but it didn't contain the details of your edits.

I also use it to embed an href link to a weather image from the web,

I sort of cheated to solve that same problem, I just downloaded the full set of weather icons, converted them to png and then copy the appropriate image to current.png and current+true.png.

Richard

Could you send me the change you made. I found the old topic, but it didn't contain the details of your edits.

I couldn't find the details either. I'll have to extract them from the source code again. I should be able to get to that later tonight.

I sort of cheated to solve that same problem, I just downloaded the full set of weather icons, converted them to png and then copy the appropriate image to current.png and current+true.png.

I should have been more specific. The image embedded in my control page is a dynamic weather radar image. It updates about every six minutes, and so I couldn't just grab and save static images. I wasn't looking to use it as a variable state image on a switch. I just couldn't figure any other way to embed a dynamic image in a control page and make it sizeable and positionable.

Jeff

Could you send me the change you made. I found the old topic, but it didn't contain the details of your edits.

I couldn't find the details either. I'll have to extract them from the source code again. I should be able to get to that later tonight.

Thanks, that would be great.

I should have been more specific. The image embedded in my control page is a dynamic weather radar image. It updates about every six minutes...

Makes sense.

Richard

Could you send me the change you made. I found the old topic, but it didn't contain the details of your edits.

Here it is. The following modification to IWS allows HTML to be embedded in the "Caption" field of a control page element. If the first character in a caption is "<", the entire contents of the caption will be placed directly into the web page as is, without entity encoding of characters such as "<>&", etc.

Note that there are some inconveniences. Since the control page editor is expecting captions to be simple text, that's what it displays. It shows the text you typed, and does not render it. My HTML is often pretty long and spreads across the entire control page form. I set the font size to the smallest possible (5) and type the HTML on multiple lines. The caption box is only one line high, but is scrollable for as many lines as you need. Of course, the HTML you type may still run across mutiple elements on the control page, but renders fine on a web browser.

Although this works fine with version 4 shown on a web browser, in does not work on Indigo Touch. It will simply show the HTML as you typed it.

Normal operation of the control is not affected, except that you can't have "<" as the first character of a caption.

Here's the HTML I use to horizontally and vertically center arbitrary text over a fixed-size image (lines separated with <br>). There must be a better way that doesn't require so many nested <div>'s, but I couldn't get it to center accurately any other way.

Code: Select all

<div style="position: absolute; top:0px; left:0px; width:68px; height:52px">
<div style="position: absolute">
<div style="position:absolute; top:-1px; left:4px; width:62px; height:52px">
<table><tr><td width="62" height="52" align="center" valign="middle">
<div style="font-family: Arial, Helvetica, sans-serif;
font-size: 9px; font-weight: bold; color: #000000;">
LIVING<br>
ROOM<br>
LAMP
</div></td></tr></table></div></a></div></div>

Modify the following file as follows: Macintosh HD/Library/Application Support/Perceptive Automation/Indigo 2/IndigoWebServer/Templates/_pageelem.html

Note: This code works in versions 3 and 4, but the line numbers may be different.

Original code:

Code: Select all

090  #if $pageElem.captionName
091      ${clickRefStart, entityEncoding='skip'}
092        <div class="captionName" style="
093          font-family: ${pageElem.captionFontFamily, entityEncoding='skip'};
094          font-size: ${pageElem.captionPointSize}px;
095          color: ${pageElem.captionColor};
096          $pageElem.captionPosStyle"
097        >
098          ${pageElem.captionName}
099        </div>
100      ${clickRefEnd, entityEncoding='skip'}
101  #end if


Insert between lines 090 and 091:

Code: Select all

#if $pageElem.captionName[0:1] == "<"
  ${clickRefStart, entityEncoding='skip'}
  <div>
  ${pageElem.captionName, entityEncoding='skip'}
  </div>
  ${clickRefEnd, entityEncoding='skip'}
#else


Insert between lines 100 and 101:

Code: Select all

#end if

Since I'm documenting patches, I'll mention this one, too, which I find very useful. I have many buttons with more than just on and off states, e.g. buttons that may illuminate red, green, yellow, or not illuminate at all, as in the attached image. This patch allows a control to have different images for an arbitrary number of states, not just true and false. The patch is only for controls showing variable values, but could easily be extended to controls showing device state. Rather than having two images for false and true, i.e. switch.png and switch+true.png, it substitutes the value of the variable for "true", after the plus sign.



So, if I have images switch.png, switch+red.png, and switch+green.png, I assign "red", "green", or "false" to the value of the variable to which the control is pointed. Whatever the variable is set to, that's the image that will be displayed. I.e. variable value = "red", file switch+red.png is displayed.

A similar scheme could also be applied to controlType == 1 to allow multi-state device controls. Normal operation of the control is not affected.

Modify the following file as follows: Macintosh HD/Library/Application Support/Perceptive Automation/Indigo 2/IndigoWebServer/indigopy/indigodb.py

Original code:

Code: Select all

365  elif self.controlType == 2:    # --- variable state control type ---
366    if self.imageFileName:
367      self.imageFilePath += u"variables/" + self.imageFileName
368
369    if self.targetElemName:
370      if self.imageFilePath:
371        if self.controlValueRaw == u"false":
372          pass  # NOP; use base file name already assigned
373        else:
374          self.imageFilePath = self.imageFilePath[:-4] + u"+true.png"

Replace line 374 with this code:

Code: Select all

374          self.imageFilePath = self.imageFilePath[:-4] + u"+" + self.controlValueRaw + u".png"

Hope this helps. Let me know if anything is not clear. I don't claim that the code is as simple and clear as possible--only that it works for me!

Jeff

Jeff:

Thanks a million for the great description you posted. I was especially intrigued in the multi-way image hack -- I want to show an arrow for atmospheric pressure: up, down or stable, and this will do the trick.

OTOH, I didn't realize that the html tag hack was for captions. I was looking for the same feature for values. Do you know if that can be done as well? I guess that armed with your information, I can go exploring on my own too.

Richard

Jeff:

I hope Matt and Jay can find some way to get those mods into Indigo Touch. I could make very good use of both of those changes. Until then, maybe I'll have to consider switching back to Safari. Nice work!

OTOH, I didn't realize that the html tag hack was for captions. I was looking for the same feature for values. Do you know if that can be done as well?

Richard:

Sorry. I misread your original post. I'll poke around today and see what I can find.

Jeff