Mercurial > templog

diff web/views/top.tpl @ 249:c490de0cf17e
scaled zooming works
author: Matt Johnston <matt@ucc.asn.au>
date: Wed, 27 May 2015 22:37:43 +0800
parents: a19496c95be5
children: 141948a400a6
--- a/web/views/top.tpl	Wed May 27 22:17:39 2015 +0800
+++ b/web/views/top.tpl	Wed May 27 22:37:43 2015 +0800
@@ -14,16 +14,29 @@
  font-size: 70%;
  text-align: right;
 }
+
+#mainimage {
+	width: 100%;
+	max-width: {{graphwidth}}px;
+}
 //-->
 </style>
 <title></title>
 </head>
+<script type="text/javascript">
+function updatewidth() {
+	var width_input = document.getElementById("scaledwidth");
+	width_input.value = document.getElementById("mainimage").clientWidth;
+}
+
+</script>
 <body>
 <form action="" method="get">
-<span class="no_selection"><input type="image" style="width: 100%; max-width: {{graphwidth}}px" src="{{graphdata}}"/></span>
+<span class="no_selection"><input type="image" id="mainimage" src="{{graphdata}}" onclick="updatewidth();"/></span>
 <input type="hidden" name="length" value="{{length}}"/>
 <input type="hidden" name="end" value="{{end}}"/>
 <input type="hidden" name="zoom" value="yeah"/>
+<input type="hidden" name="scaledwidth" id="scaledwidth" value="-1"/>
 </form>
 <span class="codelink">Click to zoom in, click the left axis to zoom out. <a href="https://secure.ucc.asn.au/hg/templog/file/tip">Source code</a> for the Raspberry Pi controller and this web interface</a>. <a href="set">Adjustments</a> by phone.</span>
 </body>