kevin.legarreta
/
Proyecto_Oller
Suivre 1
Favoriser 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Moved

Kevinlega il y a 6 ans
Parent
ab246b330e
révision
07e240fd0e
3 fichiers modifiés avec 0 ajouts et 241 suppressions
Vue séparée Afficher les stats Diff
  1. 0
    135
      MSI/msi.html
  2. 0
    71
      MSI/scripts/msi.js
  3. 0
    35
      MSI/style/style.css

+ 0
- 135
MSI/msi.html Voir le fichier 

@@ -1,135 +0,0 @@
1 
-<!doctype html>
2 
-<html lang="en">
3 
-	<head>
4 
-		<!-- Required meta tags -->
5 
-	    <meta charset="utf-8">
6 
-	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7 
-	    <!-- Link to CSS -->
8 
-		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
9 
-		<link rel="stylesheet" type="text/css" href="css/style.css">
10 
-		<title>MSI</title>
11 
-		<!-- Collapse Navbar (needs some work) -->
12 
-		<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
13 
-  			<a class="navbar-brand" href="#"><img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Francisco_Oller.jpg/220px-Francisco_Oller.jpg" width="30" height="30" class="d-inline-block align-top" alt=""> Proyecto Oller</a>
14 
-  				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
15 
-    				<span class="navbar-toggler-icon"></span>
16 
-  				</button>
17 
-
18 
-  			<div class="collapse navbar-collapse" id="navbarSupportedContent">
19 
-	    		<ul class="navbar-nav mr-auto">
20 
-	      			<li class="nav-item active">
21 
-	        			<a class="nav-link" href="#">Home</a>
22 
-	      			</li>
23 
-			      	<li class="nav-item">
24 
-				    	<a class="nav-link" href="#">Link</a>
25 
-			      	</li>
26 
-	      			<li class="nav-item dropdown">
27 
-	        			<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
28 
-	          			Dropdown
29 
-	        			</a>
30 
-	        			<div class="dropdown-menu" aria-labelledby="navbarDropdown">
31 
-	          				<a class="dropdown-item" href="#">Action</a>
32 
-	          				<a class="dropdown-item" href="#">Another action</a>
33 
-	          				<div class="dropdown-divider"></div>
34 
-	          					<a class="dropdown-item" href="#">Something else here</a>
35 
-	        				</div>
36 
-	      			</li>
37 
-	      			<li class="nav-item">
38 
-	        			<a class="nav-link disabled" href="#">Disabled</a>
39 
-	      			</li>
40 
-    			</ul>
41 
-	    		<form class="form-inline my-2 my-lg-0">
42 
-	      			<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
43 
-	      			<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
44 
-	    		</form>
45 
-	  		</div>
46 
-		</nav>
47 
-
48 
-	</head>
49 
-	<body>
50 
-	    <!-- Optional JavaScript (No se para que es esto.) -->
51 
-	    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
52 
-	    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
53 
-	    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
54 
-	    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
55 
-	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
56 
-
57 
-
58 
-		<script type="text/javascript" src="scripts/getImages.js"></script>
59 
-
60 
-
61 
-	    <!-- Image Selector -->
62 
-	    <div class="row" id="row">
63 
-	        <nav class="col-md-1 d-none d-md-block bg-light sidebar" style="height: 100%;">
64 
-          		<div class="sidebar-sticky">
65 
-            		<ul class="nav flex-column">
66 
-	              		<li class="nav-item">
67 
-                			<a class="nav-link" href="#">
68 
-                  			<span data-feather="shopping-cart"></span>
69 
-                  			Home
70 
-                			</a>
71 
-              			</li>
72 
-              			<li class="nav-item">
73 
-                			<a class="nav-link" href="#">
74 
-                  			<span data-feather="file"></span>
75 
-                  			XRF
76 
-                			</a>
77 
-              			</li>
78 
-              			<li class="nav-item">
79 
-                			<a class="nav-link" href="#">
80 
-                  			<span data-feather="file"></span>
81 
-                  			FSR
82 
-                			</a>
83 
-              			</li>
84 
-              			<li class="nav-item">
85 
-							<a class="nav-link active" href="msi.html">
86 
-		                  	<span data-feather="home"></span>
87 
-		                  	MSI <span class="sr-only">(current)</span>
88 
-                			</a>
89 
-              			</li>
90 
-            		</ul>
91 
-          		</div>
92 
-        	</nav>
93 
-			<div class="col-md-9">
94 
-				<div class="msi">
95 
-					<div class="msi-foreground" id="1">
96 
-						<img onclick="edit()" src="images/front.jpg" class="foreground" id="msi-fore"/>
97 
-						<p id="fore"></p>
98 
-
99 
-						<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
100 
-						Your browser does not support the HTML5 canvas tag.</canvas>
101 
-					</div>
102 
-					​
103 
-
104 
-					<div class="msi-background">
105 
-						<img class="background" id="msi-back"/>
106 
-
107 
-					</div>​
108 
-				</div>
109 
-			</div>
110 
-			<div class="col-md-2">
111 
-			 	<form>
112 
-					<div class="form-group">
113 
-				    	<label for="foreground">Front Image</label>
114 
-				    	<select class="form-control" id="foreground" onchange="getFore(this)">
115 
-				    		<option></option>
116 
-				      		<option>front.png</option>
117 
-						    <option>back.png</option>
118 
-				    	</select>
119 
-				  	</div>
120 
-				  	<div class="form-group">
121 
-				    	<label for="background">Background Image</label>
122 
-				    	<select class="form-control" id="background" onchange="getBack(this)">
123 
-				    		<option></option>
124 
-				      		<option>back.png</option>
125 
-						    <option>front.png</option>
126 
-				    	</select>
127 
-				  	</div>
128 
-						<div style="height:100px; width:100px" class="back" id="back"></div>
129 
-						<div style="height:100px; width:100px" class="movestatus"></div>
130 
-						<div style="height:100px; width:100px" id="dimensions"></div>
131 
-				</form>
132 
-			</div>
133 
-		</div>
134 
-	</body>
135 
-</html>

+ 0
- 71
MSI/scripts/msi.js Voir le fichier 

@@ -1,71 +0,0 @@
1 
-function getFore(foreground){
2 
-	var foreground = foreground.value;
3 
-	var source = 'images/' + foreground;
4 
-	document.getElementById("fore").innerHTML = foreground;
5 
-	document.getElementById("msi-fore").src = source;
6 
-}
7 
-
8 
-function getBack(background){
9 
-	var background = background.value;
10 
-	var source = '\'url(images/' + background + ")\'";
11 
-	document.getElementById("back").innerHTML = source;
12 
-	document.getElementById("1").style.backgroundImage = "url('back.png')";
13 
-
14 
-}
15 
-
16 
-$(document).ready(function() {
17 
-    $("img").mousemove(function(event) {
18 
-        var x = event.pageX - this.offsetLeft;
19 
-        var y = event.pageY - this.offsetTop;
20 
-        //alert("X Coordinate: " + x + " Y Coordinate: " + y);
21 
-        var circle = 20*20*3.14;
22 
-        $('div.movestatus').text(circle);
23 
-        x += " " + y;
24 
-        $('div.back').text(x);
25 
-    });
26 
-});
27 
-
28 
-
29 
-
30 
-function edit(){
31 
-// 	var c = document.getElementById("myCanvas");
32 
-//     var ctx = c.getContext("2d");
33 
-//     var img = document.getElementById("msi-fore");
34 
-//     ctx.drawImage(img, 0, 0);
35 
-//     var imgData = ctx.getImageData(0, 0, c.width, c.height);
36 
-//     // invert colors
37 
-//     var i;
38 
-//     for (i = 0; i < imgData.data.length; i += 4){
39 
-//     	document.getElementById("dimensions").innerHTML = i;
40 
-//     	if(i == x){
41 
-//         	imgData.data[i+3] = 0;
42 
-//         }
43 
-//     }
44 
-//     ctx.putImageData(imgData, 0, 0);
45 
-// };
46 
-
47 
-// A. Buscar mejorar la extraccion de coordenadas de x y y.
48 
-// B. Carcular cada esquina del circulo
49 
-// C. dibujar la imagen
50 
-
51 
-    var c = document.getElementById("myCanvas");
52 
-    var ctx = c.getContext("2d");
53 
-    var img = document.getElementById("msi-fore");
54 
-    ctx.drawImage(img, 0, 0);
55 
-    var imgData = ctx.getImageData(60, 60, 200, 200);
56 
-    // invert colors
57 
-    var i;
58 
-    for (i = 0; i < imgData.data.length; i += 4){
59 
-
60 
-        if(i > 150000){
61 
-        	imgData.data[i+3] = 60;}
62 
-
63 
-    }
64 
-    document.getElementById("dimensions").innerHTML = i;
65 
-    ctx.putImageData(imgData, 60, 60);
66 
-};
67 
-
68 
-function clean(){
69 
-	document.getElementById("myCanvas").innerHTML = "<canvas></canvas>";
70 
-}
71 
-

+ 0
- 35
MSI/style/style.css Voir le fichier 

@@ -1,35 +0,0 @@
1 
-.msi{
2 
-	position: relative;
3 
-	height: auto;
4 
-}
5 
-
6 
-.foreground{
7 
-	float: left;
8 
-
9 
-}
10 
-.background{
11 
-	width: 1000px;
12 
-	height: 500px;
13 
-}
14 
-
15 
-.msi-foreground{
16 
-	background: no-repeat;
17 
-	background-size: contain;
18 
-}
19 
-
20 
-canvas{
21 
-	float: left;
22 
-}
23 
-
24 
-.row{
25 
-	margin: 0% 0% 0% 0%;
26 
-	height: 100%;
27 
-}
28 
-
29 
-body, html, .container-fluid {
30 
-     height: 100%;
31 
-
32 
-}
33 
-
34 
-body{
35 
-}