|
1 |
| -<App Theme="Basic" ux:Class="Circular"> |
| 1 | +<App ux:Class="Circular"> |
2 | 2 | <Panel ux:Class="ClockTick" ux:Name="self">
|
3 | 3 | <string ux:Property="Text"/>
|
4 | 4 | <float ux:Property="ClockValue"/>
|
|
20 | 20 | <ClientPanel Background="0.8,0.8,0.8,1">
|
21 | 21 | <JavaScript>
|
22 | 22 | var Observable = require("FuseJS/Observable")
|
23 |
| - |
| 23 | + |
| 24 | + function formatTime(x) { |
| 25 | + var q = x.toFixed(0) |
| 26 | + if (x < 10) { |
| 27 | + return "0" + q |
| 28 | + } |
| 29 | + return q |
| 30 | + } |
| 31 | + |
24 | 32 | exports.hoursX = Observable(0)
|
25 | 33 | exports.hoursY = Observable(0)
|
26 | 34 | exports.hours = Observable(function() {
|
27 | 35 | return exports.hoursX.value + exports.hoursY.value * 12
|
28 | 36 | })
|
| 37 | + exports.displayHours = exports.hours.map(function(x) { |
| 38 | + return formatTime(x) |
| 39 | + }) |
29 | 40 | exports.minutes = Observable(0)
|
| 41 | + exports.displayMinutes = exports.minutes.map(function(x) { |
| 42 | + return formatTime(x) |
| 43 | + }) |
30 | 44 |
|
31 | 45 | exports.selectHour = function(args) {
|
32 | 46 | exports.hoursX.value = args.value%12
|
|
46 | 60 | </WhileTrue>
|
47 | 61 |
|
48 | 62 | <Panel Dock="Top" Margin="0,0,0,10">
|
49 |
| - <StackPanel Orientation="Horizontal" Alignment="Center"> |
50 |
| - <Style> |
51 |
| - <Text FontSize="24" TextColor="0,0.5,0.8,1"/> |
52 |
| - </Style> |
53 |
| - <Number Value="{hours}" Format="00" Padding="10,0,10,0" HitTestMode="LocalBounds"> |
| 63 | + <StackPanel Orientation="Horizontal" Alignment="Center" ItemSpacing="10"> |
| 64 | + <Text ux:Class="ClockText" FontSize="24" TextColor="0,0.5,0.8,1"/> |
| 65 | + <ClockText Value="{displayHours}" HitTestMode="LocalBounds"> |
54 | 66 | <Tapped>
|
55 | 67 | <Set ShowMinutes.Value="false"/>
|
56 | 68 | </Tapped>
|
57 |
| - </Number> |
58 |
| - <Text Value=":"/> |
59 |
| - <Number Value="{minutes}" Format="00" Padding="10,0,10,0" HitTestMode="LocalBounds"> |
| 69 | + </ClockText> |
| 70 | + <ClockText Value=":"/> |
| 71 | + <ClockText Value="{displayMinutes}" HitTestMode="LocalBounds"> |
60 | 72 | <Tapped>
|
61 | 73 | <Set ShowMinutes.Value="true"/>
|
62 | 74 | </Tapped>
|
63 |
| - </Number> |
| 75 | + </ClockText> |
64 | 76 | </StackPanel>
|
65 | 77 | </Panel>
|
66 | 78 |
|
|
77 | 89 | <ClockHand ux:Name="TheHourLine">
|
78 | 90 | <Rotation ux:Name="HourRotate"/>
|
79 | 91 | <Attractor Target="HourRotate.Degrees" Value="{Property HourSlide.DegreesValue}"
|
80 |
| - SimulationType="SmoothSnapAngularDegrees"/> |
| 92 | + Type="SmoothSnap" Unit="Degrees"/> |
81 | 93 |
|
82 | 94 | <Attractor Target="TheHourLine.Width" ux:Name="HourLineAttractor"
|
83 |
| - SimulationType="SmoothSnapPoints"/> |
| 95 | + Type="SmoothSnap" Unit="Points"/> |
84 | 96 | <RangeAnimation Value="{Property HourSelect.ValueY}" Minimum="0" Maximum="1">
|
85 | 97 | <Change HourLineAttractor.Value="41.5"/>
|
86 | 98 | </RangeAnimation>
|
|
132 | 144 | <ClockHand Width="41.5%">
|
133 | 145 | <Rotation ux:Name="MinuteRotate"/>
|
134 | 146 | <Attractor Target="MinuteRotate.Degrees" Value="{Property MinuteSlide.DegreesValue}"
|
135 |
| - SimulationType="SmoothSnapAngularDegrees"/> |
| 147 | + Type="SmoothSnap" Unit="Degrees"/> |
136 | 148 | </ClockHand>
|
137 | 149 |
|
138 | 150 | <Circle Layer="Background" Fill="1,1,1,1"/>
|
|
0 commit comments