{"id":766,"date":"2013-02-21T17:15:45","date_gmt":"2013-02-21T22:15:45","guid":{"rendered":"https:\/\/blogs.mathworks.com\/steve\/?p=766"},"modified":"2019-11-01T09:11:18","modified_gmt":"2019-11-01T13:11:18","slug":"revisiting-dctdemo-part-2","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/steve\/2013\/02\/21\/revisiting-dctdemo-part-2\/","title":{"rendered":"Revisiting dctdemo – part 2"},"content":{"rendered":"\r\n

This is the second part of my plan to rewrite an Image Processing Toolbox example from 20 years ago using more modern MATLAB language features.<\/p>

Recall the old app I'm trying to reinvent:<\/p>

\"\" <\/p>

The idea is to experiment with the basic principles of DCT-based image compression. I've decided that I don't want to copy this original layout and functionality exactly. For one thing, computers (and MATLAB!) are a lot faster than they were 20 years ago, and I think we really don't need a separate \"Apply\" button.<\/p>

Here's my first attempt at sketching what I'd like to make this time around.<\/p>

\"\" <\/p>

The truth, is, I'm making the code and these posts up as I go along. So far I've only had a chance to get some of the initial pieces up and working. But it's enough to start exploring some of the coding ideas.<\/p>

Here's what happens when I call the app class, which I've called (for now) dctCompressionExample_v2<\/tt>.<\/p>

app = dctCompressionExample_v2\r\n<\/pre>
\r\napp = \r\n\r\n  dctCompressionExample_v2 handle\r\n\r\n  Properties:\r\n         OriginalImage: [240x240 double]\r\n    ReconstructedImage: []\r\n            ErrorImage: []\r\n    DCTCoefficientMask: []\r\n    NumDCTCoefficients: 10\r\n\r\n\r\n<\/pre>\"\" 
You can see I got some output in the Command Window, and I also got a new figure on the screen.<\/p>
Here's the code so far.<\/p>
classdef dctCompressionExample_v2 < handle<\/pre>
    properties (SetAccess = private)\r\n        OriginalImage\r\n        ReconstructedImage\r\n        ErrorImage\r\n        DCTCoefficientMask\r\n    end<\/pre>
    properties\r\n        NumDCTCoefficients = 10\r\n    end<\/pre>
    properties (Access = private)\r\n        Slider\r\n        OriginalImageAxes\r\n        ReconstructedImageAxes\r\n        ErrorImageAxes\r\n        MaskAxes\r\n    end<\/pre>
    methods\r\n        function this_app = dctCompressionExample_v2\r\n            this_app.OriginalImage = initialImage;\r\n            layoutApp(this_app);\r\n            update(this_app);\r\n        end<\/pre>
        function layoutApp(app)\r\n            f = figure;\r\n            app.OriginalImageAxes = axes('Parent',f, ...\r\n                'Position',[0.12 0.56 0.28 0.28]);\r\n            app.ReconstructedImageAxes = axes('Parent',f, ...\r\n                'Position',[0.60 0.56 0.28 0.28]);\r\n            app.MaskAxes = axes('Parent',f, ...\r\n                'Position',[0.12 0.16 0.28 0.28]);\r\n            app.ErrorImageAxes = axes('Parent',f, ...\r\n                'Position',[0.60 0.16 0.28 0.28]);\r\n            app.Slider = uicontrol('Style','slider', ...\r\n                'Value',app.NumDCTCoefficients\/64, ...\r\n                'Units','normalized', ...\r\n                'Position',[0.12 0.08 0.28 0.04], ...\r\n                'Callback',@(~,~,~) app.reactToSliderChange);<\/pre>
        end<\/pre>
        function reactToSliderChange(app)\r\n            v = get(app.Slider,'Value');\r\n            app.NumDCTCoefficients = round(64*v);\r\n            update(app);\r\n        end<\/pre>
        function update(app)\r\n            imshow(app.OriginalImage,'Parent',app.OriginalImageAxes);\r\n            title(app.OriginalImageAxes,'Original Image');<\/pre>
            imshow(app.OriginalImage,'Parent',app.ReconstructedImageAxes);\r\n            title(app.ReconstructedImageAxes,'Reconstructed Image');<\/pre>
            imshow(zeros(size(app.OriginalImage)),'Parent',app.ErrorImageAxes);\r\n            title(app.ErrorImageAxes,'Error Image');<\/pre>
            imshow(zeros(size(app.OriginalImage)),'Parent',app.MaskAxes);\r\n            title(app.MaskAxes,'DCT Coefficient Mask');\r\n            drawnow;\r\n        end\r\n    end<\/pre>
end<\/pre>
function I = initialImage\r\npout = imread('pout.tif');\r\npout2 = pout(1:240,:);\r\nI = im2double(adapthisteq(pout2));\r\nend<\/pre>
At this point I'll remind you of Dave Garrison's article<\/a> that I mentioned last time. This article teaches about how this kind of code works. I don't intend to repeat all of that article here. I'll just point out a few things.<\/p>
Here's the function that runs when you launch the app.<\/p>
        function this_app = dctCompressionExample_v2\r\n            this_app.OriginalImage = initialImage;\r\n            layoutApp(this_app);\r\n            update(this_app);\r\n        end<\/pre>
initialImage<\/tt> is a little function I stuck at the bottom of the file. It's purpose is to create our sample image, which for the purpose of this simple DCT demonstration needs to be a multiple of 8-by-8 in size. (Plus, I threw in a call to adapthisteq<\/tt> because the original image has low contrast.)<\/p>
function I = initialImage\r\npout = imread('pout.tif');\r\npout2 = pout(1:240,:);\r\nI = im2double(adapthisteq(pout2));\r\nend<\/pre>
Then there's the properties block.<\/p>
    properties (SetAccess = private)\r\n        OriginalImage\r\n        ReconstructedImage\r\n        ErrorImage\r\n        DCTCoefficientMask\r\n    end<\/pre>
    properties\r\n        NumDCTCoefficients = 10\r\n    end<\/pre>
    properties (Access = private)\r\n        Slider\r\n        OriginalImageAxes\r\n        ReconstructedImageAxes\r\n        ErrorImageAxes\r\n        MaskAxes\r\n    end<\/pre>
Some of the properties, such as OriginalImage<\/tt>, I want to make accessible but read-only. Some of them, such as OriginalImageAxes<\/tt>, are private because they are only needed by the guts of the app. Notice that one of them, NumDCTCoefficients<\/tt>, is both readable and<\/b> settable. I wanted to explore the idea of giving this app a little programmable interface so that you can write code to make it change.<\/p>
I would like to make it so that the NumDCTCoefficients<\/tt> property changes when you drag the slider. Here's how to accomplish that:<\/p>
            app.Slider = uicontrol('Style','slider', ...\r\n                'Value',app.NumDCTCoefficients\/64, ...\r\n                'Units','normalized', ...\r\n                'Position',[0.12 0.08 0.28 0.04], ...\r\n                'Callback',@(~,~,~) app.reactToSliderChange);<\/pre>
Setting the 'Callback'<\/tt> property of the slider like this causes the app's function reactToSliderChange<\/tt> to get called whenever the slider is dragged. Here's what reactToSliderChange<\/tt> does:<\/p>
        function reactToSliderChange(app)\r\n            v = get(app.Slider,'Value');\r\n            app.NumDCTCoefficients = round(64*v);\r\n            update(app);\r\n        end<\/pre>
Now we're starting to get a little interactivity going in our app.<\/p>
That's about as far as I got this week. Next time we'll continue wiring things up and maybe start putting in some algorithmic DCT block processing code.<\/p>\r\n