New Badge Timeline in Vue.js UserCP Mockup


 
Thread Tools Search this Thread
Top Forums Web Development New Badge Timeline in Vue.js UserCP Mockup
# 1  
Old 02-24-2019
New Badge Timeline in Vue.js UserCP Mockup

Continuing to think Vue.js is AWESOME, we now have a new badges timeline in version 0.26 of the UserCP Mockup:

Code:
https://www.unix.com/cp/index.php#/pages/badges

Changes:
  • Added Mockup from Badges timeline.
  • Changed notifications (upper right) to use v-for: bindings.
  • Fixes minor vue routing bug in /cp/ "default / " route.
Login or Register to Ask a Question

Previous Thread | Next Thread

9 More Discussions You Might Find Interesting

1. What is on Your Mind?

Video Overview of the Vue.js UserCP @UNIX.com

Here is my second live video screencast (in my life, using Camtasia) with voice for the new usercp: Overview of the Vue.js UserCP @UNIX.com Shout outs to Don Cragun, Corona688, Rudi, Wolf, Made in Germany, stomp, Ravinder, Creative Tim, PubNub and others in the video. Thanks. If you are... (1 Reply)
Discussion started by: Neo
1 Replies

2. What is on Your Mind?

UserCP Screeching Frog 0.7446 Using Vue.js

Here is a status update on the new forum usercp. The current version of the new UserCP is Screeching Frog v0.7446. Most users will need to clear the files from your browser cache, quit and restart your browser to see the new version (check bottom of the page for version). Safari seems to... (9 Replies)
Discussion started by: Neo
9 Replies

3. What is on Your Mind?

New UserCP Update Profile Image Page (UserCP Screeching Frog 0.7485)

Update! UserCP Screeching Frog 0.7485 Created a new page for uploaded a profile picture (profile pictures are different than avatar pictures). https://www.unix.com/usercp/#/settings/other https://www.unix.com/members/1-albums225-picture1158.png ... (0 Replies)
Discussion started by: Neo
0 Replies

4. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

5. What is on Your Mind?

Congrats to Nezabudka for her Formulator Badge (UserCP Prototype v0.40)

Please join me in thanking one of our most active new members, nezabudka, who suggested that we start using the new usercp prototype and change the menu items around, effectively "promoting" the new prototype CP. At first, I did not understand her suggestion, but after 'coming down" from days of... (1 Reply)
Discussion started by: Neo
1 Replies

6. What is on Your Mind?

My Charts in the Prototype Vue.js UserCP

Yea.... something I thought would take me an hour ended up taking most of the day. Well, it's not like those YT video tutorials where it take a week or more to make a video and the guys (gals) make it look so easy. But having said that, I'm happy to share with forum members the first "My... (6 Replies)
Discussion started by: Neo
6 Replies

7. Web Development

New Discussion Timeline in Vue.js UserCP Mockup

Well, thanks to the amazing power of Vue.js, we now have a new timeline in version 0.23 of the UserCP Mockup: Wow! I'm really impressed with Vue.js. https://www.unix.com/cp/index.php#/pages/timeline In this version: Created database, and PHP model for the remote AJAX (Axios) call to... (1 Reply)
Discussion started by: Neo
1 Replies

8. Web Development

MySQL Query to Build Mockup Vue.js UserCP Timeline Page

Here is the query (and some sample results) I plan to use to build a new timeline page in the mockup vue.js usercp I am working on. When the postid is the same as lastpostid, this means the timeline entry will be - "{{Member}} Started Discussion {{Thread Title}} at {{date and time}}" and when... (4 Replies)
Discussion started by: Neo
4 Replies

9. Web Development

Vue.js UserCP Mockup Version 0.20 - Badge Notifications

Vue.js UserCP Mockup Version 0.20 - Badge Notifications https://www.unix.com/cp/index.php#/dashboardIn this mockup release: Badge Notifications are working with live data: Upper Right (see image) Added Axios to Vue and changed large table updates to axios (ajax) Note: Will reformat... (2 Replies)
Discussion started by: Neo
2 Replies
Login or Register to Ask a Question
.::SWF::Movie(3pm)					User Contributed Perl Documentation					.::SWF::Movie(3pm)

NAME
SWF::Movie - SWF Movie class SYNOPSIS
use SWF::Movie; $m = new SWF::Movie(); $m = SWF::Movie::newSWFMovieWithVersion(8); DESCRIPTION
SWF::Movie is the root object of your flashfile. It contains all your other objects you want in your movie. Ming supports many Flash4, Flash5 F6,7,8,9.. features. The SWF::Movie object contains information like the flashversion, the size, the frames per second, the background color. Except that, the SWF::Movie behaves like a SWF::MovieClip. It only cannot be added to another SWF::Movie or SWF::MovieClip. Notice: The version of your flashmovie can be set by the object SWF. See SWF for more details. METHODS
$m = new SWF::Movie() Creates a Movie object. $m = newSWFMovieWithVersion(version) Creates a Movie object with version value (e.g. 8) set. $displayItem=$m->add($SWFObject) Add an instance of a SWF-object to your current frame. The returnvalue is a SWF::DisplayItem. Some possible SWF-objects are: SWF::Action SWF::MovieClip SWF::Shape SWF::Sound SWF::Text SWF::TextField SWF::Bitmap SWF::PrebuiltClip $m->add($shape); # possible, but not more accessible for us $shape_1 = m->add($shape); # good instance $m->addExport($block, $name) Prepare linkage to Action script code. $m->addExport($mc, 'mc'); # and later inside action script....: $ac = new SWF::Action("_root.attachMovie('mc','mc1',11);"); $m->writeExports() Export prepared names to Action script. remove($displayItem) Removes the given SWF::DisplayItem instance from the current and following frames of the main timeline. $m->remove($shape_i); nextFrame() Finish a frame of the main timeline. New added objects will be added in the next frame. $m->nextFrame(); setNumberOfFrames($frames) =item setFrames($frames) Preset the number of frames of the main timeline. n not used frames before finishing the movie will filled with n nextFrame() statements. If you inserted more nextFrame() commands than you set with setFrames() the setFrames() will be ignored. $m->setFrames(100); $m->setBackground($red,$green,$blue) Set the background in red, green, blue values. Possible value are 0..255 or hexvalues 0x0..0xff. $m-setBackground(0xff,0x99,0x00); # orange bg $m-setBackground(0,200,255) # green bg A transparency level isn't available I asume. (In Flash MX/F6?). A transparent background can be set in the HTML-code for Internet Explorer. Please inform the Authors if that is available for nonIE-browsers. $m->namedAnchor($label) This function adds a named anchor to the movie. $m->setDimension(x,y) Set the dimension in pixel. #ToDo: #min: (0.0,0.0) # ;-) #max: (?,?) #default: (0.0?,0.0?) #Behavior when values <min: ming sets it to min #Behavior when values >max: ming sets it to max $m->setDimension(200,100); $m->setDimension(123.45,67.89); $m->setRate(int) Set the playing speed in frames/second. #ToDo: #min: 0 #max: ? #default: ? #Behavior when value <min: ming sets it to min #Behavior when value >max: ming sets it to max $m->setRate(30); $m->protect() A feature that prevents only flashnewbies from importing your movie into Macromedias Flash authoring tools. It cannot protect your content from being loaded by other flashmovies, deleting of the protection with a hexeditor or disassembling with tools. $m->setSoundStream($soundstream, [$skip]) Puts an SWF::SoundStream object as streaming sound into the main timeline. The optional skip parameter describes the time in seconds to be skiped. $m->setSoundStream($soundstream); $m->streamMp3($filename) Simplifies the setSoundStream(). You only need the filename. $m->streamMp3("iloveyou.mp3"); Hint: If you want to reuse this sound/mp3 later in this movie, create a reusable SWF::SoundStream object and then put it into setSoundstream(). $soundinstance = $m->startSound($sound) Play a prepared SWF::Sound object into the main timeline. Returns an object of SWF::SoundInstance. $sound = new SWF::Sound("loveyoutoo.mp3", SWF_SOUND_MP3_COMPRESSED ); $si = $m->startSound($sound); $m->stopSound($sound) Stop playing sound. $m->labelFrame($string) Gives the current frame a label that can be used by actionscript as anchor. Then you don't have to count your nextFrame() lines anymore. :-) $m->labelFrame("win"); #ToDo: #max characters of a label??? #What happen if we put there a big string?? #Which characters are allowed?? $m->setScriptLimits($maxRecursion, $timeout) Set limits for resource usage, related to action script. Setting timeout will protect your computer from too long loops and stack overflow. So endless scripts like "while(1){};" will be interrupted after timeout seconds. The default recursion depth is 265, the default timeout is 15 seconds. $m->defineScene($offset, $name) Define scenes for the movies' main timeline using integer value for frame offset and name of the scene. $m->setNetworkAccess($flag) Sets network / fileaccess policy. If the flag is set to 0 a localy loaded movie will be unable to access the network but is allowed to access local files. If the flag ist set to 1 a localy loaded movie will be unable to access local files but is allowed to access the network. For SWF >= 8: default is 0, $m->addMetadata($xml) Adds Metadata to the movie: this function inserts a metadata-tag into the movie. Only one metadata-tag can be set to a movie. Metadata is specified as an XML string. $m->assignSymbol($character, $name) Assigns a symbolic name for a SWF::Character object. Such classes are available for usage in other SWF files and can be referenced from inside the current movie. To assign a symbol to the root movie use NULL as character value. $m->setTabIndex($depth, $index) Sets tab index for specified depth level. $fontchar = $m->addFont($font) Adds a font to a movie. An object of SWF::FontCharacter class returned. $font = new SWF::Font('Arial.fdb'); $fch = $m->addFont($font); $fontchar = $m->importFont($file, $name) Imports a font from an other SWFFile. An object of SWF::FontCharacter class returned. $fch = $m->importFont('textField.swf', 'Arial337a'); $m->importCharacter($url, $name) Not yet documented (ToDo!) $result = $m->replace($item, $block) This method replaces a displayable character with a new one. Returns 0 on success , -1 else. $dispitem = $movie->add($shape1); $movie->nextFrame(); print $movie->replace($dispitem, $shape2); $movie->nextFrame(); $written = $m->xs_output([$compresslevel]) $written = $m->output([$compresslevel]) Writes the SWF::Movie to stdout. This is normally used for webservers/cgi-scripts. Don't forget to send the "Content-Type:"-lines before writing out the movie. The parameter compresslevel is optional. compresslevel between 0 and 9. Higher values will be interpreted as 9. Values smaller 0 mean no compression. By default the SWF::Movie will be send without compression. Notice: compression available since Flash MX(Flash 6). Ming does not check this for you if you write flash4 or flash5 movies. Unlike xs_output() the output() method prepared for using via webservers (but not limited to webservers). Both methods return number of bytes written. $written = $m->save($filename [, $compresslevel]) Method saves the SWF::Movie to a file and returns the number of bytes written. The parameter compresslevel is optional. compresslevel between 0 and 9. Higher values will be interpreted as 9. Values smaller 0 mean no compression. By default the SWF::Movie will be saved without compression. Notice: compression available since Flash MX(Flash 6). Ming does not check this for you if you write flash4 or flash5 movies. EXAMPLE
3 examples: a regular minimal SWF::Movie, one with all methods and a more interesting. minimal empty example #!/usr/bin/perl -w use SWF::Movie; $m = new SWF::Movie(); $m->nextFrame(); $m->save("emptyminimal.swf"); full empty examples #!/usr/bin/perl -w use SWF::Movie; $m = new SWF::Movie(); $m->setVersion(4); $m->setBackground(0xff,0xcc,0x0); $m->setDimension(200,100); $m->protect(); $m->setRate(30); $m->setFrames(10); # ming fills it automatic with frames $m->nextFrame() $m->save("empty.swf"); streaming example #!/usr/bin/perl -w use SWF("Shape"); SWF::setVersion(6); $m = new SWF::Movie(); $m->setBackground(0xff,0xcc,0x0); $m->setDimension(200,100); $m->setFrames(10); $m->streamMp3("forever.mp3"); $s= new SWF::Shape(); $s->setLine(40,0xff,0xff,0); $s->setRightFill(0xff,0,0); $s->drawLine(50,0); $s->drawLine(0,20); $s->drawLineTo(0,0); $s_1= $m->add($s); $s_2= $m->add($s); $s_1->move(50,40); $s_2->move(10,40); for($i=1;$i<5;$i++) { $m->nextFrame(); $s_2->move(0,10); } $m->nextFrame(); print "Content-type: application/x-shockwave-flash "; $m->output(9); # with compression level 9 (since flash6) AUTHOR
Soheil Seyfaie (soheil at users.sourceforge.net), Albrecht Kleine and developers of ming.sourceforge.net SEE ALSO
SWF, SWF::Action, SWF::Bitmap, SWF::Button, SWF::Constants, SWF::DisplayItem, SWF::Fill, SWF::Font, SWF::FontCharacter, SWF::Gradient, SWF::Morph, SWF::MovieClip, SWF::Shape, SWF::PrebuiltClip, SWF::Sound, SWF::SoundStream, SWF::TextField, SWF::Text, SWF::Filter, SWF::Character perl v5.14.2 2011-10-26 .::SWF::Movie(3pm)