- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi, i'm davide, i created my first app using Intel XDK. It's a calculator written using HTML, CSS, JAVASCRIPT.
When it run on browser (even the phone browser) run normally fast, but after the installation of the builded app the same run very slow, with a lag between the pressure of the key and the execution of the code correlated to the key about 1-2 seconds.
I use Intel XDK to build this app, using Windows and Linux Mint (both of them) but the app it's very slow in both of cases.
I don't understand why. Can you help me? (my phone it's a zenfone 2 ze500cl)
<HTML> <HEAD> <LINK href="calc.css" rel="stylesheet" type="text/css"> <TITLE>CALCOLATRICE</TITLE> <SCRIPT src="calc.js" type="text/javascript"></SCRIPT> </HEAD> <BODY onload="canc()"> <DIV id="num"> </DIV> <TABLE> <TR> <TD> <BUTTON class="numeri" onclick="num('1')"> 1 </BUTTON> </TD> <TD> <BUTTON class="numeri" onclick="num('2')"> 2 </BUTTON> </TD> <TD> <BUTTON class="numeri" onclick="num('3')"> 3 </BUTTON> </TD> <TD> <BUTTON class="oppa" onclick="oper('piu')"> + </BUTTON> </TD> </TR> <TR> <TD> <BUTTON class="numeri" onclick="num('4')"> 4 </BUTTON> </TD> <TD> <BUTTON class="numeri" onclick="num('5')"> 5 </BUTTON> </TD> <TD> <BUTTON class="numeri" onclick="num('6')"> 6 </BUTTON> </TD> <TD> <BUTTON class="oppa" onclick="oper('men')"> - </BUTTON> </TD> </TR> <TR> <TD> <BUTTON class="numeri" onclick="num('7')"> 7 </BUTTON> </TD> <TD> <BUTTON class="numeri" onclick="num('8')"> 8 </BUTTON> </TD> <TD> <BUTTON class="numeri" onclick="num('9')"> 9 </BUTTON> </TD> <TD> <BUTTON class="oppa" onclick="oper('per')"> X </BUTTON> </TD> </TR> <TR> <TD> <BUTTON class="numeri" onclick="num('0')"> 0 </BUTTON> <TD> <BUTTON class="oppa" onclick="radice()"> √¯ </BUTTON> </TD> <TD> <BUTTON class="oppa" onclick="quadrato()"> <DIV id="quadrato"> X<sup>2</sup> </DIV> </BUTTON> </TD> <TD> <BUTTON class="oppa" onclick="oper('div')"> ÷ </BUTTON> </TD> </TR> <TR> <TD> <BUTTON class="oppa" onclick="canc()"> C </BUTTON> </TD> <TD> <BUTTON class="oppa" onclick="puntof()"> . </BUTTON> </TD> <TD> <BUTTON class="oppa" onclick="uguale()"> = </BUTTON> </TD> <TD> <BUTTON class="oppa" onclick="cambiosegno()"> ± </BUTTON> </TD> </TR> </TABLE> </BODY> </HTML>
body{ background: linear-gradient(40deg,#03082B,#3545BC,#03082B,#3545BC,#03082B,#3545BC,#03082B,#3545BC,#03082B,#3545BC,#03082B,#3545BC,#03082B,#3545BC); } #quadrato{ font-size:60; } #num{ height: 14%; width: 96%; font-size: 80; text-align: right; background: white; border: black 10px solid; border-radius: 18px; box-shadow: 0 0 15px rgba(255,255,255,1); padding: 18px 20px 0px 0px; margin: 10px auto 5px auto; } table{ height: 80%; width: 100%; border-spacing: 8px; border-collapse: separate; } td{ width: 25%; text-align: center; font-family: arial; } .numeri{ background: linear-gradient(2deg, #34450F , #1E2807 , #34450F); color:#CDE0AF; font-weight: bold; text-shadow: 5px 5px 8px black; width: 100%; height: 100%; border-radius: 12px; line-height: 70px; box-shadow: 3px 3px 4px rgba(0,0,0,0.8); font-size:90; } .numeri:active { position: relative; top: 5px; left: 5px; background: linear-gradient(2deg,#E5F7C0,#C3DC8B,#E5F7C0); text-shadow: 0 0 9px #EDECAD; color: white; } .oppa{ background: linear-gradient(2deg, #393321 , #13120E , #393321); color:#CDE0AF; font-weight: bold; text-shadow: 5px 5px 8px black; width: 100%; height: 100%; border-radius: 12px; line-height: 70px; box-shadow: 3px 3px 4px rgba(0,0,0,0.8); font-size:90; } .oppa:active { position: relative; top: 5px; left: 5px; background: linear-gradient(2deg,#5F4E1E,#634E10,#5F4E1E); text-shadow: 0 0 9px #EDECAD; color: white; }
var accum=0.0; var operat="piu"; var prim=0; var contanumero=0; var pun=0; var punto=0; var risultato=0; var ugua=0; function cancella(){ if(prim==1){ document.getElementById("num").innerHTML=""; prim=0; risultato=0; } } function radice(){ if(prim==0){ var mm=Math.sqrt(document.getElementById("num").innerHTML); mm=Math.round(mm*1000000000)/1000000000; document.getElementById("num").innerHTML=mm; } } function quadrato(){ if(prim==0){ var mm=(document.getElementById("num").innerHTML)*(document.getElementById("num").innerHTML); mm=Math.round(mm*1000000000)/1000000000; document.getElementById("num").innerHTML=mm; } } function cambiosegno(){ if((prim==0)&&(document.getElementById("num").innerHTML!="")&&(ugua==0)){ if(document.getElementById("num").innerHTML[0]!="-"){ document.getElementById("num").innerHTML="-"+document.getElementById("num").innerHTML; }else{ document.getElementById("num").innerHTML=document.getElementById("num").innerHTML.replace("-",""); } } } function num(numero){ if(ugua==1){ canc(); } if(document.getElementById("num").innerHTML=="0"){ document.getElementById("num").innerHTML=numero; }else{ cancella(); document.getElementById("num").innerHTML+=numero; contanumero=1; } } function puntof(){ if(punto==0){ if(risultato==0){ if(document.getElementById("num").innerHTML==""){ document.getElementById("num").innerHTML="0."; punto=1; }else{ document.getElementById("num").innerHTML+="."; punto=1; } } } } function canc(){ document.getElementById("num").innerHTML=""; accum=0.0; operat="piu"; prim=0; contanumero=0; pun=0; punto=0; risultato=0; ugua=0; } function uguale(){ if(risultato==0){ operazioni(); risultato=1; ugua=1; } } function operazioni(){ var a; if(document.getElementById("num").innerHTML==""){ a=0.0; }else{ a=Math.round(parseFloat(document.getElementById("num").innerHTML)*1000000000)/1000000000; } if(operat=="piu"){ accum=accum+a; punto=0; } if(operat=="men"){ accum=accum-a; punto=0; } if(operat=="per"){ accum=accum*a; punto=0; } if(operat=="div"){ accum=accum/a; punto=0; } document.getElementById("num").innerHTML = Math.round(accum*1000000000)/1000000000; } function oper(op){ ugua=0; if(risultato==1){ prim=1; operat=op; }else{ if(contanumero==1){ if(prim==1){ operat=op; }else{ prim=1; operazioni(); risultato=1; operat=op; } } } }
- Tags:
- HTML5
- Intel® XDK
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Try use Framework7, I think it allows you to create the fastest interface. Using jQuery - the phone can be a delay in the response of up to 300 ms
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you. Where i can find the selection of Framework? I don't find it.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
When you create a project, select "Use App Designer", you can view the code by framework7
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
It still slow...
But i'm not used the graphical mode, i still used HTML source code.
I develop this app for my students, i would to show them that they can to build app for telephone using HTML code.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Try eliminating all those background
:linear-gradient
CSS rules and make sure you are building with Crosswalk (check the "optimize with Crosswalk" option). Those gradients require a lot of processing power and most phones do not do well with them.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I eliminated all linear-gradient, text-shadow box-shadow etc but it's too slow again!!
:-(
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
i found the problem:
it's this javascript command:
function num(numero){ document.getElementById("num").innerHTML=numero; }
i loaded only this command and erase the other, wen i call num function the app run very slow!
If i don't use this code app runs normally!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I wonder if there's a namespace collision between your id (num) and your function name (num). Does it make a difference if you change the ID to something like "id_num" so it is different than the name of the function?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Opppsss! :-D (it's a very stupid error!)
Thanks the speed increased but not too much....
But when i use a button for the second time, the app run at normal speed.
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page