Banner.php --> Watch.php. OR WatchGauges.htm???

[Phil23]

Hmm,

Is that a good starting point?

Just received a Galaxy Watch for my BD....
It show's Weather from who knows where....

Data from my PWS sounds like a must!

Now where's that Betel for some thoughts?

Cheers.

[Phil23]

Open to other thoughts....

Found out I did need to install Samsungs Browser on it & can now see pages, but small of course.

I did manage to open my gauges pageweather.inverellit.com/gauges.htm & could zoom it a bit.

That got me to thinking that maybe an alternate gauges page with no header etc, a few less gauges in a single column.
Assume that would put the first gauge at the top & could scroll down for others.

Not sure how best to size them though.

These watches are quoted as having a 360x360 screen resolution, but not sure haw that work when it's a round display.

So would I only need to make a extra gauges page, or would I also need to have an alternate & modified version of the gauges.js?

Cheers.

[beteljuice]

You need more to think about building a dedicated 'app' and creating pages for that ...

https://developer.samsung.com/galaxy-watch/develop

[Phil23]

Just looked at the link & it sounds heavy.

So why for starters can't I just have a page that fits nicely in the 360x360 resolution of the Browser?
I could almost handle that much in HTML.

Not too dis-similar to the page that I made for the Kindle?

[beteljuice]

You would have to do that anyway - I was thinking more of navigation.
Try making a very narrow page, although I think SS gauge isn't going to look good in one and a bit inches ...

[Phil23]

I suppose this could be called Proof of concept....

Opened my gauges page & zoomed & panned till he image was big enough to lose the bezel.

Can then pan about to look at the different gauges; a bit painfull; as is the zooming...

But if they were in a single line & the page fit just right,
And I could have no bezel or a thin on I'd be pretty much there.
Just Bookmark the page & set it as default & it should be what I get on opening the Browser.

Watch.jpg

Temp.jpg

Phil.

[beteljuice]

Looks much better than I expected - live and learn (to keep my mouth shut)

[Phil23]

Looks much better than I expected - live and learn (to keep my mouth shut)

Feedback Welcome.
Penance will be in answering my silly questions.

Issues:-

Colours need to be different.
Bezel would be best gone or set to zero width if possible.
Tool tips need to go.
(Noting on the watch they don't show as graphs, just data balloons).

Questions for those familiar with Steel Series are

Can It all be done in the HTML & CSS of the new page?
OR will there be settings in gauges.js that will not be compatible with an alternate page.
IF SO, can I just have a gauges2.js that is configured for the watch page?

What is steelseries_tween.min.js all about & would it be common between the two layouts?

As far as a basic HTML or PHP with only a hand full of figures is concerned;
Temp, Humidity, Wind Speed & Rainfall.

I seem to recall a certain @Beteljuice quoting that he was always developing a challenge .

[beteljuice]

the beteljuice has no dealings with SS gauges, and developing a challenge is not the same as being given one

[Phil23]

Progress so far;

Removed unwanted content & found out how to get rid of the Radio Buttons under Temp.

Haven't got to the CSS for width or got them in a single column yet.

Presuming that's done by opening & closing more div's.
(<Div class="Row">).

Seems like there is 3 Gauges within a certain div block, but not sure if that's it or not.

http://weather.inverellit.com/g.htm

[mcrossley]

There is an option to not display the bezel in SS, BUT the gauge does not scale up to fill the canvas area, it just becomes transparent where the bezel would have been. I did look at re-coding SS so that the gauges scaled up to fit, but they were originally designed with fixed size ratios - it would be a mammoth job to fix that. The only solution I can think of would be to apply negative offsets to the canvas positions in CSS to shift the inner gauge up and left by the bezel width.

[beteljuice]

I just know I'm going to regret this ....

Try this in your watch and g page ...

Code: Select all

<div style= "width: 360px; height: 360px; overflow: hidden; border-radius: 50%;">
	<canvas id= "canvas_temp" style= "position: relative; top: -35px; left: -35px; width: 430px; height: 430px;">
	</canvas>
</div>

replaces existing <div class = gauge ......

Just playing with browser inspector / editor

Edit: border-radius added for neatness, if page is laid out correctly, will not be seen on round screen.

[Phil23]

This what I now get when I open http://weather.inverellit.com/g.htm.

Watch.jpg

Still needs to be Zoomed up though.

So far have made the new htm what has Tool Tip & Radio buttons removed & all gauges in a single column.
Not sure how to default the Gauges now the buttons are removed & the watch shows Apparent for the 2nd Gauge while the Laptop shows Dew Point.
Any Tips on locking those to what I want.

Have changed gauges-ss.css to include a new size gauges size to match the screen size:-

Code: Select all

.gaugeSizeWch {
  width: 360px;
  height: 360px;
}

Added a new section to weatherstyle.css:-

Code: Select all

#wcontent {
	margin: auto;
	width: 360px; /* whatever working width you like */
}

And used <div id="wcontent"> in the page thinking that would make the width go to 360Px, but it didn't.

Also can I override the background on the page with no image, or will I need to create a separate css for that?

Thanks

Phil.

[beteljuice]

Read my code .....

The canvas is "oversized" and offset in the container (overflow: hidden;) This means the gauge with bezel cropped exactly fits your display.

[Phil23]

Not sure what you are meaning by "Read your Code"?

Edit....

Opps,

Your post overlapped mine....