Fenrir Developer's Blog: Let's use and enjoy IEPanelEx / IEDockEx (3)

by Mr.X

It's getting cooler and cooler. It's a good season to eat hot hot ramen! Ummmm...

Hi, guys! I'm Mr. X! Give me ramen!

☆Outline of the previous blogs

・Tried IEPanel
・Set IEPanelEx

Today's topic is “how to create something more with simple HTML and JavaScript.”
I continue form the previous blog. Before starting this, please read the previous blog and create “TestPanel.”

*IEPanelEx / IEDockEx are softwares under development in our Laboratory!

☆Before you start...

1.Open “<Sleipnir installfolder>/plugins/IEPanelEx/TestPanel/config.ini” in text editor
2.Delete the line, “URL=http://www.fenrir-inc.com/”
--------------------------------------------------------------
[Settings]
Action=true
ContextMenu=true
ScrollBar=true
DropTargey=true
---------------------------------------------------------------
3.Copy index.html to somewhere for your back up (you can find it in the same folder where config.ini is in)
4.Restart Sleipnir

TestPanel will be displayed like this

☆Let's create original panel!
Are you ready? OK, then, let's edit index.html. After opening it in the text editor and delete all the lines, write as follows and save it.
---------------------------------------------------------------
<html>
  <head>
    <title>TestPanel</title>
  </head>
  <body>
    Test
  </body>
</html>
--------------------------------------------------------------

Right click on the panel and select “Refresh”

Changed!

You can display your favorite contents just editing index.html. You can use JavaScript too.
---------------------------------------------------------------
<html>
  <head>
    <title>TestPanel</title>
  </head>
  <body>
    <inputtype="button"value="Click"onclick="alert('Click');">
  </body>
</html>
---------------------------------------------------------------

Let's create a count down timer!
---------------------------------------------------------------
<html>
  <head>
    <title>TestPanel</title>
    <script>
      var TIMER = 5;
      var COUNT = TIMER;
      var TH;
      function startTimer() {
        if (COUNT <= 0)
          COUNT = TIMER;
        TH = setInterval(function() {
          COUNT -= 1;
          if (COUNT <= 0) {
            clearInterval(TH);
            alert('Finish');
          }
        }, 1000);
      }
    </script>
  </head>
  <body>
    <input type="button" value="Click" onclick="startTimer();">
  </body>
</html>
---------------------------------------------------------------

It keeps counting down though you close the panel. I always set “var TIMER = 180” to time for instant noodle. So I can enjoy surfing the Internet without forgetting the best time for noodle!! Ready to eat Ramen!!

☆Next blog...

When you use this as a timer, you can add more, such as STOP button or a function to show time of counting down etc... what...? I cannot hear you...

“Taking too much space :-(”

......Yeah. I know... Whole panel is displayed for just one button. Yes, you are right! Taking too much space...
So the next time, I'll introduce IEDockEx that doesn't take that much space.

Thank you!

Note:
When you use Javascript with IEPanelEx, you may receive a warning message “To help protect your security, your web browser has restricted to access.” because of “Security setting of execution of Active X.” If you try to display a reliable page, you can allow its dieplay selecting “Allow Blocked Content” from the click menu.