PC_Project/project.html at main · MattRiel/PC_Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en" class="h-101">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>PC - PROJECT AKHIR</title>
    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
    <link href="styles.css" rel="stylesheet" />
    <!-- Bootstrap -->
  </head>

  <body class="d-flex h-100 text-center text-bg-dark">
    <header>
      <nav class="navbar fixed-top" style="background-color: yellow">
        <div class="container-fluid">
          <a class="navbar-brand"> KELOMPOK 1 </a>
          <a class="navbar-brand centered">PENGOLAHAN CITRA</a>
          <a class="navbar-brand">KOM A - 2022</a>
        </div>
      </nav>
    </header>

    <main>
      <div class="split left">
        <div class="position-absolute top-50 start-50 translate-middle">
          <div class="col">
            <h4>RGB TOOLS</h4>
            <button id="read">Read</button>
            <button id="ori">Original</button>
          </div>
          <hr />
          <div class="col">
            <h4>IMAGE PROCESSING 1</h4>
            <button id="negatif" type="button">Negative</button>
            <button id="grayscl" type="button">Grayscale</button>
            <br />
            <!-- Threshold -->
            Threshold
            <input type="range" min="0" max="255" id="threshold" value="0" />
            <input type="text" size="3" disabled value="0" id="threshold_val" />
            <button id="thdefault" class="btn btn-danger btn-sm">Reset</button>
            <br />
            <!-- Threshold -->
            <!-- Brightness -->
            Brightness
            <input
              type="range"
              min="-255"
              max="255"
              data-id="4"
              id="brightness"
              value="0"
            />
            <input
              type="text"
              id="brightness_val"
              size="3"
              disabled
              value="0"
            />
            <button id="brdefault" class="btn btn-danger btn-sm">Reset</button>
            <!-- Brightness -->
          </div>
          <hr />
          <div class="col">
            <h4>EDGE DETECTION</h4>
            <button id="sobel">Sobel Method</button>
          </div>
        </div>
      </div>

      <div class="split right">
        <!-- Image -->
        <div class="wrapper mt-5">
          <div class="col">
            <h2>Original Image</h2>
            <canvas
              id="canvas3"
              width="180px"
              style="
                border-style: double;
                border-color: cyan;
                border-radius: 20px;
                max-width: 45%;
                max-height: 45%;
              "
            ></canvas>
          </div>
          <div class="col">
            <h2>Result Image</h2>
            <canvas
              id="canvas1"
              width="180px"
              style="
                border-style: double;
                border-color: cyan;
                border-radius: 20px;
                max-width: 45%;
                max-height: 45%;
              "
            ></canvas>
          </div>
          <h6 style="font-family: consolas; color: greenyellow" id="log_out">
            CONSOLE LOG
          </h6>
        </div>
      </div>
    </main>

    <footer>
      <div class="footer fixed-bottom" style="background-color: yellow">
        <div class="container-fluid">
          <div class="row align-items-center" style="color: black">
            <div class="col">201401019</div>
            <div class="col">201401038</div>
            <div class="col">201401040</div>
          </div>
        </div>
      </div>
    </footer>
  </body>

  <!-- JavaScript -->
  <script src="imageproc.js"></script>
</html>