Unity3d SelectionGrid cell size adjustment - user-interface

I try to create game options but got problem with cell size adjustment.For option "First move" I use names of users. I want to increase cell if name is too long. Or decrease font size if it easier.
Style for cells:
mCellStyle = new GUIStyle();//style for cells
mCellStyle.normal.background = Resources.Load<Texture2D>("Textures/button_up_9patch");
mCellStyle.onNormal.background = Resources.Load<Texture2D>("Textures/button_down_9patch");
mCellStyle.focused.background = mButtonStyle.active.background;
mCellStyle.fontSize = GUIUtils.GetKegel() - GUIUtils.GetKegel() / 5;
mCellStyle.border = new RectOffset(7, 7, 7, 7);
mCellStyle.padding = new RectOffset(20, 20, 20, 20);
mCellStyle.alignment = TextAnchor.MiddleCenter;
mCellStyle.wordWrap = true;
My code:
GUIStyle lBackStyle = new GUIStyle(mCellStyle);
lBackStyle.fontSize = GUIUtils.GetKegel();
lBackStyle.active.background = null;
lBackStyle.focused.background = null;
GUIStyle lStyle = new GUIStyle(lBackStyle);
lStyle.normal.background = null;
//create contents and calculate height
GUIContent lContent1 = new GUIContent(LanguageManager.GetText("FirstMove"));
float lElemH1 = lStyle.CalcHeight(lContent1, lMaxWidht);
GUIContent[] lArrayContent2 = new GUIContent[] { new GUIContent(MainScript.Logic.UserName), new GUIContent(MainScript.Logic.NurslingName) };
float lElemH2 = mCellStyle.CalcHeight(lArrayContent2[0], lMaxWidht);
GUIContent lContent3 = new GUIContent(LanguageManager.GetText("Difficulty"));
float lElemH3 = lStyle.CalcHeight(lContent3, lMaxWidht);
GUIContent[] lArrayContent4 = new GUIContent[] { new GUIContent(LanguageManager.GetText("Easy")), new GUIContent(LanguageManager.GetText("Hard")) };
float lElemH4 = mCellStyle.CalcHeight(lArrayContent4[0], lMaxWidht);
float lTotalH = lElemH1 + lElemH2 + lElemH3 /*+ 100*/;//reserve 100 for paddings
GUILayout.BeginArea(mAreaRect);
GUILayout.BeginVertical(lBackStyle, GUILayout.Height(lTotalH));
GUILayout.Label(lContent1, lStyle);
GamePreferences.setAIMakesFirstMove(GUILayout.SelectionGrid(GamePreferences.getAIMakesFirstMove(), lArrayContent2, 2, mCellStyle));
GUILayout.Label(lContent3, lStyle);
GamePreferences.setDifficulty(GUILayout.SelectionGrid(GamePreferences.getDifficulty(), lArrayContent4, 2, mCellStyle));
GUILayout.EndVertical();
GUILayout.EndArea();
ADDED: I just want to set height of cell in Selection Grid. Is it possible?

Ok, I found that I can pass GUILayoutOption as last parameter to set the height of cells:
GUILayout.SelectionGrid(GamePreferences.getFirstMove(), lArrayContent2, 2, mCellStyle, GUILayout.Height(lCellHeight))
But I still have no idea how I can fit cell size to it content.
float lElemH2 = mCellStyle.CalcHeight(lArrayContent2[0], lMaxWidht);
mCellStyle.CalcHeight ignores lenght of content and in lElemH2 I got height for single line text.
EDITED:
My fault, I sent wrong parameters to CalcHeight. Correct version:
float lElemH2 = mCellStyle.CalcHeight(lArrayContent2[0], lMaxWidht / cellsCount);

Related

AmCharts: Data grouping for very large data sets

I am using amcharts line chart.
I have data for last 24 hours and its recorded for every seconds.
I am trying to group data in amcharts but it displays only 2 data points on chart.
1 data point is from yesterday and 1 from today.
Here is my code:
var multiLineChart = am4core.create(
"multilineChartdiv",
am4charts.XYChart
);
multiLineChart.paddingRight = 20;
multiLineChart.data = historicalData;
var dateAxis1 = multiLineChart.xAxes.push(new am4charts.DateAxis());
dateAxis1.renderer.grid.template.location = 0;
dateAxis1.minZoomCount = 1;
dateAxis1.renderer.minGridDistance = 60;
// dateAxis1.baseInterval = {
// timeUnit: "minute",
// count: 5,
// };
// this makes the data to be grouped
dateAxis1.groupData = true;
dateAxis1.groupCount = 500;
var valueAxis = multiLineChart.yAxes.push(new am4charts.ValueAxis());
var series1 = multiLineChart.series.push(new am4charts.LineSeries());
series1.dataFields.dateX = "date";
series1.dataFields.valueY = "heartRate";
series1.tooltipText = "{valueY}";
series1.tooltip.pointerOrientation = "vertical";
series1.tooltip.background.fillOpacity = 0.5;
multiLineChart.cursor = new am4charts.XYCursor();
multiLineChart.cursor.xAxis = dateAxis1;
var scrollbarX = new am4core.Scrollbar();
scrollbarX.marginBottom = 20;
multiLineChart.scrollbarX = scrollbarX;
I need to show data points for at least every 5 or 10 minutes.
If your timestamp is a string, make sure the inputDateFormat is set to match your date format as documented here as the default format is yyyy-MM-dd, truncating everything else to look like daily data, similar to your screenshot:
chart.dateFormatter.inputDateFormat = 'yyyy-MM-dd HH:mm:ss' //adjust as needed
Since your data is in seconds, it is also recommended to set the baseInterval accordingly to also ensure that your data is rendered correctly.
dateAxis1.baseInterval = {
timeUnit: "second",
count: 1,
};

Script to Align Text layer to center of another reference layer

The contents to the text layer are added from csv import. Some are short length and some are long, contain 2 words and take up 2 lines in the layer. What I need is after the content is added, the layer should be horizontally and vertically aligned to another layer. I want to do this alignment using a script.
var doc = app.activeDocument;
var grps = doc.layerSets;
var pnamegrp = grps.getByName('Group 1');
var childlyr = pnamegrp.layers.getByName('child');
childlyr.textItem.contents = pname; //come from a csv file
var parentlyr= pnamegrp.layers.getByName('ReferenceRectangle');
Align_HorizCenter_VerticalCenter_withreference( childlyr , parent);
function Align_HorizCenter_VerticalCenter_withreference( child, parent){
//need help to write this
}
I am using Photoshop cc 2015 and JavaScript jsx file scripting.
Just incase somebody is looking for a solution. Translate is the method to move layer. The number of pixels to be moved can be determined by the difference in the width between the target and reference layer.
var startRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.INCHES;
var doc = app.activeDocument;
var grps = doc.layerSets;
var pnamegrp = grps.getByName('Group 1');
var pnamelyr= pnamegrp.layers.getByName('pname'); //target
var pnameREF = pnamegrp.layers.getByName('Rectangle 1'); //reference var LB = pnameREF.bounds;
var RWidth = (LB[2].value) - (LB[0].value);
var RHeight = (LB[3].value) - (LB[1].value);
pnamelyr.textItem.contents = pnamearr[i];
LB = pnamelyr.bounds;
TWidth = (LB[2].value) - (LB[0].value);
THeight = (LB[3].value) - (LB[1].value);
var OffsetX = (RWidth - TWidth)/2;
var OffsetY = (RHeight - THeight)/2;
pnameTGT.translate(OffsetX,OffsetY); //move layer by offset pixels from the current position

callback via taptool presents datatable

From what I can tell in my limited review of bokeh documentation the ability to click on a glyph on a plot then present a Dialog box or Datatable is a feature not yet available. I do not want the Datatable to be presented until a glyph has been selected. Would ideally like the ability to hide the Dialog or Datatable as well.
It seems that bokeh.models.widgets.dialog were deprecated sometime after 0.10.0. I could use that but its not available in python 3.7 at this point. Suggestions?
Some features are not officially supported but sometimes one can come up with a work-arounds like this one (tested on Bokeh v1.0.4):
from bokeh.plotting import figure, show
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, Slider, DataTable, TableColumn, CustomJS
plot = figure(tools = 'tap')
source = ColumnDataSource(dict(x = list(range(6)), y = [x ** 2 for x in range(6)]))
circles = plot.circle('x', 'y', source = source, size = 20)
slider = Slider(start = -1, end = 5, value = 6, step = 1, title = "i", width = 300)
columns = [TableColumn(field = "x", title = "x"), TableColumn(field = "y", title = "x**2")]
table = DataTable(source = source, columns = columns, width = 320)
plot.js_on_event('tap', CustomJS(args = {'table': table, 'source': source, 'slider': slider}, code = '''
const selected_index = source.selected.indices[0]
if (selected_index != null)
table.height = 0;
else
table.height = slider.value * 25 + 25;'''))
callback_code = """ i = slider.value;
new_data = {"x": [0,1,2,3,4,5], "y": [0,1,4,9,16,25]}
table.source.data = new_data
table.height = i * 25 + 25; """
callback = CustomJS(args = dict(slider = slider, table = table), code = callback_code)
slider.js_on_change('value', callback)
show(column(slider, plot, table))
Result:

how to draw a line in windows store apps

I am trying to create an application which should consist of a line drawn when keyboard key is pressed. When the left arrow in the keyboard is pressed then the line should move in left direction. When right arrow in the keyboard is pressed then the respective line should move in right direction.
I think it is possible with Path class but I don't know how to implement. Even I don't know how to start the code. Can you please guide me how to draw the line in windows store apps.
private PathGeometry DrawGeometry()
{
bool largeArc = WedgeAngle > 180.0;
Size outerArcSize = new Size(Radius, Radius);
Size innerArcSize = new Size(InnerRadius, InnerRadius);
Point innerArcStartPoint = Utilities.ComputeCartesianCoordinate(RotationAngle, InnerRadius);
Point ButtomLineEndPoint = Utilities.ComputeCartesianCoordinate(RotationAngle, Radius);
Point OuterArcEndPoint = Utilities.ComputeCartesianCoordinate(RotationAngle + WedgeAngle, Radius);
Point EndLineEndPoint = Utilities.ComputeCartesianCoordinate(RotationAngle + WedgeAngle, InnerRadius);
innerArcStartPoint.X += CentreX;
innerArcStartPoint.Y += CentreY;
ButtomLineEndPoint.X += CentreX;
ButtomLineEndPoint.Y += CentreY;
OuterArcEndPoint.X += CentreX;
OuterArcEndPoint.Y += CentreY;
EndLineEndPoint.X += CentreX;
EndLineEndPoint.Y += CentreY;
PathFigure path = new PathFigure();
path.StartPoint = innerArcStartPoint;
ArcSegment InnerArc = new ArcSegment();
InnerArc.Size = innerArcSize;
InnerArc.SweepDirection = SweepDirection.Counterclockwise;
InnerArc.Point = innerArcStartPoint;
InnerArc.IsLargeArc = largeArc;
LineSegment ButtomLine = new LineSegment();
ButtomLine.Point = ButtomLineEndPoint;
ArcSegment OuterArc = new ArcSegment();
OuterArc.SweepDirection = SweepDirection.Clockwise;
OuterArc.Point = OuterArcEndPoint;
OuterArc.Size = outerArcSize;
OuterArc.IsLargeArc = largeArc;
LineSegment EndLine = new LineSegment();
EndLine.Point = EndLineEndPoint;
path.Segments.Add(ButtomLine);
path.Segments.Add(OuterArc);
path.Segments.Add(EndLine);
path.Segments.Add(InnerArc);
PathGeometry myPath = new PathGeometry();
myPath.Figures.Add(path);
return myPath;
}
This code will Draw a Pie slice for you as I was building a PieChart it Containsn Lines Curves etc. It will save lots of your time

Windows Forms chart with two aligned/overlapping areas don't use the entire control

A chart on a form I created has two overlapping areas. The overlapping part works just fine. The problem is that visible graph only takes up half the height of the chart control:
The bottom half of the control is left empty (presumably because that's where the second area would have gone were the two areas not aligned?). I can't figure out how to get the chart to use the entire control. The code is below:
chart1.Dock = DockStyle.Fill;
chart1.Legends.Add(new Legend { Name = "Legend1" });
chart1.Location = new Point(435, 3);
chart1.Name = "chart1";
chart1.Size = new Size(426, 287);
chart1.TabIndex = 2;
chart1.Text = "chart1";
var firstArea = chart1.ChartAreas.Add("First Area");
var seriesFirst = chart1.Series.Add("First Series");
seriesFirst.ChartType = SeriesChartType.Line;
seriesFirst.Points.Add(new DataPoint(10, 55));
seriesFirst.Points.Add(new DataPoint(11, 56));
seriesFirst.Points.Add(new DataPoint(12, 59));
var secondArea = chart1.ChartAreas.Add("Second Area");
secondArea.BackColor = Color.Transparent;
secondArea.AlignmentOrientation = AreaAlignmentOrientations.All;
secondArea.AlignmentStyle = AreaAlignmentStyles.All;
secondArea.AlignWithChartArea = firstArea.Name;
secondArea.AxisY.LabelStyle.Enabled = false;
secondArea.AxisX.LabelStyle.Enabled = false;
var seriesSecond = chart1.Series.Add("Second Series");
seriesSecond.ChartType = SeriesChartType.Line;
seriesSecond.ChartArea = secondArea.Name;
seriesSecond.Points.Add(new DataPoint(10, 1001));
seriesSecond.Points.Add(new DataPoint(11, 1015));
seriesSecond.Points.Add(new DataPoint(12, 1016));
This is some old code I've dug out and modified to suit your example. The problem is the InnerPlotPosition.Auto and Position.Auto status of the ChartAreas, thats why after you add the second chart the first charts auto position jumps up and then the second chart aligns with the new InnerPlotPosition.Auto values.
You can try turning this off but I think its easier to just position the first chart manually and then allow the second to align with the new manual position. It produces the below image (minus your legend you can work the values needed yourself)
Bit of pain in the ass solution but hopefully it helps
Dim chart1 As New Chart
Me.Controls.Add(chart1)
chart1.Location = New Point(435, 3)
chart1.Name = "chart1"
chart1.Size = New Size(426, 287)
chart1.TabIndex = 2
chart1.Text = "chart1"
Dim firstArea As ChartArea = chart1.ChartAreas.Add("First Area")
Dim seriesFirst = chart1.Series.Add("First Series")
seriesFirst.ChartType = SeriesChartType.Line
seriesFirst.Points.Add(New DataPoint(10, 55))
seriesFirst.Points.Add(New DataPoint(11, 56))
seriesFirst.Points.Add(New DataPoint(12, 59))
Dim secondArea As ChartArea = chart1.ChartAreas.Add("Second Area")
secondArea.BackColor = Color.Transparent
secondArea.AlignmentOrientation = AreaAlignmentOrientations.All
secondArea.AlignmentStyle = AreaAlignmentStyles.All
secondArea.AlignWithChartArea = firstArea.Name
secondArea.AxisY.LabelStyle.Enabled = False
secondArea.AxisX.LabelStyle.Enabled = False
Dim seriesSecond = chart1.Series.Add("Second Series")
seriesSecond.ChartType = SeriesChartType.Line
seriesSecond.ChartArea = secondArea.Name
seriesSecond.Points.Add(New DataPoint(10, 1001))
seriesSecond.Points.Add(New DataPoint(11, 1015))
seriesSecond.Points.Add(New DataPoint(12, 1016))
' *** Set locational values here for your first chart***
Dim heightAboveChartArea As Integer = 20
Dim heightBelowChartArea As Integer = 20
Dim axisLabelHeight As Integer = 40
Dim widthLeftOfChartArea As Integer = 20
Dim widthRightOfChartArea As Integer = 20
Dim heightPerBar As Integer = 20
Dim numberOfPoints As Integer = chart1.Series(0).Points.Count
' *** The following code should not normally be modified ***
chart1.Height = heightAboveChartArea + heightBelowChartArea + axisLabelHeight + (numberOfPoints * heightPerBar)
chart1.ChartAreas(0).Position.X = widthLeftOfChartArea / chart1.Width * 100
chart1.ChartAreas(0).Position.Width = 100 - (widthRightOfChartArea / chart1.Width * 100) - chart1.ChartAreas(0).Position.X
chart1.ChartAreas(0).Position.Y = (heightAboveChartArea / chart1.Height * 100)
chart1.ChartAreas(0).Position.Height = 100 - (heightBelowChartArea / chart1.Height * 100) - chart1.ChartAreas(0).Position.Y
I thought about monkeying with the position, but I'd have to take into account borders and the legend and other chart components and assumed I'd never get it as good as the auto-positioning provided by the chart - and it would drive me nuts. However, the suggestion by TylerDurden led me to the idea of simply delaying the addition of the second series/area until after the chart had rendered at least once and had calculated the position. This turned out to be non-trivial, since for most of the chart's initialization the X, Y, Height and Width are still zero. The best way I found was to add the second series in the Form's Shown event:
private void OnShown(object sender, EventArgs eventArgs)
{
Application.DoEvents();
var f = chart1.ChartAreas[0].Position.ToRectangleF();
chart1.ChartAreas[0].Position.Auto = false;
chart1.ChartAreas[0].Position.X = f.X;
chart1.ChartAreas[0].Position.Y = f.Y;
chart1.ChartAreas[0].Position.Height = f.Height;
chart1.ChartAreas[0].Position.Width = f.Width;
// add second area/series here
The call to Application.DoEvents() is required to force the chart to render and calculate the Position. Since Position is a percentage, both chart areas will always occupy the full height and width of the parent Chart.

Resources