ProfiLux: My Site - HowTo and Example

[email protected]

Team GHL
View Badges
Joined
Jul 27, 2016
Messages
613
Reaction score
394
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)

upload_2016-8-14_15-56-12.png



upload_2016-8-14_15-56-22.png



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.
 
Last edited:
OP
Support@GHLUSA

[email protected]

Team GHL
View Badges
Joined
Jul 27, 2016
Messages
613
Reaction score
394
*** 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:

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

  1. Open either your favorite HTML editor, or Notepad, Notepad++, Dreamweaver, etc.
  2. Create a file; user.htl
  3. Edit content of file, add HTML...:
  4. 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>
  5. Save the file
  6. 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.

upload_2016-8-14_19-7-31.png



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>
 
Last edited:
OP
Support@GHLUSA

[email protected]

Team GHL
View Badges
Joined
Jul 27, 2016
Messages
613
Reaction score
394
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
 
Last edited:

mckinleyw

AIRBORNE REEFER
View Badges
Joined
Mar 29, 2015
Messages
1,427
Reaction score
1,178
Location
florida
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.
 

The worst paradigm to hit the hobby is getting your nutrient levels as low as possible?

  • Yes

    Votes: 73 60.8%
  • No

    Votes: 27 22.5%
  • Other (please explain)

    Votes: 4 3.3%
  • Not Sure

    Votes: 16 13.3%

Online statistics

Members online
2,231
Guests online
4,804
Total visitors
7,035
Premium Algae Scrubbers from Turbo's Aquatics!
Top