--- /dev/null
+<?php
+/*
+
+XMDV TELESHOPPING GFX INTERFACE
+clock pannel
+
+*/
+#error_reporting(E_ALL);
+#ini_set('display_errors', 'On');
+
+# read the file from the server
+$file = fopen("../clock.json", "r") or die("unable to open file!");
+$data = fread($file, filesize("../clock.json"));
+fclose($file);
+$clock = json_decode($data, true);
+
+# setup the increment for the clock positions
+$clockIncrement = 18; # deg
+
+# if getting a POST request to update the data
+if (!empty($_POST['update'])) {
+ # replace required data with the POST data
+ $clock['movementSpeed'] = (int)$_POST['movementSpeed'];
+ $clock['currentPosition'] = (int)$_POST["doomsday"];
+
+ # write the data to the JSON file
+ $json = json_encode($clock);
+ $file = fopen("../clock.json", "w");
+ fwrite($file, $json);
+ fclose($file);
+}
+?>
+
+<html>
+<head>
+ <title>XMDV</title>
+ <style>
+.split {
+ display: inline-block;
+ width: calc(50% - 20px);
+ margin: 10px;
+ vertical-align: top;
+}
+/*
+clock styling
+ - makes div square
+ - positions center pannel in the middle of the clock
+ - positions radio buttons around the clock (PHP)
+*/
+/*
+media query to make sure the clock is always displayed well
+*/
+@media (orientation: portrait) {
+ :root {
+ font-size: 2em;
+ }
+ input {
+ font-size: 1em;
+ }
+ input[type="submit"] {
+ width: 100%;
+ aspect-ratio: 4
+ }
+ .clock {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 1;
+ }
+ .clockButton {
+ position: absolute;
+ width: 2em;
+ height: 2em;
+ margin: 0;
+ }
+ <?php
+ for ($i = 0; $i < 360; $i += $clockIncrement) {
+ $radius = 45;
+ $x = $radius * cos(deg2rad($i - 90)) + 50;
+ $y = $radius * sin(deg2rad($i - 90)) + 50;
+ echo ".angle$i {top: calc($y% - 1em); left: calc($x% - 1em);}";
+ }
+ ?>
+}
+@media (orientation: landscape) {
+ .clock {
+ position: relative;
+ height: 70vh;
+ aspect-ratio: 1;
+ }
+ .clockButton {
+ position: absolute;
+ width: 1.5em;
+ height: 1.5em;
+ margin: 0;
+ }
+ <?php
+ for ($i = 0; $i < 360; $i += $clockIncrement) {
+ $radius = 45;
+ $x = $radius * cos(deg2rad($i - 90)) + 50;
+ $y = $radius * sin(deg2rad($i - 90)) + 50;
+ echo ".angle$i {top: calc($y% - 0.75em); left: calc($x% - 0.75em);}";
+ }
+ ?>
+}
+
+
+ </style>
+</head>
+<body>
+<form action="./clock.php" method="POST">
+<fieldset>
+ <legend>Doomsday clock <em>(Incr. <?php echo $clockIncrement;?> deg)</em></legend>
+ <div class=clock>
+ <svg class='clockFace' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><circle r='45' cx='50' cy='50' fill='none' stroke='#a0a0a0' stroke-width='0.15px'/></svg>
+
+<?php
+for ($i = 0; $i < 360; $i += $clockIncrement) {
+ $checked = "";
+ if ($clock['currentPosition'] == $i) {
+ $checked = " checked='checked' style='outline: 2px solid red;'";
+ }
+ echo "<input type='radio' class='clockButton angle$i' value='$i' name='doomsday'$checked>";
+}
+?>
+
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend>Movement</legend>
+ <input type='number' name='movementSpeed' id='movementSpeed' value='<?php echo $clock['movementSpeed']; ?>'>
+ <label for='movementSpeed'> Movement speed (ms/tick)</label><br>
+ <div class="split">
+ <input type='radio' value='ease' name='function'>
+ <label>Ease function</label>
+ </div><div class="split">
+ <input type='radio' value='linear' name='function' checked='checked'>
+ <label>Linear function</label>
+ </div>
+ </fieldset>
+<input type="submit" name="update" value="Update">
+</form>
+</body>
+</html>
fclose($file);
$text = json_decode($text, true);
-$file = fopen("../clock.json", "r") or die("unable to open file!");
-$data = fread($file, filesize("../clock.json"));
-fclose($file);
-$clock = json_decode($data, true);
-
$file = fopen("../data.json", "r") or die("unable to open file!");
$data = fread($file, filesize("../data.json"));
fclose($file);
$note = fread($file, filesize("../note"));
fclose($file);
-$clockIncrement = 10;
+$clockIncrement = 18;
if (!empty($_POST['generate_docs'])) {
exec("./generate_docs.py");
if (!empty($_POST['update'])) {
- for ($i = 0; $i < 5; $i ++) {
- if ($i == (int)$_POST['sceneCue']) {
- $clock['lightingCues'][$i] = "true";
- } else {
- $clock['lightingCues'][$i] = "false";
- }
- }
- for ($i = 0; $i < 5; $i ++) {
- $clock['lightingCues'][$i + 5] = var_export(!empty($_POST["triggerCue$i"]), true);
- }
-
$data['showingMain'] = var_export(!empty($_POST['main']), true);
$data['showingAll'] = var_export(!empty($_POST['all']), true);
$data['showingExtra'] = var_export(!empty($_POST['extra']), true);
}
}
- $clock['movementSpeed'] = (int)$_POST['movementSpeed'];
- $clock['currentPosition'] = (int)$_POST["doomsday"];
$data['timerOffset'] = (int)$_POST['timerOffset'];
$data['priceChange'] = (int)$_POST['priceChange'];
$data['discount'] = (int)$_POST['discount'];
$file = fopen("../data.json", "w");
fwrite($file, $json);
fclose($file);
-
- $json = json_encode($clock);
- $file = fopen("../clock.json", "w");
- fwrite($file, $json);
- fclose($file);
}
?>
<html>
width: 50%;
margin: 0;
}
-.floating {
- position: fixed;
- bottom: 25px;
- right: 25px;
- max-width: min(900px, calc(100% - 74px));
- padding: 10px;
- color: red;
- border: 2px solid red;
- background-color: rgba(255, 255, 255, 0.7);
-}
-s {
- color: green;
-}
.clock {
position: relative;
width: 100%;
for ($i = 0; $i < 360; $i += $clockIncrement) {
$checked = "";
if ($clock['currentPosition'] == $i) {
- $checked = " checked='checked' ";
+ $checked = " checked='checked' style='outline: 2px solid red;'";
}
echo "<input type='radio' class='clockButton angle$i' value='$i' name='doomsday'$checked>";
}
</details>
</div>
</form>
- <details class="floating">
- <summary>Notes</summary>
- <p>
- Still need to do plenty to both the GFX overlay and this page (and the actual clock):
- </p>
- <ul>
- <li>add marquee of the current buyers of the product and figure out how to do this (potentially hard?)</li>
- </ul>
- <p>
- and then still to do in the admin department: Talk to Joe about the GFX system, ask Ash about the lighting desk sAcn input and to setup things, makerspace the clock, text people about things, <s>arrange screentest with Jack</s>.
- </p>
- </details>
</body>
</html>