browse by category or date

I was working on Paint.NET when I realized that the Layers window is missing. Yeah, this layer window:

I tried to press F7 to hide/show the Layers window, but it was nowhere to find.

I googled for this issue, but from what I read, people simply shrug it off. One person said in multi-display setup, the window might appears in the other monitor. I do have another monitor attached to my laptop, extending the display. But I simply can’t find the Layers window in both display.

I even uninstall, then re-install Paint.NET. But the problem persists.

Then I remember an old application that I used to automate data insertion in SAP, AutoHotKey. I remember it has functions to retrieve information of a window, and to manipulate window’s behavior.

After download and install it, I created a new folder to put the script file. On the explorer window, I right-clicked, New -> AutoHotKey script

I then edit the new .ahk script using Notepad++. First, let’s check if we can find the window

WinGet, id, PID, Layers
MsgBox, Paint.NET PID is %id%

To run the code, I simply right-click on the file, then click “Run Script”

The message box appears:

Let’s verify if this information correct by looking into Windows’ Task Manager, and find Paint.NET’s process.

Look’s like we get the correct window. Next, let’s try to find its position:

WinGetPos, X, Y, W, H, Layers
MsgBox, Layers is at %X%`,%Y% and its size is %W%x%H%

When I run above code:

Yikes, that’s outside the visible boundary of both of my displays. Thankfully, we can move it somewhere visible.

WinMove, Layers,, 100, 100 

After I run above code, the Layers window is now appear and I can continue working on Paint.NET as usual.

That’s it friends. I hope it helps!

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Possibly relevant:

I was tasked to create a proof of concept (POC) utilizing Telerik ASP.NET AJAX RadEditor. The following code will produce the standard RadEditor:

<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" EnableComments="true"
	EditModes="Design"
	Width="800px" Height="800px" OnClientLoad="OnClientLoad"
	DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd">
</telerik:RadEditor>

Here is how it looks on browser:

1. Using Custom Toolbars Instead of Default Toolbars

If we want to use custom toolbar instead of the default one, we can use two methods:

  1. Custom Toolbar using declaration in ASPX page
    <telerik:radeditor runat="server" ID="RadEditor1">
       <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="ApplySizeColor" Text="Apply Size and Color"/>
            <telerik:EditorTool Name="InsertCustomDate" Text="Insert Custom Date"/>
            <telerik:EditorTool Name="ResetContent" Text="Reset Content"/>
        </telerik:EditorToolGroup>
       </Tools>        
    </telerik:radeditor>
    
  2. Custom Toolbar using ToolsFile property in ASPX page and XML file
    ASPX file

    <telerik:radeditor ToolsFile="~/ToolsFile.xml" runat="server" ID="RadEditor2"></telerik:radeditor>
    

    ToolsFile.XML file

    <root>
        <tools name="MainToolbar">
                <tool name="ApplySizeColor" Text="Apply Size and Color"/>
                <tool name="InsertCustomDate" Text="Insert Custom Date"/>
                <tool name="ResetContent" Text="Reset Content"/>
        </tools>
    </root>
    

Both ways will produce the same result:

To customize the button’s icon, add the following CSS:

        .reResetContent.reToolIcon::before {
            content: "\e034";
        }
        .reInsertCustomDate.reToolIcon::before {
            content: "\e108";
        }
        .reApplySizeColor.reToolIcon::before {
            content: "\e50e";
        }

We can see the result of the change:

The key to the customization is command name. For example the command name in the custom toolbar is ApplySizeColor, therefore the CSS is .reApplySizeColor. As for the icons, you can refer to the full list of WebComponentsIcons

2. Add Custom Button into Default Toolbar

protected void Page_Load(object sender, EventArgs e)
{

            RadEditor1.EnsureToolsFileLoaded();

            Telerik.Web.UI.EditorToolGroup main = new Telerik.Web.UI.EditorToolGroup();
            main.Tab = "Changes";
            main.Tag = "Changes";
            RadEditor1.Tools.Insert(0, main);

            Telerik.Web.UI.EditorTool custom1 = new Telerik.Web.UI.EditorTool("CustomSave");
            main.Tools.Add(custom1);
            custom1.Text = "Save";
            custom1.ShowText = true;

            Telerik.Web.UI.EditorTool custom2 = new Telerik.Web.UI.EditorTool("CustomSubmit");
            main.Tools.Add(custom2);
            custom2.Text = "Submit";
            custom2.ShowText = true;
}

Add below CSS to customize the buttons

        .reToolIcon.reCustomSave::before {
            content: '\e109' !important;
        }

        .reToolIcon.reCustomSubmit::before { 
            content: '\e118' !important;
        }

This is how it looks in browser:

Next, let’s add the function handler when this button is clicked:

<script type="text/javascript">
        Telerik.Web.UI.Editor.CommandList["CustomSave"] = function (commandName, editor, args) {
            alert("Custom Save"); 
        };

        Telerik.Web.UI.Editor.CommandList["CustomSubmit"] = function (commandName, editor, args) {
            alert("Custom Submit"); 
        };
</script>

There are plenty of actions on RadEditor which we can trigger using this custom toolbar button. But maybe that’s for another post.

I hope it helps. Cheers!

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Possibly relevant:

WebComponentsIcon is the font used in Telerik’s Kendo UI. The table below is useful if you want to customize the icon usage. Instead of using the predefined class, you can straightaway use the character code shown here in unicode.

To see how I use this information to customize button’s icon, see HERE.

\e000

\e001

\e002

\e003

\e004

\e005

\e006

\e007

\e008

\e009

\e00a

\e00b

\e00c

\e00d

\e00e

\e00f

\e010

\e011

\e012

\e013

\e014

\e015

\e016

\e017

\e018

\e019

\e01a

\e01b

\e01c

\e01d

\e01e

\e01f

\e020

\e021

\e022

\e023

\e024

\e025

\e026

\e027

\e028

\e029

\e02a

\e02b

\e02c

\e02d

\e02e

\e02f

\e030

\e031

\e032

\e033

\e034

\e100

\e101

\e102

\e103

\e104

\e105

\e106

\e107

\e108

\e109

\e10a

\e10b

\e10c

\e10d

\e10e

\e10f

\e110

\e111

\e112

\e113

\e114

\e115

\e116

\e117

\e118

\e119

\e11a

\e11b

\e11c

\e11d

\e11e

\e11f

\e120

\e121

\e122

\e123

\e124

\e125

\e126

\e127

\e128

\e129

\e12a

\e12b

\e12c

\e12d

\e12e

\e12f

\e130

\e131

\e132

\e133

\e134

\e135

\e136

\e137

\e138

\e139

\e13a

\e13b

\e13c

\e13d

\e13e

\e13f

\e140

\e141

\e142

\e143

\e144

\e145

\e146

\e147

\e148

\e149

\e14a

\e14b

\e14c

\e14d

\e14e

\e14f

\e150

\e151

\e152

\e153

\e154

\e155

\e156

\e157

\e158

\e159

\e15a

\e15b

\e15c

\e200

\e201

\e202

\e203

\e204

\e205

\e206

\e207

\e208

\e209

\e20a

\e20b

\e20c

\e20d

\e20e

\e300

\e301

\e302

\e303

\e304

\e305

\e306

\e307

\e308

\e309

\e30a

\e400

\e401

\e402

\e403

\e500

\e501

\e502

\e503

\e504

\e505

\e506

\e507

\e508

\e509



\e50a

\e50b

\e50c

\e50d

\e50e

\e50f

\e510

\e511

\e512

\e513

\e514

\e515

\e516

\e517

\e518

\e519

\e51a

\e51b

\e51c

\e51d

\e51e

\e51f

\e520

\e521

\e522

\e523

\e524

\e525

\e526

\e527

\e528

\e529

\e52a

\e52b

\e52c

\e52d

\e52e

\e52f

\e530

\e531

\e532

\e533

\e534

\e535

\e536

\e537

\e538

\e539

\e53a

\e53b

\e53c

\e53d

\e53e

\e53f

\e540

\e541

\e542

\e543

\e544

\e545

\e546

\e547

\e548

\e549

\e54a

\e54b

\e54c

\e54d

\e54e

\e54f

\e550

\e551

\e552

\e553

\e600

\e601

\e602

\e603

\e604

\e605

\e606

\e607

\e608

\e609

\e60a

\e60b

\e60c

\e60d

\e60e

\e60f

\e610

\e611

\e612

\e613

\e614

\e615

\e616

\e617

\e618

\e619

\e61a

\e61b

\e61c

\e61d

\e61e

\e61f

\e620

\e621

\e622

\e623

\e624

\e625

\e626

\e627

\e628

\e629

\e62a

\e62b

\e62c

\e62d

\e62e

\e62f

\e630

\e631

\e632

\e633

\e634

\e635

\e636

\e637

\e638

\e639

\e63a

\e63b

\e63c

\e63d

\e63e

\e63f

\e640

\e641

\e642

\e643

\e644

\e645

\e646

\e647

\e648

\e649

\e64a

\e64b

\e64c

\e64d

\e64e

\e64f

\e650

\e651

\e652

\e653

\e654

\e655

\e656

\e657

\e658

\e659

\e65a

\e65b

\e65c

\e65d

\e65e

\e65f

\e660

\e661

\e662

\e663

\e664

\e665

\e666

\e667

\e668

\e669

\e66a

\e66b

\e66c

\e66d

\e66e

\e66f

\e670

\e671

\e672

\e673

\e674

\e675

\e676

\e677

\e678

\e679

\e67a

\e67b

\e67c

\e67d

\e67e

\e67f

\e680

\e681

\e682

\e683

\e684

\e685

\e686

\e687

\e688

\e689

\e68a

\e68b

\e68c

\e68d

\e68e

\e68f

\e690

\e691

\e692

\e693

\e694

\e695

\e696

\e697

\e698

\e699

\e69a

\e69b

\e69c

\e69d

\e69e

\e69f

\e6a0

\e6a1

\e700

\e701

\e702

\e703

\e704

\e705

\e800

\e801

\e802

\e803

\e804

\e805

\e806

\e807

\e808

\e809

\e80a

\e80b

\e80c

\e80d

\e80e

\e80f

\e810

\e811

\e812

\e813

\e814

\e815

\e816

\e817

\e818

\e819

\e81a

\e81b

\e81c

\e81d

\e81e

\e81f

\e820

\e821

\e822

\e823

\e824

\e825

\e826

\e827

\e828

\e829

\e82a

\e82b

\e82c

\e900

\e901

\e902

\e903

\e904

\e905

\e906

\e907

\e908

\e909

\e90a

\e90b

\e90c

\e90d

\e90e

\e90f

\e910

\e911

\e912

\e913

\e914

\e915

\e916

\e917

\e918

\e919

\e91a

\e91b

\e91c

\e91d

\e91e

\e91f

\e920

\e921

\e922

\e923

\e924

\e925

\e926

\e927

\e928

\e929

\e92a

\e92b

\e92c

\e92d

\e92e

\e92f

\e930

\e931

\e932

\e933

\e934

\e935

\e936

\e937

\e938

\e939

\e93a

\e93b

\e93c

\e93d

\e93e



\e93f

\e940

\e941

\e942

\e943

\e944

\e945

\e946

\e947

\e948

\e949

\e94a

\e94b

\e94c

\e94d

\e94e

\ea00

\ea01

\ea02

\ea03

\ea04

\ea05

\ea06

\ea07

\ea08

\ea09

\ea0a

\ea0b

\ea0c

\ea0d

\ea0e

\ea0f

\ea10

\ea11

\ea12

\ea13

\ea14

\ea15

\ea16

\ea17

\ea18

\ea19

\ea1a

\ea1b

\ea1c

\ea1d

\ea1e

\ea1f

\ea20

\ea21

I hope it helps. Cheers!

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Possibly relevant: