ProfiLux: My Site - HowTo and Example

Users Who Are Viewing This Thread (Total: 1, Members: 0, Guests: 1)

Jump to Last
Support@GHLUSA

Support@GHLUSA

Team GHL
View Badges
Joined
Jul 27, 2016
Messages
614
Reaction score
418
Rating - 0%
0   0   0
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
OP
Support@GHLUSA

Support@GHLUSA

Team GHL
View Badges
Joined
Jul 27, 2016
Messages
614
Reaction score
418
Rating - 0%
0   0   0
*** 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
OP
Support@GHLUSA

Support@GHLUSA

Team GHL
View Badges
Joined
Jul 27, 2016
Messages
614
Reaction score
418
Rating - 0%
0   0   0
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

mckinleyw

AIRBORNE REEFER
View Badges
Joined
Mar 29, 2015
Messages
1,471
Reaction score
1,258
Location
florida
Rating - 0%
0   0   0
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.
 

Similar threads

Rick Mathew
    • Like
    • 2 Thumbs
    • Love
HOBBY GRADE TEST KITS CAN OUTPERFORM ICP MEASUREMENTS…REALLY??
43 44 45 46 47
Replies
937
Views
27,682
areefer01
A
M
    • Like
My Reefbot Experience
2
Replies
23
Views
1,075
kayleb
K
M
My Reefbot Experience
Replies
0
Views
262
Moonrock
M
Randy Holmes-Farley
    • Like
    • 2 Thumbs
  • AMS: Article
Reef Aquarium Salinity: DIY Calibration Standards
Replies
11
Views
1,272
Randy Holmes-Farley
Randy Holmes-Farley
Gogo007
    • Like
share with you guys my wifi KH tester and lets try to help each others
Replies
8
Views
832
Bazzo
Bazzo

Being sticky and staying connected: Have you used any reef-safe glue?

  • I have used reef safe glue.

    Votes: 136 87.7%

  • I haven’t used reef safe glue, but plan to in the future.

    Votes: 9 5.8%

  • I have no interest in using reef safe glue.

    Votes: 7 4.5%

  • Other.

    Votes: 3 1.9%
See comments…

New Posts

World Wide Corals
Nutramar Foods
Deltec
Top Shelf Aquatics
TCK Corals
Tidal Gardens
Dinkins Aquatic Gardens
New Posts
Back
Top