Page 1 of 1
Madrix HTTP remote and cached links
Posted: Thu Jun 02, 2016 6:56 pm
by reporter
Hi,
I've been trying to use iPad UI to control a simple installation. I'm having a problem, that each button only works once, and then subsequent presses just load a locally cached version of the URL, without sending anything to the Madrix webserver. If I hit the refresh button, it works. I notice that the gui examples which use javascript don't have this problem. Can you think of a simple fix to add to the iPad templates to trick it to communicate with Madrix on every press?
Thanks,
Nathan
Re: Madrix HTTP remote and cached links
Posted: Thu Jun 02, 2016 8:56 pm
by reporter
I couldn't figure out how to delete this post. See below for the newer info...
Re: Madrix HTTP remote and cached links
Posted: Fri Jun 03, 2016 4:08 am
by reporter
Hi,
I've posted my code for the iPad 3 interface below. It does some fancy stuff so that URLs aren't cached and also does some tricks so you can save it as a webapp and have it's own icon on an ipad. That way you don't have an address bar.
Yay!
Let me know if you have anything to add, or thoughts. I'm not very good at javascript, so there's probably a better way to do this.
Thanks,
Nathan
Code: Select all
<!DOCTYPE html>
<head>
<title>Moodspace iPad</title>
<meta name="generator" content="mc">
<meta name="author" content="bart">
<meta name="date" content="2011-08-24">
<meta name="robots" content="none">
<meta name="robots" content="noindex,nofollow">
<meta name="GOOGLEBOT" content="NOARCHIVE">
<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-index">
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="-1">
<meta http-equiv="expires" content="Tue, 01 Jan 1980 11:00:00 GMT">
<meta http-equiv="pragma" content="no-cache">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes">
<style type="text/css">
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}
body { background-color: #222; }
img { display: block;
margin-left: auto;
margin-right: auto;
}
a.normal {
color: #fff;
border: 1px solid rgb(0,0,0);
margin: 30px;
padding: 15px 15px;
display: inline-block;
background: #000 -webkit-gradient(linear, left top, left bottom, from(#959595), color-stop(.05, #959595), to(#000000));
font-size: 18px;
text-decoration: none;
height: 100px;
width: 100px;
text-align:center;
vertical-align:middle;
line-height:100px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0 0 4px #fff;
}
a.box {
color: #fff;
border: 1px solid rgb(0,0,0);
margin: 30px;
padding: 15px 15px;
display: inline-block;
background: #000 -webkit-gradient(linear, left top, left bottom, from(#b1db18), color-stop(.05, #b1db18), to(#000000));
font-size: 18px;
text-decoration: none;
height: 100px;
width: 100px;
text-align:center;
vertical-align:middle;
line-height:100px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0 0 4px #000;
-webkit-animation: glow 1s infinite;
}
@-webkit-keyframes 'glow' {
0% {
border-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(177, 219, 24, .3);
}
50% {
border-color: rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 100px rgba(177, 219, 24, 1);
}
100% {
border-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(177, 219, 24, .3);
}
}
</style>
<script>
// this is important to enable the navigator_Go function in the links below
function navigator_Go(url) {
window.location.assign(url); // This technique is almost exactly the same as a full <a> page refresh, but it prevents Mobile Safari from jumping out of full-screen mode
}
</script>
<script type="text/javascript" src="/check.js"></script>
</head>
<body onload="refresh($$$GetStorageA$$$,$$$GetStorageB$$$)">
<div id="wrap">
<a href="javascript:navigator_Go('index.html?SetStorage=S1P1;' + new Date().getTime());" id="S1P1" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P1" alt="$$$GetStorageDescription=S1P1$$$" title="$$$GetStorageDescription=S1P1$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P2;' + new Date().getTime());" id="S1P2" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P2" alt="$$$GetStorageDescription=S1P2$$$" title="$$$GetStorageDescription=S1P2$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P3;' + new Date().getTime());" id="S1P3" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P3" alt="$$$GetStorageDescription=S1P3$$$" title="$$$GetStorageDescription=S1P3$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P4;' + new Date().getTime());" id="S1P4" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P4" alt="$$$GetStorageDescription=S1P4$$$" title="$$$GetStorageDescription=S1P4$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P5;' + new Date().getTime());" id="S1P5" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P5" alt="$$$GetStorageDescription=S1P5$$$" title="$$$GetStorageDescription=S1P5$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P6;' + new Date().getTime());" id="S1P6" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P6" alt="$$$GetStorageDescription=S1P6$$$" title="$$$GetStorageDescription=S1P6$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P7;' + new Date().getTime());" id="S1P7" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P7" alt="$$$GetStorageDescription=S1P7$$$" title="$$$GetStorageDescription=S1P7$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P8;' + new Date().getTime());" id="S1P8" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P8" alt="$$$GetStorageDescription=S1P8$$$" title="$$$GetStorageDescription=S1P8$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P9;' + new Date().getTime());" id="S1P9" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P9" alt="$$$GetStorageDescription=S1P9$$$" title="$$$GetStorageDescription=S1P9$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P10;' + new Date().getTime());" id="S1P10" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P10" alt="$$$GetStorageDescription=S1P10$$$" title="$$$GetStorageDescription=S1P10$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P11;' + new Date().getTime());" id="S1P11" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P11" alt="$$$GetStorageDescription=S1P11$$$" title="$$$GetStorageDescription=S1P11$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P12;' + new Date().getTime());" id="S1P12" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P12" alt="$$$GetStorageDescription=S1P12$$$" title="$$$GetStorageDescription=S1P12$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P13;' + new Date().getTime());" id="S1P13" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P13" alt="$$$GetStorageDescription=S1P13$$$" title="$$$GetStorageDescription=S1P13$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P14;' + new Date().getTime());" id="S1P14" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P14" alt="$$$GetStorageDescription=S1P14$$$" title="$$$GetStorageDescription=S1P14$$$"></a>
<a href="javascript:navigator_Go('index.html?SetStorage=S1P15;' + new Date().getTime());" id="S1P15" target="_self" class="normal"><img width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P15" alt="$$$GetStorageDescription=S1P15$$$" title="$$$GetStorageDescription=S1P15$$$"></a>
</div>
</body>
</html>
Re: Madrix HTTP remote and cached links
Posted: Fri Jun 03, 2016 7:14 pm
by reporter
Hi,
One more post on my explorations of the webUI. It's pretty rare that you have a square patch that fits really well into the icons. In my most current installation, I have a patch that is 20 pixels tall and 780 pixels wide, and it doesn't make for very good thumbnails.
I figured out a way to stretch and resize the thumbnail using CSS to that the graphic portion fills in the whole square on the webUI. It's not perfect as it blends the pixel value as it stretches, but it's better than it was before.
Here's what I did:
I added the following to the style section, not that you can change the height and margin-top to suit the aspect ratio of your own patch. Margin-top will be around half the value of height, but I adjusted it up and down until I got the best result visually.
Code: Select all
img.icon { display: block;
margin-left: auto;
margin-right: auto;
height: 3400px;
vertical-align: middle;
margin-top: -1668px;
}
div.box {
overflow:hidden;
height:100px;
}
Then in the html, I changed added a div (class="box") container around the image, and added the class "icon" to the img elements.
Code: Select all
<div class="box">
<img class="icon"width="100px" height="100px" src="/$$$GetControlPath$$$/GetStorageThumb.bmp=S1P1" alt="$$$GetStorageDescription=S1P1$$$" title="$$$GetStorageDescription=S1P1$$$">
</div>
I hope it helps someone out there.
Nathan