{"id":814,"date":"2021-01-11T19:24:34","date_gmt":"2021-01-11T19:24:34","guid":{"rendered":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/?page_id=814"},"modified":"2021-01-11T19:30:04","modified_gmt":"2021-01-11T19:30:04","slug":"keyboard-input","status":"publish","type":"page","link":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/course-topics\/events\/keyboard-input\/","title":{"rendered":"Keyboard Input"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">An &#8216;Etch-a-Sketch&#8217; Program<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s an example of a program that uses keyboard input to produce a kind of &#8216;Etch-a-Sketch&#8217; effect:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: java; auto-links: false; highlight: [8,9,10,26,27,28,29,30,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,137,138]; title: ; quick-code: false; notranslate\" title=\"\">\npackage swingExamples;\n\nimport java.awt.Container;\nimport java.awt.Graphics;\nimport java.awt.Graphics2D;\nimport java.awt.Point;\n\nimport java.awt.event.InputEvent;\nimport java.awt.event.KeyEvent;\nimport java.awt.event.KeyListener;\n\nimport java.awt.geom.Line2D;\nimport java.awt.geom.Point2D;\n\nimport java.util.ArrayList;\n\nimport javax.swing.JFrame;\nimport javax.swing.JPanel;\n\nclass SketcherPanel extends JPanel\n{\n  public SketcherPanel()\n  {\n    m_last = new Point2D.Double(100, 100);\n    m_lines = new ArrayList&lt;Line2D&gt; ();\n    \/\/ Add a key listener to listen for keystrokes\n    addKeyListener( new KeyHandler() );\n    \/\/ Allow focus to be set for the JPanel,\n    \/\/ to allow it to receive key events.\n    setFocusable(true);\n  }\n  \n  \/**\n   * paintComponent controls what is drawn on the panel\n   *\/\n  public void paintComponent(Graphics g)\n  {\n    super.paintComponent(g);\n    Graphics2D g2 = (Graphics2D) g;\n    \n    \/\/ Draw all lines\n    for (Line2D line : m_lines)\n    {\n      g2.draw(line);\n    }\n  }\n  \n  \/**\n   * Add a new line segment to the Sketcher\n   * @param dx the movement in x direction\n   * @param dy the movement in y direction\n   *\/\n  private void add(int dx, int dy)\n  {\n    \/\/ Compute end point\n    Point2D end = new Point2D.Double(m_last.getX() + dx,\n                                     m_last.getY() + dy);\n    \n    \/\/ Add line segment\n    Line2D line = new Line2D.Double(m_last, end);\n    m_lines.add(line);\n    repaint();\n    \n    \/\/ Remember new end point\n    m_last = end;\n  }\n  \n  \/\/\/\/ Private data \/\/\/\/\n  private Point2D m_last; \/\/ The last point entered\n  \/\/ Array to hold lines between successive points.\n  private ArrayList&lt;Line2D&gt; m_lines;\n  \n  \/\/ Drawing increments (&quot;slow&quot; and &quot;fast&quot;)\n  private static final int SMALL_INCREMENT = 1;\n  private static final int LARGE_INCREMENT = 5;\n  \n  \/\/\/\/\/\/ Inner classes \/\/\/\/\/\/\n\n  \/**\n   * This is the class that listens for keystrokes\n   * in the SketcherPanel.\n   *\/\n  private class KeyHandler implements KeyListener\n  {\n    public void keyPressed(KeyEvent event)\n    {\n      int keyCode = event.getKeyCode();\n      \n      \/\/ Set distance\n      int d;\n      if (event.isShiftDown())\n        d = LARGE_INCREMENT;\n      else\n        d = SMALL_INCREMENT;\n      \n      \/\/ Add line segment\n      if (keyCode == KeyEvent.VK_LEFT)\n        add( -d, 0);\n      else if (keyCode == KeyEvent.VK_RIGHT)\n        add(d, 0);\n      else if (keyCode == KeyEvent.VK_UP)\n        add(0, -d);\n      else if (keyCode == KeyEvent.VK_DOWN)\n        add(0, d);\n    }\n    \n    public void keyTyped(KeyEvent event)\n    {\n      char keyChar = event.getKeyChar();\n      \n      \/\/ Set distance\n      int d;\n      if (Character.isUpperCase(keyChar))\n      {\n        d = LARGE_INCREMENT;\n        keyChar = Character.toLowerCase(keyChar);\n      }\n      else\n      {\n        d = SMALL_INCREMENT;\n      }\n      \n      \/\/ Add line segment\n      if (keyChar == &#039;h&#039;)\n        add( -d, 0);\n      else if (keyChar == &#039;l&#039;)\n        add(d, 0);\n      else if (keyChar == &#039;k&#039;)\n        add(0, -d);\n      else if (keyChar == &#039;j&#039;)\n        add(0, d);\n    }\n    \n    \/\/ Unused KeyListener method\n    public void keyReleased(KeyEvent event)\n    {}\n  }\n}\n\nclass SketcherFrame extends JFrame\n{\n  public SketcherFrame()\n  {\n    setTitle(&quot;Sketch&quot;);\n    setSize(300, 200);\n    setDefaultCloseOperation(EXIT_ON_CLOSE);\n    Container contentPane = getContentPane();\n    contentPane.add( new SketcherPanel() );\n  }\n}\n\npublic class Sketcher\n{\n  public static void main(String&#x5B;] args)\n  {\n    SketcherFrame frame = new SketcherFrame();\n    frame.setVisible(true);\n  }\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">and here&#8217;s what it produces:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-content\/uploads\/2021\/01\/Scribble.gif\" alt=\"\" class=\"wp-image-818\"\/><\/figure><\/div>\n\n\n\n<div style=\"height:27px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">If you type left, right, up, or down arrow, the line draws in the appropriate direction.&nbsp; Similarly, if you type an &#8216;h&#8217;. &#8216;j&#8217;, &#8216;k&#8217;, or &#8216;l&#8217; (that&#8217;s a lowercase &#8216;L&#8217;), the line will move similarly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note that the line moves 5 times faster if you use the Shift key in combination with the other key.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>This program&nbsp;<em><strong>does<\/strong><\/em>&nbsp;retain information about the drawing:&nbsp; each successive point causes a line to be entered into the array, and the set of lines is used to [re]draw the lines on the panel, even when you iconify and restore the window.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>An &#8216;Etch-a-Sketch&#8217; Program Here&#8217;s an example of a program that uses keyboard input to produce a kind of &#8216;Etch-a-Sketch&#8217; effect: and here&#8217;s what it produces: If you type left, right, up, or down arrow, the line draws in the appropriate direction.&nbsp; Similarly, if you type an &#8216;h&#8217;. &#8216;j&#8217;, &#8216;k&#8217;, or &#8216;l&#8217; (that&#8217;s a lowercase &#8216;L&#8217;), [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":69,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","_uag_custom_page_level_css":"","ocean_post_layout":"left-sidebar","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"ocs-course-topics-sidebar","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-814","page","type-page","status-publish","hentry","entry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false},"uagb_author_info":{"display_name":"Bryan Higgs","author_link":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/author\/bryan\/"},"uagb_comment_info":0,"uagb_excerpt":"An &#8216;Etch-a-Sketch&#8217; Program Here&#8217;s an example of a program that uses keyboard input to produce a kind of &#8216;Etch-a-Sketch&#8217; effect: and here&#8217;s what it produces: If you type left, right, up, or down arrow, the line draws in the appropriate direction.&nbsp; Similarly, if you type an &#8216;h&#8217;. &#8216;j&#8217;, &#8216;k&#8217;, or &#8216;l&#8217; (that&#8217;s a lowercase &#8216;L&#8217;),&hellip;","_links":{"self":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/comments?post=814"}],"version-history":[{"count":4,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/814\/revisions"}],"predecessor-version":[{"id":821,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/814\/revisions\/821"}],"up":[{"embeddable":true,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/69"}],"wp:attachment":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/media?parent=814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}