It is currently 13 Jul 2020, 21:03

• Featuring Members' Works (Image Attachments) •
1: member
2: member
3: member
4: member
5: member

GIMP/GL:  Tutorials | Tips | Questions | Interests | Script Requests
Recommendations:  Index | Top 10
Resources:  Python-Fu Plug-ins | Scheme-Fu Scripts | GIMP
Python:  Lessons | Questions | Exercises
The Arts:  GIMPed | GIMPed Photos | Other | Contests | Public Domain Images | Isolated Images | Blender
Inkscape
Social:  Say Hello | 🡆 Anything Goes | Shares | FCSP

How I added Tagcloud for gimplearn.net

Anything, almost anything at all
(even advertisement if it's decent, spammers will be banned)
Post Reply
tim
GL Blogger

How I added Tagcloud for gimplearn.net

Post#1 by tim » 03 Mar 2018, 19:54


See TagCloud in action

I got opensource javascript file from here: http://www.goat1000.com/tagcanvas.php
Downloaded the example...
changed options of weight and weightMode and dragControl
in the below code

Code: Select all

<script src="tagcanvas.js" type="text/javascript"></script>
    <script type="text/javascript">
      window.onload = function() {
        try {
          TagCanvas.Start('myCanvas','tags',{
            textColour: '#0000ff',
            outlineColour: '#ff00ff',
            reverse: true,
            depth: 0.8,
            maxSpeed: 0.05,
			weight: true,
			weightMode: "both",
			dragControl: true
          });
        } catch(e) {
          // something went wrong, hide the canvas container
          document.getElementById('myCanvasContainer').style.display = 'none';
        }
      };
    </script>
weightMode is set to "both" because I wanted it display in different colors and Size based on weight.
dragControl is set to true because I wanted user to be able to manually drag to scroll around.
Then in php I just have this code that loops through my words (pulled from database)

Code: Select all

for($j = 0; $j < count($words); $j++)
    {
       $size = ($counts[$j] - $min)/($max-$min) * 40 + 10;
	   $size .= "pt";
	   print '<li><a style="font-size: '.$size.'" href="https://www.gimplearn.net/search.php?keywords='.$words[$j].'" target="_blank">'.$words[$j].'</a></li>';
	   //print $words[$j] . " " .  $counts[$j] . "<br/>";
	}
$min is minimum word count (I wanted the size of minimum word count to be 10px)
$max is maximum word count (I wanted the size of maximum word count to be 50px)
That's why you see the $size calculation.
That's it.
aka Tin
:tree_02:
Tin's: Favorite Index | Simple Art === fb4yt video search | fb4yt recent video views report
Lottery numbers from image | Interested Members in TLF
Paying for hosting is to support my hobby, and donating money made from ads to The Red Cross.
         
0

Pat625
Tutorial Creator

Post#2 by Pat625 » 04 Mar 2018, 05:11


Amazing to me how it spins around so smoothly! You're a genius, Tin.
0

tim
GL Blogger

Post#3 by tim » 04 Mar 2018, 05:17


Not really, I just found opensource code already written for me.
aka Tin
:tree_02:
Tin's: Favorite Index | Simple Art === fb4yt video search | fb4yt recent video views report
Lottery numbers from image | Interested Members in TLF
Paying for hosting is to support my hobby, and donating money made from ads to The Red Cross.
         
0


GIMP/GL:  Tutorials | Tips | Questions | Interests | Script Requests
Recommendations:  Index | Top 10
Resources:  Python-Fu Plug-ins | Scheme-Fu Scripts | GIMP
Python:  Lessons | Questions | Exercises
The Arts:  GIMPed | GIMPed Photos | Other | Contests | Public Domain Images | Isolated Images | Blender
Inkscape
Social:  Say Hello | 🡆 Anything Goes | Shares | FCSP

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 8 guests