Prerequisites
- a working development environment, see how to set this up here.
- a finished solution of Tutorial Create a Connect IQ Data Field With Direct dc.draw() calls (you can download my solution file here)
Why?
For people it’s usually more enjoyable if they can use a program in their mother tongue.Create the main resource

Edit the main resources of the application by navigating to resources -> strings -> strings.xml. Right click and choose Open With -> Text Editor and provde the resource names and resource values:
1 2 3 4 5 6 7 |
<strings> <string id="AppName">Steps Carousel</string> <string id="TotalSteps">Total</string> <string id="ActiveSteps">Steps</string> <string id="StepsToDo">To Go</string> <string id="GoalPercentage">Goal (%)</string> </strings> |
Create the translated resources
For each language that we will support we now have to create values in the corresponding resources group.In this tutorial we’re going to provide resources for the dutch language.
- Copy the strings folder from the main resources to the language specific folder (resources-dut in our example) (CTRL+Click&Drag – Choose Copy Files and Folders)
- Edit the strings.xml file (Right Click. Open With -> Text Editor) and provide the translations:
1 2 3 4 5 6 7 |
<strings> <string id="AppName">Steps Carousel</string> <string id="TotalSteps">Totaal</string> <string id="ActiveSteps">Stappen</string> <string id="StepsToDo">Te Gaan</string> <string id="GoalPercentage">Doel (%)</string> </strings> |
Alter the code to use the resources
The resources internal representation is a number (and not the actual text).To show the actual text from the resource (in the current language) an extra function call is necessary.
We change the variable name from label to labelResource and initialize it with the resource value for the TotalSteps. We also change the variable name mValue to just be named as value:
1 2 |
hidden var value = 0.0f; hidden var labelResource = Rez.Strings.TotalSteps; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// The given info object contains all the current workout // information. Calculate a value and save it locally in this method. function compute(info) { var activityMonitorInfo = Toybox.ActivityMonitor.getInfo(); if (timerRunning) { stepsRecorded = activityMonitorInfo.steps - stepsNonActive; ticker++; } var timerSlot = (ticker % 20); // modulo the number of fields (4) * number of seconds to show the field (5) if (timerSlot <= 4) { // first slot? labelResource = Rez.Strings.TotalSteps; value = activityMonitorInfo.steps; } else if (timerSlot <= 9) { labelResource = Rez.Strings.ActiveSteps; value = stepsRecorded; } else if (timerSlot <= 14) { labelResource = Rez.Strings.StepsToDo; value = (activityMonitorInfo.stepGoal - activityMonitorInfo.steps); if (value < 0) { value = 0; } } else if (timerSlot <= 19) { labelResource = Rez.Strings.GoalPercentage; value = (activityMonitorInfo.steps * 100.0) / activityMonitorInfo.stepGoal; } else { value = 0; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Display the value you computed here. This will be called // once a second when the data field is visible. function onUpdate(dc) { var width = dc.getWidth(); var height = dc.getHeight(); var textCenter = Gfx.TEXT_JUSTIFY_CENTER | Gfx.TEXT_JUSTIFY_VCENTER; var backgroundColor = getBackgroundColor(); // set background color dc.setColor(backgroundColor, Graphics.COLOR_TRANSPARENT); dc.fillRectangle (0, 0, width, height); // set foreground color dc.setColor((backgroundColor == Gfx.COLOR_BLACK) ? Gfx.COLOR_WHITE : Gfx.COLOR_BLACK, Graphics.COLOR_TRANSPARENT); // do layout if (isSingleFieldLayout()) { dc.drawText(width / 2, height / 2 - 40, Gfx.FONT_TINY, Ui.loadResource(labelResource), textCenter); dc.drawText(width / 2, height / 2 + 7, Gfx.FONT_NUMBER_THAI_HOT, value.format(valueFormat), textCenter); } else { dc.drawText(width / 2, 5 + (height - 55) / 2, Gfx.FONT_TINY, Ui.loadResource(labelResource), textCenter); dc.drawText(width / 2, (height - 23) - (height - 55) / 2 - 1, Gfx.FONT_NUMBER_HOT, value.format(valueFormat), textCenter); } } |
Test your data field
In the simulator:- Start the timer (Data Fields -> Timer -> Start Activity)
- Change the language (Settings -> Language ->)
Source Code
You can download the full source code from github or download a local copy hereIn the next tutorial we’ll learn how to create a unit test project
Feedback
Did you like this article?Questions?- Post in the comments section below!
Du har väl vad de kallar honom: Ljugholt. Det tycks stämma in på honom nu när det framkommit att han visste om reglerna för ett år sen men struntade i dom.