clippyjs / clippy.js Goto Github PK

I really would like to have E-Man and E-Woman characters to be unpacked for clippy
I would do it myself if had your unpack Tool :)

http://www.msagentring.org/msagentring/chars.aspx?char=e-woman
http://www.msagentring.org/msagentring/chars.aspx?char=e-man

If these links are down i could provide the working acs files

Animations

Congratulate
LookRight
SendMail
Thinking
Explain
IdleRopePile
IdleAtom
Print
Hide
GetAttention
Save
GetTechy
GestureUp
Idle1_1
Processing
Alert
LookUpRight
IdleSideToSide
GoodBye
LookLeft
IdleHeadScratch
LookUpLeft
CheckingSomething
Hearing_1
GetWizardy
IdleFingerTap
GestureLeft
Wave
GestureRight
Writing
IdleSnooze
LookDownRight
GetArtsy
Show
LookDown
Searching
EmptyTrash
Greeting
LookUp
GestureDown
RestPose
IdleEyeBrowRaise
LookDownLeft

Random animation every 5 sec

        <script type="text/javascript">
            clippy.load('Clippy', function(agent) {
                agent.show();
                function randomIdle() {
                    switch (Math.floor(Math.random() * 8)) {
                        case 0:
                            agent.play('Idle1_1');
                            break;
                        case 1:
                            agent.play('IdleAtom');
                            break;
                        case 2:
                            agent.play('IdleEyeBrowRaise');
                            break;
                        case 3:
                            agent.play('IdleFingerTap');
                            break;
                        case 4:
                            agent.play('IdleHeadScratch');
                            break;
                        case 5:
                            agent.play('IdleRopePile');
                            break;
                        case 6:
                            agent.play('IdleSideToSide');
                            break;
                        case 7:
                            agent.play('IdleSnooze');
                            break;
                    }
                }
                setInterval(function() {
                    //agent.stop();
                    randomIdle();
                }, 5000);
            });
        </script>

Potentially the best thing for this project. I do know that it was modeled and animated in Blender so maybe those files could be tracked down somehow or shared if we bring this project to their attention?

This project would be better if the voice of the characters is allowed. You will earn a star by me if it will be added! Thx!

On Mac OS, Chrome, at https://www.smore.com/clippy-js:

1. Right click on Clippy
2. Browser context menu appears
3. Click outside of menu to dismiss it
4. Clippy follows the cursor until left click

That was my favorite agent. Any chance someone can add it in? :-P

http://www.youtube.com/watch?v=eZSL_ZnkhgQ

I'd like to make Melin look up and stay looking up until I tell him the next animation move, how can I accomplish such a thing?

I don't suppose I could talk you into adding Badgey to the list of characters in clippy.js, could I? Perhaps as an easter egg?

This may seem silly, but what Open Source license does this come under?
Because this seems like a great idea for an Easter Egg, but never would make it there without a fairly liberal license.

I thought it would be good to port Earl and Courtney could be on this as well as Rover and Merlin.

Courtney and earl have exactly the same number of animations and are located in the same folder as rover.

XP: (%windir%/srchasst)

In my code I use

$j = jQuery.noConflict();

I get this error Uncaught "TypeError: Cannot call method 'Deferred' of undefined "

Actually $ is used through out your code. You need to wrap your code in a closure.
var clippy = {};
!function( clippy, $ ){
//Your clippy code
}(clippy, jQuery);

Wrapping code in a closure solves the issue.

This package is pulling external data from http://s3.amazonaws.com/clippy.js/Agents/sounds-mp3.js which is no longer available.

Had issues with:

1. Would not load in IE due to head.appendChild.
2. Drag and Drop of agent would make agent disappear.
3. Amazon folder blocked by proxy on my network.

I forked and updated with fixes for these issues, both in src and build.

There's this feature? read once the website and docs but didn't find it, I'd gladly make a pull request if not.

Hi,

clippy.load function is not called when the page has the following meta tag

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"

unfortunately, if i remove this Meta tag, it affects my existing design and functionalities in my page. Is there any fix of solution available for this. Pls suggest

Init script
script type="text/javascript"
clippy.load('Genie', function(agent){
// do anything with the loaded agent
agent.show();

regards,
Ashok

I try this

agent.moveTo(500,500);

The character does the move animation, but doesn't move anywhere.

I see that the html element has a width and height set of 128px for both values,
<div class="clippy" style="display: block; width: 128px; height: 128px; background: url(&quot;clippy/agents/Merlin/map.png&quot;) 0px 0px no-repeat; top: 229.5px; left: 224px;"><div style="display: none; width: 128px; height: 128px; background: url(&quot;clippy/agents/Merlin/map.png&quot;) 0px -1152px no-repeat;"><div style="display: none; width: 128px; height: 128px; background: url(&quot;clippy/agents/Merlin/map.png&quot;) no-repeat;"></div></div></div>

I can modify that in clippy.min.js, or even within chrome dev tools.

But when I drag ( width or height for the clippy class) larger than 128px, the agent starts to repeat itself, and show itself duplicated every few hundred pixels.

How do I fix this, so I can get the agent to move like it should when I execute the moveTo function?

Hi,

In one of my projects I have used Rocky the Dog, but the map seems so ugly, It's possible to see some pixels that doesn't make sense. So I worked in the image and the final result was little better.

If you agree, I make a pull request:

I have some other ACS files too. Could you upload the code/process of how you converted ACS files to map.png.

Thanks.

I have a button and a key stroke that triggers the agent to show (if hidden) and hide (if already shown). This creates some improper behaviour of the agent. If I hide it, it does not show when triggering the show method. If I then click the button to hide it again, the agent is drawn on the screen and it starts the hide animation and disappears.

Hello, is possible to easy switch between sound ON and sound OFF ?

Many thanks Mirek

Hi,

My friends and I found clippy very funny, and I would like to know how I can create a clippyjs agent from scratch...

Thanks.

Hey there, i am missing a resize function to make clippy bigger (for a Mobile optimizied page)

if i make the div bigger, clippy is multiple visible on the page.

can you help?

Usage section on the website suggests agent.Play, but it is agent.play.

Hi,

Right now I'm making a random quote appears at the end of my page. I would like to make clippy say it. Is it possible?

This is the code I use for the random quote

Thanks for the help!

-Ignacio
http://people.virginia.edu/~im5j/

I just posted a link to https://www.smore.com/clippy-js in our Rocket.Chat, and it caused a HTTPS error:

The cause is this meta tag:

<meta property="og:image" content="https://clippy.js.s3.amazonaws.com/og.jpg"/>

The SSL certificate covers only *.s3.amazonaws.com, so the additional "clippy" subdomain breaks it.

The official website is down.

Any chance the newer agents could be added to the demo site?

Just being nitpicky; this library is hilariously awesome!

https://www.smore.com/clippy-js

Cinnamon Software and Double Agent are linked under Special Thanks with HTTPS when it should be HTTP.

I was expecting to be able to just drag the assistant with my fat fingers. It didn't work. Also, pressing for a while and then moving didn't work. I think touch wasn't considered.

I tried to copy that code to Firefox, IE, Chrome, Edge, but nothing happened, the browser just searches the code, and shows nothing. I thought make an exe will be better...

Is it possible to move the Clippy to a relative position (as in %, for example) instead of px?
That would help a lot placing it on the screen's corner on devices with different sizes!

Is there anyway to get the agent character to speak (ala Vox Proxy) or similar

Charlie Elli8ott

Dear Smore Inc,

I would like to know how to reuse the character that have been created using clippy.load();. Thanks

I have tried numerous solutions, the bottom line is I cannot display the character on a webpage using the latest up to date Firefox...or the latest up to date IE it never comes back from the load function. When I go to your home page it works. Could you please put some test code like that somewhere? I really would like to use this. Please give me a hand

Charlie

If someone wanted to unpack an agent and, say, contribute it, they could not do so without knowing how to unpack agents :)

Hey,

Your project is amazing, but I need a highly customisable library for kids games, so i would like to search for alternatives. Do you know any ?

Thanks.

with jQuery 3.1.1, clippy does not show. chrome dev consle shows:

clippy.min.js:1 Uncaught TypeError: this._el.animate is not a function
at clippy.Agent. (clippy.min.js:1)
at e (jquery-3.1.1.slim.min.js:2)
at clippy.Queue._progressQueue (clippy.min.js:1)
at clippy.Queue.queue (clippy.min.js:1)
at clippy.Agent._addToQueue (clippy.min.js:1)
at clippy.Agent.moveTo (clippy.min.js:1)
at (index):198
at Array.j (clippy.min.js:1)
at i (jquery-3.1.1.slim.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.1.1.slim.min.js:2)

works: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
doesn't work: https://code.jquery.com/jquery-3.1.1.slim.min.js

I can write a script for Clippy to go through when it loads, and that's fine and dandy so I can show off that Clippy works on my site, but I want him to react to a form that's being filled out.

Like fire an onfocus event when a form field is highlighted and do a agent.speak('You should fill in your name here...'); or something like that.

I can't figure out how to get it to react to onfocus or onclick events.

Hello,

so far there is no straight forward way to make the agent wait between multiple sentences.

this code will barely be readable for the user.

    agent.play("GetAttention"); 
    agent.speak("Hello World" );
    agent.speak("Foo Bar");
    agent.speak("Yo Momma");

I made a nasty hack to make the agent wait by introducing zero space characters at the end of the sentence

    var s = "\u2006\u200B";
    var space = s+s+s+s+s+s+s+s+s+s+s+s+s+s+s+s+s+s+s+s;
    agent.play("GetAttention"); 
    agent.speak("Hello World"  + space);
    agent.speak("Foo Bar" + space);
    agent.speak("Yo Momma" + space);

I think there should be a better way.

I believe the issue comes from the balloon._position function, where you use var o = this._targetEl.offset();. Since the positioning of both balloon and agent is fixed, this.targetEl.position should be used. Alternatively, the balloon could be defined as position:absolute, but that breaks when scrolling.

Here is my fix. It might not work for all cases:

        clippy.Balloon.prototype._position=function (side) {
            var o = this._targetEl.position();
            var h = this._targetEl.height();
            var w = this._targetEl.width();

            var bH = this._balloon.outerHeight();
            var bW = this._balloon.outerWidth();

            this._balloon.removeClass('clippy-top-left');
            this._balloon.removeClass('clippy-top-right');
            this._balloon.removeClass('clippy-bottom-right');
            this._balloon.removeClass('clippy-bottom-left');

            var left, top;
            switch (side) {
                case 'top-left':
                    // right side of the balloon next to the right side of the agent
                    left = o.left + w - bW;
                    top = o.top - bH - this._BALLOON_MARGIN;
                    break;
                case 'top-right':
                    // left side of the balloon next to the left side of the agent
                    left = o.left;
                    top = o.top - bH - this._BALLOON_MARGIN;
                    break;
                case 'bottom-right':
                    // right side of the balloon next to the right side of the agent
                    left = o.left;
                    top = o.top + h + this._BALLOON_MARGIN;
                    break;
                case 'bottom-left':
                    // left side of the balloon next to the left side of the agent
                    left = o.left + w - bW;
                    top = o.top + h + this._BALLOON_MARGIN;
                    break;
            }

            this._balloon.css({top:top, left:left});
            this._balloon.addClass('clippy-' + side);
        };

        clippy.Balloon.prototype._isOut=function () {
            var o = this._balloon.offset();
            var bH = this._balloon.outerHeight();
            var bW = this._balloon.outerWidth();

            var wW = $(window).width();
            var wH = $(window).height();
            var sT = $(document).scrollTop();
            var sL = $(document).scrollLeft();

            var top = o.top - sT;
            var left = o.left - sL;
            var m = 5;

            var outX=0;
            var outY=0;
            if (top - m < 0) outY= (m - top)/wH;
            if (left - m < 0) outX= (m-left)/wH;
            if ((top + bH + m) > wH) outY= top + bH + m/wH-1;
            if ((left + bW + m) > wW) outX= left + bW + m/wW-1;

            return Math.sqrt(outX*outX+outY*outY);
        };

        clippy.Balloon.prototype.reposition=function () {
            var sides = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];

            var minOut=100000;
            var side;
            for (var i = 0; i < sides.length; i++) {
                var s = sides[i];
                this._position(s);
                var out=this._isOut();
                if (out<minOut) {
                    minOut=out;
                    side=s;
                    if (!out) break;
                }
            }
            if (minOut) {
                this._position(side);
                var pos=this._balloon.position();
                if (pos.top<0) pos.top=5;
                if (pos.top>$(window).height()-this._balloon.outerHeight()-5) pos.top=$(window).height()-this._balloon.outerHeight()-5;
                if (pos.left<0) pos.left=5;
                if (pos.left>$(window).width()-this._balloon.outerWidth()-5) pos.left=$(window).width()-this._balloon.outerWidth()-5;
                this._balloon.css(pos);
            }
        };

Can you add a license to this project please? Thanks!

Hi!

Created a codepen that makes it easy to get up and running, it also uses an iframe so you can overlay it over your favorite website/image,

http://codepen.io/joshnuss/pen/qdZdjw

As far as I can see, this library does not allow to show a text in the balloon and play an animation at the same time.

Would it be possible to implement that?

I need to change the character/agent after it is loaded on the webpage. Is there any way to unload an agent and then load a new one without having to reload the web page? For instance, Merlin is loaded but then I want to change it to Genie say by clicking on a button.

I can't seem to get it working, I have linked all the files in the index.html file and all I am getting is js errors..

clippy.min.js:1 GET file://s3.amazonaws.com/clippy.js/Agents/Merlin/agent.js 0 ()
clippy.load._loadScript @ clippy.min.js:1
clippy.load._loadAgent @ clippy.min.js:1
clippy.load @ clippy.min.js:1
(anonymous) @ index.html:16
clippy.min.js:1 GET file://s3.amazonaws.com/clippy.js/Agents/Merlin/sounds-mp3.js 0 ()
clippy.load._loadScript @ clippy.min.js:1
clippy.load._loadSounds @ clippy.min.js:1
clippy.load @ clippy.min.js:1
(anonymous) @ index.html:16
s3.amazonaws.com/clippy.js/Agents/Merlin/map.png:1 GET file://s3.amazonaws.com/clippy.js/Agents/Merlin/map.png 0 ()
Image (async)
clippy.load._loadMap @ clippy.min.js:1
clippy.load @ clippy.min.js:1
(anonymous) @ index.html:16

Doesn't even appear on the screen.

I copied the script to my web page, and viewed it with IE10 and Chrome.|
Nothing shows!
Do I have to download anything to a specific location? When I look at the downloaded files, I see that jquery.1.7.min.js file is missing!

Case in point: https://daf.lol

I would love to be able to use npm to pull this in to my frontend projects.

I can submit a PR for this if you are amenable.

Just why?