Madrix HTTP remote and cached links

Write here what nice effects or shows you have done with MADRIX or ask other users.

Moderator: MADRIX Team

Locked
reporter
Posts: 61
Joined: Wed May 06, 2009 8:56 pm

Madrix HTTP remote and cached links

Post 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
Top
reporter
Posts: 61
Joined: Wed May 06, 2009 8:56 pm

Re: Madrix HTTP remote and cached links

Post by reporter »

I couldn't figure out how to delete this post. See below for the newer info...
Last edited by reporter on Fri Jun 03, 2016 7:19 pm, edited 1 time in total.
Top
reporter
Posts: 61
Joined: Wed May 06, 2009 8:56 pm

Re: Madrix HTTP remote and cached links

Post 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>
Top
reporter
Posts: 61
Joined: Wed May 06, 2009 8:56 pm

Re: Madrix HTTP remote and cached links

Post 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
Top
Locked

Return to “Experiences And 'How To' - Questions”