Question

Need help on following Java GUI problem:

Write a program that lets a user display and modify pictures. Create a window. Add four buttons so that clicking a particular button will shift the image by a small amount in the north, south, east or west direction inside the window. Add a menu bar with two menus: File and Image. The File menu should contain an Open menu item that the user can select to display JPEG and PNG files from the disk in the window. The Image menus should contain these menu items: Rotate, Shear, and Scale. When the user selects any one of these items, an input dialog box should display, in which the user can specify the rotation angle,horizontal and vertical shear values, or the scale amount. The modified image should then be displayed in the window.

Answer 1

i have split this in two part,

1) first one for menubarr.

2) for rotating image.

1) menu baar

please note that you need to include below files on top of index.html, since it contains links to external website. you need to include it.

bootstrap.min.css

bootstrap.min.js

jquery-1.11.1.min.js

bootstrap/3.4.1/css/bootstrap.min.css

jquery/3.4.1/jquery.min.js

bootstrap.min.js

// index.html

<link href="......................................./bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="menu.css" rel="stylesheet">
<script src="---------------------------------/bootstrap.min.js"></script>
<script src="......................................../jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="..................................../bootstrap/3.4.1/css/bootstrap.min.css">
<script src="........................................................../jquery/3.4.1/jquery.min.js"></script>
<script src="........................................................./js/bootstrap.min.js"></script>
<script src="menu_js.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div id="wrapper">
<div class="overlay"></div>
  
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">

<li>
<a href="#">Rotate</a>
</li>
<li>
<a href="#">Shear</a>
</li>
<li>
<a href="#">Scale</a>
</li>
  
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->

<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
           <span class="hamb-middle"></span>
               <span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
  
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

============================================================================

// menu.css

body {
position: relative;
overflow-x: hidden;
}
body,
html { height: 100%;}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {background-color: transparent;}

/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/

#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#wrapper.toggled {
padding-left: 220px;
}

#sidebar-wrapper {
z-index: 1000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: #1a1a1a;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#sidebar-wrapper::-webkit-scrollbar {
display: none;
}

#wrapper.toggled #sidebar-wrapper {
width: 220px;
}

#page-content-wrapper {
width: 100%;
padding-top: 70px;
}

#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -220px;
}

/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/

.sidebar-nav {
position: absolute;
top: 0;
width: 220px;
margin: 0;
padding: 0;
list-style: none;
}

.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}

.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #1c1c1c;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;

}
.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
background-color: #ec1b5a;   
}
.sidebar-nav li:nth-child(3):before {
background-color: #79aefe;   
}
.sidebar-nav li:nth-child(4):before {
background-color: #314190;   
}
.sidebar-nav li:nth-child(5):before {
background-color: #279636;   
}
.sidebar-nav li:nth-child(6):before {
background-color: #7d5d81;   
}
.sidebar-nav li:nth-child(7):before {
background-color: #ead24c;   
}
.sidebar-nav li:nth-child(8):before {
background-color: #2d2366;   
}
.sidebar-nav li:nth-child(9):before {
background-color: #35acdf;   
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;

}

.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}

.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{
color: #fff;
text-decoration: none;
background-color: transparent;
}

.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 20px;
line-height: 44px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}

/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/

.hamburger {
position: fixed;
top: 20px;
z-index: 999;
display: block;
width: 32px;
height: 32px;
margin-left: 15px;
background: transparent;
border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px,0,0);
-webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
top: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
top: 50%;
margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
bottom: 5px;
-webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed:hover .hamb-top {
top: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
top: 50%;
margin-top: -2px;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px,0,0);
-webkit-transition: all .35s ease-in-out;
}

/*-------------------------------*/
/* Overlay */
/*-------------------------------*/

.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250,250,250,.8);
z-index: 1;
}

================================================================================

// menu_js.js

$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;

trigger.click(function () {
hamburger_cross();
});

function hamburger_cross() {

if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {   
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
  
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});

--------------------------------------------- // rotate image -------------------------------------

please include jquery-2.1.1.js

<html>
<head>
<title>jQuery Image Rotate</title>
<script src=".........../jquery-2.1.1.js"></script>
<script>
function rotateImage(degree) {
   $('#demo-image').animate({ transform: degree }, {
step: function(now,fx) {
$(this).css({
'-webkit-transform':'rotate('+now+'deg)',
'-moz-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)'
});
}
});
}
</script>
<style>
#demo-image{padding:25px 10px;}
.btnRotate {padding: 5px 10px;background-color: #09F;border: 0;color: #FFF;cursor: pointer;}
</style>
</head>
<body>
<div>
<label>Rotate Image:</label>
<input type="button" class="btnRotate" value="90" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="-90" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" />
</div>

<!-- image location here -->
<div><img src="abc.jpg" id="demo-image" /></div>
</body>
</html>