/sic/ - Site Improvement Center

Some new updates, probably the final and last version if nothing breaks or such.

https://dl.dropboxusercontent.com/u/43266019/fla/ponk%20clock/Ponka%20clock%20as3%20better%20anim%20load%20file.swf

Change list:
- Menu:
Zoom (now a magnifying glass), ! and INFO buttons (along with all the new ones) have been moved into a menu that you bring up by clicking on a triangle icon in the lower left. Click again to close it.

- Stopping the alarm:
You can now click anywhere on the screen (outside of the menu and the info tab) to turn the alarm off.

- Volume control:
Click + and - icons in the menu to adjust the volume of the alarm. Changes will take effect immediately even if an alarm is playing (though it might sound jittery). You can also click on the speaker icon to mute any and all alarms altogether.

- Looping
Click on the two circling arrows icon to toggle looping on/off. If looping is on, the alarm won't stop until you mute the volume or click anywhere on the screen (outside of the menu and info tabs). Off by default.

- Alarm clock:
Set the time at which you wish an alarm to go off by clicking the hours and/or minutes. Turn the alarm clock functionality on/off with the alarm clock icon. Off by default.

- 12/24 button toggle to toggle between the hour systems

- Updated the 'INFO' thing

- If you set "number_of_episodes" to 1 in the data.txt, left and right arrows will be hidden from the episode timer.

>>148
Uploaded to the countdown page!

That loop feature is really nice, turns it into a viable online alarm clock.

Copypasted from a thread.

I heard there was some hassle with the daylights saving yesterday with the episode, and some people seemed to have complaints with the countdown page at the sub.

Well, the thing is that the countdown page uses GMT-5 as its timezone, so it's tied to european daylight saving as opposed to what americans use, so that might have easily mislead some people. However, even if it used the american daylight saving if you hadn't updated the page after the switch to summer time occured I theorize it'd have been one hour off.

I have very limited internet access this month, and I don't have the source files with me right now, so I can't really look into making a fix at this moment. Theretically because the countdown loads its contents from mlpg.co/countdown/data.txt you could somehow change that "GMT-0500" to "EST" or similar, but I'm not entirely sure how you need to write it down if just plain EST doesn't work.

So unless pineapple can fix the issue himself by fiddling with the data file (either by changing the timezone or changing the times to be more accurate), you probably shouldn't trust the countdown page until the european timelight saving switch happens. I had concerns over daylight savings back when I originally made the thing, but because (I think?) season three had already ended by this time in March I never checked it out properly.

Sorry for the hassle. The new episode was cute.

I've been thinking of doing some improvements to the ponk clock, and someone pointed out HTML5 or support for non-flash devices.

That got me thinking that I could do just that, because Flash is what it is, and that it'd make it possibly more maintainable for anyone that is not me. Even if I were to give the original .FLAs, the code is a mess since I whipped most of it in a hurry.

Just basically port most if not all of its functionality, and give it a pixel art aesthetic. Would be neat, no?

>>1966
This would be very neat, yes!

>>1966
Oh, I like that

First "oh god what am I doing" stable release is online:
http://mrponiator.github.io/ponkaclock/

Imgur gallery for the different ponka pictures can be found here: http://imgur.com/a/Efmi6

Here's a quick feature/changes list:
1. Data.txt is fully compatible with the current flash-based ponka clock. However, there's a few additions:

- Support for episode synopses via 'ep#_synopsis'. Click on the '?' button to view given episode's synopsis in the clock.
ex: ep1_synopsis=Ponies being ponies.

- You can set the default scaling via 'scale'. Similarly you can set the maximum scale with 'scale_max' (I recommend keeping this value at 2~4, default in my example is 3). If mobile device is detected, 'scale_mobile' is used instead.

- You can set the initial volume with 'volume'. Keep this between 0.0 (muted) and 1.0 (maxed).

- Flash ponka clock ignores these values, so they shouldn't cause any conflict. Similarly, this clock does not read the 'startTypeToggles', as it's not needed.

2. Instead of immediately saying "Already aired!", it will say how long ago the episode started if it has been less then 30 minutes.

3. Instead of clicking anywhere inside the clock, you turn alarms off by clicking on the corresponding alarm icon (small alarm clock for episode alarms, bigger for alarm clock). Toggling mute and looping will also stop the alarm.

4. You can change the default alarm sounds by changing 'alarm1.ogg/mp3/wav' and 'alarm2.ogg/mp3/wav' files inside the src folder. By default the clock checks for OGG, MP3 or WAV support in that order. Whatever responds first to true will be loaded. If none of those is supported, a message will be displayed above the clock with the "audio_compability" [sic] div element.

5. Mobile version only supports cycling between episodes and synopses. It has a slightly different UI from the regular view, too. I decided not to support alarm sounds on Android/iOS due to not having an iPhone, or sufficient testing tools.

6. You can change the ponka .png files in the src folder to whatever you'd like. I'd recommend keeping them 50x67 so that they'll display properly, and keep the file names the same.

7. There's a plain text version available. It only displays the countdown, next episode's name and automatically switches to the next as time passes.

[Setting up]
I will write more formal instructions on the github page later, but here's a quick run-down:
- Link jQuery 1.11.1* in your HTML file of choice. My github version uses google hosted one, but you may just use your own local copy or download one.
- From the index.html, copy lines 44 through 53 and place them in your HTML file's <body>.
- Optional, but for centering on your HTML page you could also copy the CSS code.
- Download data.txt and the 'src' directory, and place them in the same directory as your HTML file.
- You should be done. It should be noted that because the clock loads a couple of files via AJAX, it will not work in chrome if opened locally. Firefox plays it fine locally, however.

*= This version was chosen due to jQuery mobile, which I dropped at the last minute. Oops.

–

Hopefully it works for you fellows.

>>1970
Hm, hold on a second. Seems like android chrome is broken, since I doesn't seem to respond to clicks. I'll look into it.

>>1970
>using getElementById on existing html elements instead of creating and inserting your own in the script (could avoid needing html at all with this)
>using jquery selectors every time you interact with an element instead of storing a reference (see above)
>having all the code in the global scope instead of wrapping it in a function
>not using $(document).ready so the script can be put in the <head> instead of <body>
>using a weird ass text file for the data instead of superior JSON
>that code indentation what the fuck

Otherwise looks pretty good

>>1972
I'm by no means very good at JS/HTML (most web design magics is arcane to me), so I'm open to suggestions/improvements. Those are some good pointers for startes. The intendation is especially wonky since I kept the .js code in the .html file for the longest time before separating the two. I'll likely fix that later.

The weird ass text-file is for the backwards compatibility with the flash version, which was done at a time when loading a .txt file and decoding it like URI felt like a good/quickest idea to me.

>>1971
Changed the touchstart events just slightly. Should work better now.

>>1972
>Wrapped the contents of both .js files into their own functions.
I wasn't aware that this behavior is possible with JS. Neat!
>Now uses $(document).ready() in <head>
>Stored most getElementById and jQuery(element) calls (why was I using those interchangeably?) into container variables
>Other general fixes

Thanks for the feedback anon.

I also removed the old alarm files (the same files that the flash clock uses internally), but they can be downloaded from here if you please: http://a.pomf.se/hrhmay.zip

>>1975
>$.getScript

That doesn't really change much since it only begins loading the script when the entire page is ready.

You can just replace in the js file:
(function() {
with
$(document).ready(function() {

and put this in the <head>:
<script src="src/ponka_clock.js"></script>

to make it load with the rest of the page and execute immediately when the DOM is ready.

>>1976
Ah, okay. Thanks for the pointer.

>>1977
Also, remove that extra () at the end. It causes an error.

>>1978
Done and done. Should've figured that one out.

Found the .FLA for the most recent flash ponk clock version, and after some tinkering I made the following changes:

- Changed the input file to use JSON instead of the URI text formatting.
- Added the synopsis feature to the flash version (click the timer to bring it up, click it again or the synopsis window to close)

Give it a go: http://mrponiator.github.io/ponkaclock/clock_flash.html

A note on the Canvas version: There's no automatic word-wrap (as of yet, anyway), so for episode synopses you need to use "*" if you wish to format it better. Otherwise it may cut words in the middle. The flash version has word-wrap, so it interprets it as an empty space.

Also did some general code clean-up, and categorized the source files better on the repo.

>>1980
Another suggestion: JSON can do more than just key-value pairs, you can format it better like so:

http://pastebin.com/raw.php?i=QwYuCSgg

You don't even need a "number_of_episodes" value because you can just do episodes.length in javascript to get the number of episodes.

It can also store booleans, so you can replace "custom_message":"false" with "custom_message":false.

I added automatic word wrap for the synopses, and altered the synopsis GUI just slightly to make longer descriptions fit better.

There was also an accidental typo that caused the UI not to draw in the mobile version.

>>1981
The flash clock tries to find the relevant episode keys, and automatically assumes it to be "TBA" if it doesn't exist (I had forgotten to actually implement this in the other clocks until now), and thus you can just fill stuff in as more information comes out, whatever the order may be.

I pondered on the arrays, and just decided to go with the same structure as before for the sake of simplicity. Regular ordered arrays can't really do the "skipping" behavior as described above without having empty fields. Making each episode an object would make the formatting prettier, though.

As for the boolean thing, I couldn't get the flash version to work with it, so I used a string instead (but the numbers worked as is? what). Would need to dig deeper to find out why.

Randumb you are awesome! Got the countdown page updated last night.