2017년 3월 5일 일요일

Modify properties of a certain index in a listpicker?


I have a listpicker, and 5 items in it.
Would it be possible to change the background color of the 1st item?
And would it be possible to make the 2nd item's visibility to false?

--
Would it be possible to change the background color of the 1st item?
It is all or nothing.  You can not change the colors of individual items but you can change the ItemBackgroundColor for all of the items.

And would it be possible to make the 2nd item's visibility to false?
You cannot do this either.  You can provide a second list identical to the original but with the 2nd item removed.  Just modify the ElementsFromString  or Elements, depending on how you populate the ListPicker.


--

AI2. JavaScript. ListView with images and font. Panels with Horizontal Scroll.


Nice ListView with images and new font.

Hi friends,
- These are two examples of ListView build with JavaScript (jquery-3.1.1.min.js) and CSS.

Visor2 has 2 fonts size.

- In my simple example Clock is always ON, you can modify this feature.

- You can read visor1.htm and visor2.htm in this Spanish web page:


Regards.






--
Panels with Horizontal_Scroll.

This is not exactly App Inventor, this is JavaScript + CSS, but I think it can be interesting.

In this web: Horizontal_Scroll with JavaScript:

In this web: buttons with CSS

I join those two codes and build an app with sliding panels.

In panel.htm and style.css files, you can modity features.

Look code in:

Regards




--
Nice work Juan, and thanks for sharing :)

--
Thank you Tim :)

--
That is awesome!  Do you know how to make a list of just images, that functions like the listview component?

--

See here for my effort on this (images only):


--
Thanks!  Can that access images on the web, as an asset, or on the device?

--
And can it be scrollable?  Thanks so much!

--
Yes it can be scrollable, depends on how you write your html ;)

Check the rest of the post I linked for a php version which is web based, but the javascript one will pull  from a webserver too (base the html on the server)

--
 I just tried the file attached to your "Good news, I believe I have a solution. Taifuns ListView stuff was very useful, but..." post.

I have absolutely no idea what I'm doing.  I've never used HTML and jQuery with App Inventor in my not-very-long app inventor coding life.

How do I:

  1. have all the images resized before being displayed?
  2. have the images in a vertical layout?
  3. write the HTML so it scrolls vertically?
And does that version work without Internet connection?

Thank you so much!  Awesome job coding it!

--
How do I:
  1. have all the images resized before being displayed?
Probably best to size all your images before use, this is best practice, but if not you will see some css that does this in the html file



<style>

img {
   width:100px;
   height:100px;
}
</style>

  1. have the images in a vertical layout?
Easiest way is to put a <div> with some css styling around the script, or reduce the width of the webviewer so only one image fits
  1. write the HTML so it scrolls vertically?
html should automatically scroll vertically

@ Juan - sorry this has hijacked your thread, Min and I will pick this up elsewhere! > Set webstring "response" in dynamic javascript html


--
Thanks so much!  I should've remembered how to do the first one.  I'll reduce the width of the webviewer, which will work perfectly with my app.  Thanks!  Does it need Internet connection to run it?  Once the app is packaged, I mean, since you have to have Internet to use the companion.

--

Show Us Your AI Stuff! Post LINKS to your completed apps here!


We know you all work hard on your apps, and everyone loves to show off their stuff.  

Use this category to post LINKS to your apps.  You may post screen shots or AIA (project source) files, but do NOT post APK files here... Those will be deleted by the moderators.  Better than uploading, link to websites that describe your apps, so all of us can take a look and see what you've accomplished. 

ONLY POST LINKS TO APPS YOU CREATED WITH APP INVENTOR HERE!  OTHERS WILL BE DELETED!

We will verify the AI Authenticity of each link posted.

When you post here, PLEASE use a one or two word description in the subject first, so we know what type of App you've done.  That will help other people searching for examples.  For example, a good subject line would be GAME - Check out my penguins and igloos game! or PHOTO GALLERY - Store your pictures in an organized way!You get the drift ;)

MIT assumes NO responsibility whatsover for the program links posted, and advises ALL participants to exercise extreme caution before installing any app that's not already registered and accepted by the Google Play Store or other major vendors.

ANY INSTALLATION OF ANY APPLICATION, BE IT AN APP INVENTOR APP OR AN APP CREATED BY ANY OTHER SYSTEM IS SERIOUS BUSINESS.  ANYTHING YOU ACCESS FROM HERE IS DONE COMPLETELY AT YOUR OWN RISK. 


So, strut your stuff!


--

Change background color of the screen title bar


Is there a way to change the background color of a screen title bar, I mean, not the title text, but the actual grey color in the title bar part of a screen.

--
Don't believe this is possible, but you can emulate it by making the real one invisible and replacing it with a label, which you can then format background, text, etc.

--

google chart api

http://ai2inventor.blogspot.kr/2017/03/plot-chart-from-file-data.html

http://ai2inventor.blogspot.kr/2017/03/app-inventor-2-creating-graph.html

http://ai2inventor.blogspot.kr/2017/03/qr-generator.html

http://ai2inventor.blogspot.kr/2017/03/generating-graph.html

http://ai2inventor.blogspot.kr/2017/03/i-finally-made-simple-line-chart-aia.html

http://ai2inventor.blogspot.kr/2017/03/google-chart-api-implementation-urgent.html

http://ai2inventor.blogspot.kr/2017/03/limit-on-url-length-for-google-chart.html

http://ai2inventor.blogspot.kr/2017/03/unable-to-show-chart-correctly.html

http://ai2inventor.blogspot.kr/2017/03/help-on-qr-creater-app-inventor.html

http://ai2inventor.blogspot.kr/2017/03/is-it-possible-to-create-qr-code-with.html

http://ai2inventor.blogspot.kr/2016/11/saline-representation.html

http://ai2inventor.blogspot.kr/2017/03/graficar-desde-mi-app-graph-from-my-app.html

http://ai2inventor.blogspot.kr/2017/01/problem-how-to-use-google-drive-google.html

http://ai2inventor.blogspot.kr/2017/03/qr-code-generator.html

http://ai2inventor.blogspot.kr/2017/03/displaying-of-math-formulas-in-app_4.html

http://ai2inventor.blogspot.kr/2017/03/i-want-insert-graphic-table.html





Help on a QR creater App Inventor


I want to created a QR generator, but I don't know so much about App Inventor.

Is able create it, how ?

Please........

PSDT: I know is able create it with App Inventor and JS, but I want to use App Inventor only.

--
Here is the advice provided by Taifun

use an API to generate the QR code, example 
you can use the Google Chart API (unfortunately deprecated)

...and yes, the puravidaapps link does show how to use javascript to create the QR.

Can you use App Inventor alone to generate a QR code?    Probably not unless you can find a way to use the Google Chart API in conjunction with native AI code.   AI2 can 'read' QR codes using the BarCode Scanner  http://ai2.appinventor.mit.edu/reference/components/sensors.html#BarcodeScanner  .

It might be possible to create an Extension to do this with Java?    Read the documentation 
    and be ready to do this when MIT formally releases Extensions into the main App Inventor.

You might be able to use an online QR generator like described  QR code generator (available for free online) to generate a QR code that brings you to that URL. in MIT's documentation (  http://appinventor.mit.edu/explore/content/faq.html  ).

If you are lucky, someone might be aware of a different solution so check back here frequently to see other posts.

App Inventor is an entry level Android compiler intended primarily for teaching programming.   It does not have the extensive libraries and tools that would allow you to do something like this with the Java based Eclipse or Android Studio.

--

Plot Chart from file data


Please advice how to plot a Chart (Line, Bar, with option to add Candle Stick - Error Bar) for data saved in the file (saved using File Component of App Inventor). I need to plot a chart for Five Variables for given date Range. Following is the sample data.

File Data: (2 Jun 2014 13:11:06 46 53 100 35 75)

Please see attached Pictures for Sample Data and Charts (created in MS Excel)

 bar chart with Error Bar.png

 bar chart.png

 chart.png

 line  chart.png

--
the (unfortunately) deprecated Google Chart API https://google-developers.appspot.com/chart/infographics/docs/overview is easy to work with
you will be able to use it until April 20, 2015
for an example how to use it see here http://puravidaapps.com/qr.php#q

alternatively search for another API here http://programmableweb.com/

-- 

Accelerometer tester


Changes log:
140428 09:30PM CST: fixed the Shaking label so it resets after two seconds; swapped x,y colors to match diagram arrows
---

This project draws a graph of the x, y, and z values for the accelerometer sensor.
It also indicates when the device has been shaken.

The diagram below shows that if the device is laid face up on a table top, the ZAccel value from gravity will be positive.
Turning the device on it's left side will make the XAccel value positive
Standing the device upright as in the diagram will give YAccel a positive value.

This screen shot of the actual app shows how each axis is affected by gravity starting with the device face up on a tabletop then...
  1. rotating to the left until the left side is touching the table then rotating back to face-up (green trough)
  2. rotating right until the right side is touching the table top then back to face-up (green mound)
  3. rotating forward until the bottom of the device is touching the table top then back to face-up (red trough)
  4. rotating backward until the top of the device is touching the table then back to face-up (red mound)
This is repeated three times as shown in the graph.

Note that when rotating about the YAccel-axis, YAccel is near 0.
And when rotating about the XAccel-axis, XAccel is near 0.
ZAccel oscillates from 9.8 when the device is face-up to 0 when it is facing left, right, forward, or backward resulting in a force of 0.

You can test this project on the emulator if you don't have a device to see an approximation of what the output might look like.
Pressing Ctrl+F11 toggles portrait and landscape orientations which triggers the XAccl and YAccel values to change.
ZAccel always remains at about 4.9, however.

The aia project is attached.


YouTube video < 


--
A handy utility!
I had suspected my X sensor was noisy.  This confirms it.
The Shaking label never turns off once it has been triggered?

--
The Shaking label never turns off once it has been triggered?
I have fixed that in the current aia attachment.
A timer clears the value after two seconds.

--
I had suspected my X sensor was noisy
Hi Abraham!
I suppose you already know this, but you can take several samples from a sensor property then average them to smooth out a sensor result.
I did not do that in this example.

I did average OrientationSensor Azimuth values in my basic digital compass project to keep the dial that indicates current heading from swinging too wildly.

--
Thanks for the tip.
I had some idle speculation of using the waveform of the Orientation Sensor to detect small table vibration patterns during battery bounce tests.  (There's a YouTube video going around ostensibly showing how weak AA batteries rattle when they bounce off their negative ends while fresh batteries bounce with a thud.  (search for 'battery bounce test snopes' for discussion.) 
My device's sampling rate and sensitivity are insufficient for such tests.
This is all just for fun.

--
Interesting. I had not realized the accelerometer could indicate levels of vibration.

--
Have you developed a method for the graphs to slide to the left as time passes. Ie new data comes in from the right and slides across the screen, disappearing out the left side?

--
You might have to use multiple images connected
to your canvas like tank treads, using the Save Canvas
block to prime the images with saved canvas files
when the current canvas fills.

Shrink the leftmost image width as the canvas on the right fills.

When the canvas fills, save its image and propagate the list
of image files down your list of image components, using the 
ANY Image blocks, then clear the canvas and resume drawing.

-- 
When the Canvas is filled from left to right with the initial graph, a snapshot of the canvas might be taken then inserted in an ImageSprite which could then be scrolled to the left one pixel per Clock Interval.
Now you have to plot new points trailing behind that ImageSprite and redraw them each time the ImageSprite moves a pixel to the left, then capture the screen again when they have reached the left edge of the Canvas.
That would require too much processing, I think.

--
I wonder if it would be possible to save the results during a measurement for subsequent analysis results, in the Excel or some other program.
And if it is possible, who can i do it?

--
You might ask that question on the MIT App Inventor forum.

--
Thanks for the tip

--
It's awesome.

--

App Inventor 2: creating a graph.


Hey, I'm still kind of new to this App Inventor and app designing at all really but I was hoping someone or a group of people could help get me in the right direction of making a graph. It's the end of the year for me and I'm About to graduate, My teacher threw this at me saying my other project wouldn't work so I'm on AI2 now. I have a very basic idea of  what to do I think but like I said I am still new all of this. Any help will be appreciated thank you very much.

--
the (unfortunately) deprecated Google Chart API https://google-developers.appspot.com/chart/infographics/docs/overview is easy to work with
you will be able to use it until April 20, 2015
for an example how to use it see here http://puravidaapps.com/qr.php#q

alternatively search for another API here http://programmableweb.com/

--
Try looking thru this thread ...
Accelerometer tester

--
You can graph using the Canvas.  This is what ABG is eluding to in the referenced link.  You use the screen canvas coordinates to plot data.

Here are two key routines, one converts map coordinates to World coordinates, the other converts World coordinates to map (Canvas screen) coordinates.

and it will give you a graph where values become screen pixels:  

to get the example x * 2 = y plot.    Yes, you need quite a few global variables and the plotting routines.

--

Selecting google spreadsheet values


Hello all!  I am having an issue when I try to select values in a column from google spreadsheets I am getting a error message "Error: Access denied.  Access denied"  I have a get and insert setup and working correctly so I am not certain what I may be doing incorrectly and am turning to the community for some direction!

Here is a post of my blocks.  Please let me know what else I may need to provide.  Thanks in advance.

 Screen Shot 2015-03-03 at 11.18.33 AM.png

--
see here https://puravidaapps.com/spreadsheet.php#select and Google Visualisation API
the first column is A, the second is B, the third is C, etc.
Note that column IDs in spreadsheets are always letters; the column heading text shown in the published spreadsheet are labels, not IDs. You must use the ID, not the label, in your query string.)
your query should look like this: select C,D where B matches 'Jeff'

-- 
Hi Taifun. . .thank you for the reply.  I did your spreadsheet tutorial and how I am arriving at the blocks I have.  Also, I did have that query select C,D where B matches 'Jeff' but was still returned with the error message as above.

--
see chapter Preparation here https://puravidaapps.com/spreadsheet.php

-- 
I know the form is setup correctly as I can insert and get it is just the select that is denying access.  I can post any of the blocks the allow the insert and get if that helps.  I have even tried just a select of a single column with not adding a clause

--
can you provide a screenshot of your spreadsheet? relevant would be the header row and the row we can find Jeff in column Foreman

-- 
here is the screenshot of the spreadsheet, which shows jeff in column Foreman.  

 Screen Shot 2015-03-03 at 8.26.18 PM.png

--
try this line

Select C,D where B contain 'jeff'

you cant used the name of column you need used the letter , like example.

--
in other case and most better is

Select C,D where B contain 'jeff' limit 1 if you want only 1 row , if you want more row delete limit 1.

-- 
Hi Ritchie. . .thank you for the reply.  I tried your suggestion and received the same result.  I did notice that you have capitalized your Select and instead of = you had me use contain.  I am pretty green on SQL but is that a statement that works usually?

--
here is a screenshot with the Do It comment.
 Screen Shot 2015-03-04 at 7.22.05 AM.png

--
I would use contains instead of contain, also I would use select instead of Select
and if you want to try matches again, this would be the correct statement: select C,D where B matches 'jeff'
see again the syntax here Google Visualisation API
but if you still get this error  error message "Error: Access denied.  Access denied" it seems to be, something in your setup is not correct...

--
Hi Taifun.  I did read that google visualization API and why I asked about the capitalization.  I also saw that you could put the select statement directly after the Url and here is the statement in the selectUrl block.  When I did this I got a 400 error.  So if it is something in my setup I am not sure what.

 Screen Shot 2015-03-04 at 11.39.56 AM.png

 Screen Shot 2015-03-04 at 11.31.43 AM.png

--
your latest screenshot does not make sense, because select is part of the query and the complete query should be uri encoded...
--
Hi Taifun.  I am only showing what I have tried.  As I agree with you that the select statement should be part of the complete query.  I am at a loss because this should be working and if it is something in the setup I really am not sure where.

-- 
you can try my example project again (there is the aia file to download available in the download section) https://puravidaapps.com/spreadsheet.php  and start from scratch, you might want to create a new spreadsheet as test, just follow the setup instructions EXACTLY
in case this does not help, see the red box on my page for more help https://puravidaapps.com/spreadsheet.php

--
Hi Taifun. . . I will start from the beginning again on your tutorial.  I would love to support you, but currently I am unemployed and writing this app for a friend for free hoping it will help me get a job!

--
Amigo te servirá leer un poco de estos  enlaces: 
Friend will help you read some of these links:

https://developers.google.com/chart/interactive/docs/querylanguage



A futuro en proyectos importantes no es  recomendable publicar tu clave API para que nadie manipule tu mesa

Tu  API KEY = 1JTehtPXuq5LFGsHI_DBo63H88ecKLFR4jcRSsp7h2cg 

Tal vez te sirva un poco de esto que he aprendido gracias a los foros...

To future in important projects it is not advisable to publish your key API so that nobody manipulates your table

Your KEY API = 1JTehtPXuq5LFGsHI_DBo63H88ecKLFR4jcRSsp7h2cg


Maybe it will serve you some of this that I have learned thanks to the forums ...



-- 
Hola Isaias. . .como esta?  mi español es muy malo.  hablo en english por tus.
Hello Isaias. . .How is it going? My Spanish is very bad. I speak in English for you

Thank you for those links, I will read over them as I am certain they will help.  I downloaded your aia and of course all worked.  I will study what you did and have started integrating into my app.  I now need to figure out how to put those columns into a listpicker so the end user can easily select the proper choices.

And on a personal note I will be certain to not publish my API in the future!

 Screen Shot 2015-03-07 at 7.28.17 AM.png

--

QR Generator


I want to ask the community if anyone has already created a QR Generator and shared.

I am making an application where the person puts some data and then generate the QR image. 

Is it possible? 

--
first you will have to understand qr code and then make the program smart enough to compose the picture

I don't know if it possible with app inventor but it may but it will be very diffucult

--
use an API to generate the QR code, example 
you can use the Google Chart API (unfortunately deprecated)

-- 

Generating a Graph


I was trying to create a graph on our app that can work quickly and efficiently. However I found that it is very hard to accomplish this with the MIT app inventor 2. Using the the canvas and drawing each graph is to complicated and messy. At this current time, I am thinking about using Google Fusion Table, which can be used in MIT App Inventor. It would be greatly appreciated if you could recommend us to efficiently generate and analyze graph based on inputed data. 

--

limit on the URL length for the Google Chart API(deprecated)



Continuous to my question before: Unable to show chart correctly

I read the web below. 
https://developers.google.com/chart/image/faq
Is there a limit on the URL length for the Google Chart API? What is the maximum URL length?
The maximum length of a URL is not determined by the Google Chart API, but rather by web browser and web server considerations. The longest URL that Google accepts in a chart GET request is 2048 characters in length, after URL-encoding (e.g., | becomes %7C). For POST, this limit is 16K.

I have no much knowledge on http or javascript.  So I unable to use the Google Chart API(non deprecated version) in app inventor. But I would like to maximize the query record in Google Chart API(deprecated) . If I am not wrong , I guess the method I using is GET method. So the longest URL limited to 2048 characters. 
Like this in app inventor : call webviewer1.GoToUrl
http://chart.googleapis.com/chart?cht=lc&chs=350x300&chd=t:20,35,10,10|30,55,25,5&chxr=1,0,200&chds=0,200&chco=0A8C8A,EBB671&chbh=a,0&chxt=x,y&chxl=0:|Pizza|Pasta|Pide|Salad&chdl=Systolic|Diastolic&chg=0,5 

So is it possible to use POST method in App Inventor 2? If it is not possible I have to limit the query record size to eliminate the record exceed problem.

--
generally you can use the Post method in App Inventor, but your example is a Get example, which means in your case you can't
your URL currently has 214 characters, you still have some space...

--
This is only the example I show for reference . There is 4 records now . But I expect my app would query 1000 or more records in final. So the limited in URL length would be exceeded in entire method. So I am seeking better method to overcome the limitation.

-- 
you might want to take a look at http://www.chartjs.org/
I have a pie chart example here https://puravidaapps.com/pie.php
other chart types are also available there...

--