Changeset 86 in t29-www


Ignore:
Timestamp:
Mar 21, 2009, 12:19:25 AM (15 years ago)
Author:
sven
Message:

Telefunken T40W:

  • Bilddateien in eigenes Verzeichnis verschoben
  • Slider um Automatik-Play-Modus erweitert

Heribert hat zwar schon nen Text geschrieben, den ich aber
versehentlich ueberschrieben habe. Der kommt also morgen.

-- Sven @ t29

Files:
3 added
4 edited
3 moved

Legend:

Unmodified
Added
Removed
  • de/geraete/telefunken_t40w.shtm

    r85 r86  
    22     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    33<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    4 <head><!--#set var="title"        value="Telefunken T40W"
     4<head><!--#set var="title"        value="Telefunken T 40W"
    55   --><!--#set var="location"     value="telefunkent40w"
    66   --><!--#set var="part"         value="extra"
    77   --><!--#set var="url_en"       value="devices/telefunken_t40w.shtm"
    8    --><!--#set var="title_en"     value="Telefunken T40W"
     8   --><!--#set var="title_en"     value="Telefunken T 40W"
    99   --><!--#set var="prev"         value="/de/kommunikationstechnik/rundfunk.shtm"
    1010   --><!--#set var="prev_title"   value="Rundfunk"
     
    2626     slider[1].max = 100;
    2727     slider[1].val = 0;
     28     slider[1].playerStepTimeout = 50; // ms
     29     slider[1].playerStepDistance = 0.8; // in min/max/val-Einheiten!
     30     slider[1].playerStopLabel = "Animation stoppen";
     31     slider[1].playerStartLabel = "Animation starten";
     32     slider[1].playerRepeatLabel = "Animation wiederholen"
     33     slider[1].playerAutoReverse = false;
     34     slider[1].playerAutoStart = true;
     35     slider[1].playerRepeatFromMin = true;
    2836     slider[1].onchange = setTransparency;
    2937
    3038     function setTransparency(val, blubb) {
    3139         val = val / 100; // normierung auf [0,1]
    32          document.getElementById("zu").style.opacity = 1-val;
    33          //document.getElementById("offen").style.opacity = val;
     40         // bereits ab 0.75 ist der Kasten nicht mehr zu sehen
     41         setOpacity("zu",            -val/0.75 + 1);
     42         // ab 0.75 erscheint die Beschriftung, hoch 3 potenziert
     43         setOpacity("beschriftung",  Math.pow(val - 0.75, 3)*64 );
     44         // linearer Zuwachs, okay:
     45         //setOpacity("beschriftung",  (val-0.75)*4  );
     46         //document.getElementById("zu").style.opacity = 1-val;
     47         //document.getElementById("beschriftung").style.opacity = val / 2;
     48         ////document.getElementById("offen").style.opacity = val;
     49     }
     50
     51     function setOpacity(id, value) {
     52         if(value >= 1) value = 1.0;
     53         if(value <= 0) value = 0;
     54         document.getElementById(id).style.opacity = value;
    3455     }
    3556    </script>
     
    4162          top: 0; left: 0;
    4263      }
    43       #rel { position: relative; }
     64      #beschriftung {
     65          position: absolute;
     66          top: -53px;
     67          left: -36px;
     68      }
     69      #zu           { z-index: 3 }
     70      #beschriftung { z-index: 2; }
     71      #offen        { z-index: 1; }
     72      #rel          { position: relative; margin-bottom: 80px; margin-top: 60px; }
    4473    </style>
    4574</head>
     
    5180    <div class="box center">
    5281      <div id="rel">
    53         <img id="offen" src="/shared/photos/kommunikationstechnik/telefunken_t40w-offen.jpg" />
    54         <img id="zu" src="/shared/photos/kommunikationstechnik/telefunken_t40w-geschlossen.jpg" />
     82        <img id="offen" src="/shared/photos/kommunikationstechnik/telefunken_t40w/offen.jpg"
     83             alt="Telefunken T40W: Sicht auf die Elektronik/das Innenleben" />
     84        <img id="zu" src="/shared/photos/kommunikationstechnik/telefunken_t40w/geschlossen.jpg"
     85             alt="Telefunken T40W: Sicht auf das geschlossene Gehäuse" />
     86        <img id="beschriftung" src="/shared/photos/kommunikationstechnik/telefunken_t40w/beschriftung.png"
     87             alt="Telefunken T40W Legende: Beschriftung der Verstärkerstufen, Röhren, etc." />
    5588      </div>
    56         <div class="slider" id="slider01">
    57            <div class="left"></div>
    58            <div class="right"></div>
    59            <img src="/shared/js/slider/img/knob.png" width="31" height="15" />
    60         </div>
     89      <div id="controls">
     90         <noscript>Bitte aktivieren sie in ihrem Browser JavaScript, um
     91           die Animation betrachten zu können.</noscript>
     92         <div class="cols">
     93           <div class="leftcol">
     94             <input type="button" value="Abspielen" id="slider-button1" />
     95             <div class="slider" id="slider01">
     96                <div class="left"></div><div class="right"></div>
     97                <img src="/shared/js/slider/img/knob.png" width="31" height="15" />
     98             </div>
     99           </div><!--left-->
     100           <div class="rightcol">
     101               Benutzen sie den Schieberegler, um einen Einblick in das
     102               Gerät erhalten zu können, oder klicken sie auf "Animation
     103               starten"
     104           </div><!--right-->
     105           <div class="clear"></div>
     106         </div><!--cols-->
     107       </div><!--controls-->
    61108    </div>
    62109
    63     <p>Benutzen sie den Schieberegler, um einen Einblick in das
    64        Gerät erhalten zu können.</p>
     110    <p>Hier steht viel erläuternder Text, der sich möglicherweise noch einiger anderer
     111       Bilder bedient, je nach Belieben.</p>
     112
    65113
    66114</div><!-- content -->
  • de/kommunikationstechnik/rundfunk.shtm

    r85 r86  
    4545      </div>
    4646
    47       <!--
    48         Dieser Text steht noch nicht offiziell in der Homepage:
     47     <p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bal und blibliblib bli li asdalsdjalsdjlaskd
     48asd asdkalsdkjalsdjkalsdj alsdk jasldk jasldk al</p>
     49
    4950      <div class="box right">
    50          <a href="/de/geraete/telefunken_t40w.shtm"><img src="/shared/photos/kommunikationstechnik/telefunken_t40w-klein.jpg" alt="Fotografie des Telefunken T40W" class="nomargin-bottom" /></a>
     51         <a href="/de/geraete/telefunken_t40w.shtm"><img src="/shared/photos/kommunikationstechnik/telefunken_t40w/klein.jpg" alt="Fotografie des Telefunken T40W" class="nomargin-bottom" /></a>
    5152         <p class="bildtext">Dies ist ein netter Text zu dem Bild, bei dem sooo viel nette Spielerei passiert. Siehe dazu auch <a href="/de/geraete/telefunken_t40w.shtm" class="go">die Extraseite "Telefunken t40w"</a></p>
    5253         <div class="clear">&nbsp;</div>
    5354      </div>
    54       -->
    5555
    5656      <p>Die n&auml;chsten Bilder zeigen beispielhaft Ger&auml;te, die sich optisch und auch von der Technik her hervorheben. Jedoch lie&szlig;e sich diese Bildergalerie beliebig weiterf&uuml;hren.
  • shared/css/fresh.css

    r37 r86  
    216216**/
    217217.rundfunk #wrapper, .tontechnik #wrapper, .ultramar #wrapper, .telefunken650 #wrapper,
    218 .schaub-lorenz-supraphon #wrapper
     218.schaub-lorenz-supraphon #wrapper, .telefunkent40w #wrapper
    219219    { background-image: url(../img/fresh.design/menu-bg/rundfunk.jpg); }
    220220.fernsehen #wrapper, .saba-telerama #wrapper
  • shared/js/slider/slider.js

    r85 r86  
    44 * This is a lightweight slider implementation originally from
    55 * http://www.arantius.com/article/lightweight+javascript+slider+control
    6  * (2006 Anthony Lieuallen)
     6 * (2006 Anthony Lieuallen).
     7 * It has been improved a lot to fully implement the requirements of
     8 * technikum29.
    79 *
     10 * FEATURES of the slider + player extension:
    811 *
     12 * * basic features: Can be used as simple slider in a user defined
     13 *   range and with an user defined call back function.
     14 * * There can be as much sliders on your page as you want.
     15 * * player features: The player imitates some kind of media player
     16 *   where the slider is the actual position in the played file.
     17 *   Principally, it's a highly configurable extension that simply
     18 *   increases/decreases your slider value on a regular basis.
     19 *
     20 * This script uses advanced DOM technologies like they are typical
     21 * for huge javascript libraries like prototype. Anyway, it's very
     22 * small for it's features.
     23 *
     24 * This script is used for the Telefunken T40W page.
     25 *
     26 * (c) 2009 Sven Koeppel
     27 * Released under the public domain.
    928 */
    1029
     
    6887}
    6988/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
     89/**
     90 * function attachSliderEvents: Called at window onload, parses
     91 * DOM tree to get slider widgets and setup events for mouse
     92 * capturing. This will also setup the player button/extension.
     93 **/
    7094function attachSliderEvents() {
    7195        var divs=document.getElementsByTagName('div');
    72         var divNum;
     96        var divNum, playerButton;
    7397        for(var i=0; i<divs.length; i++) {
    7498                if (divNum=divs[i].id.match(/\bslider(\d+)\b/)) {
    75                         // set initial properties
    7699                        divNum=parseInt(divNum[1]);
    77                         divs[i].min=slider[divNum].min;
    78                         divs[i].max=slider[divNum].max;
    79                         divs[i].val=slider[divNum].val;
    80                         divs[i].onchange=slider[divNum].onchange;
    81                         divs[i].num=divNum;
     100                        // copy initial properties
     101                        for(var key in slider[divNum]) {
     102                                divs[i][key] = slider[divNum][key];
     103                        }
     104                        divs[i].num = divNum;
     105
    82106                        // and make sure the display matches
    83107                        drawSliderByVal(divs[i]);
    84108                        divs[i].onchange(divs[i].val, divNum);
     109
     110                        if(playerButton=document.getElementById('slider-button'+divNum)) {
     111                                divs[i].isPlayable = true;
     112                                // announce them to each other
     113                                divs[i].playerButton = playerButton;
     114                                playerButton.slider = divs[i];
     115                                // setup button
     116                                setPlayerLabel(divs[i]);
     117                                addAnEvent(playerButton, 'click', function(e){
     118                                        togglePlayer(this.slider);
     119                                });
     120                                // auto start support
     121                                if(divs[i].playerAutoStart)
     122                                        startPlayer(divs[i]);
     123                        } else {
     124                                divs[i].isPlayable = false;
     125                        }
    85126
    86127                        addAnEvent(divs[i], 'mousedown', function(e){
     
    98139        }
    99140}
     141
     142/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
     143/**
     144 * startPlayer(slider): This will start the player extension (moving the
     145 * slider automatically).
     146 **/
     147function startPlayer(slider) {
     148        if(slider.isPlaying) stopPlayer(slider);
     149        if(slider.isPlayerPreparingRepeatFromMin) {
     150                // we are now starting from minimum.
     151                slider.isPlayerPreparingRepeatFromMin = false;
     152                // rewind rapidly back to minimum
     153                /*while(slider.val > slider.min) {
     154                        slider.val -= slider.playerStepDistance * 100;
     155                        drawSliderByVal(slider);
     156                        slider.onchange(slider.val, slider.num);
     157                }*/
     158                slider.val = slider.min;
     159        }
     160        slider.isPlaying = true;
     161        setPlayerLabel(slider);
     162        slider.playerInterval = window.setInterval(function(slider){
     163                slider.val += slider.playerStepDistance;
     164                if(slider.val > slider.max) {
     165                        slider.val = slider.max;
     166                        if(slider.playerAutoReverse)
     167                                slider.playerStepDistance *= -1;
     168                        else
     169                                stopPlayer(slider);
     170                        if(slider.playerRepeatFromMin) {
     171                                slider.isPlayerPreparingRepeatFromMin = true
     172                                setPlayerLabel(slider);
     173                        }
     174                } else if(slider.val < slider.min) {
     175                        slider.val = slider.min;
     176                        if(slider.playerAutoReverse)
     177                                slider.playerStepDistance *= -1;
     178                        else
     179                                stopPlayer(slider);
     180                }
     181                drawSliderByVal(slider);
     182                slider.onchange(slider.val, slider.num);
     183        }, slider.playerStepTimeout, slider);
     184}
     185
     186/**
     187 * stopPlayer(slider): This function does exactly what you think it
     188 * will do (see startPlayer).
     189 **/
     190function stopPlayer(slider) {
     191        slider.isPlaying = false;
     192        setPlayerLabel(slider);
     193        window.clearInterval(slider.playerInterval);
     194}
     195
     196/**
     197 * setPlayerLabel(slider): Set the player button label according to
     198 * the current state (whether the slider is currently playing or not)
     199 **/
     200function setPlayerLabel(slider) {
     201        if(!slider.isPlayable) return false;
     202        if(slider.isPlaying) {
     203                slider.playerButton.value = slider.playerStopLabel?slider.playerStopLabel:'|_| Stop';
     204        } else if(slider.isPlayerPreparingRepeatFromMin) {
     205                slider.playerButton.value = slider.playerRepeatLabel?slider.playerRepeatLabel:'|<< Repeat';
     206        } else {
     207                slider.playerButton.value = slider.playerStartLabel?slider.playerStartLabel:'> Start';
     208        }
     209}
     210
     211/**
     212 * togglePlayer(slider): Start/Stop the slider player according to
     213 * the current state (wheter the slider is currently playing or not)
     214 **/
     215function togglePlayer(slider) {
     216        if(slider.isPlaying) {
     217                stopPlayer(slider);
     218        } else {
     219                startPlayer(slider);
     220        }
     221}
     222
    100223/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
    101224//borrowed from prototype: http://prototype.conio.net/
Note: See TracChangeset for help on using the changeset viewer.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License