ProfiLux: My Site - HowTo and Example

Support@GHLUSA · Aug 14, 2016

The ProfiLux Controller has a "My Site" feature, that allows the end user to upload a custom page of your design.

A few features:

page can be completely static.
page can pull in system variables, sensors, alarms etc.

Requisits:

.htm - STATIC CONTENT FILE
.html, .xml, .rss - DYNAMIC CONTENT - P3 web-server will parse file and replace system "TOKENS" (variables & placeholders) to pull in data.

Using ProfiLux-specific tokens
ProfiLux scans the requested file when it has a certain file extension (only *.html, *.rss and *.xml are scanned, all other file types are passed through unmodified!) for these tokens and replaces them with live data. The parsing of a file takes some time, if your HTML-file doesn’t have any tokes which have to be evaluated then use the file extension *.htm, these files will not be scanned and the output will be faster.

The process of uploading the file is very simple, and shown below:
1. System -> <select> Base Unit -> Webserver.
2. Browse to previously built "user.html" file, click OPEN/ADD.
3. <click> >> to upload the file.
4. Browse local P3 webserver, and lick on My Site. (http://<profiluxIP>/user.html)

We also have a PDF Manual that does provide some sample code snippets, and most fo the system variables. Link:
https://www.aquariumcomputer.com/downloads/user-designed-web-pages-for-profilux-3-3-1/

In my next post, I will go over a sample page, and provide some pointers.

Support@GHLUSA · Aug 14, 2016

*** Disclaimer ***
I'm not a web developer!

STATIC CONTENT: Let's build something...

You can have a static page, with content of your choice. Say for keeping track of links to items you're wanting to access quickly.

There are plenty of places that will teach you HTML code - I'm not going to go into detail, and teach you.
Tutorials to become familiar with HTML coding:

===============================================================

Open either your favorite HTML editor, or Notepad, Notepad++, Dreamweaver, etc.
Create a file; user.htl
Edit content of file, add HTML...:

HTML:

<!DOCTYPE html>

<html>
<head>
<title>My Site - Static Sample</title>
</head>
<body>
<h1>A sample static page</h1>
<p>A simple page put together using HTML. This page is hosted on the ProfiLux 3 web server. This page is static, and contains no dynamic content. For Dynamic content I must follow the next tutorial, or read the previously linked PDF file.
    </li>
</p>
<p>This is a picture, remotely hosted on Wikipedia.</p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Clown_fish_in_the_Andaman_Coral_Reef.jpg" width="900" height="600" alt=""/></p>
<h3>&nbsp;</h3>
</body>
</html>

Save the file
Use steps in Post#1 to upload the user.htm page to the ProfiLux.

DYNAMIC CONTENT: Let's build something...

Dynamic pages are cool! In case the included pages do not meet your needs, this is where you can build your own, and pull sensors, outlet status, illumination runs, etc... straight from the source.

Here is my current, under development, test My Site page.
Yes! I took a copy of the System page, and modified it. Why not. Navigation works, and it blends in.
There is likely still some redundant info, i'll update this as I go.

HTML:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1,  user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Profilux 3 Webinterface</title>
<script>
var language = 'Deutsch';
var buttonText = 'Done';
var closeName = "Logout";
</script>
<script type="text/javascript" src="comm.js_"></script>
<script type="text/javascript" src="index.js"></script>

<link type="text/css" rel="stylesheet" href="index.css" />
<link href="http://plxfiles.aquariumcomputer.com/firmware/V628/css/light/custom.css" rel="stylesheet">
<link href="http://plxfiles2.aquariumcomputer.com/firmware/V628/css/light/custom.css" rel="stylesheet">
</head>

<body id="body">
<div id="disableWrapper">
<div id="question">Next reminder: <span id="remText">&nbsp;</span>
<br/>
<button onclick="CloseQuestion();">Close</button>
</div>
</div>
<div class="header">
<a href="logout.html" class="headerbutton">Logout</a>  <a href="http://www.aquariumcomputer.com" class="headerbutton" target="_blank">GHL Home</a>  <a href="http://forum.aquariumcomputer.com" class="headerbutton" target="_blank">Support-Forum</a>
</div>
<div class="logo"></div>
<div class="maincontainer">
<div class="menu">
<ul>
<a href="index.html" class="button ">
<li>System</li>
</a>
<a href="sensors.html" class="button">
<li>Sensors</li>
</a>
<a href="illumination.html" class="button">
<li>Illumination</li>
</a>
<a href="switches.html" class="button">
<li>Switch</li>
</a>
<a href="dosingunits.html" class="button">
<li>Dose</li>
</a>
<a href="overview.html" class="button">
<li>Overview</li>
</a>
<a href="user.html" class="button">
<li class="active">My Site</li>
</a>
</ul>
</div>
<div class="main" id="mainWrapper">
<h4>Sample My Site</h4>
<div class="info">
<div class="systeminfo">
<span class="heading">System information</span>
<table class="information">
<tr>
<td>Model</td>
<td>$$PROM$$</td>
</tr>
<tr>
<td>S/N</td>
<td>$$SERI$$</td>
</tr>
<tr>
<td>$$FWVS$$</td>
<td>$$FWDA$$</td>
</tr>
<tr>
<td>Date</td>
<td id="date">$$DATE$$</td>
</tr>
<tr>
<td>Time</td>
<td id="time">$$TIME$$</td>
</tr>
</table>
</div>
<div class="remindercont">
<span class="heading">Reminders</span>
<div class="reminder">
<table class="information" id="remindertable">
<td>$$REPS[10][5]$$
<p>$$RMDT[x]$$</p>
$$REPE$$</td>

</table>
</div>
</div>
<div class="alarms">
<span class="heading">Alarms</span>
<table id="alarms">
<tr>
<td>$$REPS[10][5]$$
<p>$$ALMS[x]$$</p>
$$REPE$$</td>
</tr>
</table>
</div>

<div class="clearfix"></div>
</div>
<div class="info">
  <div class="systeminfo"> <span class="heading">Sensors & more</span>
      <table class="information" id="remindertable2">
      <tr>
        <td>Flow</td>
        <td>$$REPS[1][1]$$
        <br>$$FLSN[x]$$:  $$FLSV[x]$$
            $$REPE$$</td>
      <tr>
      <tr>
        <td>Level</td>
        <td>$$REPS[2][1]$$
        <br>$$LEVN[x]$$:  $$LEVV[x]$$
            $$REPE$$</td>
        </tr>
    </table>
  </div>
  <div class="remindercont"> <span class="heading">Sensors</span>
    <div class="reminder">
      <table class="information" id="remindertable2">
      $$REPS[32][1]$$
      <br>$$SENN[x]$$:  $$SENV[x]$$
      $$REPE$$
      </table>
    </div>
  </div>
  <div class="alarms"> <span class="heading">Lighting</span>
    <table id="alarms2">
      <tr>
        <td>$$REPS[32][1]$$
        <br>$$ILLN[x]$$:  $$ILLV[x]$$
            $$REPE$$</td>
      </tr>
    </table>
  </div>
  <div class="clearfix"></div>
</div>
<div class="info">
  <div class="systeminfo"> <span class="heading">row3-1</span>
    <table class="information" id="remindertable3">
      <tr>
        <td>Flow</td>
        <td>$$REPS[1][1]$$ <br>
          $$FLSN[x]$$:  $$FLSV[x]$$
          $$REPE$$</td>
      <tr>     
      <tr>
        <td>Level</td>
        <td>$$REPS[2][1]$$ <br>
          $$LEVN[x]$$:  $$LEVV[x]$$
          $$REPE$$</td>
      </tr>
    </table>
  </div>
  <div class="remindercont"> <span class="heading">row3-2</span>
    <div class="reminder">
      <table class="information" id="remindertable3">
        $$REPS[32][1]$$ <br>
        $$SENN[x]$$:  $$SENV[x]$$
        $$REPE$$
      </table>
    </div>
  </div>
  <div class="alarms"> <span class="heading">row3-3</span>
    <table id="alarms3">
      <tr>
        <td>$$REPS[32][1]$$ <br>
          $$ILLN[x]$$:  $$ILLV[x]$$
          $$REPE$$</td>
      </tr>
    </table>
  </div>
  <div class="clearfix"></div>
</div>
<div class="actionsWrapper">
  <div class="feedPauseWrapper">
<h6>Feeding pause</h6>
<div class="feedPauseContainer">

<div class="tablelayout">
<div class="default" id="fp000" onclick="ToggleFP(000);return false;" ontouchstart="ToggleFP(000);return false;"></div>
<div class="clearfix">Feeding pause 1</div>
</div>

<div class="tablelayout">
<div class="default" id="fp001" onclick="ToggleFP(001);return false;" ontouchstart="ToggleFP(001);return false;"></div>
<div class="clearfix">Feeding pause 2</div>
</div>

<div class="tablelayout">
<div class="default" id="fp002" onclick="ToggleFP(002);return false;" ontouchstart="ToggleFP(002);return false;"></div>
<div class="clearfix">Feeding pause 3</div>
</div>

<div class="tablelayout">
<div class="default" id="fp003" onclick="ToggleFP(003);return false;" ontouchstart="ToggleFP(003);return false;"></div>
<div class="clearfix">Feeding pause 4</div>
</div>

</div>
</div>
<div class="waterChangeWrapper">
<h6>Auto. water change</h6>
<div class="waterChangeContainer">
sample content
</div>
</div>
<div class="maintenanceWrapper">
<h6>Maintenance</h6>
<div class="maintenanceContainer">

<div class="tablelayout">
<div class="maint" id="maint000" onclick="ToggleMaint(000);return false;" ontouchstart="ToggleMaint(000);return false;"></div>
<div class="clearfix">Maintenance 1</div>
</div>

<div class="tablelayout">
<div class="maint" id="maint001" onclick="ToggleMaint(001);return false;" ontouchstart="ToggleMaint(001);return false;"></div>
<div class="clearfix">Maintenance 2</div>
</div>

<div class="tablelayout">
<div class="maint" id="maint002" onclick="ToggleMaint(002);return false;" ontouchstart="ToggleMaint(002);return false;"></div>
<div class="clearfix">Maintenance 3</div>
</div>

<div class="tablelayout">
<div class="maint" id="maint003" onclick="ToggleMaint(003);return false;" ontouchstart="ToggleMaint(003);return false;"></div>
<div class="clearfix">Maintenance 4</div>
</div>

</div>
</div>
<div class="thunderWrapper">
<h6>Thunderstorm</h6>
<div class="thunderContainer">
<div class="thundconnt">
<div id="thunderid" class="thunder" onclick="StartThunder();return false;" ontouchstart="StartThunder();return false;"></div>
<div class="inputlabel">Duration</div>
<div class="input">
<label>
<select id="thduration" size="1"></select>
<label>min</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<script type="text/javascript">
for (var i = 1; i <= 20; i++) {
var elOptNew = document.createElement('option');
elOptNew.text = i;
elOptNew.value = i;
var elSel = document.getElementById('thduration');
try {
elSel.add(elOptNew, null)
} catch (ex) {
elSel.add(elOptNew)
}
}

function getEle(id) {
return document.getElementById(id);
}

var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i);
},
any: function () {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};


if (navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)) {
var body = getEle("body");
body.setAttribute('style', 'padding: 20px 0 0 0');
var menu = getEle('menu');
menu.setAttribute('style', 'top: 0');
}
if (isMobile.any() && window.innerWidth <= 480) {
var node = getEle('currMenu');
node = node.innerHTML;
var html = '<div class="slider" id="slider"><h4>' + node + '</h4><div class="menButton" id="menButton" onclick="showMenu()"></div></div>';
var logoutButton = '<a href="logout.html" class="button " onclick=""><li>' +closeName + '</li></a>';
var menuList = getEle("menuList");
menuList.innerHTML += logoutButton;
logo.innerHTML = html;
var men = getEle('menu');
men.setAttribute('onclick', 'closeMenu()');
}

function showMenu() {
var men = getEle('closeWrapper');
if (men != null) {
closeMenu();
} else {

var html = '<div class="closeWrapper" id="closeWrapper" onclick="closeMenu();" style="position: absolute; left: 70%; top: 0; width: 100%; height: 100%;"></div>';
var body = getEle('body');
body.innerHTML += html;
var main = getEle('mainWrapper');
var logo = getEle('logo');
var footer = getEle('footer');
var x = getEle('menu');
for (var i = -95; i <= 0; i++) {
x.setAttribute('style', 'left: ' + i + '%;');
if (i > -70) {
main.setAttribute('style', 'left: ' + (i + 70) + '%;');
logo.setAttribute('style', 'left: ' + (i + 70) + '%;');
footer.setAttribute('style', 'left: ' + (i + 70) + '%;');
}

}
var m = getEle('menu');
m.setAttribute('onclick', 'closeMenu()');
}
}

function closeMenu() {
var men = getEle('menButton');
men.setAttribute('onclick', 'showMenu()');
var x = getEle('menu');
var main = getEle('mainWrapper');
var logo = getEle('logo');
var footer = getEle('footer');
for (var i = 0; i >= -95; i--) {
x.setAttribute('style', 'left: ' + i + '%;');
if (i >= -70) {
main.setAttribute('style', 'left: ' + (i + 70) + '%;');
logo.setAttribute('style', 'left: ' + (i + 70) + '%;');
footer.setAttribute('style', 'left: ' + (i + 70) + '%;');
}
}
main.removeAttribute('style');
logo.removeAttribute('style');
footer.removeAttribute('style');
men.removeAttribute('class');
men.setAttribute('class', 'menButton');
var y = getEle('closeWrapper');
var body = getEle('body');
body.removeChild(y);
}
</script>

</div>

</div>
<div class="footer" id="footer">&copy; 2016 by Marco</div>
<script type="text/javascript">
Start();
</script>
</body>

Support@GHLUSA · Aug 14, 2016

If you have created a My Site page; please feel free to post screenshots, discuss and/or provide some info, or even share examples.

@davyboy1970

davyboy1970 · Aug 22, 2016

Awesome thankyou for the great info, I need to work on getting this done

sayitfast · Oct 16, 2016

Awesome.... going to do this also.

Support@GHLUSA · Oct 18, 2016

sayitfast said:
Awesome.... going to do this also.

Can't wait to see what you come up with.

Jeromeit · Jan 25, 2018

I can't seem to get to the filesystem via GCC, has this been removed?

Jeromeit · Jan 25, 2018

double post

mckinleyw · Jan 25, 2018

THIS IS NEAT!! I have a web design background and this feature is awesome. When I am ready to upgrade my controller, I think GHL will be my next pick.