Changing Text Colour In An Embedded Widget

Using a “Constant” in this case named as “myPage2” and a “HTMLViewer” named “HTMLViewer2” I have managed to embed a widget by inputting the following code into the “Default Value” box as a “String”.

[code]

[/code]

The issue I am having, is that I want to change the colour of the text so that it shows up better on the black background. The colour I am hoping to change the text to is #82A5D0. I am very much a novice with using Xojo, HTML and CSS and I have tried various modifications to the code above in order to try and get the text colour changed all with no success.

All help will be greatly appreciated and I am documenting every step on how I solve the issues on my project so I can write up some instructions so that other people can attempt to replicate my project in the future should they wish to.

What you need to do is to modify the CSS style sheet used by the site, which is in the head section of their page.

Unfortunately, it may not be allowed since your app and their page reside on two different sites. For security reasons, one site cannot modify the content of an iFrame residing on another IP.

Maybe you want to reach the operators of forecast.io and ask if there would not be a URL parameter for what you want to do.

To be clear, this is not a Xojo restriction. This is a restriction built into web browsers themselves.

I thought this would be the reply I would get, I was just hoping there would be some crafty way of getting around having to mess around with CSS styles. Thanks for confirming my suspicions, it’s really appreciated. I have tried contacting the guys who set up forecast.io, but I haven’t had a reply and it has been over a week or so, which makes me think I probably won’t get a reply / be able to get a modified widget provided from forecast.io.

I guess I now have to find some sort of workaround to get the widget with the font colour I desire. I’ve come up with a couple of potential workarounds and I would appreciate info on whether they’re possible or not and if they are, how I would go about seeing it through as well as your own suggestions.

As I’ll be running the program on a kiosk computer with wifi connection, would it be possible to create a locally hosted version of the widget (with the modified CSS font colour) and pull the information from forecast.io’s widget into mine and then pass it onto the HTMLViewer in my Xojo project?

Would it be possible to create my own widget from scratch by breaking down the code from the forecast.io’s widget (obviously I would make modifications / take reasonable steps in order to avoid infringing copyright etc) and hooking it up with a free weather API?

Before reinventing the wheel, you may want to ask yourself if redesigning the app color would not be a good idea.

Unfortunately, the background colour for my app HAS to be black (or shade very close to black) and the current grey text is a bit difficult to see on the black background. This is more of a usability restriction as opposed to me just being fussy, which is a shame.

I am currently trying to find a way to play around with the CSS styling of the widget and seeing if I can tweak it that way. Any tips for how I would go about doing this?

If you open http://forecast.io/embed/#lat=54.5045&lon=1.3548&name=Yarm,Stockton-On-Tees&color=#82A5D0&font=Leelawadee&units=uk in a browser you will be able with the developer tools to access the stylesheet within the head of the page and modify it.

Is there any special reason why you must use an iFrame ? If you loaded that page directly in HTMLViewer, you could use ExecuteJavaScript to modify the style in a much easier way.

In all honesty Michel, I am a fish out of water using this software and other technical jargon. I’m trying to learn as quickly as possible and am very open to learning and listening to advice from experienced members such as yourself (I’ve seen you reply to lots of posts on the forum and that’s awesome). My trade lies in Aviation Engineering and not in Computer Science, but I have a passion for technology and want to learn more about Xojo and its capabilities. I’ve just spent 30 minutes or so looking through and trying to understand the CSS and HTML code from the forecast.io widget and managed to isolate which parameters change what in the widget, although I’m still struggling to change the colour of the animated icons.

Currently, I have it so that HTMLViewer2 is the box for my widget. I then have an “Open” event handler with the following code dim f as FolderItem HTMLViewer2.LoadPage(myPage2, f)
This then pulls the “Constant” named myPage2 which I entered as a string using [code]

[/code]

How would you take this to the next level and change the icon and text colours? This ExecuteJavaScript sound quite advanced and technical for me, but I’d love to learn about it and I’m excited.

Tiago, we all started at one point. I was fortunate to start way back when, but since at the time computer science was a rarity, all I had to go on was my background in electronics. But I quickly found out that what is important is logic, patience, and enough humility to ask for help. Fortunately, here, you will see a lot of people like to share.

The thing is I tried to load the widget directly, which would have enabled to manipulate the text color with ExecuteJavaScript, but obviously the developer prevents that. I see no way to do what you want at this time. If you absolutely need to have a black background and nothing lighter, I am afraid there no solution available. Sorry.

Since editing the forecast.io widget has hit a dead end, I’ve started looking at other pre-made widgets that I can use as well as mulling over the idea of coding my own widget. Would it be possible to create my own version of the forecast.io widget using a freely available weather API and host it on a free website hosting domain and then pull the information into the Xojo app via a HTMLViewer?

At that point, it would be easier and more efficient to poll the freely available weather API and handle the information yourself within your app. You would be able to skip the whole hosting a relay yourself thing, and you’d be able to display the information any way you like.

Hmm, that sounds logical. but how would I go about including the moving icons for the various states of the weather? (They were what really appealed to me in the forecast.io widget).

I have a few days off work now and I’m going to try and invest as much time as possible into this little bit of the project, but I am still lost as to where to start.

I’ve pulled together a list of weather APIs and I think I’m going to use the Yahoo weather API at:
https://developer.yahoo.com/weather/ (Unless anyone gives me a reason not to)

Also how would I go about putting this together in my Xojo project? I’m guessing I will need to create / find some images / icons / gifs etc first before messing around with stuff in Xojo right?

Thanks