3

I am using the Tizen 2.3.1 SDK for wearables and have run into an issue where no matter what I do to the style.css file, adding any new ids simply refuses to work.

* {
    margin: 0;
    padding: 0
}

html, body {
    width: 100%;
    height: 100%;
    background-color: black;
}

#str_day {
    position: absolute;
    display: -webkit-flex;
    width: 50%;
    height: 50%;
    background: yellow;
    color: yellow;
    z-index: 4;
    opacity: 1;
}

h1 {
    font-size: 1.4em;
    margin: 10px 0 20px 10px;
    color: #6587ac;
}

#box {
    display: -webkit-flex;
    -webkit-align-items: center;
    width: 100%;
    height: 100%
}

.canvas {
    background: #000;
    width: 320px;
    height: 320px;
    margin: auto;
}

This is my code. I am trying to add the str_day id however it doesn't show up when I run the package through the emulator. The rest of the css (the canvas element, mainly) works fine, but str_day just doesn't show up. I tried specifying the z-index and opacity in case some weird issue was occuring but that doesn't seem to be the problem.

This is my full code on github.

https://github.com/JoyfulOwl/RadialWatch/commit/86d096710c7187b6b3679e02416548e18a3e986e

JoyfulOwl
  • 33
  • 6

1 Answers1

1

Probably because of improper CSS layout str_day is rendered/painted outside the viewport of your watchface because of which its not visible.

I think better would be to use canvas fillText command to print the date on canvas.

Try below example.

var canvas = document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.font="30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText(str_Day, mCenterX, mCenterY); // mCenterX & mCenterY are the position where text has to be shown.
Shreeram K
  • 1,719
  • 13
  • 22
  • I honestly had no idea there was a filltext command! Thank you, I'll try this as soon as I can get back to my usable computer. – JoyfulOwl Jan 10 '16 at 08:49