Skip to content
Snippets Groups Projects
Commit c14c8a84 authored by ANTO SAGAYA JUSTIN R's avatar ANTO SAGAYA JUSTIN R :speech_balloon:
Browse files

Windows Open New Tab

parent 0a3535ad
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
myproject/template/helloworld.html
+ 104
− 20
View file @ c14c8a84
...@@ -3,11 +3,14 @@ ...@@ -3,11 +3,14 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title> <title>viewer JS Template </title>
<!-- <link rel="image" href="image/python.png"> --> <!-- <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 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="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> <link rel="icon" href="image/logo.png">
<style>
img { img {
width: 150px; width: 150px;
height: 150px; height: 150px;
...@@ -16,32 +19,80 @@ ...@@ -16,32 +19,80 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<!-- <div>
{ % if data.username == "justinmass2001" % }
</div> -->
<div class="alert alert-success" role="alert"> <div class="alert alert-success" role="alert">
Welcome {{ data.username }} , you are in {{ data.env }} Welcome {{ data.username }} , you are in {{ data.env }}
</div> </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.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.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 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 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://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://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.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> <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 @@ ...@@ -60,15 +111,48 @@
// console.log("began to show"); // 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 images = document.getElementById('images');
const viewer = new Viewer(images, { const viewer = new Viewer(images, {
loop: true, loop: true,
interval: 500, interval: 500,
view: function(event){ view: function(event){
console.log((event.detail.index + 1 ) + " / " + viewer.length); 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> </script>
</body> </body>
</html> </html>
\ No newline at end of file
myproject/template/image/logo.png 0 → 100644
+ 0
− 0
View file @ c14c8a84
myproject/template/image/logo.png

34 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment