Check the signal strength using the Console View
In this tutorial we will use the “Device Module View” in the Ikivo IDE to simulate changing of the signal strength.
If you already have a project opened, you can use this one. If not, begin with open a project (File -> New Project)
• Create a new SVG Tiny File in the Ikivo IDE (File -> New…)
• Replace “Add your SVG code here” with the following code:
<![CDATA[
<rect id="full" x="160" y="100" width="20" height="50" fill="blue"
stroke="blue"/>
<rect id="medium" x="135" y="110" width="20" height="40" fill="blue"
stroke="blue"/>
<rect id="small" x="110" y="120" width="20" height="30" fill="blue"
stroke="blue"/>
<rect id="empty" x="85" y="130" width="20" height="20" fill="blue"
stroke="blue"/>
]]>
• Debug your file and watch the result in the Playback View. If you have done everything correctly, four rectangles should appear representing the signal strength.
Now it’s time to add the script that will interact with the Device Module. The goal is to change the signal strength in the Device Module and be able to se the change in the Playback View.
<![CDATA[
<script type="text/ecmascript"><![CDATA[
var updateTimer = createTimer(10, 45);
updateTimer.addEventListener("SVGTimer", tick, false);
updateTimer.start();
]]]]><![CDATA[></script>]]>
The Device Module won’t tell us when the signal strength has changed. Therefore it is necessary to create a timer that will ask the Device Module for the signal strength. As you can see, we have created a timer and added an event listener to it that listens for SVGTimer events and calls for our “tick” function that we will create now.
• Add the following function within the script tag under the variable declarations:
<![CDATA[
function tick(){
var signal = ikivo.device.signalStrength;
if(signal == 0) {
document.getElementById("empty").setTrait("fill",
"none");
}
if(signal < 0.25) {
document.getElementById("small").setTrait("fill",
"none");
}
if(signal < 0.5) {
document.getElementById("medium").setTrait("fill",
"none");
}
if(signal < 0.75){
document.getElementById("full").setTrait("fill",
"none");
}
}
]]>
The tick function asks the Device Module for the signal strength. The Device Module returns a float between 0 and 1. If the number is below the limit that we have decided for each SVG element, the fill change from “blue” to “none” and the element is no longer visible. You can try your code by debugging your file and drag down the signal strength in the Device Module.
As you probably have noticed, the SVG elements disappear when you drag down the signal strength, but they don’t appear again when the signal strength gets better. To fix this is easy; we just do the same if-statements as before but change the display from “none” to “blue”.
• Add the code below to your function, right before the closing of the function tick.
<![CDATA[
if(signal > 0) {
document.getElementById("empty").setTrait("fill",
"blue");
}
if(signal > 0.25) {
document.getElementById("small").setTrait("fill",
"blue");
}
if(signal > 0.5) {
document.getElementById("medium").setTrait("fill",
"blue");
}
if(signal > 0.75){
document.getElementById("full").setTrait("fill",
"blue");
}]]>
Debug your file and try to change the signal strength while keeping an eye on the Playback View. As you can see, your signal strength can now both get worse and better.
|
