diff --git a/myproject/template/helloworld.html b/myproject/template/helloworld.html
index f8f2715854aec4bf510a8d0e0e45deb8c009251a..78c027ebf714819a0f911595de8e734952400bbc 100644
--- a/myproject/template/helloworld.html
+++ b/myproject/template/helloworld.html
@@ -3,11 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Bootstrap demo</title>
- <!-- <link rel="image" href="image/python.png"> -->
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.css" integrity="sha512-9NawOLzuLE2GD22PJ6IPWXEjPalb/FpdH1qMpgXdaDM+0OfxEV75ZCle6KhZi0vM6ZWvMrNnIZv6YnsL+keVmA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
- <style>
+ <title>viewer JS Template </title>
+ <!-- <link rel="image" href="image/python.png"> -->
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.css" integrity="sha512-9NawOLzuLE2GD22PJ6IPWXEjPalb/FpdH1qMpgXdaDM+0OfxEV75ZCle6KhZi0vM6ZWvMrNnIZv6YnsL+keVmA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+ <link rel="icon" href="image/logo.png">
+
+ <style>
+
img {
width: 150px;
height: 150px;
@@ -16,32 +19,80 @@
</head>
<body>
<div class="container">
- <!-- <div>
-
- { % if data.username == "justinmass2001" % }
- </div> -->
<div class="alert alert-success" role="alert">
Welcome {{ data.username }} , you are in {{ data.env }}
</div>
+ <!-- class called row and collum -->
+ <div class="container">
+ <div class="row">
+ <div class="col-auto">
+ <button class="btn btn-primary" style="margin-bottom: 20px;">Add Devices</button>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <!-- class for card-1 -->
+ <div class="card text-center">
+ <div class="card-header">
+ Raspberry Camera 2
+ </div>
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <button id="raspi-cam-1" class="btn btn-primary raspi-cm-viewer">View Captures</a>
+ </div>
+ <div class="card-footer text-muted">
+ 2 days ago
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <!-- class for card-2 -->
+ <div class="card text-center">
+ <div class="card-header">
+ Selfmade Ninja Academy Lab
+ </div>
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment</h5>
+ <p class="card-text">Click To the Open button to View live Site. Access detailed captures and ensure the.</p>
+ <button id="raspi-cam-2" class="btn btn-primary raspi-cm-viewer">Open</a>
+ </div>
+ <div class="card-footer text-muted">
+ 2 days ago
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <!-- class for card-3 -->
+ <div class="card text-center">
+ <div class="card-header">
+ Raspberry Camera 3
+ </div>
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment</h5>
+ <p class="card-text">This is a simple card with some text content. You can add more details here</p>
+ <a href="raspi-cam-3" class="btn btn-primary raspi-cam-viewer">View Captures</a>
+ </div>
+ <div class="card-footer text-muted">
+ 2 days ago
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <ul id="images">
+ <ul id="images" style="display: none;">
<li><img src="https://th.bing.com/th/id/OIP.d7XoYXNNdLcexb9E1xehCAHaEK?w=278&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1"></li> <br>
- <li><img src="https://th.bing.com/th/id/OIP.TldVfnF-trAnn4FNSJ42RAHaEK?w=324&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1"></li> <br>
- <li><img src="https://th.bing.com/th/id/OIP.ysjV0sgOseoA-KELS-qr_AHaEK?w=320&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1"></li> <br>
+ <li><img src="https://th.bing.com/th/id/OIP.TldVfnF-trAnn4FNSJ42RAHaEK?w=324&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 2"></li> <br>
+ <li><img src="https://th.bing.com/th/id/OIP.ysjV0sgOseoA-KELS-qr_AHaEK?w=320&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 3"></li> <br>
- <li><img src="{{ data.avater }}" alt="Picture 1"></li>
+ <li><img src="{{ data.avater }}" alt="Picture 1"></li> <!-- my github profile picture. -->
- </ul>
- <!-- { % elif data.username == "root" % } -->
- <div class="alert alert-danger" role="alert">
- You should not run as {{ data.username }} , you are in {{ data.env }}
- </div>
- <!-- { % endif % } -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.js" integrity="sha512-lZD0JiwhtP4UkFD1mc96NiTZ14L7MjyX5Khk8PMxJszXMLvu7kjq1sp4bb0tcL6MY+/4sIuiUxubOqoueHrW4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.common.js" integrity="sha512-LlQl0sFUcI1vIDM7mJLlc6a8ED/7OodBOExKGh93wuOhftpuR+LqrihUhDERtnX526QoQqqKWxg6BpMjEibyMw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@@ -60,15 +111,48 @@
// console.log("began to show");
// }
// });
+ function apiCall(){
+ // Do network calls and fetch more images.
+ return `
+ <li><img src="https://th.bing.com/th/id/OIP.d7XoYXNNdLcexb9E1xehCAHaEK?w=278&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1" /></li>
+ <li><img src="https://th.bing.com/th/id/OIP.TldVfnF-trAnn4FNSJ42RAHaEK?w=324&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 2" /></li>
+ <li><img src="https://th.bing.com/th/id/OIP.ysjV0sgOseoA-KELS-qr_AHaEK?w=320&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 3" /></li>
+ <li><img src="https://th.bing.com/th/id/OIP.d7XoYXNNdLcexb9E1xehCAHaEK?w=278&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1" /></li>
+ <li><img src="https://th.bing.com/th/id/OIP.TldVfnF-trAnn4FNSJ42RAHaEK?w=324&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 2" /></li>
+ <li><img src="https://th.bing.com/th/id/OIP.ysjV0sgOseoA-KELS-qr_AHaEK?w=320&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 3" /></li>
+ `
+ }
+
const images = document.getElementById('images');
const viewer = new Viewer(images, {
loop: true,
interval: 500,
view: function(event){
console.log((event.detail.index + 1 ) + " / " + viewer.length);
+ var cur_image = event.detail.index + 1;
+ var length = viewer.length;
+ var leftover = 1;
+
+ if(length - cur_image <= leftover){
+ console.log("now we can add more images");
+ $(images).append(apiCall());
+ viewer.update();
+
+ }
}
});
+ $('#raspi-cam-1').on('click', function(e){
+ viewer.show();
+ });
+
+ // click to go this website page.
+ function openSite(){
+ window.open('http://labs.selfmade.ninja', '_blank');
+ }
+
+ $('#raspi-cam-2').on('click', openSite);
+
</script>
</body>
</html>
\ No newline at end of file
diff --git a/myproject/template/image/logo.png b/myproject/template/image/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a435577aada4373aeccce804d555152893263c5
Binary files /dev/null and b/myproject/template/image/logo.png differ