Need to read a single value from text file to speedometer - html

I have with me the canvas speedometer zip file. My intent is to read, from a text file a single number, and accordingly move the needle on the canvas speedometer as per the number read.
I have tried a few things and all I have managed to do is clunk up things a bit further. Any simple way to get around this, please? Preferably, editing the speedometer.html file such and adding a single button that reads the number from the text file and populates it in the text area provided on the speedometer web page?
Please help.
Edit 1: My bad. I should have included the piece of code I fidgeted around with for a brief while. Here goes the javascript snippet:
function func1()
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("maxvalue").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
And here's the bit about the 'Extract Value' button:
<input type="file" id="fileToLoad">
<button onclick="func1()">Extract Value</button>
The issue is I am getting sort of a clunky page. One which has a choose file button, and the 'Extract Value' button. And then, there are the begin and start buttons defined in the canvas speedometer API. All I am asking is this: is there a way by which I can have a single button on the page on clicking which the data (a single number) present in the text file gets populated on the ext field in the speedometer web page. This is all I want.
And in case anybody is wondering what the speedometer thingy is, please look here:
{http://www.uibox.in/item/68}
Apologies again for leaving a clearly vague question.

Related

How can I put an image on a Matlab uicontrol button?

I have Matlab 2019b, GUI Layout Toolbox 2.3.4 and t all runs on MacOs 14 Mojave.
I want to create button in in a UI that have icons/images instead of text. I have seen here:
https://undocumentedmatlab.com/blog/html-support-in-matlab-uicomponents/
that it is supposed to be possible to use HTML to render the button contents.
So - I try this sample code:
figure('MenuBar','none','Name','GUI-TEST','NumberTitle','off','Position',[200,200,140,90]);
push_btn = uicontrol('Style','PushButton','String','Push','Position',[30,60,80,20],...
'CallBack','disp(''You are pressed a push button'')');
close_btn = uicontrol('Style','PushButton','String','Close','Position',[30,5,80,50],...
'CallBack','close');
icon_file = fullfile(pwd, 'close.png')
str = ['<html><img src="file://' icon_file '"></html>']
set(close_btn,'String',str);
but it leaves me with an empty button.
If I deliberately use a filename that does not correspond to an existing file, I see a broken image icon:
So I am reasonably sure that the basic syntax and file path stuff is correct but the image does not get rendered in the button.
Is there something else I need to do to make this work or is it all just part of Matlab's overwhelming strangeness?
The easiest way to put an image on a uicontrol (and specifically a button), is to use the CData property,
im_orig = imread(icon_file); % Needs to be true color, i.e. MxNx3
im_sized = imresize(im_orig,[80,50]); % size of the button
% str = ['<html><img src="file://' icon_file '"></html>'];
% set(close_btn,'String',str);
set(close_btn,'CData',im_sized);

Adding formatted text to a Google Doc

I have a Google Sheet with form responses. I created some code so that each time a form is completed, the results populate a Google Doc. This works fine.
However, I want to add text to my Google Doc as well, which I accomplish using:
function myFunction(e) {
var doc = DocumentApp.create('File');
var text = 'insert text here';
body.appendParagraph(text);
doc.saveAndClose();
}
This text only is added as plain text, however, and I'd like to format this text. Specifically, I'd like to add the text so that it's bolded, underlined, and center-aligned in the document body.
How do I do this?
After some internet searching and SO searching, I tried adding html (e.g., <b> </b>) and I tried text.setBold(true). These approaches did not work.
I'll admit that I know very little about coding in Google Script editor, so I'm not at all sure how to go about this. I'm lucky enough that I got all my form responses to populate a named Google Doc file!
Here's a fragment of a document that I created recently:
var nameStyle={};
nameStyle[DocumentApp.Attribute.FONT_SIZE]=8;
nameStyle[DocumentApp.Attribute.BOLD]=true;
nameStyle[DocumentApp.Attribute.FOREGROUND_COLOR]='#000000';
var valStyle={};
valStyle[DocumentApp.Attribute.FONT_SIZE]=12;
valStyle[DocumentApp.Attribute.BOLD]=false;
valStyle[DocumentApp.Attribute.FOREGROUND_COLOR]='#cc0000';
body.appendParagraph('Basic Project Data').setAttributes(hdg1Style);
var p1=body.appendParagraph(Utilities.formatString('%s: ','PID')).setAttributes(nameStyle);
var p2=body.appendParagraph(Utilities.formatString('%s',selObj.pid)).setAttributes(valStyle);
p2.merge();
for(var i=0;i<basicDataA.length;i++){
var par1=body.appendParagraph(Utilities.formatString('%s: ',basicDataA[i][0])).setAttributes(nameStyle);
var par2=body.appendParagraph(Utilities.formatString('%s',basicDataA[i][1])).setAttributes(valStyle);
par2.merge();
}
Note, the appendParagraph first and then setAttributes.
The above response got me on the right path (Thanks!). Google hasn't documented this feature very well, and some of the features that should work do not. I had found the info on formatting using offsets but that is incredibly tedious and verbose. Here's the full example method that works to insert pre-formatted text into a Google Doc. Hope it helps someone else. Obviously the 2D array can instead be wired up to be fetched from a form, but this will at least show how the rest of the formatting works.
// Open a document by ID.
var body = DocumentApp.openById('YourDocId').getBody();
var authorAffils = [['Tony Tiger',1],['Micky Mouse',2],['Daffy Duck',3],['Elmo Orange',4]];
var nameStyle={};
nameStyle[DocumentApp.Attribute.FONT_SIZE]=11;
// nameStyle[DocumentApp.TextAlignment.Normal]; // This seems to do nothing
nameStyle[DocumentApp.Attribute.FOREGROUND_COLOR]='#000000';
var affilStyle={};
affilStyle[DocumentApp.Attribute.FONT_SIZE]=11;
// affilStyle[DocumentApp.TextAlignment.SUPERSCRIPT]; // This seems to do nothing
affilStyle[DocumentApp.Attribute.FOREGROUND_COLOR]='#cc0000';
for(var i=0;i<authorAffils.length;i++){
var par1=body.appendParagraph(Utilities.formatString(' %s,',authorAffils[i][0])).setAttributes(nameStyle);
var par2=body.appendParagraph(Utilities.formatString('%s',authorAffils[i][1])).setAttributes(affilStyle);
// I am not entirely clear why alignment only works this way whereas font size and color work the other way.
par1.setTextAlignment(DocumentApp.TextAlignment.NORMAL).merge();
par2.setTextAlignment(DocumentApp.TextAlignment.SUPERSCRIPT).merge();
}

Add dynamic textbox in canvas

I want to achieve a functionality in which, if I click on the canvas, a textbox should appear. After entering the text and click save button, it should save that text on a canvas. Again if I click on canvas somewhere else, it should again add a new textbox. In short, I want to add a new text box on click of canvas and want to save the textbox value.
Give me any good reference where I can learn canvas. I am asking for good tutorial in order to achieve specified functionality.
You can give coordinates of canvas or id where you click. Also have a variable to set it as {0 if text box available, so have to save. 1 if text box not available so have to add text box}. Swap them and add text box or save them accordingly.
If you have a large are where you have to find clicked or not, you can add as
$("#canvasid").click(function(){
var $this = $(this);
if($this.data('clicked')) {
var table = $(this).closest('sometablewhereiwanttextbox');
if (table.find('input:text').length < 7) {
table.append('<tr><td style="width:200px;" align="right">Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
}
});
Alter the code as needed.
Saving to DB depends on the technology you use. If its MVC or asp.net, then use AJAX calls to pass the data to back end and save them using web method.

How to Get Image From <img src=""> Tag?

When I want to render a picture, I send a request to the server with the associated picture to render. What's odd is how it's returned:
<img src="https://blargh.com/displayTemplate?templateid=template1">
Where that link is supposed to be the image data.
Using this, how can I transform that into an image that I can display to the user? This is for a facebook app, I can't just embed the HTML. It needs to be displayed inside my AS App as a Bitmap or Sprite or anything, really. Trying to convert it to a Bitmap or BitmapData have failed...
The only other information I can give is that my templateLoader is a Loaderand its .data is supposed to carry the HTML.
Something like this:
var data:String = '<img src="https://blargh.com/displayTemplate?templateid=template1">';
// grab the src attribute
var url:Array = data.match(/<img src=\"(.*?)\">/);
if (url.length > 1){
var loader:Loader = new Loader();
loader.load(new URLRequest(url[1]));
addChild(loader);
}
Use e4x. I'm not sure if you're getting a string or the result format on your service call is already XML, but if it's a string, you'd do something like this:
var imgXML:XML = XML(yourString);//yourString contains <img src="https://blargh.com/displayTemplate?templateid=template1">
link = imgXML.#src;
Then, look at the code Zevan posted for how to use a Loader if you're using just AS, or use it as the source for an Image control in Flex.
Looks like the server is providing you with a link that dynamically looks up the image based on the GET data you're passing to the server (the ?templateid=template1). Too bad you didn't paste in the real link so that this theory could be proven. Take the real link and copy out the http:// portion, enter it into your browser and if the image appears then this is indeed the case.
If this is true, then you want to extract the link from the tag. You could do this with a regular expression, like so:
/\?)"(.?)"(.*)/
If you ran that regex against the full tag like you've provided above, then capture group 2 will contain just the HTTP link. You can then use a Loader object to fetch the image so you're actually downloading and presenting the binary image data instead of embedding HTML.
If you're going to be using Regex in AS3, then you absolutely must have the RegExr tool by grantskinner.com: http://gskinner.com/RegExr/desktop/.
Also, to get the data from capture group 2 we do this:
var imageTag:String = '<img src="https://blargh.com/displayTemplate?templateid=template1">'
var myHttpRegex:Regex = /\<img(.*?)"(.*?)"(.*)/;
var result:Object;
result = myHttpRegex.exec(imageTag);
if(result != null) {
var imgUrl:String = result[1];
}
Code is untested, but the concept is there.

GUI for sentence alignment tasks

Can someone introduce me on how to write a simple web (HTML/XML) interface for a simple sentence alignment task?
The task is as follows:
The 1st line of the webpage would be the English sentence that will need to be matched to the chinese sentences below:
000325EN Whatever goes upon two legs is an enemy.
(checkbox)001054ZH 凡靠两条腿行走者皆为仇敌;
(checkbox)001055ZH 凡靠四肢行走者,或者长翅膀者,皆为亲友;
(checkbox)001056ZH 任何动物不得着衣;
(checkbox)001057ZH 任何动物不得卧床;
(checkbox)001058ZH 任何动物不得饮酒;
(checkbox)001059ZH 任何动物不得伤害其他动物;
(checkbox)001060ZH 所有动物一律平等。
(checkbox)Nil No matching sentence
(submit button) (clear selection button)
The user should be able to click 1 or more of the check boxes.
When the submit button is clicked the webpage will save a line in a appendable textfile in the format
SentID<\TAB>#English_sentence<<\TAB>SentID2<\TAB>=Chinese_sentence (e.g.:
000325EN #Whatever goes upon two legs is an enemy. 001054ZH =凡靠两条腿行走者皆为仇敌;
if there are more than 1 match to the English sentence, it may look like this
000325EN #Whatever goes upon two legs is an enemy. 001054ZH =凡靠两条腿行走者皆为仇敌; 001055ZH =凡靠四肢行走者,或者长翅膀者,皆为亲友;
Depending on what should happen with the stored data, it indeed is possible to store them on the client, without any server-side scripting, see the HTML5 local storage facility: https://developer.mozilla.org/en/dom/storage (including example for degradation to cookies).
A good starting point for getting into locally stored data with HTML5 is http://diveintohtml5.ep.io/storage.html.
A simple example taken from http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx#_global and enhanced with localStorage detection from the link above:
<p>
You have viewed this page
<span id="count">an untold number of</span>
time(s).
</p>
<script>
function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
if (supports_html5_storage()) {
var storage = window.localStorage;
if (!storage.pageLoadCount) storage.pageLoadCount = 0;
storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1;
document.getElementById('count').innerHTML = storage.pageLoadCount;
}
else {
alert('No local storage available!');
}
</script>
First of all....
The user should be able to click 1 or more radio buttons
Radio buttons were designed to only allow one button at a time selected. Perhaps you mean to use a checkbox instead?
the webpage will save a line in a appendable textfile
This is impossible to implement without using a server-side language (such as PHP, Ruby, Python, etc.).
Thirdly, you need to specify exactly what you want. What exactly is supposed to happen when the "submit button is clicked"? What do you mean by "sentence alignment"?