Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Mon 22 Dec 2014, 08:59
All times are UTC - 4
 Forum index » Off-Topic Area » Programming
How to open .png files from a ,html document?
Post_new_topic   Reply_to_topic View_previous_topic :: View_next_topic
Page 1 of 1 Posts_count  
Author Message
Antipodal

Joined: 26 Mar 2009
Posts: 142
Location: The other side of the world

PostPosted: Mon 10 Nov 2014, 15:49    Post_subject:  How to open .png files from a ,html document?
Sub_title: In a sequential mode
 

Drawing electrical circuits on .bmp files, numbering them, then turning them into .png files and saving them in different source folders has allowed me to see all my drawings in an quick and controlled sequential manner by simply clicking on the lowest numbered .png file from the appropriate source folder in a ROX window and (after that file has opened by default in the Viewnior 1.1 window) pressing the arrow keys on my keyboard.

Using different colours in my drawings I can go back and forth and see how the electricity flows through different wires when different keys on the drawings are closed or opened and that is of great help to me.

I am now writing a HTML document that I would like to keep in another folder of the same partition where I'm keeping the source folders.

In that html document, I would like to link the name of the source folder with the lowest numbered .png file from that folder, in order to obtain a similar effect to the one I get/got when I do what I have described in the first paragraphs of this post.

I have tried with
Code:
<!DOCTYPE html>
<html>
<body>
<a href="path_to_the_lowest_numbered_.png_file_on_the_source_folder">name_of_the_source_folder</a>
</body>
</html>
and the desired .png opens in my Seamonkey 2.9.1 browser but unfortunately the other .png files in the folder do not appear when I press the arrow keys I have mentioned above.

I don't mind seeing my drawings on the browser instead of on Viewnior 1.1 , What really bothers me is that I can't see the rest of the .png files I store in the source folder in the sequential manner I have described above by means of something as simple as four (easy to remember) keys on my keyboard.

I feel there must be some code for newbies that can solve my problem but I haven't found it yet.
While I continue with my search...
Can you please help me?

Thank you

_________________
Slacko 533 Live CD_P4 3Ghz_ASUS P5G41T-M LX3_2G RAM_DVD Write
No internal HDD
Never save files related to Puppy's configuration
Sometimes save personal stuff on small vfat flash sticks or access via USB data on old big internal NTFS formated SATA HDD
Back to top
View user's profile Send_private_message 
6502coder

Joined: 23 Mar 2009
Posts: 116
Location: Western United States

PostPosted: Mon 10 Nov 2014, 21:04    Post_subject:  

Here's an example using Javascript.
It has been tested in Firefox and SeaMonkey.

The idea is to collect all the image pathnames in an array, and then switch which image is being displayed by altering the SRC attribute of the HTML IMG object when the left or right arrow key is pressed.

Of course everything depends on the naming convention you are using for your image files.
In my example, I had files named "jennifer-keller-01.jpg", "jennifer-keller-02.jpg", etc, so I could write a loop to synthesize the filenames since only the number was changing.

Also note that I've assumed the HTML file is in the same directory as the image files. If not, you'd have to change the spec for the basepathname accordingly. For example if the HTML file is in directory "A" and the images are in "B" and A and B have the same parent directory, then you'd have

basepathname = "../B/whatever"

Code:
<!doctype html>
<html lang="en">
<head>

<script type="text/Javascript">
   var pix = [];
   var basepathname = "./jennifer-keller-";
   var nPix = 5;
   // For this example, we will assume that the image files
   // have names that look like "basepathname" followed by
   // "01.jpg", "02.jpg", etc.
   // nPix is the number of image files

   var j, k;
   for (j=0; j < nPix; j++)
   {
      k = j+1;
      pix[j] = new Image();
      pix[j].src = basepathname + (k < 10 ? "0" : "") + k + ".jpg";
   }

   var currentPic = 0;

   function changePic( e )
   {
      var p;
      p = document.getElementById("ActivePic");

      if (e == null)
      {
         p.src = pix[0].src;
         return;
      }
      if (e.keyCode == 39)
      {
         currentPic = (currentPic+1) % nPix;
        }
      if (e.keyCode == 37)
      {
         currentPic = (currentPic == 0) ? nPix-1 : currentPic-1;
      }
      p.src = pix[currentPic].src;
   }
 
   document.onkeydown=changePic;

  </script>


 </head>
 <body onLoad="changePic(null);">
 
 <img id=ActivePic>
 
 </body>
</html>
Back to top
View user's profile Send_private_message 
Antipodal

Joined: 26 Mar 2009
Posts: 142
Location: The other side of the world

PostPosted: Tue 11 Nov 2014, 00:44    Post_subject:  

Dear 6502coder

Thank you very much for your post.

Three hours after you sent it, I discovered a very practical and simple way to solve my problem.

At that time I realized I hadn't checked this thread to see if somebody had posted some help.

It was then when I read your message.

Though my knowledge about coding is very (extremely) poor and I know nothing about javascript, your post will be a very valuable javascript study material for me.

While I'm studying your code and making it work I have decided to use the following trick:
*)Instead of clicking on the
Code:
<a href="path_to_the_lowest_numbered_.png_file_on_the_source_folder">name_of_the_source_folder</a>
link on the .html document, I will drag the link and drop it on the desktop.
*)That will create (on the desktop) an icon for the "lowest_numbered_.png_file_on_the_source_folder".
*)If I left click on it, the desired file opens on a Viewnior 1.1 window.
*)If I keep this window active and use the arrow keys on my keyboard wisely I will be able to go back and forth in a quick and controlled sequential manner through all the .png files that share the source folder with this file.
Smile
That will give me time to study and practice the javascript solution you have kindly offered me. Smile
Smile
Thanks again. Smile

_________________
Slacko 533 Live CD_P4 3Ghz_ASUS P5G41T-M LX3_2G RAM_DVD Write
No internal HDD
Never save files related to Puppy's configuration
Sometimes save personal stuff on small vfat flash sticks or access via USB data on old big internal NTFS formated SATA HDD
Back to top
View user's profile Send_private_message 
6502coder

Joined: 23 Mar 2009
Posts: 116
Location: Western United States

PostPosted: Tue 11 Nov 2014, 12:52    Post_subject:  

@Antipodal

Glad you found a simple, practical solution! One of my favorite books on programming techniques is Jon Bentley's "Programming Pearls." Although old (1986) it's full of great practical advice. In the very first chapter he warns, if someone asks you how to do something, don't just jump in and start writing code. First find out WHY they want to do that, and what the real, underlying problem is. The correct solution may be something completely different from what they were asking for.

Obviously, it's time for me to re-read that book! Wink

Anyway, if you do decide to look into Javascript further, feel free to PM me with any questions you might have. I might tinker awith this a bit more just for fun. If I come up with anything interesting I'll post it in this thread.
Back to top
View user's profile Send_private_message 
Antipodal

Joined: 26 Mar 2009
Posts: 142
Location: The other side of the world

PostPosted: Wed 12 Nov 2014, 09:28    Post_subject:  

@6502 coder
6502coder wrote:
Anyway, if you do decide to look into Javascript further, feel free to PM me with any questions you might have.

6502coder wrote:
I might tinker awith this a bit more just for fun. If I come up with anything interesting I'll post it in this thread.

Thank you! Very Happy
I'll take your word for both statements
Back to top
View user's profile Send_private_message 
Display_posts:   Sort by:   
Page 1 of 1 Posts_count  
Post_new_topic   Reply_to_topic View_previous_topic :: View_next_topic
 Forum index » Off-Topic Area » Programming
Jump to:  

Rules_post_cannot
Rules_reply_cannot
Rules_edit_cannot
Rules_delete_cannot
Rules_vote_cannot
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.0643s ][ Queries: 11 (0.0037s) ][ GZIP on ]