Add button

95 views
Skip to first unread message

Ghanem O

unread,
Aug 7, 2019, 6:50:55 AM8/7/19
to MIT App Inventor Forum
Is it possible to add two buttons. One button for increase the font and the other one is to decrease it  in the Webviewer by using Jquery.

<html> <head> <style> .divClass { font-size: 16px; background-color: #E3E3E3; width: 500px; padding: 5px; } </style> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#linkIncrease').click(function () { modifyFontSize('increase'); }); $('#linkDecrease').click(function () { modifyFontSize('decrease'); }); $('#linkReset').click(function () { modifyFontSize('reset'); }) function modifyFontSize(flag) { var divElement = $('#divContent'); var currentFontSize = parseInt(divElement.css('font-size')); if (flag == 'increase') currentFontSize += 3; else if (flag == 'decrease') currentFontSize -= 3; else currentFontSize = 16; divElement.css('font-size', currentFontSize); } }); </script> </head> <body style="font-family:Arial"> Font-Size: <a id="linkIncrease" href="#">Increase</a> <a id="linkDecrease" href="#">Decrease</a> <a id="linkReset" href="#">Reset</a> <br /><br /> <div id="divContent" class="divClass"> <b>jQuery Tutorial</b> <ul> <li>What is jQuery</li> <li>What is $(document).ready(function() in jquery</li> <li>Benefits of using CDN</li> <li>#id selector</li> <li>Element Selector</li> <li>class selector</li> <li>attribute selector</li> <li>attribute value selectors</li> <li>case insensitive attribute selector</li> <li>jQuery input vs :input</li> </ul> </div> </body> </html>
block.png

TimAI2

unread,
Aug 7, 2019, 7:47:47 AM8/7/19
to MIT App Inventor Forum
Why not just have the buttons on your web page, and use plain javascript, which doesn't require any additional libraries in the webviewer

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {font-size: "large";}
</style>
</head>
<body>

<button type="button"onclick="resizeText(1);">Increase</button>
<button type="button"onclick="resizeText(-1);">Decrease</button>
<div><p id="mytext">Hello World</p></div>

</body>
<script>

function resizeText(multiplier) {
  if (document.getElementById("mytext").style.fontSize == "") {
    document.getElementById("mytext").style.fontSize = "1.0em";
  }
  document.getElementById("mytext").style.fontSize = parseFloat(document.getElementById("mytext").style.fontSize) + (multiplier * 0.2) + "em";
}
</script>
</html>


Ghanem O

unread,
Aug 7, 2019, 8:08:40 AM8/7/19
to MIT App Inventor Forum
Thank you so much Tim. It works as your suggestion. But do you think that it is possible to stretch the size by using two fingers instead of two buttons I mean minimize and maximize the size.

TimAI2

unread,
Aug 7, 2019, 8:32:57 AM8/7/19
to MIT App Inventor Forum
That should just "work"

Ghanem O

unread,
Aug 7, 2019, 8:37:43 AM8/7/19
to MIT App Inventor Forum
Sorry. I didn't understand.
Do you mean that it doesn't work by using two fingers to resize the font.

TimAI2

unread,
Aug 7, 2019, 8:40:58 AM8/7/19
to MIT App Inventor Forum
Pinching "out" with two fingers should zoom the html page

Ghanem O

unread,
Aug 7, 2019, 8:45:24 AM8/7/19
to MIT App Inventor Forum
Pinching "out" with two fingers should zoom the html page that is right but some words would be out of canvas. Is there other solution.

TimAI2

unread,
Aug 7, 2019, 8:55:34 AM8/7/19
to MIT App Inventor Forum
I believe only by changing the font size in the html will ensure the text properly reflow on the viewable page...

You could probably use a slider (or thin canvas and ball) in your app to control the value of the webviewstring, which in turn would increase or decrease font size?

Ghanem O

unread,
Aug 7, 2019, 12:40:53 PM8/7/19
to MIT App Inventor Forum
Now I am trying to apply your code in my project by get csv text but I it doesn't work.

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
 <meta charset="UTF-8">
 <meta name="author" content="Osama">
<style>
body {
    text-align: justify;
    text-justify: inter-word;
}
@font-face {
   font-family: quran;
   src: url('me_quran.ttf');
}
@font-face {
   font-family: quran2;
   src: url('me_quran_volt_newmet.ttf');
}
.arab1a {
    direction: rtl;
font-family: quran;
    font-size: 18px;
}
.arab1b {
    direction: rtl;
font-family: quran2;
    font-size: 18px;
}
.highlight {
    background-color:#b9d5da; 
}

.div_style_block {
text-align: center;
border-bottom-style: solid; border-bottom-color: #E6E6FA;
}

.bg_green {
background-color:#F2F2F2;
}

.bg_grey {
background-color:#F2F2F2;
}

.div_style_inline {
    display: inline;
}
</style>
<script>

window.smoothScroll = function(target) {
    var scrollContainer = target;
    do { //find scroll container
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do { //find the top of target relatively to the container
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    scroll = function(c, a, b, i) {
        i++; if (i > 30) return;
        c.scrollTop = a + (b - a) / 30 * i;
        setTimeout(function(){ scroll(c, a, b, i); }, 20);
    }
    // start scrolling
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}

</script>

</head>
<body>

<button type="button"onclick="resizeText(1);">Increase</button>
<button type="button"onclick="resizeText(-1);">Decrease</button>
<div><p id="mytext">Hello World</p></div>
<script>
document.write(window.AppInventor.getWebViewString());
smoothScroll(document.getElementById('anchor'));
</script>

TimAI2

unread,
Aug 7, 2019, 4:44:09 PM8/7/19
to MIT App Inventor Forum
Should have asked this earlier:

  1. What will the content of the web page be?
  2. Does it have to be in a webviewer?
  3. Why do we need to increase or decrease the font size? Why not just make it as big as you want it?
  4. or why can't the user use the buttons ?

TimAI2

unread,
Aug 7, 2019, 4:46:55 PM8/7/19
to MIT App Inventor Forum
The html you posted will simply write the value of the webviewstring to the page

Not sure what value all your additional script has ? Is it all plain javascript ? Does nothing for me...

Without the ttf files, it is difficult to test the css elements...

Ghanem O

unread,
Aug 7, 2019, 5:10:44 PM8/7/19
to MIT App Inventor Forum
My app has 114 csv files and each file has a title. The user can download any csv from google drive by selecting the title from menu and GotText csv.
me_quran.ttf

TimAI2

unread,
Aug 7, 2019, 5:33:15 PM8/7/19
to MIT App Inventor Forum
csv ? Is this table content or plain text or what ?

TimAI2

unread,
Aug 7, 2019, 7:50:56 PM8/7/19
to mitappinv...@googlegroups.com
OK, I worked out the use of a slider to change the font size.

In order for the html to use a new webviewstring value I used a "timer" (setInterval) running at 500ms on the web page
For the slider I compared current versus previous thumb position values to create a boolean (plus or minus)
The javascript sees the new webviewstring value, tests it and changes font size accordingly, and makes no further changes until the webviewstring is changed by the user with the slider
This might need to happen more slowly if there is a lot of text to resize

html:



<!DOCTYPE html>
<html>
<head>
<style>
p {font-size: "large";}
</style>
</head>
<body>

<div><p id="mytext">Hello World</p></div>

</body>

<script>
window.setInterval(function(){
  if (window.AppInventor.getWebViewString() == "plus" ) {
  resizeText(1);
  window.AppInventor.setWebViewString("null");
  }
  else if (window.AppInventor.getWebViewString() == "minus" )  {
  resizeText(-1);
  window.AppInventor.setWebViewString("null");
  }
  }, 500);
increasefontinwebviewer.aia
fontsizeSlider.html
fontslider.webm
blocksfontslider.png

Ghanem O

unread,
Aug 8, 2019, 1:14:10 AM8/8/19
to MIT App Inventor Forum
Hi Tim,
Thank you so much for giving me a time to create a resize way. I tried what you suggested but I don't know how to make it my project. Please look .aia and give me the way how to do it. I really appreciate of your effort.
Regards,

https://drive.google.com/file/d/1wkkDoKJnGdY6C6Y2XQ3zQjGie-oPoy_k/view?usp=sharing

TimAI2

unread,
Aug 8, 2019, 4:58:52 AM8/8/19
to mitappinv...@googlegroups.com
Hi Osama

Once I had worked out what was going on in your blocks and html ( i see that Ghica wrote the original html :)  ) I have two working solutions for you.

The first one is using the buttons, which doesn't interfere with your current use of the webviewstring

The second one uses the slider, this works for me, even when you change texts in the webviewer, but I can't guarantee it won't break something as you develop further!
I had to make a small change to your arabtext procedure to give the div holding the text an id:

changetosetarabtextprocedure.png


The aia files will be attached after I submit this post.


EDIT: aia files removed at original posters request

Ghanem O

unread,
Aug 8, 2019, 6:20:09 AM8/8/19
to MIT App Inventor Forum
Hi Tim,

It is ok now but when I play the sound it again return to the previous font size. I tried to fix the problem but I don't know how it could be.
blocks (1).png

TimAI2

unread,
Aug 8, 2019, 8:47:13 AM8/8/19
to MIT App Inventor Forum
It is because, I believe, the html page is being reloaded when you call for a sound (this problem will exist for both methods I provided)
Unless there is a complete re-write of the method used to display the text, play the sound AND resize the text, I believe we have got as far as we can go :(
Message has been deleted
Message has been deleted

Ghanem O

unread,
Aug 9, 2019, 12:21:20 PM8/9/19
to MIT App Inventor Forum

Hi Tim,
Thank you so much Tim to help me do this.
I am trying since yesterday to understand how to make button method to resize the font after calling the sound. I regret to tell you that all tries were failure. so Please help me to do this method as you can.
I really appreciate all of your work.
Reply all
Reply to author
Forward
0 new messages