10-05-2017 13:05
10-05-2017 13:05
I am able to get some buttons on my Ionic following the documentation. However, I cannot get text to paint inside the buttons.... Any ideas?
Here is the code I am using:
Resources\index.gui:
<svg>
<use id="mybutton2" href="#square-button" y="5" fill="fb-red">
<set href="#text" attributeName="text-buffer" to="Click Me!" />
</use>
<use id="mybutton3" href="#square-button" y="75" fill="coral">
<set href="#text" attributeName="text-buffer" to="Steps" />
<set href="#image" attributeName="href" to="steps.png" />
<set href="#image" attributeName="display" to="inline" />
</use>
</svg>
app/index.js:
import document from "document";
let mybutton = document.getElementById("mybutton2");
mybutton.onactivate = function(evt) {
console.log("CLICKED!");
}
The buttons are displayed as empty rectangles with no text inside....
Any help greatly appreciated - coming from a Borland Delphi / Oracle PLSQL background trying to write some basic apps to get my feet wet again...
Answered! Go to the Best Answer.
10-05-2017 14:29
10-05-2017 14:29
The color was apparently defaulted to black - I changed the color and it is appearing:
<text id="BallCnt" font-family="System-Regular" fill="blue">B </text>
<text id="StrikeCnt" font-family="System-Regular" fill="blue">S </text>
10-05-2017 13:19
10-05-2017 13:19
Here is the code of my square button: the only difference is that I have given a width.
<use id="scoreA" href="#square-button" x="220" y="30" width="100" fill="fb-white">
<set href="#text" attributeName="text-buffer" to="0" />
</use>
Also try to remove "mybutton3" for a first try.
10-05-2017 13:25
10-05-2017 13:25
I think you need to apply some default styling to the text.
Try:
text { font-family: System-Regular; }
10-05-2017 14:06
10-05-2017 14:06
Tried both solutions - maybe I did it wrong?
Trying to create two button and two text areas - the buttons and images show up, but NO TEXT shows up
Resources\index.gui:
<svg>
<use id="mybutton2" href="#square-button" width = "100" y="180" fill="fb-red">
<set href="#text" attributeName="text-buffer" to="Ball" />
<set href="#image" attributeName="href" to="ball.png" />
<set href="#image" attributeName="display" to="inline" />
</use>
<use id="mybutton3" href="#square-button" width = "100" x = "110" y="180" fill="coral">
<set href="#text" attributeName="text-buffer" to="Strike" />
<set href="#image" attributeName="href" to="strike.png" />
<set href="#image" attributeName="display" to="inline" />
</use>
<text id="BallCnt" font-family="System-Regular">B </text>
<text id="StrikeCnt" font-family="System-Regular">S </text>
</svg>
In app\index.js I put in code to code the button presses and the console shows me that the button presses are being counted properly with each button press, but I cannot get any display for buttons or text:
app\index.js
import document from "document";
var BallCount = 0;
var StrikeCount = 0;
var Ball = document.getElementById("BallCnt");
Ball.x = 10;
Ball.y = 10;
var Strike = document.getElementById("StrikeCnt");
Strike.x = 10;
Strike.y = 70;
let mybutton = document.getElementById("mybutton2");
mybutton.onactivate = function(evt) {
BallCount=BallCount+1;
Ball.innerText = "B: "+BallCount;
Ball.style.display = "inline";
console.log("Ball " +BallCount);
}
let mybutton2 = document.getElementById("mybutton3");
mybutton2.onactivate = function(evt) {
StrikeCount = StrikeCount+1;
Strike.innerText = "B: "+StrikeCount;
Strike.style.display = "inline";
console.log("Strike "+StrikeCount);
}
Thanks for the two suggestions, Can't seem to make it work... Something I must be missing to get text to display....
10-05-2017 14:29
10-05-2017 14:29
The color was apparently defaulted to black - I changed the color and it is appearing:
<text id="BallCnt" font-family="System-Regular" fill="blue">B </text>
<text id="StrikeCnt" font-family="System-Regular" fill="blue">S </text>
10-05-2017 14:33
10-05-2017 14:33
Thanks for letting me know
04-08-2018 13:18 - edited 04-08-2018 13:36
04-08-2018 13:18 - edited 04-08-2018 13:36
deleted post to create new question.