Tuicemens

Pages: [1]

Author Topic: Customizing Ultra's screens  (Read 1621 times)

Tuicemen

  • Administrator
  • Hero Member
  • *****
  • Helpful Rating: 26
  • Offline Offline
  • Posts: 3711
  • Making Home Automation Fun!
    • Tuicemen.com
Customizing Ultra's screens
« on: January 24, 2015, 09:48:39 AM »

Ultralight is very customizable.
You need to have a bit of HTML knowledge  however there are many tutorials on the web for learning.
If you also have some experience with Java script you can add some very unique and cool things as well.
All the files are in the PcCompanion/www folder, however back up before you start playing.
If you wish to add new images or just change the current ones they need to be in the images folder.
Users can use this thread to post screen shots of their customized screens.
Maybe a version of yours could become part of a release build. ;>
Logged
Get the inside scoop and member perks in the
Members Only Section!

Please don't email me Automation questions 
The forum is for that!

Tuicemen

  • Administrator
  • Hero Member
  • *****
  • Helpful Rating: 26
  • Offline Offline
  • Posts: 3711
  • Making Home Automation Fun!
    • Tuicemen.com
Re: Customizing Ultra's screens
« Reply #1 on: March 20, 2015, 02:24:29 PM »

Ultra Light comes with several video clips which contain different characters for logon/welcomes and notifications.
It also comes with a couple of images available for backgrounds and buttons.
You can use these in which ever way you choose or remove them totally.
Note: Removing them will speed up load times if you find they are slow to load by all means remove them.

I realize not everyone is familiar with HTML or even comfortable editing the files.
I'm far from an expert as well however there are others on here that are very experienced with web page creation.
Feel free to post any questions you may have about customizing any of the web pages of Ultra.
Here is an example of Ultra without the face welcome video and no background image:
« Last Edit: February 23, 2016, 01:31:03 PM by Tuicemen »
Logged
Get the inside scoop and member perks in the
Members Only Section!

Please don't email me Automation questions 
The forum is for that!

Tuicemen

  • Administrator
  • Hero Member
  • *****
  • Helpful Rating: 26
  • Offline Offline
  • Posts: 3711
  • Making Home Automation Fun!
    • Tuicemen.com
Re: Customizing Ultra's screens
« Reply #2 on: March 22, 2015, 07:06:33 PM »

Here's a shot of my current  Ultra main page:


Notice the add delete buttons are missing.
This was done as an extra means of securing my setup.
To do this edit the index.html file found in the PcCompanion/WWW/PCC folder
find the lines that start with "<button id=
change them to read like the enclose attachment. :)!
Also I have my main IP camera displaying  you just need to edit the IP camera line with your cameras login info and IP Port this is located just above the add remove button lines
« Last Edit: March 22, 2015, 07:10:24 PM by Tuicemen »
Logged
Get the inside scoop and member perks in the
Members Only Section!

Please don't email me Automation questions 
The forum is for that!

Tuicemen

  • Administrator
  • Hero Member
  • *****
  • Helpful Rating: 26
  • Offline Offline
  • Posts: 3711
  • Making Home Automation Fun!
    • Tuicemen.com
Re: Customizing Ultra's screens
« Reply #3 on: February 23, 2016, 03:25:30 PM »

Starting with PCC version 4.0.5.7  code was added to capture a status page to a bmp file.
Settings are in the settings page under the floor plan tab
In version 4.0.5.9 this code was move to allow capture of the main floor plan.
The trick to getting this to work with Ultra is to have PCC save the image to the www\pcc\images folder and PCC must be open displaying the main floor plan.
You can add the image name to the  index.html file body to see the image.
However this doesn't update the image which is what I had invissioned when coding the screen capture to PCC.
Here is code you need to add to have the image update:
in the header add:
Code: [Select]
<script type="text/javascript">
function refreshImage()
{
img = document.getElementById("cam");
img.src="images/StatusForm.bmp?rand=" + Math.random();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Auto-Refresh</title>

in the body insert:
Code: [Select]
<body onload="window.setInterval(refreshImage, 1*500);">
<img src="images/StatusForm.bmp" id="cam" />
This assumes your image's name is statusform.bmp.
With the ability added to view a Cameras image and a updating text in the main floor plan this makes that vissible as well.
However if you have the avatar vissible that doesn't get captured.
It should be noted the image is refreshed every 5 seconds with this code if PCC is set to refresh at a longer or shorter interval you'll want to change that.
Also since the image captured is a full screen image you may wish to play with the size of the image as I've done
using
Code: [Select]
<img src="images/StatusForm.bmp"/width=740 height=580 id="cam" />
« Last Edit: February 23, 2016, 04:48:10 PM by Tuicemen »
Logged
Get the inside scoop and member perks in the
Members Only Section!

Please don't email me Automation questions 
The forum is for that!
Pages: [1]
 

succession-resounding